* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html,body { height:100%; overflow:hidden; background:#0a1620; font-family:'Segoe UI',Tahoma,sans-serif; }
/* Цветные emoji на Android/Windows: без стека часто □ (особенно MediaTek Go / старые Noto) */
.emoji, .upem, .shopItem .emoji, .rkbadge.ach, #toast, #hint, #tod, .chip, .firstPill {
  font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Android Emoji","Segoe UI Symbol",sans-serif;
}
#game { position:relative; width:100vw; height:100vh; height:100dvh; }
#cv { cursor:url(../assets/cursor-bobber.png) 12 20, crosshair; }
canvas { display:block; }
/* фон #glcv = цвет воды: если GL-кадр не успел — не body-чёрный */
#glcv { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  background:#24708a; }
#cv { position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; -webkit-tap-highlight-color:transparent;
  background:transparent; }
/* rain ниже HUD; на слабых GPU отдельный full-screen canvas = артефакты */
#raincv { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
@media (max-width:600px){
  /* телефон: не смешивать 3 full-screen canvas с разным DPR — меньше flicker */
  #raincv { opacity:0.92; }
}

.hud { position:absolute; z-index:5; pointer-events:none; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.8); }
#topbar { top:0; left:0; right:0; padding:12px 16px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.panel { background:rgba(8,22,34,.72); border:1px solid rgba(120,200,255,.25); border-radius:12px; padding:8px 14px; }
/* blur HUD на слабом GPU (PowerVR/Mali) жрёт FPS — только десктоп */
@media (min-width:601px) and (hover:hover) {
  .panel { background:rgba(8,22,34,.62); backdrop-filter:blur(4px); }
}
.coins { font-size:22px; font-weight:700; color:#ffe27a; }
.coins small { color:#cfe6ff; font-weight:400; font-size:12px; display:block; }
.gear { font-size:13px; color:#cfe6ff; line-height:1.5; }
.gear b { color:#9fe6ff; }
#title { position:absolute; left:50%; top:10px; transform:translateX(-50%); text-align:center; }
.logo { display:block; height:auto; }
#title .logo { width:196px; margin:0 auto; /* без filter: на слабом GPU filter+анимации SVG = мерцание HUD */ }
#intro .intrologo { width:min(440px,84vw); margin:2px auto 6px; filter:drop-shadow(0 6px 22px rgba(80,180,255,.3)); }
#tod { font-size:12px; margin-top:2px; color:#9fd6ff; }

#hint { bottom:calc(16px + var(--vvb,0px)); left:50%; transform:translateX(-50%); text-align:center; font-size:15px; color:#dff1ff;
        background:rgba(8,22,34,.55); padding:8px 20px; border-radius:20px; border:1px solid rgba(120,200,255,.2); }
#hint b { color:#ffe27a; }

#powerWrap { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); width:260px; height:16px;
             background:rgba(0,0,0,.4); border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.25); display:none; }
#powerBar { height:100%; width:0%; background:linear-gradient(90deg,#5fe06b,#ffe27a,#ff6b6b); }

#fight { position:absolute; bottom:calc(60px + var(--vvb,0px)); left:50%; transform:translateX(-50%); width:340px; display:none; text-align:center; z-index:19; }
#fight .lbl { font-size:12px; color:#dff1ff; margin:6px 0 3px; text-shadow:0 2px 4px #000; }
.bar { position:relative; height:18px; background:rgba(0,0,0,.45); border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,.25); }
#tenWin { position:absolute; top:0; height:100%; left:40%; width:24%; display:none; background:rgba(95,224,107,.5); border-left:2px solid #eafff0; border-right:2px solid #eafff0; box-sizing:border-box; pointer-events:none; z-index:2; }
#tensionBar { height:100%; width:0%; background:linear-gradient(90deg,#5fe06b 0%,#5fe06b 55%,#ffe27a 75%,#ff5b5b 100%); }
#distBar { height:100%; width:100%; background:linear-gradient(90deg,#4db6ff,#7be0ff); }

.iconbtn { pointer-events:auto; cursor:pointer; background:rgba(8,22,34,.7); border:1px solid rgba(120,200,255,.3);
           color:#cfe6ff; border-radius:10px; padding:8px 14px; font-size:14px; font-weight:600; transition:.15s; }
.iconbtn:hover { background:rgba(30,70,100,.85); color:#fff; }
#btns { position:absolute; top:84px; right:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }

.modal { position:absolute; inset:0; background:rgba(3,10,18,.78); display:none; align-items:center; justify-content:center; z-index:20; backdrop-filter:blur(3px); cursor:default; }
.modal.show { display:flex; }
.card { width:min(760px,94vw); max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,#0e2436,#0a1a28);
        border:1px solid rgba(120,200,255,.3); border-radius:18px; padding:22px; color:#dff1ff; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.card h2 { color:#bfefff; font-size:22px; margin-bottom:4px; }
.card .sub { color:#7fb8d8; font-size:13px; margin-bottom:16px; }
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab { flex:1; text-align:center; padding:8px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.05);
       border:1px solid transparent; font-weight:600; color:#9fc4dc; }
.tab.active { background:rgba(95,180,255,.18); border-color:rgba(120,200,255,.45); color:#fff; }
.shopItem { display:flex; align-items:center; gap:16px; padding:12px; border-radius:12px; background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.07); margin-bottom:10px; }
.shopItem .emoji { font-size:34px; width:46px; flex-shrink:0; text-align:center; }
.shopItem .info { flex:1 1 auto; min-width:0; }
.shopItem .info .nm { font-weight:700; color:#fff; font-size:15px; }
.shopItem .info .ds { font-size:12px; color:#9fc4dc; margin-top:2px; }
.shopItem .info .st { font-size:11px; color:#ffd27a; margin-top:3px; line-height:1.35; }
.buy { cursor:pointer; border:none; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13px;
       min-width:108px; flex-shrink:0; margin-left:6px; }
.buy.can { background:linear-gradient(90deg,#3fae5a,#5fe06b); color:#06210f; }
.buy.no { background:rgba(255,255,255,.08); color:#7790a0; cursor:not-allowed; }
.buy.equip { background:linear-gradient(90deg,#2b8fd4,#4db6ff); color:#04243a; cursor:pointer; }
.buy.equipped { background:rgba(95,255,150,.18); color:#9fffb0; cursor:default; }
.close { float:right; cursor:pointer; font-size:24px; color:#7fb8d8; line-height:1; }
.close:hover { color:#fff; }
.logRow { display:flex; justify-content:space-between; align-items:center; padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px; }
.logRow .r { font-weight:700; }
.rar-common{color:#cfe0ea;} .rar-uncommon{color:#8fe6a0;} .rar-rare{color:#7fc4ff;}
.rar-epic{color:#d39bff;} .rar-legendary{color:#ffd24a;} .rar-mythic{color:#ff7ae0;}
.empty { color:#6a8398; text-align:center; padding:24px; font-style:italic; }

.acts { display:flex; gap:6px; flex-shrink:0; }
.buy.fix { min-width:auto; background:linear-gradient(90deg,#b07a2a,#e0a64a); color:#23150a; }
/* символ очков: ★ вместо 🪙 (E13 часто □ на Android Go / MediaTek) */
.coin, .apts .coin { color:#ffe27a; font-weight:800; margin-left:1px; letter-spacing:0; }
.buy .coin, .upbtn .coin { color:inherit; opacity:.95; margin-left:2px; }
.buy.can .coin, .upbtn.can .coin { color:#063018; }
.buy.fix .coin { color:#23150a; }
.buy.no .coin, .upbtn.no .coin { color:#9fb3c2; }

.card::-webkit-scrollbar { width:10px; }
.card::-webkit-scrollbar-track { background:rgba(120,200,255,.06); border-radius:10px; margin:18px 0; }
.card::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#2b8fd4,#1c4860); border-radius:10px; border:2px solid rgba(8,22,34,.0); background-clip:padding-box; }
.card::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#4db6ff,#2b6f95); }
.card { scrollbar-width:thin; scrollbar-color:#2b8fd4 rgba(120,200,255,.06); }

#special { position:absolute; top:128px; left:50%; transform:translateX(-50%); display:none; max-width:70vw; text-align:center; font-size:14px; font-weight:700; color:#ffe9a0;
  background:linear-gradient(90deg,rgba(60,40,10,.78),rgba(80,55,15,.78)); border:1px solid rgba(255,210,90,.45);
  border-radius:20px; padding:7px 22px; box-shadow:0 4px 18px rgba(255,200,80,.22); }
#special b { color:#fff0b0; }

#rodWarn { position:absolute; top:170px; left:50%; transform:translateX(-50%); display:none; max-width:74vw; text-align:center;
  font-size:13.5px; font-weight:700; color:#ffd5d5;
  background:linear-gradient(90deg,rgba(70,16,16,.88),rgba(95,22,22,.88)); border:1px solid rgba(255,120,120,.5);
  border-radius:20px; padding:7px 22px; box-shadow:0 4px 18px rgba(255,80,80,.28); }
#rodWarn b { color:#fff0b0; }
/* предупреждения: цвет, без opacity-blink (на слабом GPU = мигание всего HUD) */
.warn-soft { color:#ff8a8a; font-weight:700; }
.warn-blink { color:#ff6b6b; font-weight:700; }

#atlasBtn { position:absolute; right:16px; bottom:16px; z-index:5; }

#toast { position:absolute; bottom:64px; left:50%; transform:translateX(-50%) translateY(12px); opacity:0;
  background:rgba(8,22,34,.92); border:1px solid rgba(120,200,255,.4); color:#dff1ff; font-size:14px; font-weight:600;
  padding:10px 20px; border-radius:12px; pointer-events:none; transition:.3s; z-index:18; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* когда на экране худ подсечки — нижние сообщения (погода, косяки и пр.) поднимаются НАД ним и идут поверх по z-index, чтобы не перекрываться */
#game.fighting #toast { bottom:156px; z-index:21; }

.atlasRow { display:flex; align-items:center; gap:12px; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06);
  content-visibility:auto; contain-intrinsic-size:auto 66px; }   /* не рендерим строки за экраном — плавный скролл списка с canvas */
.atlasRow.sp { background:linear-gradient(90deg,rgba(255,122,224,.08),transparent); border-radius:10px; }
.atlasRow .anm { font-weight:700; font-size:15px; }
.atlasRow .ainfo { font-size:12px; color:#9fc4dc; margin-top:2px; }
.atlasRow .apts { text-align:right; font-weight:700; color:#ffe27a; font-size:14px; flex-shrink:0; }
.atlasRow .apts .seen { color:#8fe6a0; font-size:11px; font-weight:600; }
.spbadge { font-size:10px; background:rgba(255,122,224,.2); color:#ff9fe8; padding:1px 7px; border-radius:8px; vertical-align:middle; }

#catch { position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:15; opacity:0; transition:opacity .18s ease; cursor:pointer; }
#catchCard { position:relative; background:linear-gradient(180deg,rgba(14,40,60,.96),rgba(8,24,38,.96)); border:2px solid rgba(120,200,255,.4);
             border-radius:20px; padding:22px 40px; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.6); transform:scale(.7); animation:pop .35s forwards; }
@keyframes pop { to{ transform:scale(1);} }
#catchCard .nm { font-size:26px; font-weight:800; margin-top:6px; }
#catchCard .wt { font-size:16px; color:#cfe6ff; margin-top:2px; }
#catchCard .pts { font-size:20px; color:#ffe27a; font-weight:700; margin-top:10px; }
/* «Выловлено впервые!» — плашка над рыбой */
#catchCard .firstTag { margin:0 0 6px; }
#catchCard .firstPill { display:inline-block; font-size:15px; font-weight:800; letter-spacing:.5px; color:#231400;
             background:linear-gradient(180deg,#ffe487,#ffb43d); border-radius:999px; padding:6px 18px;
             box-shadow:0 0 16px rgba(255,193,77,.8); white-space:nowrap; }
#catchCard .firstSub { display:block; font-size:11px; color:#ffd76a; letter-spacing:.3px; margin-top:3px; }
/* золотой ореол вокруг карточки при первой поимке — мягкое свечение по форме карточки, без вращения */
#catchCard.firstcatch::after { content:""; position:absolute; inset:-3px; z-index:-1; border-radius:22px;
             box-shadow:0 0 26px 6px rgba(255,193,77,.55), 0 0 62px 16px rgba(255,160,40,.30);
             animation:firstglow 2s ease-in-out infinite; }
@keyframes firstglow {
  0%,100%{ box-shadow:0 0 24px 5px rgba(255,193,77,.50), 0 0 56px 14px rgba(255,160,40,.26); }
  50%{ box-shadow:0 0 42px 11px rgba(255,214,110,.85), 0 0 88px 22px rgba(255,170,50,.42); } }
@media (prefers-reduced-motion:reduce){ #catchCard.firstcatch::after{ animation:none; box-shadow:0 0 34px 9px rgba(255,200,90,.7); } }
#miss { position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:15; pointer-events:none; }
#miss div { background:rgba(60,10,10,.85); border:2px solid rgba(255,120,120,.5); border-radius:16px; padding:18px 34px;
            font-size:24px; font-weight:800; letter-spacing:1px; color:#ffd0d0; transform:scale(.8); animation:pop .3s forwards; }

#intro { position:absolute; inset:0; background:linear-gradient(180deg,#0a1c2c,#06121d); display:flex; flex-direction:column;
         align-items:center; justify-content:center; z-index:30; text-align:center; color:#dff1ff; }
#intro .tag { font-size:16px; color:#7fb8d8; letter-spacing:4px; margin:6px 0 28px; }
#intro .play { cursor:pointer; pointer-events:auto; font-size:20px; font-weight:800; padding:14px 46px; border:none; border-radius:30px;
               background:linear-gradient(90deg,#3fae5a,#5fe06b); color:#06210f; box-shadow:0 8px 30px rgba(95,224,107,.4); }
#intro .play:hover { filter:brightness(1.1); }
#intro .rules { margin-top:24px; font-size:13px; color:#9fc4dc; line-height:1.9; max-width:500px; }
#intro .em { font-size:60px; margin-bottom:10px; }


@media (max-width:600px){
  #topbar { padding:8px 10px; }
  #title .logo { width:120px; }
  .coins { font-size:16px; } .coins small { font-size:10px; }
  .gear { font-size:10.5px; line-height:1.4; }
  .panel { padding:6px 9px; border-radius:10px; }
  #btns { top:62px; right:10px; gap:6px; }
  #btns .iconbtn, #atlasBtn { font-size:12px; padding:6px 10px; }
  #atlasBtn { right:10px; bottom:10px; }
  #fight { width:92vw; bottom:54px; }
  #powerWrap { width:62vw; }
  #hint { font-size:13px; padding:6px 14px; bottom:10px; max-width:92vw; }
  #special { font-size:11.5px; top:90px; padding:6px 13px; max-width:90vw; }
  #rodWarn { font-size:11.5px; top:176px; padding:6px 13px; max-width:92vw; }   /* ниже #special (top:90 + ~3 строки), чтобы не накладывались на телефоне */
  #toast { font-size:13px; padding:8px 14px; max-width:90vw; }
  #intro .intrologo { width:90vw; }
  #intro .tag { font-size:13px; letter-spacing:2px; margin:4px 0 18px; }
  #intro .play { font-size:18px; padding:12px 34px; }
  #intro .rules { font-size:12px; line-height:1.7; max-width:90vw; }
  #intro .em { font-size:46px; }
  .card { padding:16px; }
  .shopItem { gap:10px; padding:10px; }
  .shopItem .emoji { width:38px; font-size:28px; }
  .buy { min-width:86px; padding:8px 9px; font-size:12px; }
  #catchCard { padding:18px 24px; }
  #miss div { font-size:19px; padding:14px 20px; }
}
@media (max-width:360px){
  #title .logo { width:104px; }
  .coins { font-size:14px; }
  .gear { font-size:9.5px; }
}

@media (max-width:600px){
  #title .logo { display:none; }
  #title { top:8px; }
  #tod { font-size:11px; margin-top:0; }
  /* поднимаем худ вываживания над нижней панелью встроенного браузера/системы — иначе скрывается «дистанция до рыбы».
     var(--vvb) = реальная высота нижнего тулбара (мерим через visualViewport в game.js); базовый запас 100px перекрывает
     случай, когда встроенный браузер (Telegram) рисует тулбар ПОВЕРХ вьюпорта и visualViewport его не отдаёт. */
  #fight { width:94vw; bottom:calc(100px + var(--vvb,0px) + env(safe-area-inset-bottom)); }
  /* blur на панелях дорог на телефоне (пересчёт GPU каждый кадр) — оставляем только полупрозрачный фон */
  .panel, .modal { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  #fight .lbl { font-size:10.5px; margin:3px 0 2px; }
  #fight .bar { height:15px; }
  /* эпик-рыба: мельче текст и уже блок, опускаем ниже верхних плашек — чтобы золотой блок не налезал на снасть/очки */
  #special { top:104px; font-size:10px; line-height:1.32; padding:5px 11px; max-width:72vw; border-radius:14px; }
  #hint { bottom:calc(8px + var(--vvb,0px) + env(safe-area-inset-bottom)); max-width:66vw; }
  /* тосты (погода/косяк/след эпика) поднимаем над панелью браузера, чтобы не накрывали подсказку управления (#hint) */
  #toast { bottom:calc(64px + var(--vvb,0px) + env(safe-area-inset-bottom)); }
  #game.fighting #toast { bottom:calc(168px + var(--vvb,0px) + env(safe-area-inset-bottom)); }
  /* кнопки худа на телефоне — только иконки, без подписей */
  #shopBtn .btxt, #logBtn .btxt, #ctrlBtn .btxt, #atlasBtn .btxt { display:none !important; }
  #shopBtn, #logBtn, #ctrlBtn, #atlasBtn { font-size:24px; padding:4px 11px; line-height:1; }
  /* профиль — только аватар, без ника */
  #profTag { display:none !important; }
  #profileBtn.chip { padding:3px; gap:0; }
}

/* (warn-blink/warn-soft — выше, без opacity-анимации) */

/* ---- Аркадная оболочка (профиль / интро) ---- */
.arcadebar{display:flex;align-items:center;gap:8px;}
.homebtn{pointer-events:auto;text-decoration:none;font-size:18px;line-height:1;padding:4px 6px;border-radius:8px;}
.homebtn:hover{background:rgba(255,255,255,.08);}
.chip{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);
  border:1px solid rgba(120,200,255,.25);border-radius:20px;padding:3px 10px 3px 3px;color:#cfe6ff;font-size:13px;font-weight:600;}
.chip img{width:24px;height:24px;border-radius:50%;background:#0e3047;object-fit:cover;}
.chip img:not([src]){visibility:hidden;}
#intro .introbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px;}
#introHi{font-size:22px;font-weight:800;color:#bfefff;margin-top:4px;}
#introQ{font-size:14px;color:#9fc4dc;margin:4px 0 14px;}
#intro .play.alt{background:linear-gradient(90deg,#2b8fd4,#4db6ff);color:#04243a;}
.profhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.profhead img{width:54px;height:54px;border-radius:50%;background:#0e3047;object-fit:cover;}
.profhead #pmTag{font-size:18px;font-weight:700;color:#fff;}
.profstats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:14px;color:#cfe6ff;margin-bottom:6px;}
.profstats b{color:#ffe27a;}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:#cfe6ff;margin:8px 0;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,200,255,.16);border-radius:12px;padding:9px 12px;user-select:none;transition:border-color .15s,background .15s;}
.toggle:hover{border-color:rgba(120,200,255,.4);background:rgba(255,255,255,.07);}
.toggle .tgl-txt{flex:1;}
.toggle input{position:absolute;opacity:0;width:0;height:0;}
.tgl-sw{flex:0 0 auto;width:44px;height:24px;border-radius:24px;background:rgba(255,255,255,.18);position:relative;transition:background .2s;}
.tgl-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.45);}
.toggle input:checked + .tgl-sw{background:linear-gradient(90deg,#2b8fd4,#4db6ff);}
.toggle input:checked + .tgl-sw::after{transform:translateX(20px);}
.toggle input:focus-visible + .tgl-sw{box-shadow:0 0 0 3px rgba(95,180,255,.45);}
/* Выбор FPS в профиле: сегменты 20/30/45/60/∞ */
.fpsblock{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(120,200,255,.16);}
.fpslab{font-size:13.5px;font-weight:600;color:#cfe6ff;margin:0 0 8px;line-height:1.25;}
.fpslab small{display:block;opacity:.65;font-weight:400;font-size:11px;margin-top:2px;}
.fpsseg{display:flex;gap:5px;flex-wrap:nowrap;}
.fpsbtn{flex:1 1 0;min-width:0;border:1px solid rgba(120,200,255,.22);background:rgba(0,0,0,.28);
  color:#9fc4dc;font-weight:800;font-size:13px;padding:8px 4px;border-radius:9px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;line-height:1.1;-webkit-tap-highlight-color:transparent;}
.fpsbtn:hover{border-color:rgba(120,200,255,.45);color:#eaf6ff;}
.fpsbtn.on{background:linear-gradient(180deg,#2b8fd4,#1c6aa8);border-color:rgba(120,200,255,.7);color:#fff;
  box-shadow:0 2px 10px rgba(43,143,212,.35);}
.fpsbtn:focus-visible{outline:2px solid rgba(95,180,255,.6);outline-offset:1px;}
@media(max-width:600px){
  .fpsbtn{font-size:12.5px;padding:9px 2px;}
  .fpslab{font-size:13px;}
}
/* Слайдер громкости в профиле: видимый бегунок + заливка трека до текущего уровня (перебивает .toggle input{opacity:0}) */
#pmVol{-webkit-appearance:none;appearance:none;position:static;opacity:1;flex:0 0 auto;width:132px;height:8px;border-radius:6px;cursor:pointer;outline:none;background:linear-gradient(90deg,#4db6ff 0%,#4db6ff 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 100%);}
#pmVol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #2b8fd4;box-shadow:0 1px 4px rgba(0,0,0,.55);cursor:pointer;}
#pmVol::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2b8fd4;box-shadow:0 1px 4px rgba(0,0,0,.55);cursor:pointer;}
#pmVol::-moz-range-track{height:8px;border-radius:6px;background:transparent;}
#pmVol:focus-visible{box-shadow:0 0 0 3px rgba(95,180,255,.45);}
#pmVolVal{min-width:36px;display:inline-block;text-align:right;margin-right:8px;color:#9fe0ff;font-weight:600;}
.profstats2{grid-template-columns:repeat(2,1fr)!important;}
#pmBoard{max-height:200px;overflow-y:auto;}
.lbrow{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;color:#dff1ff;}
.profacts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}
.profacts .play{font-size:14px;padding:10px 18px;text-decoration:none;border:none;border-radius:24px;font-weight:800;cursor:pointer;
  background:linear-gradient(90deg,#3fae5a,#5fe06b);color:#06210f;}
.profacts .play.alt{background:linear-gradient(90deg,#2b8fd4,#4db6ff);color:#04243a;}

/* ---- v2.3: правая панель, управление, профиль ---- */
#sidebar{ position:absolute; top:12px; right:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; z-index:6; pointer-events:none; }
#sidebar > *{ pointer-events:auto; }
#sidebar .gear{ min-width:160px; }
#sidebar .arcadebar{ justify-content:flex-end; }
#botbtns{ position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; z-index:6; }
#atlasBtn{ position:static; right:auto; bottom:auto; }

.ctrlList{ display:flex; flex-direction:column; gap:10px; font-size:14px; color:#cfe6ff; line-height:1.5; }
.ctrlList > div{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:10px 12px; }
.ctrlList b{ color:#9fe6ff; }

.profcard{ width:min(420px,92vw); }
.profcard h2{ margin-bottom:20px; }
.cheatbtn{
  width:100%; margin:10px 0 4px; font-size:15px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,#c43b3b,#e07020); color:#fff;
  border:none; border-radius:14px; padding:12px 14px; cursor:pointer;
  box-shadow:0 8px 22px rgba(196,59,59,.35);
  transition:filter .12s,transform .12s,box-shadow .12s;
}
.cheatbtn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 12px 28px rgba(196,59,59,.45); }
.cheatbtn:active{ transform:translateY(0); filter:brightness(.96); }
.cheatbtn.on{ background:linear-gradient(90deg,#5a1a1a,#8a3a10); box-shadow:none; cursor:default; }
.cheatnote{ font-size:12px; color:#ffb4a0; text-align:center; margin:0 0 10px; line-height:1.4; display:none; }
.cheatnote.show{ display:block; }
.devinfo{
  margin:4px 0 14px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(120,200,255,.16);
  display:flex; flex-direction:column; gap:8px;
}
.devrow{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#cfe6ff; line-height:1.35; }
.devrow .devk{ flex:0 0 68px; color:#7da6c2; font-weight:600; }
.devrow a{ color:#7ed0ff; text-decoration:none; word-break:break-all; }
.devrow a:hover{ text-decoration:underline; color:#b8e8ff; }
.devrow.devaddr > a,
.devrow.devaddr > span:last-child{ flex:1; color:#7ed0ff; text-decoration:none; }
.devrow.devaddr > a:hover{ text-decoration:underline; color:#b8e8ff; }
.introdev{ margin:14px auto 0; max-width:min(420px,92vw); text-align:left; }
#intro .cheatbtn{ width:auto; min-width:140px; padding:12px 22px; margin:0; }
#intro .cheatnote{ margin-top:8px; }
.profhead{ align-items:center; gap:14px; margin-top:4px; }
.profhead img{ width:60px; height:60px; box-shadow:0 0 0 3px rgba(95,180,255,.35); }
.profmeta .profsub{ font-size:12px; color:#7fb8d8; margin-top:2px; }
.proftitle{ margin:14px 0 8px; color:#bfefff; font-size:16px; }
.profstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0; }
.pstat{ background:rgba(255,255,255,.05); border:1px solid rgba(120,200,255,.18); border-radius:12px; padding:10px 6px; text-align:center; }
.pstat span{ display:block; font-size:22px; font-weight:800; color:#fff; line-height:1.1; }
.pstat small{ font-size:10.5px; color:#9fc4dc; }
.pstat.hi{ background:linear-gradient(180deg,rgba(95,180,255,.2),rgba(43,143,212,.12)); border-color:rgba(120,200,255,.45); }
.pstat.hi span{ color:#ffe27a; }

/* индикатор движка отрисовки воды (WebGL / CPU) */
.gfxcard{ display:flex; align-items:center; gap:12px; margin:12px 0 4px; padding:12px 14px;
  border-radius:14px; border:1px solid rgba(120,200,255,.25);
  background:linear-gradient(120deg,rgba(10,28,44,.85),rgba(14,40,60,.7)); position:relative; overflow:hidden; }
.gfxcard.on{ border-color:rgba(95,220,180,.55);
  background:linear-gradient(120deg,rgba(8,34,40,.9),rgba(10,46,58,.75)); box-shadow:0 0 22px rgba(60,220,180,.16) inset; }
.gfxcard.on::after{ content:""; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(150,240,255,.18),transparent);
  animation:gfxsheen 3.4s ease-in-out infinite; }
@keyframes gfxsheen{ 0%{left:-60%;} 55%,100%{left:130%;} }
@media (prefers-reduced-motion:reduce){ .gfxcard.on::after{ animation:none; } }
.gfxled{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; background:#6b7c88;
  box-shadow:0 0 0 3px rgba(255,255,255,.05); }
.gfxcard.on .gfxled{ background:#39e6a6; box-shadow:0 0 10px #39e6a6,0 0 0 3px rgba(57,230,166,.2);
  animation:gfxpulse 1.8s ease-in-out infinite; }
@keyframes gfxpulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
.gfxmeta{ flex:1 1 auto; min-width:0; }
.gfxttl{ font-size:14px; font-weight:800; color:#eafcff; line-height:1.15; }
.gfxsub{ font-size:11px; color:#8fc0d6; margin-top:2px; }
.gfxbadge{ flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.4px; padding:5px 10px;
  border-radius:999px; background:rgba(255,255,255,.08); color:#bcdcec; border:1px solid rgba(120,200,255,.25); }
.gfxcard.on .gfxbadge{ background:linear-gradient(180deg,rgba(57,230,166,.28),rgba(43,180,212,.18));
  color:#caffe9; border-color:rgba(95,220,180,.5); }

/* живое подрагивание пойманной рыбы в карточке улова */
.catchfish{ animation:catchwiggle 1.7s ease-in-out infinite; transform-origin:center; }
@keyframes catchwiggle{ 0%,100%{ transform:rotate(-2.3deg) translateY(0); } 50%{ transform:rotate(2.3deg) translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .catchfish{ animation:none; } }

@media (max-width:600px){
  #sidebar{ top:8px; right:8px; gap:6px; }
  #sidebar .gear{ min-width:0; }
  #botbtns{ right:8px; bottom:calc(8px + var(--vvb,0px) + env(safe-area-inset-bottom)); gap:6px; }
  .profstats{ grid-template-columns:repeat(2,1fr); }
}

/* ===== ГАВНОХОСТ: оверлей замазученного озера + плашка таймера (рассасывается к концу ивента) ===== */
/* Тёмный жирный мазут: затемнение воды снизу (murk) + масляные пятна (multiply) + блёклые
   радужные разводы только по краям пятен (screen). Прозрачности слоёв и backdrop murk
   выставляет JS по ходу ивента (ghUpdateOil) — поэтому плёнка сама редеет к концу. */
#ghOil{ position:absolute; left:0; right:0; top:42%; bottom:0; pointer-events:none; z-index:2; /* ниже .hud (5) */
  overflow:hidden;   /* слои плёнки (inset:-25%/-20%) не должны вылезать выше линии воды в небо */
  opacity:0; transition:opacity 1.2s ease; }
#ghOil.on{ opacity:1; }
#ghOil > div{ position:absolute; inset:0; pointer-events:none; }
.gh-dark{ inset:-25% !important;
  background:
    radial-gradient(44% 36% at 24% 34%, rgba(30,24,18,.7), transparent 66%),
    radial-gradient(50% 38% at 66% 26%, rgba(22,26,18,.66), transparent 66%),
    radial-gradient(40% 44% at 82% 60%, rgba(34,26,16,.66), transparent 64%),
    radial-gradient(56% 42% at 38% 74%, rgba(18,16,20,.7), transparent 68%),
    radial-gradient(74% 52% at 50% 104%, rgba(2,5,3,.82), transparent 64%),
    linear-gradient(180deg, rgba(10,12,8,.5), rgba(2,4,2,.8));
  mix-blend-mode:multiply; animation:ghDriftA 40s ease-in-out infinite alternate; }
.gh-grease{ inset:-20% !important;
  background:
    radial-gradient(30% 16% at 40% 22%, rgba(150,150,140,.10), transparent 60%),
    radial-gradient(26% 14% at 70% 40%, rgba(130,135,140,.09), transparent 60%),
    radial-gradient(34% 18% at 30% 60%, rgba(120,120,110,.08), transparent 62%);
  mix-blend-mode:screen; animation:ghDriftB 46s ease-in-out infinite alternate-reverse; }
.gh-irid{ mix-blend-mode:screen; }
.gh-i1{ background:conic-gradient(from 10deg at 28% 44%, #6b4456,#43435f,#3a5a54,#5a5238,#5e463a,#6b4456);
  -webkit-mask:radial-gradient(40% 34% at 28% 44%, transparent 18%, #000 40%, transparent 60%);
  mask:radial-gradient(40% 34% at 28% 44%, transparent 18%, #000 40%, transparent 60%); animation:ghDriftB 52s ease-in-out infinite alternate; }
.gh-i2{ background:conic-gradient(from 200deg at 66% 32%, #3a5a54,#5a5238,#5e463a,#43435f,#6b4456,#3a5a54);
  -webkit-mask:radial-gradient(38% 30% at 66% 32%, transparent 20%, #000 42%, transparent 58%);
  mask:radial-gradient(38% 30% at 66% 32%, transparent 20%, #000 42%, transparent 58%); animation:ghDriftC 48s ease-in-out infinite alternate-reverse; }
.gh-i3{ background:conic-gradient(from 120deg at 80% 64%, #4c5a44,#3a5a5a,#4a4458,#5e463a,#4c5a44);
  -webkit-mask:radial-gradient(34% 32% at 80% 64%, transparent 16%, #000 38%, transparent 58%);
  mask:radial-gradient(34% 32% at 80% 64%, transparent 16%, #000 38%, transparent 58%); animation:ghDriftB 58s ease-in-out infinite alternate-reverse; }
.gh-i4{ background:conic-gradient(from 300deg at 42% 78%, #5e463a,#6b4456,#43435f,#3a5a54,#5e463a);
  -webkit-mask:radial-gradient(48% 38% at 42% 78%, transparent 18%, #000 40%, transparent 62%);
  mask:radial-gradient(48% 38% at 42% 78%, transparent 18%, #000 40%, transparent 62%); animation:ghDriftC 54s ease-in-out infinite alternate; }
@keyframes ghDriftA{ 0%{ transform:translate(-3%,-2%) rotate(0deg) scale(1.05);} 100%{ transform:translate(3%,2%) rotate(3deg) scale(1.1);} }
@keyframes ghDriftB{ 0%{ transform:translate(-3%,-2%) rotate(-2deg) scale(1.03);} 100%{ transform:translate(4%,2%) rotate(4deg) scale(1.1);} }
@keyframes ghDriftC{ 0%{ transform:translate(3%,2%) rotate(2deg) scale(1.06);} 100%{ transform:translate(-3%,-2%) rotate(-3deg) scale(1.02);} }
@media (prefers-reduced-motion:reduce){ #ghOil > div{ animation:none !important; } }

/* плашка обратного отсчёта ивента — по центру сверху */
#ghTimer{ position:absolute; top:92px; left:50%; transform:translate(-50%,-8px);
  z-index:6; pointer-events:none; opacity:0; transition:opacity .5s ease, transform .5s ease;
  background:linear-gradient(180deg, rgba(46,32,14,.94), rgba(22,16,8,.94));
  border:1px solid rgba(120,210,130,.55); border-radius:999px; padding:7px 16px;
  color:#e6f8df; font-size:14px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
  text-shadow:0 2px 6px rgba(0,0,0,.85); box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 18px rgba(80,200,90,.28); }
#ghTimer.on{ opacity:1; transform:translate(-50%,0); }
#ghTimer b{ color:#aef0a0; }
@media(max-width:600px){ #ghTimer{ top:66px; font-size:12px; padding:5px 12px; } }

/* категория «Гавнохост» в журнале улова */
.logCat{ margin:10px 0 4px; padding:5px 8px; border-radius:8px; font-weight:800; font-size:13px;
  color:#cfe9a8; background:linear-gradient(90deg, rgba(90,120,30,.28), rgba(90,120,30,.05));
  border:1px solid rgba(120,160,40,.35); }