/* Room pages: the host screen (TV or computer) and the phone. Builds on style.css. */

[hidden] { display: none !important; }
.muted { color: #8a93a3; }
.error { color: #ff7a6b; margin: 8px 0 0; }
.conn { margin-left: auto; color: #ffd166; font-size: 14px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #14171c;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}

.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #1d2128;
  border: 1px solid #2c323c;
  border-radius: 8px;
}
.player.away { opacity: 0.45; }
.player.you { border-color: #7cc4ff; }
.player-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bank { margin-left: auto; color: #ffd166; font-variant-numeric: tabular-nums; }

.countdown { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown.urgent { color: #ff7a6b; }

/* ---------- host ---------- */

.host-grid { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) 3fr; min-height: 0; }
.host-side { padding: 24px; border-right: 1px solid #2c323c; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.host-table { padding: 22px 30px; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }

.join-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr { width: 180px; height: 180px; flex-shrink: 0; background: #fff; border-radius: 8px; overflow: hidden; }
.qr svg { width: 100%; height: 100%; display: block; }
.join-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #8a93a3; margin-top: 6px; }
.join-url { font-size: 19px; color: #7cc4ff; margin-bottom: 6px; word-break: break-all; }
.room-code { font-size: 56px; font-weight: 800; letter-spacing: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.side-box { display: flex; flex-direction: column; gap: 6px; }
.side-label { font-size: 13px; color: #8a93a3; }
.side-row { display: flex; gap: 8px; }
.host select {
  font: inherit;
  font-size: 15px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #3a4250;
  background: #252a33;
  color: #e8e8e8;
  min-width: 0;
  flex: 1;
}

.round-row.big .round-label { font-size: 22px; }
.round-row.big .tier { font-size: 16px; padding: 5px 12px; }
.round-row.big .countdown { font-size: 72px; line-height: 1; }
.round-msg-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.round-msg { font-size: 24px; line-height: 1.35; flex: 1; min-width: 280px; }
.host-buttons { display: flex; gap: 12px; align-items: center; }
.host-buttons .primary { font-size: 20px; padding: 14px 28px; }
.host-footer { margin-top: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: #8a93a3; }
.small-link { color: #8a93a3; }

.table-area { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.seat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "avatar name bank" "avatar status status";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 14px;
  background: #1d2128;
  border: 1px solid #2c323c;
  border-left: 5px solid var(--seat-color);
  border-radius: 10px;
}
.seat .avatar { grid-area: avatar; width: 48px; height: 48px; font-size: 22px; }
.seat-name { grid-area: name; font-size: 21px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-bank { grid-area: bank; font-size: 21px; color: #ffd166; font-variant-numeric: tabular-nums; }
.seat-status { grid-area: status; font-size: 16px; color: #aab2c0; min-height: 1.4em; }
.seat-status.thinking { animation: pulse 1.4s ease-in-out infinite; }
.seat-status.locked { color: #7cc4ff; font-weight: 700; }
.seat-status .refund { color: #ffd166; }
.seat.away { opacity: 0.45; }
.seat.won { background: #173d26; border-color: #2f9e5a; border-left-color: var(--seat-color); }
.seat.lost { background: #45201d; border-color: #c4473a; border-left-color: var(--seat-color); }
.seat-empty { font-size: 18px; padding: 12px 0; }
@keyframes pulse { 50% { opacity: 0.35; } }

.reveal-map-wrap { flex: 1; min-height: 320px; position: relative; border-radius: 10px; overflow: hidden; }
#reveal-map { position: absolute; inset: 0; }

@media (max-width: 900px) {
  .host-grid { grid-template-columns: 1fr; }
  .host-side { border-right: none; border-bottom: 1px solid #2c323c; }
}

/* ---------- phone ---------- */

/* Portrait-first: panorama on top, map below, stakes / Pass / Confirm in the thumb zone. */
body.phone { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.join-screen { padding: 32px 20px; gap: 20px; max-width: 420px; width: 100%; margin: 0 auto; overflow-y: auto; }
.join-screen h1 { margin: 0; font-size: 28px; }
#join-form { display: flex; flex-direction: column; gap: 16px; }
#join-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #aab2c0; }
#join-form input {
  font: inherit;
  font-size: 22px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #3a4250;
  background: #1d2128;
  color: #e8e8e8;
}
#code { letter-spacing: 8px; text-transform: uppercase; font-weight: 700; }
#join-form .primary { font-size: 20px; padding: 14px; }
.small-print { font-size: 13px; margin: 0; }
.small-print a { color: #7cc4ff; }

.inapp { background: #3a2f12; border: 1px solid #ffd166; border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
.inapp p { margin: 8px 0; }
.inapp-title { font-weight: 700; font-size: 17px; color: #ffd166; }
.inapp-code { font-size: 48px; font-weight: 800; letter-spacing: 10px; text-align: center; margin: 4px 0 8px; }

.phone-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: #1d2128;
  border-bottom: 1px solid #2c323c;
  font-size: 15px;
  flex-shrink: 0;
}
.phone-bar .me { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.phone-bar .timer { font-size: 15px; }
.phone-bar .countdown { margin-left: 0; font-size: 20px; min-width: 3ch; text-align: right; }
.conn-banner { background: #45201d; color: #ffd1cb; text-align: center; padding: 6px; font-size: 14px; flex-shrink: 0; }

.game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pane { position: relative; background: #000; overflow: hidden; min-height: 0; }
.pano-pane { flex: 1 1 44%; }
.map-pane { flex: 1 1 36%; border-top: 2px solid #14171c; background: #1d2128; }
.pane #pano, .pane #map { position: absolute; inset: 0; }
.game.revealed .pano-pane { display: none; }
.game.revealed .map-pane { flex: 1 1 auto; border-top: none; }

.fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: rgba(20, 23, 28, 0.78);
  border-color: rgba(255, 255, 255, 0.25);
}
.map-tools { position: absolute; left: 8px; bottom: 30px; z-index: 5; display: flex; gap: 6px; }
.map-tools .mode { padding: 10px 12px; background: rgba(37, 42, 51, 0.92); }
.map-tools .mode.active { background: #7cc4ff; color: #14171c; border-color: #7cc4ff; }
.game.revealed .map-tools { display: none; }
.drag-radius {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-weight: 700;
  color: #7cc4ff;
  background: rgba(20, 23, 28, 0.85);
  padding: 4px 10px;
  border-radius: 6px;
  pointer-events: none;
}
.drag-radius:empty { display: none; }

/* A pane blown up to the whole screen (⛶). */
.pane.expanded { position: fixed; inset: 0; z-index: 1000; flex: none; border: none; }
.pane.expanded .fs-btn { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }

.dock {
  flex-shrink: 0;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #1d2128;
  border-top: 1px solid #2c323c;
  max-height: 55%;
  overflow-y: auto;
}
.controls { display: flex; flex-direction: column; gap: 8px; }
.controls .seen-note { margin: 0; font-size: 13px; }
.controls .circle-info { padding: 8px 10px; font-size: 14px; background: #14171c; min-height: 2.6em; }
#stakes.stakes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stakes .stake { padding: 8px 0; font-size: 17px; font-weight: 600; }
.stakes .stake small { display: block; font-size: 11px; font-weight: 400; opacity: 0.7; }
.controls .bet-buttons { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.controls .bet-buttons button { padding: 14px 8px; font-size: 18px; }
.controls .ante-note { margin: 0; font-size: 12px; }
.locked { padding: 6px 2px; font-size: 16px; line-height: 1.55; }
.locked b { color: #ffd166; }
.phone #result { padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.phone #result h2 { font-size: 21px; margin: 0 0 2px; }
.result-loc { font-weight: 600; margin-bottom: 6px; }
.result .refund { margin-top: 6px; color: #ffd166; }
.result .next { margin-top: 8px; font-size: 13px; }

.wait { flex: 1; padding: 28px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wait-title { font-size: 26px; font-weight: 700; }
.players.compact .player { padding: 6px 10px; }
.wait #leave { align-self: flex-start; margin-top: auto; }

/* Phone turned sideways without going full screen: panorama | map | controls. */
@media (orientation: landscape) and (max-height: 520px) {
  .game { display: grid; grid-template-columns: 1fr 1fr minmax(240px, 300px); grid-template-rows: minmax(0, 1fr); }
  .map-pane { border-top: none; border-left: 2px solid #14171c; }
  .game.revealed .map-pane { grid-column: 1 / 3; }
  .dock { max-height: none; border-top: none; border-left: 1px solid #2c323c; }
}