/* ============ ДЯДЯ ГОША — стили ============ */
:root{
  --bg:#0b0918; --panel:rgba(18,14,38,.72); --line:rgba(255,255,255,.14);
  --amber:#ffb454; --mint:#7de3a6; --pink:#ff6d9e; --txt:#f3edff; --dim:#a89fc9;
  --rad:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--txt);user-select:none;-webkit-user-select:none;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none!important}

/* ---------- glass ---------- */
.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud .glass{pointer-events:auto}
.hud-tl{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;padding:10px 14px;min-width:220px}
.st-row{display:flex;gap:8px;align-items:baseline;font-weight:800;letter-spacing:.5px}
#stNum{font-size:12px;color:var(--amber);border:1px solid var(--amber);border-radius:6px;padding:1px 6px}
#stName{font-size:15px}
.prog{height:7px;background:rgba(255,255,255,.12);border-radius:4px;margin:8px 0 6px;overflow:hidden}
.prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--mint),var(--amber));border-radius:4px;transition:width .25s}
.size-row{display:flex;align-items:baseline;gap:10px}
#hudSize{font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(255,180,84,.35)}
#hudMass{font-size:12px;color:var(--dim)}

.hud-tr{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.stat{padding:6px 12px;display:flex;gap:8px;align-items:baseline}
.stat .lbl{font-size:10px;color:var(--dim);letter-spacing:1px}
.stat b{font-size:16px;font-variant-numeric:tabular-nums}

.combo{padding:6px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(255,109,158,.25),rgba(255,180,84,.25));border:1px solid rgba(255,150,120,.6);animation:pop .18s}
.combo span{font-size:20px;font-weight:900;color:var(--amber)}
.cbar{width:90px;height:4px;background:rgba(0,0,0,.4);border-radius:2px;margin-top:3px}
.cbar i{display:block;height:100%;background:var(--amber);border-radius:2px}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

#nt{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:8px 16px}
#ntEmoji{font-size:30px;filter:drop-shadow(0 0 8px rgba(255,180,84,.6));animation:bob 1.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.nt-mid{display:flex;flex-direction:column;line-height:1.2}
.nt-mid .lbl{font-size:9px;color:var(--dim);letter-spacing:1.5px}
#ntName{font-size:16px;font-weight:800}
#ntSize{font-size:11px;color:var(--mint)}

.hud-btns{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px}
.icon-btn{pointer-events:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:17px;cursor:pointer;backdrop-filter:blur(8px)}
.icon-btn:hover{border-color:var(--amber)}

#banner{position:absolute;top:18%;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(125,227,166,.95),rgba(255,180,84,.95));color:#1a1030;font-weight:900;font-size:clamp(15px,2.6vw,24px);padding:12px 26px;border-radius:14px;box-shadow:0 10px 40px rgba(255,180,84,.4);animation:bannerIn .45s cubic-bezier(.2,1.6,.4,1);white-space:nowrap;z-index:12}
@keyframes bannerIn{0%{transform:translateX(-50%) scale(.3);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
#evt{position:absolute;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:var(--pink);font-weight:800;font-size:15px;text-shadow:0 0 14px rgba(255,109,158,.7);animation:pop .3s;white-space:nowrap}

#toasts{position:absolute;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.toast{background:var(--panel);border:1px solid var(--amber);border-radius:12px;padding:8px 14px;font-size:13px;animation:toastIn .3s;max-width:280px}
.toast b{color:var(--amber)}
@keyframes toastIn{0%{transform:translateX(40px);opacity:0}100%{transform:none;opacity:1}}

#hint{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:13px;color:var(--mint)}

/* ---------- touch ---------- */
#joy{position:fixed;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);z-index:20;pointer-events:none}
#joyNub{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.5)}
#btnDash{position:fixed;right:26px;bottom:calc(90px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;border:2px solid var(--amber);background:rgba(255,180,84,.2);color:#fff;font-size:26px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center}
#btnDash span{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--amber)}
#btnDash:active{background:rgba(255,180,84,.5);transform:scale(.94)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(8,6,20,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.screen.trans{background:rgba(8,6,20,.55)}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:20px}
#logoCv{width:min(420px,80vw);height:auto;filter:drop-shadow(0 14px 40px rgba(255,180,84,.25))}
.logo{font-size:clamp(44px,9vw,84px);font-weight:900;letter-spacing:2px;line-height:.95;background:linear-gradient(180deg,#ffe3ad,var(--amber) 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(255,180,84,.25)}
.logo .lg2{display:block;font-size:.72em}
.tagline{color:var(--dim);font-size:clamp(14px,2.2vw,18px)}
.title-btns{display:flex;flex-direction:column;gap:10px;margin-top:8px;min-width:min(320px,84vw)}
.t-hint{font-size:12px;color:var(--dim);margin-top:10px;max-width:520px}

.btn{border:none;border-radius:14px;padding:14px 26px;font-weight:900;font-size:15px;letter-spacing:1px;cursor:pointer;color:#1a1030;background:linear-gradient(135deg,var(--amber),#ffcf7d);box-shadow:0 6px 24px rgba(255,180,84,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,180,84,.5)}
.btn:active{transform:scale(.97)}
.btn.mid{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid var(--line);box-shadow:none;font-weight:700}
.btn.mid:hover{border-color:var(--amber);color:var(--amber)}
.btn.big{font-size:17px}

.panel{padding:28px 30px;max-width:min(640px,92vw);max-height:88vh;overflow:auto;text-align:center}
.panel.wide{max-width:min(860px,94vw)}
.panel h2{margin-bottom:16px;font-size:24px;color:var(--amber)}
.help-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45;margin-bottom:20px}
.pause-btns{display:flex;flex-direction:column;gap:9px}
.pause-tip{margin-top:14px;font-size:12px;color:var(--dim)}

#albumGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:18px;max-height:52vh;overflow:auto;padding:4px}
.al-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;gap:3px;align-items:center;min-height:86px;justify-content:center}
.al-card .em{font-size:26px}
.al-card .nm{font-size:11px;font-weight:700;text-align:center}
.al-card .ct{font-size:10px;color:var(--mint)}
.al-card.no{opacity:.38;filter:grayscale(1)}

/* ---------- stage card ---------- */
.card-inner{text-align:center;animation:cardIn .7s cubic-bezier(.2,1.4,.4,1)}
#cardKick{color:var(--amber);letter-spacing:4px;font-weight:800;font-size:14px}
#cardName{font-size:clamp(34px,8vw,72px);font-weight:900;letter-spacing:2px;background:linear-gradient(180deg,#fff,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0}
#cardSub{color:var(--dim);font-size:clamp(13px,2.4vw,18px);max-width:600px;padding:0 16px}
@keyframes cardIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* ---------- finale ---------- */
.fin{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;transition:none}
.fin #finBtns{pointer-events:auto}
.fin-inner{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
#finTxt{font-size:clamp(22px,5vw,44px);font-weight:800;letter-spacing:1px;max-width:800px;line-height:1.4;animation:finTxt 1.4s}
@keyframes finTxt{0%{opacity:0;letter-spacing:8px;filter:blur(6px)}100%{opacity:1;letter-spacing:1px;filter:none}}
#finBtns{display:flex;flex-direction:column;gap:10px;animation:finTxt 1s}

@media (max-width:640px){
  .hud-tl{min-width:150px;padding:8px 10px}
  #hudSize{font-size:16px}
  .stat b{font-size:13px}
  #nt{padding:6px 10px;bottom:calc(12px + env(safe-area-inset-bottom))}
  #ntEmoji{font-size:22px}
  #ntName{font-size:13px}
  .hud-btns{left:auto;right:12px;transform:none;top:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
  #toasts{bottom:calc(120px + env(safe-area-inset-bottom))}
}

/* ---------- мобильная версия (Android/iOS) ---------- */
body.mobile{position:fixed;inset:0;overscroll-behavior:none}
body.mobile .btn{padding:15px 26px;font-size:16px;touch-action:manipulation}
body.mobile .icon-btn{width:48px;height:48px;font-size:21px;touch-action:manipulation}
/* кнопка рывка — крупная, под большой палец, с учётом «чёлки» */
body.mobile #btnDash{width:96px;height:96px;font-size:32px;right:calc(16px + env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));border-width:3px}
body.mobile #btnDash span{font-size:11px}
/* джойстик крупнее и заметнее */
body.mobile #joy{width:150px;height:150px;border-width:3px;background:rgba(255,255,255,.09)}
body.mobile #joyNub{width:62px;height:62px;left:41px;top:41px;background:rgba(255,255,255,.45)}
/* компактный HUD, чтобы не закрывал картинку */
body.mobile .hud-btns{left:50%;right:auto;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));bottom:auto}
body.mobile .hud-tl{min-width:136px;padding:7px 10px;border-radius:12px}
body.mobile #hudSize{font-size:15px}
body.mobile .prog{height:6px;margin:6px 0 4px}
body.mobile .stat{padding:5px 10px}
body.mobile .stat b{font-size:14px}
body.mobile .combo span{font-size:17px}
body.mobile #nt{bottom:calc(10px + env(safe-area-inset-bottom));padding:6px 12px}
body.mobile #ntEmoji{font-size:20px}
body.mobile #ntName{font-size:12px}
/* алфавит/помощь скроллятся пальцем */
body.mobile .panel{padding:20px 16px;touch-action:pan-y}
body.mobile #albumGrid{max-height:46vh;touch-action:pan-y}
body.mobile .help-list{font-size:13.5px}
body.mobile #toasts{bottom:calc(210px + env(safe-area-inset-bottom))}
body.mobile .toast{max-width:230px;font-size:12px}