/* The 3D view behind the phone controller (body.has3d once the game draws). The panel turns
   into a compact card at the top so the game shows through; results and the final stay big. */

#game3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; touch-action: none; background: #0b3a22; }
body:not(.has3d) #game3d { visibility: hidden; }

#load3d {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  background: rgba(7, 38, 23, 0.85); color: var(--snow); font-size: 0.85rem; pointer-events: none;
}
.l3-bar { width: 90px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.l3-bar i { display: block; height: 100%; width: 3%; background: var(--gold); transition: width 0.3s; }

body.has3d { background: #0b3a22; }
body.has3d .snowfall { display: none; }
body.has3d #topbar { background: linear-gradient(rgba(5, 25, 15, 0.55), rgba(5, 25, 15, 0)); }

/* The phase panel: a small card at the top while you play. */
body.has3d #panel { justify-content: flex-start; padding-top: 2px; pointer-events: none; }
body.has3d #panel :is(button, label, a, .scroll, .emote) { pointer-events: auto; }
body.has3d #panel > * {
  background: rgba(5, 25, 15, 0.62);
  border-radius: 22px;
  padding: 10px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.has3d .lobby .figure { display: none; }
body.has3d .big-title { font-size: 1.3rem; }
body.has3d .lobby .sub, body.has3d .desc { font-size: 0.92rem; }
body.has3d[data-phase='playing'] #panel > * { padding: 6px 14px; }
body.has3d .timer { font-size: 1.8rem; }

/* Results and the final: the board needs the room, darken the game behind it. */
body.has3d[data-phase='results'] #panel, body.has3d[data-phase='final'] #panel { pointer-events: auto; }
body.has3d[data-phase='results'] #panel > *, body.has3d[data-phase='final'] #panel > * { background: rgba(5, 25, 15, 0.86); }

/* The controller floats over the game. */
body.has3d #controller { background: none; }
body.has3d .zone-label { opacity: 0.55; }
body.has3d #stick.idle { opacity: 0.35; }

@media (orientation: portrait) {
  /* In portrait the game fills the screen above the thumbs; the controller zone is see-through. */
  body.has3d #scr-main { grid-template-rows: auto minmax(0, 1fr) 38%; }
  /* No thumbs on the final screen: the standings take the room, so the top 3 and your own row fit. */
  body.has3d[data-phase='final'] #scr-main { grid-template-rows: auto minmax(0, 1fr) 10%; }
}
@media (orientation: portrait) and (max-height: 720px) {
  body.has3d .final .avatar.huge { --s: 80px; }
}
@media (orientation: portrait) and (max-height: 660px) {
  body.has3d .final .winner { padding-top: 22px; }
  body.has3d .final .winner .crown { width: 58px; }
  body.has3d .final .avatar.huge { --s: 60px; }
}