/* "Wie wollt ihr spielen?" and the lobby of "Handy als Controller" (couch.js, couch-view.js; Alex 21.10.). Same parts as the rest of
   the menu (menu.css): glass, light lanes, points of light in the players' colours. Sized for a TV across the room (1080p raster). */
body[data-screen="howPlay"] #howplay,
body[data-screen="couch"] #couch {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}

/* ---------- the question: three big choices side by side ---------- */
#howplay { display: flex; flex-direction: column; justify-content: center; padding: 0 4vw; }
#howplay .eyebrow { margin-bottom: calc(var(--u) * 14); }
#howplay-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 30); }
.how-tile {
  display: grid; align-content: start; gap: calc(var(--u) * 12);
  min-height: calc(var(--u) * 300); padding: calc(var(--u) * 40) calc(var(--u) * 36);
  color: var(--milk-2); background: var(--glass); border-radius: calc(var(--u) * 30); cursor: pointer;
  transition: transform 460ms var(--spring), color var(--t-focus) var(--ease), background var(--t-focus) var(--ease), box-shadow var(--t-focus) var(--ease);
}
.how-tile svg { width: calc(var(--u) * 76); height: calc(var(--u) * 76); color: var(--milk); margin-bottom: calc(var(--u) * 14); }
.how-tile b { font: 600 calc(var(--u) * 40)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--milk); }
.how-tile span { font-size: calc(var(--u) * 26); line-height: 1.3; }
.how-phone svg { color: var(--sun); }
.how-tile.is-focus { background: var(--milk); color: rgba(7, 8, 12, .72); transform: scale(1.03); box-shadow: 0 0 calc(var(--u) * 60) rgba(255, 199, 107, .25); }
.how-tile.is-focus b, .how-tile.is-focus svg { color: var(--ink); }
#howplay-back { width: min(100%, calc(var(--u) * 520)); }
@media (hover: hover) { .how-tile:not(.is-focus):hover { background: rgba(43, 44, 50, .9); } }

/* ---------- the lobby: QR code on the left, the players on the right ---------- */
#couch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6vw; align-items: center; padding: 0 4vw; }
#couch-qr-side { display: grid; justify-items: center; gap: calc(var(--u) * 14); }
#couch-qr { width: min(38vh, 34vw); height: min(38vh, 34vw); padding: calc(var(--u) * 22); background: var(--milk); border-radius: calc(var(--u) * 26);
  box-shadow: 0 0 calc(var(--u) * 80) rgba(255, 199, 107, .22); }
#couch-qr path { fill: var(--ink); }
#couch-qr-side.no-qr #couch-qr { display: none; }
#couch-code { font: 600 calc(var(--u) * 46)/1 var(--font-display); letter-spacing: .08em; color: var(--milk); white-space: nowrap; }
#couch-addr, #couch-timer { font-size: calc(var(--u) * 24); color: var(--milk-dim); text-align: center; max-width: 34vw; }
#couch-info .title { margin-bottom: calc(var(--u) * 16); }
#couch-status { font-size: calc(var(--u) * 30); line-height: 1.35; color: var(--milk-2); max-width: 36em; margin-bottom: calc(var(--u) * 28); }
#couch[data-phase="error"] #couch-status { color: var(--ember); }
#couch[data-phase="full"] #couch-status { color: var(--aurora); }
#couch-seats { display: grid; gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 30); }
.couch-seat { --seat: var(--milk); display: flex; align-items: center; gap: calc(var(--u) * 20); font-size: calc(var(--u) * 30); color: var(--milk-dim); }
.couch-seat b { font: 600 calc(var(--u) * 34)/1 var(--font-display); color: var(--milk); min-width: 7.5em; }
.couch-dot { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: 2px solid var(--seat); flex: none;
  transition: background var(--t-focus) var(--ease), box-shadow var(--t-focus) var(--ease); }
.couch-seat.is-on .couch-dot { background: var(--seat); box-shadow: 0 0 calc(var(--u) * 24) var(--seat); }
.couch-seat.is-on span { color: var(--milk); }
.couch-seat.is-away span { color: var(--ember); }
.couch-seat.is-free .couch-dot { animation: couch-wait 1.8s ease-in-out infinite; }
@keyframes couch-wait { 50% { box-shadow: 0 0 calc(var(--u) * 18) var(--seat); } }
#couch-choices { width: min(100%, calc(var(--u) * 560)); }
#couch-hint { min-height: 1.3em; margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 24); color: var(--milk-dim); }

/* A phone (finger only) never reaches these screens (couch.js), but a narrow window still fits. */
@media (max-width: 900px) {
  #howplay-choices { grid-template-columns: 1fr; }
  .how-tile { min-height: 0; }
  #couch { grid-template-columns: 1fr; overflow-y: auto; align-items: start; padding-top: 4vh; }
  #couch-qr { width: min(60vw, 40vh); height: min(60vw, 40vh); }
  #couch-addr, #couch-timer { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .couch-seat.is-free .couch-dot { animation: none; } }