/* RE:RISE — GOLD EDITION (loaded last). Deep black, metallic gold, glowing accents. Story logic unchanged. */
:root {
  --g-black: #070605; --g-ink-0: #0e0c09; --g-card: #15120d; --g-card-2: #1c1810; --g-line: rgba(230, 195, 122, .28);
  --g-text: #f4ecdc; --g-text-2: #d9ccb2; --g-muted: #b9a988;
  --g-gold: #e6c37a; --g-gold-hi: #fff1c9; --g-gold-deep: #a97c2f;
  --g-metal: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 50%), linear-gradient(105deg, #8f6524 0%, #d9b061 18%, #fff0c2 30%, #c9993e 46%, #8f6524 60%, #e6c37a 78%, #fff6d8 88%, #b88a3a 100%);
  --g-metal-text: linear-gradient(105deg, #c99a45 0%, #fff0c2 25%, #e6c37a 45%, #b88a3a 65%, #fff6d8 82%, #d9b061 100%);
  --g-glow: 0 0 0 1px rgba(230, 195, 122, .5), 0 0 24px rgba(230, 195, 122, .25);
  --g-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- ground ---------- */
html:not(#_) body { background: radial-gradient(ellipse 70% 45% at 85% -10%, rgba(230, 195, 122, .16), transparent 70%), radial-gradient(ellipse 60% 40% at -10% 105%, rgba(169, 124, 47, .14), transparent 70%), var(--g-black) !important; background-attachment: fixed !important; color: var(--g-text) !important; }
html:not(#_) body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background-image: linear-gradient(rgba(230, 195, 122, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 195, 122, .05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent); mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent); }
html:not(#_) #app, html:not(#_) body > footer { position: relative; z-index: 1; }
html:not(#_) body :is(h1, h2, h3, h4, b, strong, legend) { color: var(--g-text); }
html:not(#_) body :is(p, li, small, span, label, figcaption, summary, blockquote, dd, dt) { color: inherit; }
html:not(#_) #app { color: var(--g-text-2); }
html:not(#_) :is(.eyebrow, .act-label, .presence-eyebrow, .kicker) { color: var(--g-gold) !important; letter-spacing: .18em; }
html:not(#_) :is(.edition-hero h1 em, .result h1 em, .intro h1 em) { background: var(--g-metal-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; font-style: normal; animation: g-shine 6s ease-in-out infinite; }
@keyframes g-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- header / footer ---------- */
html:not(#_) body > header { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; background: rgba(7, 6, 5, .86) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 0 !important; }
html:not(#_) body > header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #a97c2f 15%, #fff0c2 50%, #a97c2f 85%, transparent); }
html:not(#_) body > header .logo { color: var(--g-text) !important; letter-spacing: .12em; }
html:not(#_) body > header .logo span { color: var(--g-gold) !important; }
html:not(#_) body > header .logo small { color: var(--g-muted) !important; }
html:not(#_) body > header .header-note { color: var(--g-muted) !important; }
html:not(#_) #sound { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--g-line) !important; background: rgba(255, 255, 255, .04) !important; color: var(--g-text) !important; }
html:not(#_) #sound[aria-pressed="true"] { border-color: var(--g-gold) !important; box-shadow: var(--g-glow); color: var(--g-gold-hi) !important; }
html:not(#_) body > footer { background: transparent !important; color: var(--g-muted) !important; border-top: 1px solid rgba(230, 195, 122, .15) !important; }
html:not(#_) body > footer * { color: var(--g-muted) !important; }

/* ---------- buttons ---------- */
html:not(#_) #app :is(.primary, .g-cta) { position: relative; overflow: hidden; isolation: isolate; min-height: 54px; border: 1px solid #b88a3a !important; border-radius: 14px !important; background: var(--g-metal) !important; background-size: 100% 100%, 200% 100% !important; color: #1a1408 !important; font-weight: 800; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(90, 60, 15, .35), 0 0 28px rgba(230, 195, 122, .28), 0 16px 30px -18px rgba(0, 0, 0, .9) !important; transition: transform .15s var(--g-ease), box-shadow .2s, background-position .6s var(--g-ease) !important; }
html:not(#_) #app :is(.primary, .g-cta)::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 34%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg); animation: g-sweep 3.4s .8s ease-in-out infinite; pointer-events: none; }
@keyframes g-sweep { 0% { left: -60%; } 30%, 100% { left: 130%; } }
html:not(#_) #app :is(.primary, .g-cta):hover { background-position: 0 0, 100% 0 !important; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90, 60, 15, .35), 0 0 36px rgba(230, 195, 122, .45), 0 16px 30px -18px #000 !important; }
html:not(#_) #app button:active { transform: scale(.97); }
html:not(#_) #app :is(.secondary, .text-button) { color: var(--g-gold) !important; background: transparent !important; border-color: var(--g-line) !important; min-height: 44px; }
html:not(#_) #app .secondary { border: 1px solid var(--g-line) !important; border-radius: 12px !important; }
html:not(#_) :is(a, button, select, input, summary):focus-visible { outline: 3px solid var(--g-gold) !important; outline-offset: 3px; }

/* ---------- surfaces: every light card becomes a dark gold-edged panel ---------- */
html:not(#_) #app :is(.panel, .chapter, .rpg-panel, .reply, .result-card, .memory, .companion, .achievement-book, .share-box, .shelf, .presence-preview, .discovery-shelf, .edition-guide, .episode-panel, .edition-recap, .presence-book, .people-memoir, .stats .stat, .result > section, .result > div:not(.eyebrow)) { background: linear-gradient(165deg, var(--g-card-2), var(--g-card)) !important; border: 1px solid var(--g-line) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 241, 201, .06), 0 30px 60px -40px #000 !important; color: var(--g-text-2) !important; }
html:not(#_) #app .stats .stat { border-radius: 14px !important; }
html:not(#_) #app .stats .stat span { color: var(--g-muted) !important; }
html:not(#_) #app .stats .stat strong { color: var(--g-text) !important; }
html:not(#_) #app .meter { background: rgba(230, 195, 122, .14) !important; }
html:not(#_) #app :is(.meter i, .rpg-xp i, .presence-act-line) { background: var(--g-metal) !important; box-shadow: 0 0 10px rgba(230, 195, 122, .5); }
html:not(#_) #app .chip { background: rgba(230, 195, 122, .1) !important; border: 1px solid var(--g-line) !important; color: var(--g-gold) !important; }
html:not(#_) #app .rail i { background: rgba(230, 195, 122, .16) !important; }
html:not(#_) #app .rail i.active, html:not(#_) #app .rail i.done { background: var(--g-gold) !important; box-shadow: 0 0 8px rgba(230, 195, 122, .7); }
html:not(#_) #app .scene-sensory { color: var(--g-text-2) !important; border-left-color: var(--g-gold-deep) !important; background: rgba(230, 195, 122, .05) !important; }
html:not(#_) #app .chapter h2 { color: var(--g-text) !important; }
html:not(#_) #app .chapter .body { color: var(--g-text-2) !important; }
html:not(#_) #app .cinema-frame { border-radius: 18px !important; border: 1px solid var(--g-line) !important; box-shadow: 0 0 40px -10px rgba(230, 195, 122, .25) !important; }
html:not(#_) #app .cinema-frame figcaption * { color: #fff8e6 !important; }
html:not(#_) #app :is(.small, .rpg-help, .presence-act small) { color: var(--g-muted) !important; }
html:not(#_) #app .presence-act span { color: var(--g-muted) !important; }
html:not(#_) #app .presence-act .current { color: var(--g-gold-hi) !important; }

/* choices: dark plates with a gold edge; light up on touch */
html:not(#_) .choices { display: grid; gap: 12px; }
html:not(#_) .choice { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 14px 16px !important; border-radius: 16px !important; border: 1px solid rgba(230, 195, 122, .4) !important; background: linear-gradient(180deg, rgba(255, 241, 201, .06), rgba(255, 241, 201, .01)), var(--g-ink-0) !important; color: var(--g-text) !important; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 241, 201, .08) !important; transition: transform .14s var(--g-ease), border-color .14s, box-shadow .14s !important; }
html:not(#_) .choice > b { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--g-metal) !important; color: #1a1408 !important; font-weight: 800; box-shadow: 0 0 14px rgba(230, 195, 122, .35); }
html:not(#_) .choice span { color: var(--g-text) !important; }
html:not(#_) .choice small { display: block; margin-top: 4px; color: var(--g-gold) !important; font-weight: 600; letter-spacing: .02em; }
html:not(#_) .choice:hover:not(:disabled) { border-color: var(--g-gold) !important; box-shadow: var(--g-glow) !important; transform: translateY(-1px); }
html:not(#_) .choice.g-picked, html:not(#_) .choice.chosen, html:not(#_) .choice.selected { border-color: var(--g-gold-hi) !important; box-shadow: 0 0 0 1px var(--g-gold), 0 0 30px rgba(230, 195, 122, .45) !important; background: linear-gradient(180deg, rgba(230, 195, 122, .22), rgba(230, 195, 122, .06)), var(--g-ink-0) !important; }
html:not(#_) .choice:disabled:not(.chosen):not(.selected):not(.g-picked) { opacity: .45; }
html:not(#_) .choice::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 241, 201, .45), transparent 45%); opacity: 0; pointer-events: none; }
html:not(#_) .choice.g-picked::after { animation: g-flash .5s var(--g-ease); }
@keyframes g-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* reply = result sheet */
html:not(#_) #app .reply { border-color: var(--g-gold) !important; box-shadow: 0 0 0 1px rgba(230, 195, 122, .35), 0 0 40px -6px rgba(230, 195, 122, .35), 0 30px 60px -30px #000 !important; }
html:not(#_) #app .reply p, html:not(#_) #app .reply .scene-after p { color: var(--g-text) !important; }
html:not(#_) #app .reply .scene-after { background: rgba(230, 195, 122, .07) !important; border-color: var(--g-line) !important; }
html:not(#_) #app .reply .scene-after span { color: var(--g-gold) !important; }
html:not(#_) #app .changes { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(#_) #app .changes span { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--g-line) !important; color: var(--g-text) !important; }
html:not(#_) #app .changes span.g-up { background: rgba(230, 195, 122, .16) !important; border-color: var(--g-gold) !important; color: var(--g-gold-hi) !important; box-shadow: 0 0 14px rgba(230, 195, 122, .25); }
html:not(#_) #app .changes span.g-down { color: #f0b9a8 !important; border-color: rgba(240, 150, 120, .4) !important; }
html:not(#_) #app .reply .primary { width: 100%; }
.g-teaser { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(230, 195, 122, .14), rgba(230, 195, 122, 0)); border-left: 2px solid var(--g-gold); }
.g-teaser b { flex: none; font-size: 11px; letter-spacing: .2em; color: var(--g-gold) !important; }
.g-teaser span { min-width: 0; font-size: 14px; font-weight: 600; color: var(--g-text) !important; }

/* intro (prologue) */
html:not(#_) .intro .lead { color: var(--g-text-2) !important; }
html:not(#_) .rpg-roles { background: var(--g-card) !important; border: 1px solid var(--g-line) !important; border-radius: 18px !important; }
html:not(#_) .rpg-roles legend { background: var(--g-metal) !important; color: #1a1408 !important; border-radius: 999px !important; padding: 6px 14px !important; }
html:not(#_) .rpg-roles label > span { background: var(--g-ink-0) !important; border: 1px solid var(--g-line) !important; border-radius: 14px !important; }
html:not(#_) .rpg-roles label > span * { color: var(--g-text) !important; }
html:not(#_) .rpg-roles label > span small { color: var(--g-gold) !important; }
html:not(#_) .rpg-roles input:checked + span { border-color: var(--g-gold) !important; box-shadow: var(--g-glow) !important; background: linear-gradient(180deg, rgba(230, 195, 122, .18), rgba(230, 195, 122, .04)), var(--g-ink-0) !important; }
html:not(#_) .rpg-roles input:checked + span::after { background: var(--g-metal) !important; color: #1a1408 !important; }
html:not(#_) .rpg-roles p { color: var(--g-muted) !important; }

/* ---------- HUD in the header ---------- */
.g-hud { display: none; flex: 1 1 100%; order: 9; align-items: center; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(230, 195, 122, .14); min-width: 0; }
.g-hud.on { display: flex; }
.g-hud .g-ch { flex: none; font: 800 12px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; color: var(--g-gold-hi); }
.g-hud .g-bar { position: relative; flex: 1 1 auto; min-width: 60px; height: 6px; border-radius: 999px; background: rgba(230, 195, 122, .14); overflow: hidden; }
.g-hud .g-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--g-metal); box-shadow: 0 0 12px rgba(230, 195, 122, .8); transition: width .6s var(--g-ease); }
.g-hud .g-stats { display: flex; gap: 6px; flex: none; }
.g-hud .g-stat { display: grid; justify-items: center; min-width: 46px; padding: 3px 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(230, 195, 122, .2); }
.g-hud .g-stat small { font-size: 9.5px; color: var(--g-muted); white-space: nowrap; }
.g-hud .g-stat b { font: 800 13px/1.25 ui-monospace, Menlo, monospace; color: var(--g-text); }
.g-hud .g-stat.up { border-color: var(--g-gold); box-shadow: 0 0 12px rgba(230, 195, 122, .45); }
.g-hud .g-stat.up b { color: var(--g-gold-hi); }
.g-hud .g-stat.down b { color: #f0b9a8; }

/* ---------- cut-ins ---------- */
.g-cut { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse 70% 40% at 50% 50%, rgba(7, 6, 5, .7), transparent 75%); animation: g-cut-bg 1s var(--g-ease) forwards; }
.g-cut div { position: relative; padding: 18px 30px; text-align: center; animation: g-cut 1s var(--g-ease) forwards; }
.g-cut div::before, .g-cut div::after { content: ""; position: absolute; left: -30%; right: -30%; height: 1px; background: linear-gradient(90deg, transparent, var(--g-gold), transparent); }
.g-cut div::before { top: 0; } .g-cut div::after { bottom: 0; }
.g-cut small { display: block; font: 800 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; color: var(--g-gold); }
.g-cut strong { display: block; margin-top: 8px; font-size: clamp(20px, 5vw, 30px); letter-spacing: .06em; background: var(--g-metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes g-cut { 0% { opacity: 0; transform: scaleX(.6); letter-spacing: .4em; } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes g-cut-bg { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.g-spark { position: fixed; z-index: 90; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--g-gold-hi); box-shadow: 0 0 10px #e6c37a, 0 0 20px rgba(230, 195, 122, .6); pointer-events: none; animation: g-spark .7s var(--g-ease) forwards; }
@keyframes g-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.g-in { animation: g-in .4s var(--g-ease) both; }
@keyframes g-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.g-sheet { animation: g-sheet .42s var(--g-ease) both; }
@keyframes g-sheet { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  html:not(#_) #app .layout { display: flex !important; flex-direction: column; gap: 14px; }
  html:not(#_) #app .layout > .chapter { order: 1; }
  html:not(#_) #app .layout > .panel { order: 2; }
  html:not(#_) #app .cinema-frame svg { max-height: 150px; }
  html:not(#_) #app .chapter h2 { font-size: 22px !important; line-height: 1.5 !important; }
  html:not(#_) #app .chapter .body { font-size: 15px !important; line-height: 1.85 !important; }
}
@media (max-width: 600px) {
  html:not(#_) body > header { padding: 10px 14px !important; }
  html:not(#_) body > header .header-note { display: none !important; }
  .g-hud { gap: 8px; }
  .g-hud .g-stat { min-width: 0; padding: 3px 5px; }
  .g-hud .g-stat small { font-size: 9px; }
}
@media (max-width: 380px) {
  .g-hud .g-stat:nth-child(4) { display: none; }
  .g-hud .g-bar { min-width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#_) #app :is(.primary, .g-cta)::after, html:not(#_) :is(.edition-hero h1 em, .result h1 em, .intro h1 em) { animation: none !important; }
  .g-cut, .g-spark { display: none !important; }
  .g-in, .g-sheet { animation: none !important; }
  html:not(#_) .choice { transition: none !important; }
  html:not(#_) .choice.g-picked::after { animation: none; }
}
/* remaining light surfaces → dark gold-edged */
html:not(#_) #app :is(.home-note, .rpg-skill, .badges > div, .episode-arc, .episode-arc > summary, .result-grid > div, .memory, .rpg-book, .rpg-map > div, .episode-step, .episode-choice, .presence-samples details, .discovery-teasers article) { background: rgba(255, 241, 201, .04) !important; border-color: var(--g-line) !important; color: var(--g-text-2) !important; }
html:not(#_) #app :is(.rpg-skill b, .badges > div b, .episode-arc summary b) { color: var(--g-text) !important; }
html:not(#_) #app :is(.rpg-skill p, .rpg-skill small, .episode-arc summary small, .badges > div small, .badges > div span) { color: var(--g-text-2) !important; }
html:not(#_) #app :is(.rpg-skill span, .episode-number, .episode-dots, .rpg-meta span, .rpg-next, .rpg-next b) { color: var(--g-gold) !important; }
html:not(#_) #app .rpg-map .complete span, html:not(#_) #app .rpg-map > div span { background: var(--g-metal) !important; color: #1a1408 !important; }
html:not(#_) #app .home-note { border-left-color: var(--g-gold) !important; }
html:not(#_) #app .rpg-item { color: var(--g-gold) !important; background: transparent !important; }
html:not(#_) #app .badges > div > span { background: var(--g-metal) !important; color: #1a1408 !important; }
html:not(#_) #app .companion-mark { background: var(--g-metal) !important; color: #1a1408 !important; }
html:not(#_) #app :is(.studio-formats button, .studio-status, .studio-hint, .studio-controls p) { color: var(--g-text-2) !important; }
html:not(#_) #app .studio-formats button[aria-pressed="true"] { color: #1a1408 !important; background: var(--g-metal) !important; }

/* ===== tempo: the scene and its three choices on one screen ===== */
html:not(#_) #app .chapter .act-label { display: inline-block; margin-right: 8px; }
html:not(#_) #app .chapter > .chip { display: inline-flex; vertical-align: middle; }
html:not(#_) #app .chapter .cinema-frame { max-height: 170px; overflow: hidden; margin-top: 10px; margin-bottom: 12px; }
html:not(#_) #app .chapter .cinema-frame svg { width: 100%; height: 170px !important; object-fit: cover; }
html:not(#_) #app .chapter .scene-sensory { font-size: 13.5px; line-height: 1.75; padding: 8px 12px; margin: 0 0 12px; }
html:not(#_) #app .chapter h2 { margin: 6px 0 8px; }
html:not(#_) #app .chapter .body { margin-bottom: 14px; }
@media (max-width: 860px) {
  html:not(#_) #app .chapter .cinema-frame, html:not(#_) #app .chapter .cinema-frame svg { max-height: 104px; height: 104px !important; }
  html:not(#_) #app .chapter .cinema-frame figcaption b { font-size: 16px !important; }
  html:not(#_) #app .chapter .scene-sensory { font-size: 12.5px; line-height: 1.7; }
  html:not(#_) #app .chapter .body { font-size: 14.5px !important; line-height: 1.8 !important; }
  html:not(#_) .choice { min-height: 58px; padding: 11px 14px !important; }
  html:not(#_) .choice > b { width: 30px; height: 30px; }
}
/* the next button follows the thumb while the result sheet is on screen */
html:not(#_) #app .reply [data-act="next"] { position: sticky; bottom: 12px; z-index: 3; }
/* comfortable tap targets */
html:not(#_) #app details > summary { min-height: 44px; display: flex; align-items: center; }
html:not(#_) #app .text-button { min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; }
html:not(#_) #app .result a, html:not(#_) #app .share-box a { min-height: 44px; display: inline-flex; align-items: center; }

/* ===== slim header while playing ===== */
html.g-playing:not(#_) body > header { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; gap: 10px 16px; align-items: center; }
html.g-playing:not(#_) body > header .header-note, html.g-playing:not(#_) body > header .logo small { display: none !important; }
html.g-playing:not(#_) body > header .logo { font-size: 18px !important; line-height: 1 !important; }
html.g-playing .g-hud { margin-top: 0; padding-top: 0; border-top: 0; }
html.g-playing .g-hud .g-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; }
html.g-playing .g-hud .g-stat small { font-size: 10px; }
@media (min-width: 861px) {
  html.g-playing:not(#_) body > header { flex-wrap: nowrap; }
  html.g-playing .g-hud { order: 0; flex: 1 1 auto; }
  html.g-playing:not(#_) #sound { order: 1; }
}
@media (max-width: 860px) {
  html.g-playing .g-hud { margin-top: 2px; }
  html.g-playing .g-hud .g-stats { gap: 4px; }
  html.g-playing .g-hud .g-stat { padding: 2px 6px; gap: 3px; }
  html.g-playing .g-hud .g-stat small { font-size: 9.5px; }
  html.g-playing .g-hud .g-stat b { font-size: 12px; }
  html.g-playing:not(#_) #sound { min-height: 36px; }
}
@media (max-width: 380px) { html.g-playing .g-hud .g-bar { display: none; } }
@media (min-width: 861px) { html:not(#_) #app .chapter .cinema-frame, html:not(#_) #app .chapter .cinema-frame svg { max-height: 130px; height: 130px !important; } }
/* HUD must always fit the screen (values can reach 3 digits at the end) */
html:not(#_) body > header { max-width: 100vw; overflow-x: clip; }
.g-hud, .g-hud .g-stats { min-width: 0; }
@media (max-width: 430px) {
  html.g-playing .g-hud .g-bar { display: none; }
  html.g-playing .g-hud { gap: 6px; justify-content: space-between; }
  html.g-playing .g-hud .g-stat { padding: 2px 5px; gap: 2px; }
  html.g-playing .g-hud .g-stat small { font-size: 9px; letter-spacing: 0; }
}
@media (max-width: 360px) { html.g-playing .g-hud .g-stat:nth-child(4) { display: none; } }
/* header controls: 44px */
html:not(#_) body > header .logo { min-height: 44px; display: inline-flex; align-items: center; }
html:not(#_) #sound { min-height: 44px !important; }