/* The desktop demo uses a real phone-sized layout, enlarged to the available height.
   Game logic sees 390 × 780, so a tall desktop cannot trigger an unrelated game layout. */
#player{width:100vw;height:100dvh;margin:0;inset:0;border-radius:0;max-width:none;max-height:none;background:#102c24;box-shadow:none;overflow:auto;padding:16px 24px}
#player[open]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:48px}
.player-shell{width:var(--game-width,390px);height:calc(var(--game-height,780px) + 48px);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;box-shadow:0 22px 90px #0005;background:var(--scene,#183d32)}
.player-shell .player-stage{flex:none;height:var(--game-height,780px);width:100%;overflow:hidden}
#frame-wrap{position:absolute;inset:0;overflow:hidden}
#frame-wrap iframe{width:390px;height:780px;max-width:none;transform:scale(var(--game-scale,1));transform-origin:0 0}
.player-footer{flex:none;height:48px}
.player-phone{width:216px;flex:none;align-self:center;color:var(--paper)}
.player-phone .phone-kicker{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--butter);margin:0 0 12px}
.player-phone h2{font:800 32px/1.04 Bricolage,sans-serif;letter-spacing:-1px;margin:0 0 16px}
.player-phone>p{font-size:15px;line-height:1.5;color:#c8d1c9;margin:0 0 20px}
.phone-qr{display:block;width:200px;height:200px;padding:8px;background:#fff;border-radius:12px;margin-bottom:16px;box-shadow:0 10px 30px #0002}
.phone-qr img{width:100%;height:100%;display:block}
#phone-game{display:block;font-size:16px;font-weight:600;color:var(--paper);margin-bottom:6px}
.player-phone .phone-note{font-size:12px;line-height:1.5;color:#a5b9af;margin:0 0 20px}
.phone-copy{display:flex;align-items:center;justify-content:space-between;width:200px;min-height:44px;padding:10px 14px;border:1px solid #f8f3e74d;border-radius:8px;color:var(--paper);background:transparent;font:600 14px DM,sans-serif;cursor:pointer}
.phone-copy:hover{background:#ffffff0d}.phone-copy:active{translate:0 2px}.phone-copy:focus-visible{outline:2px solid var(--butter);outline-offset:4px}
.phone-status{font-size:12px;min-height:2.8em;margin-top:10px;color:#c8d1c9}
@media(max-width:899px){.player-phone{display:none}#player[open]{gap:0}}
@media(max-width:599px){
  #player{padding:0;overflow:hidden}
  #player[open]{display:block}
  .player-shell{width:100%;height:100dvh;border-radius:0;box-shadow:none}
  .player-shell .player-stage{flex:1;min-height:0;height:auto}
  #frame-wrap iframe{width:100%;height:100%;transform:none}
  .player-footer{height:calc(44px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
}

.picker-scroll-hint{position:absolute;z-index:21;left:18px;right:18px;display:block;padding:5px 8px;text-align:center;pointer-events:none;background:var(--forest);color:var(--paper);border-radius:16px;box-shadow:0 -8px 18px var(--paper);font-size:11px;line-height:18px}