/* Metro Moth — midnight platform-sign identity, responsive/full-game pass */
:root{--mm-paper:#e8e2bd;--mm-ink:#172027;--mm-cyan:#8fe8ff;--mm-gold:#ffe58a;--mm-red:#ef5265}
#game-root{background:linear-gradient(180deg,#071018,#030609 72%)}

/* Touch layer stays below the HUD so pause/fullscreen remain tappable. */
.touch-controls{z-index:15!important;pointer-events:auto;touch-action:none}
.lane-btn{color:rgba(143,232,255,.28)!important;font-size:1.4rem!important;text-shadow:0 0 12px rgba(80,220,255,.45);transition:background .15s ease,color .15s ease}
.lane-up{background:linear-gradient(180deg,rgba(80,220,255,.055),transparent 42%)!important}
.lane-down{background:linear-gradient(0deg,rgba(80,220,255,.055),transparent 42%)!important}
.lane-btn:active{color:rgba(255,229,138,.6)!important;background:rgba(255,229,138,.035)!important}

/* Title screen is a station platform, not a generic card. */
#screen-title{padding:0;background:linear-gradient(180deg,#071018 0 18%,#101a22 18% 72%,#05080b 72%);overflow:hidden}
#screen-title::before{content:'';position:absolute;left:0;right:0;bottom:23%;height:9px;background:#d2d7d4;box-shadow:0 -34px 0 #242d33,0 24px 0 #0d1114}
#screen-title::after{content:'PLATFORM 03   ◉ LAST LIGHT   00:47';position:absolute;left:7%;top:max(7%,env(safe-area-inset-top));padding:.5rem .85rem;background:var(--mm-paper);color:var(--mm-ink);font:900 .76rem/1 ui-monospace,monospace;letter-spacing:.12em;box-shadow:0 0 24px rgba(255,234,144,.2)}
#screen-title .title-card{position:absolute;inset:0;width:100%;max-width:none;max-height:none;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;text-align:left;overflow:hidden;display:block}
#screen-title .title-moth{position:absolute;left:7%;top:15%;font-size:clamp(2rem,5vw,3.2rem);filter:drop-shadow(0 0 14px rgba(255,229,138,.65));opacity:.9}
#screen-title .game-title{position:absolute;left:7%;top:24%;margin:0!important;color:#f7efb8!important;text-shadow:0 0 18px rgba(250,231,139,.28)!important;font:900 clamp(2.8rem,8vw,6rem)/.8 'Press Start 2P',ui-monospace,monospace!important;letter-spacing:-.035em!important;max-width:55%;text-align:left}
#screen-title .subtitle{position:absolute;left:7%;top:49%;width:min(42vw,500px);margin:0;color:#b4c1c9;font:800 clamp(.76rem,1.7vw,1rem)/1.45 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#screen-title .menu-buttons{position:absolute;right:6%;top:17%;width:min(31vw,350px);display:grid;grid-template-columns:1fr;gap:8px}
#screen-title .btn-pixel{min-height:52px;border-radius:0!important;border:1px solid #88969d!important;background:#19252d!important;color:#ecf1e8!important;box-shadow:inset 8px 0 0 var(--mm-paper)!important;text-align:left;padding:.65rem .9rem!important;font:900 .68rem/1.2 ui-monospace,monospace!important;letter-spacing:.08em;text-transform:uppercase}
#screen-title .btn-primary{min-height:76px;background:var(--mm-paper)!important;color:var(--mm-ink)!important;border-color:#f8f4d6!important;box-shadow:inset 8px 0 0 var(--mm-cyan),0 8px 0 #0b1014!important;font-size:.8rem!important}
#screen-title .btn-text{color:#b9c7ce!important;background:#111a20!important}
#screen-title .title-footer{position:absolute;left:7%;bottom:9%;width:min(42vw,520px);display:flex;justify-content:flex-start;gap:18px;align-items:center;color:#a8b3ba;font:800 .64rem/1 ui-monospace,monospace;letter-spacing:.08em;opacity:1}
#screen-title #btn-menu-mute{width:auto;min-height:36px!important;padding:.35rem .6rem!important;box-shadow:none!important}

/* The secondary screens use actual runtime .panel-card selectors. */
#screen-howto,#screen-pause,#screen-result{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto}
#screen-howto .panel-card,#screen-pause .panel-card,#screen-result .panel-card{width:min(92vw,620px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;border-radius:0!important;text-align:left!important;align-items:stretch!important;gap:14px!important}
#screen-howto .panel-card{background:#e7e3cf!important;color:#192229!important;border:0!important;border-top:10px solid #283640!important;box-shadow:0 14px 0 #10171c!important}
#screen-howto h2{color:#26343c!important;text-align:left!important}
#screen-howto .howto-list{color:#25343d!important}
#screen-howto .howto-list strong{color:#9c6812!important}
#screen-pause .panel-card{background:#151d22!important;color:#eef3eb!important;border:2px solid var(--mm-paper)!important;box-shadow:8px 8px 0 #080c0f!important}
#screen-pause h2{text-align:left!important;color:var(--mm-paper)!important}
#screen-result .panel-card{background:#e7e3cf!important;color:#192229!important;border:0!important;border-left:10px solid var(--mm-paper)!important;box-shadow:0 14px 0 #10171c!important}
#screen-result h2{color:#26343c!important;text-align:left!important}
#screen-result .results-score-val{color:#9a6811!important;text-align:left}
#screen-result .result-detail,#screen-result .result-best{color:#34434b!important;opacity:1!important}
#screen-result .nn-score-nudge{background:#d6d2bb!important;color:#26343c!important}
#screen-result .nn-nudge-later{color:#26343c!important;border-color:#59676e!important}

/* HUD should feel like station instrumentation rather than pills floating over play. */
.hud-chip,.glow-wrap,.pu-chip,.icon-btn{border-radius:2px!important;font-family:ui-monospace,monospace!important}
.hud-chip{background:rgba(7,14,20,.86)!important;border-color:rgba(143,232,255,.34)!important}
.glow-wrap{background:rgba(7,14,20,.86)!important;border-color:rgba(255,229,138,.48)!important}
.pu-chip{background:rgba(7,14,20,.9)!important;border-left:4px solid var(--mm-cyan)!important;border-top:1px solid rgba(143,232,255,.35)!important;border-right:1px solid rgba(143,232,255,.2)!important;border-bottom:1px solid rgba(143,232,255,.2)!important;letter-spacing:.06em}
.icon-btn{background:rgba(7,14,20,.9)!important;border-color:rgba(229,223,172,.42)!important}

@media(max-width:680px){
  #screen-title{overflow:auto;padding:max(64px,calc(env(safe-area-inset-top) + 58px)) 18px max(28px,env(safe-area-inset-bottom))}
  #screen-title::after{left:18px;top:max(18px,env(safe-area-inset-top));font-size:.57rem;padding:.42rem .55rem;letter-spacing:.07em}
  #screen-title::before{bottom:8%;opacity:.5}
  #screen-title .title-card{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:13px;width:100%;min-height:calc(100dvh - 110px);overflow:visible}
  #screen-title .title-moth,#screen-title .game-title,#screen-title .subtitle,#screen-title .menu-buttons,#screen-title .title-footer{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none}
  #screen-title .title-moth{font-size:2.2rem;margin-top:4px}
  #screen-title .game-title{font-size:clamp(2.15rem,10vw,3.65rem)!important;line-height:.95!important}
  #screen-title .subtitle{font-size:.72rem;max-width:80%;margin-bottom:4px}
  #screen-title .menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
  #screen-title .btn-pixel{min-height:45px!important;font-size:.58rem!important;padding:.55rem .6rem!important}
  #screen-title .btn-primary{grid-column:1/-1;min-height:58px!important;font-size:.7rem!important}
  #screen-title .title-footer{margin-top:4px;padding-bottom:8px}
  #screen-howto .panel-card,#screen-pause .panel-card,#screen-result .panel-card{width:100%;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px 16px!important}
  .howto-list{font-size:.78rem!important;gap:8px!important}
  .nn-nudge-btns{flex-wrap:wrap}
}

@media(max-height:500px) and (orientation:landscape){
  #screen-title{padding:12px 18px;overflow:hidden}
  #screen-title::after{left:18px;top:12px;font-size:.5rem}
  #screen-title::before{bottom:10%;opacity:.35}
  #screen-title .title-card{position:absolute;inset:0;display:grid;grid-template-columns:46% 1fr;grid-template-rows:auto auto 1fr auto;column-gap:20px;row-gap:6px;padding:52px 24px 14px;min-height:0}
  #screen-title .title-moth{grid-column:1;grid-row:1;font-size:1.5rem;margin:0}
  #screen-title .game-title{grid-column:1;grid-row:2;font-size:clamp(1.55rem,5vw,2.65rem)!important;align-self:start}
  #screen-title .subtitle{grid-column:1;grid-row:3;font-size:.6rem;max-width:100%;align-self:start}
  #screen-title .menu-buttons{grid-column:2;grid-row:1/5;align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
  #screen-title .btn-pixel{min-height:36px!important;font-size:.52rem!important;padding:.4rem .5rem!important}
  #screen-title .btn-primary{grid-column:1/-1;min-height:44px!important}
  #screen-title .title-footer{grid-column:1;grid-row:4;font-size:.52rem;padding:0;margin:0}
  #screen-howto .panel-card,#screen-pause .panel-card,#screen-result .panel-card{max-height:calc(100dvh - 16px);padding:12px 14px!important;gap:8px!important}
  #screen-pause .menu-buttons,#screen-result .menu-buttons{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
  #screen-pause .btn-pixel,#screen-result .btn-pixel{min-height:36px!important;padding:.4rem .55rem!important;font-size:.6rem!important}
  #screen-howto .howto-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.64rem!important;line-height:1.25!important}
}

@media(prefers-reduced-motion:reduce){
  .glow-fill.low{animation:none!important}
  .lane-btn,.btn-pixel,.icon-btn{transition:none!important}
}