/* DalboDoge Run page styles (extends assets/css/style.css) */
.gmain{padding-top:calc(var(--nav-h) + 22px)}
.gsec{padding:10px 0 80px}
.ghead{text-align:center;margin-bottom:22px}
.ghead .h2{margin-bottom:10px}
.gsub{max-width:640px;margin:0 auto;color:var(--muted);font-size:1.05rem}

.gframe{position:relative;border-radius:var(--r);padding:5px;background:linear-gradient(135deg,rgba(255,225,130,.85),rgba(200,135,26,.3) 40%,rgba(255,215,100,.75));box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 70px -18px rgba(245,180,40,.55)}
.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--nav-h) - 40px);min-height:260px;border-radius:calc(var(--r) - 5px);overflow:hidden;background:#070504;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:700px) and (orientation:portrait){.stage{aspect-ratio:1/1.12;max-height:calc(100svh - var(--nav-h) - 120px)}}

.hud{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:4}
.hud__btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(245,197,66,.45);background:rgba(10,7,4,.6);backdrop-filter:blur(6px);color:var(--gold2);display:grid;place-items:center;cursor:pointer;padding:0}
.hud__btn svg{width:22px;height:22px;fill:currentColor}
.hud__btn:hover{background:rgba(245,197,66,.15)}
.hud__btn .i-off{display:none}
.hud__btn.is-muted .i-on{display:none}
.hud__btn.is-muted .i-off{display:block}
.hud__btn[hidden]{display:none}

.scr{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:14px;background:radial-gradient(ellipse at center,rgba(20,13,5,.55),rgba(5,3,2,.88));opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;cursor:default;overflow:auto}
.scr.is-on{opacity:1;visibility:visible}
.scr__card{text-align:center;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.scr__logo{width:clamp(64px,14vw,120px);height:auto;border-radius:50%;filter:drop-shadow(0 0 24px rgba(245,190,50,.55));animation:float 3.5s ease-in-out infinite}
.scr__title{font-size:clamp(2rem,6vw,3.6rem);font-weight:800;line-height:1;filter:drop-shadow(0 4px 18px rgba(245,180,40,.35))}
.scr__tag{font-family:var(--display);font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);margin:0 0 6px;color:var(--ink)}
.scr__kicker{font-family:var(--display);font-weight:700;color:#ff8a7a;margin:0;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem}
.scr__hint{color:var(--muted);font-size:.88rem;margin:4px 0 0;line-height:1.5}
.scr__best{margin:0;color:var(--gold2);font-family:var(--display);font-weight:700}
.scr__note{color:var(--dim);font-size:.8rem;margin:2px 0 0}
.scr__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
kbd{display:inline-block;padding:0 7px;border-radius:6px;border:1px solid rgba(245,197,66,.45);background:rgba(245,197,66,.08);color:var(--gold2);font-family:var(--body);font-size:.85em;line-height:1.5}
.newbest{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--g-grad);color:#1a1004;font-family:var(--display);font-weight:800;animation:pulseGold 1.2s ease-in-out infinite}
.newbest[hidden]{display:none}
@keyframes pulseGold{50%{transform:scale(1.08)}}
.scores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.scores__i{min-width:104px;padding:8px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,215,110,.06)}
.scores__i small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.scores__i b{font-family:var(--display);font-size:1.8rem;color:var(--gold2);line-height:1.1}

.gnote{text-align:center;color:var(--dim);font-size:.9rem;margin:16px auto 34px;max-width:720px}
.ghow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:70px}
.ghow__i{padding:22px 20px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,215,110,.07),rgba(255,215,110,.015))}
.ghow__i span{font-size:1.8rem}
.ghow__i h3{font-size:1.3rem;margin:8px 0 6px;color:var(--gold2)}
.ghow__i p{color:var(--muted);margin:0;font-size:.95rem}
.gcta{text-align:center}

/* compact overlays on small stages */
@media (max-width:700px){
  .ghow{grid-template-columns:repeat(2,1fr);gap:12px}
  .scr__card{gap:6px}
  .scr .btn--lg{--h:48px;padding:0 20px;font-size:1.02rem}
  .scores__i{min-width:84px;padding:6px 10px}
  .scores__i b{font-size:1.35rem}
  .scr__hint{font-size:.78rem}
  .scr__title{font-size:2.1rem}
  .scr__note{display:none}
  .scr__btns{gap:8px}
  .scr__btns .btn--lg{--h:44px;font-size:.98rem}
  .gframe{padding:3px;border-radius:16px}
  .stage{border-radius:13px}
}
@media (max-height:520px) and (orientation:landscape){
  .gmain{padding-top:calc(var(--nav-h) + 6px)}
  .ghead{display:none}
  .scr__logo,.scr__hint,.scr__note{display:none}
}

@media (prefers-reduced-motion:reduce){.scr__logo,.playsec__art img,.newbest{animation:none}}