/* OUT mobile performance + start-screen profile */

@media (max-width:760px){
  html,body{background:#030711}
  body{overflow-x:hidden}

  /* The phone start/result view is its own full viewport instead of a tall card
     overflowing the square game board. */
  .overlay{
    position:fixed!important;
    inset:0!important;
    width:100vw;
    height:100dvh;
    border-radius:0!important;
    padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    align-items:center!important;
    background:linear-gradient(180deg,rgba(3,7,17,.95),rgba(2,5,12,.92))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .overlay-card{
    width:min(100%,430px)!important;
    max-width:430px!important;
    margin:auto;
    padding:4px 0;
  }
  .overlay-kicker{font-size:7px!important;line-height:1.35;margin:0 0 5px!important;letter-spacing:.16em!important}
  .overlay h2{font-size:clamp(28px,8.8vw,39px)!important;line-height:1.02!important;margin:0 0 8px!important}
  .overlay p{font-size:10.5px!important;line-height:1.48!important;margin:7px auto!important;max-width:390px}
  .rule-chips{gap:4px!important;margin:8px 0!important}
  .rule-chips span{font-size:7.5px!important;padding:5px 7px!important}
  .audio-picker{margin:7px auto 3px!important}
  #audioStatus{font-size:8px!important;line-height:1.4}
  .character-strip{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    max-width:380px!important;
    margin:9px auto!important;
  }
  .character-chip{border-width:1px!important;border-radius:8px!important;box-shadow:none!important}
  .character-chip span{display:none!important}
  .overlay-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:9px!important}
  .overlay-actions .button{min-width:0!important;padding:10px 7px!important;font-size:9px!important}
  .result-grid{gap:5px!important;margin:8px 0!important}
  .result-item{padding:7px!important}
  .result-item b{font-size:15px!important}

  /* Mobile MV: do not render a 16:9 iframe at portrait-screen cover size
     (which can become several thousand CSS pixels wide). Keep it around the
     board area and fade its edges instead. */
  .cinema-video-shell{
    inset:0!important;
    overflow:hidden!important;
    transform:none!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 20%,#000 78%,transparent 97%);
    mask-image:linear-gradient(to bottom,transparent 3%,#000 20%,#000 78%,transparent 97%);
  }
  .yt-background{
    top:46%!important;
    left:50%!important;
    width:138vw!important;
    height:77.625vw!important;
    min-width:0!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
    /* Full-screen CSS blur on a live iframe is one of the largest mobile costs. */
    filter:brightness(.74) saturate(1.18) contrast(1.02)!important;
    opacity:clamp(.42,calc(var(--mv-opacity) + .34),.78)!important;
    transition:opacity .18s linear!important;
  }

  /* Replace expensive continuous layers with static/lightweight equivalents. */
  .arena-canvas,.cinema-grain,.cinema-lasers{display:none!important}
  .cinema-aurora{animation:none!important;filter:none!important;opacity:.18!important;background:radial-gradient(circle at 50% 44%,rgba(63,167,255,.17),transparent 48%)!important}
  .ambient,.mountains{display:none!important}

  .music-deck,.message-row,.stat-card,.controls .button,.board-wrap,.audio-mixer{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .music-deck,.message-row,.stat-card,.controls .button{background:rgba(5,13,25,.84)!important}
  .board-wrap{background:rgba(3,9,20,.20)!important;box-shadow:0 14px 34px rgba(0,0,0,.34)!important}
  .board{box-shadow:inset 0 0 20px rgba(0,0,0,.22)!important}
  .board:before{display:none!important}
  .piece{filter:drop-shadow(0 4px 5px rgba(0,0,0,.44))!important;transition:top .145s cubic-bezier(.18,.84,.2,1),left .145s cubic-bezier(.18,.84,.2,1),opacity .12s,transform .12s!important}
  .piece:hover{filter:drop-shadow(0 4px 5px rgba(0,0,0,.44))!important}
  .game-header h1:after{animation:none!important}

  /* Normal portrait page before fullscreen. */
  .game-shell{padding:9px 8px 16px!important}
  .game-header{gap:8px!important;margin-bottom:7px!important}
  .eyebrow{font-size:6.5px!important;line-height:1.35;max-width:165px}
  h1{font-size:clamp(42px,14vw,62px)!important}
  .song-name{font-size:9px!important;margin-top:5px!important}
  .score-stack{min-width:105px!important}
  .score-stack>strong{font-size:24px!important}
  .music-deck{padding:7px 8px!important;margin-bottom:6px!important}
  .music-meta{font-size:8px!important;margin-bottom:5px!important}
  .stage-track{gap:2px!important;margin-top:5px!important}
  .stage-pip{height:17px!important;font-size:7px!important}
  .live-stats{gap:4px!important}
  .stat-card{min-height:42px!important;padding:5px!important}
  .message-row{padding:7px!important;margin-top:5px!important}
  .message-row p{font-size:9px!important}
  .controls{gap:4px!important;margin-top:5px!important}
  footer{display:none!important}
}

@media (max-width:390px){
  .overlay{padding-left:10px!important;padding-right:10px!important}
  .overlay h2{font-size:29px!important}
  .overlay p{font-size:9.7px!important}
  .rule-chips span{font-size:7px!important;padding:4px 6px!important}
  .overlay-actions .button{font-size:8px!important}
}

/* Fullscreen phone layout: leave the OS safe area and never allow a control row
   or the four stat cards to push beneath the viewport. */
@media (max-width:760px){
  html:fullscreen .game-shell,
  html:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100vw - 12px),calc(100dvh - 205px),590px)!important;
    padding:max(4px,env(safe-area-inset-top)) 6px max(4px,env(safe-area-inset-bottom))!important;
    gap:3px!important;
  }
  html:fullscreen .game-header,
  html:-webkit-full-screen .game-header{display:none!important}
  html:fullscreen .music-deck,
  html:-webkit-full-screen .music-deck{padding:4px 6px!important}
  html:fullscreen .music-meta,
  html:-webkit-full-screen .music-meta{font-size:7px!important;margin-bottom:2px!important}
  html:fullscreen .stage-pip,
  html:-webkit-full-screen .stage-pip{height:12px!important;font-size:6px!important}
  html:fullscreen .playfield,
  html:-webkit-full-screen .playfield{grid-template-rows:minmax(0,1fr) auto!important;gap:3px!important}
  html:fullscreen .live-stats,
  html:-webkit-full-screen .live-stats{gap:3px!important}
  html:fullscreen .stat-card,
  html:-webkit-full-screen .stat-card{min-height:29px!important;padding:3px 4px!important}
  html:fullscreen .message-row,
  html:-webkit-full-screen .message-row{display:none!important}
  html:fullscreen .controls,
  html:-webkit-full-screen .controls{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}
  html:fullscreen .controls .button,
  html:-webkit-full-screen .controls .button{padding:5px 2px!important;font-size:7px!important}
}