/* ---------------------------------------------------------------
   Big 2 — visual system
   Table: deep felt green. Cards: warm ivory. Accents: brass + red.
   Type: a single geometric sans, tightly set, all lowercase for chrome.
----------------------------------------------------------------*/
:root{
  --felt:#0f2a22;
  --felt-2:#123528;
  --ivory:#f7f3e8;
  --ink:#1b1b1b;
  --brass:#c9a24b;
  --red:#c0392b;
  --diamond:#c0392b;
  --heart:#c0392b;
  --spade:#1b1b1b;
  --club:#1b1b1b;
  --muted:rgba(247,243,232,.5);
  --line:rgba(247,243,232,.14);
  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* dynamic viewport unit fallback */
  --vh: 1vh;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--felt);
  background:radial-gradient(120% 100% at 50% 0%, var(--felt-2), var(--felt) 70%);
  color:var(--ivory);
  font-family:var(--font);
  overflow:hidden;
}

.view{
  position:fixed; inset:0;
  height:100vh; height:calc(var(--vh)*100);
  width:100vw;
}
/* The hidden attribute must win over the display rules below
   (display:flex on .view--center / .view--game would otherwise keep
   hidden views visible, stacking every screen on top of each other). */
.view[hidden]{ display:none !important; }
.view--center{
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

/* ---- gates (password / name) ---- */
.gate{ width:100%; max-width:320px; text-align:center; }
.gate__input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ivory);
  font-family:var(--font);
  font-size:20px;
  letter-spacing:.02em;
  text-align:center;
  padding:12px 4px;
  outline:none;
}
.gate__input::placeholder{ color:var(--muted); }
.gate__input:focus{ border-bottom-color:var(--brass); }
.gate__error{ color:var(--red); font-size:14px; margin:16px 0 0; }
.gate__hint{ color:var(--muted); font-size:14px; margin:12px 0 0; }

/* ---- waiting (table full) ---- */
.waiting{ text-align:center; max-width:320px; }
.waiting__title{ font-size:20px; letter-spacing:.02em; margin:0 0 12px; }
.waiting__sub{ font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 24px; }
.waiting__dots{ display:flex; gap:8px; justify-content:center; }
.waiting__dots span{
  width:8px; height:8px; border-radius:50%; background:var(--brass);
  opacity:.3; animation:waitPulse 1.4s ease-in-out infinite;
}
.waiting__dots span:nth-child(2){ animation-delay:.2s; }
.waiting__dots span:nth-child(3){ animation-delay:.4s; }
@keyframes waitPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .waiting__dots span{ animation:none; } }

/* ---- lobby ---- */
#view-lobby{ display:flex; flex-direction:column; }
.lobby{ flex:1; display:flex; flex-direction:column; }
.slot{
  height:20vh; height:calc(var(--vh)*20);
  width:100%;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  font-size:clamp(18px,5vw,28px);
  letter-spacing:.02em;
  transition:background .3s ease;
}
.slot--filled{ background:rgba(201,162,75,.08); }
.slot--filled .slot__text{ color:var(--ivory); font-weight:600; }
.slot--self{ background:rgba(201,162,75,.16); }
.slot--waiting .slot__text{ color:var(--muted); font-style:normal; }
.slot__status{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-left:10px; vertical-align:middle;
  background:#3fb27f;
}
.slot__status--off{ background:var(--red); }
.link{
  display:block; text-align:center; padding:18px;
  color:var(--brass); text-decoration:none; letter-spacing:.04em;
  font-size:16px;
}
.link:active{ opacity:.6; }

/* ---- records ---- */
.records{ height:100%; overflow:auto; padding:32px 20px; }
.records__title{ font-weight:600; font-size:22px; letter-spacing:.06em; text-align:center; margin:0 0 24px; }
.records__list{ max-width:520px; margin:0 auto; }
.record{
  border:1px solid var(--line); border-radius:10px;
  padding:16px; margin-bottom:14px;
}
.record__meta{ color:var(--muted); font-size:13px; margin-bottom:10px; }
.record__row{ display:flex; justify-content:space-between; font-size:15px; padding:3px 0; }
.records__empty{ color:var(--muted); text-align:center; padding:40px 0; }

/* ---- game ---- */
.view--game{ display:flex; flex-direction:column; }
/* game view: a main row (play area + status column) above the hand bar */
.game-main{
  flex:1 1 auto;
  display:flex; flex-direction:row;
  min-height:0; overflow:hidden;
}

/* played-cards area on the LEFT, grows to fill remaining width */
.play-area{
  flex:1 1 auto;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:6px; padding:10px 12px;
  min-width:0;
}
.move{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ivory);
  opacity:.9;
}
.move--faded{ opacity:.45; }
.move__label{ flex:0 0 130px; white-space:nowrap; }  /* fixed-width label so cards line up; wide enough for "android passes." */
.move__cards{ display:flex; gap:3px; }

/* status column on the RIGHT: names at the top, countdown at the bottom */
.status-bar{
  flex:0 0 auto;
  width:clamp(230px, 26%, 340px);
  padding:10px 12px;
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
.status-names{
  display:flex; flex-direction:column; justify-content:flex-start; gap:10px;
}
.status-timer{
  text-align:center;
  font-size:clamp(20px,6vw,32px);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  padding-bottom:6px;
  min-height:1em;
}
.status-timer--urgent{ color:var(--red); }
.status-row{
  display:flex; align-items:center; flex-wrap:nowrap; gap:6px;
  font-size:clamp(12px,3.2vw,15px);
  line-height:1.3;
  white-space:nowrap;
}
.status-row__dot{
  width:7px; height:7px; border-radius:50%; background:#3fb27f; flex:0 0 auto;
}
.status-row__dot--off{ background:var(--red); }
.status-row__name{ font-weight:600; }
.status-row__count--last{ color:var(--red); font-weight:700; }
.status-row__msg{ color:var(--brass); white-space:nowrap; }
.status-row--turn{ color:var(--ivory); }

.hand-bar{
  flex:0 0 auto;
  height:clamp(110px, 34vh, 200px);
  display:flex; align-items:flex-end; gap:12px;
  padding:20px 10px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  overflow:visible;
}
/* spectator mode: no hand, no controls, just a quiet label */
.view--game.spectating .hand-bar{ display:none; }
.view--game.spectating .play-area{ padding-bottom:16px; }
.view--game.spectating::after{
  content:"watching";
  position:absolute; left:0; right:0; bottom:0;
  text-align:center; padding:10px;
  font-size:13px; letter-spacing:.08em; color:var(--muted);
  border-top:1px solid var(--line);
  background:var(--felt);
}
.hand{
  flex:1 1 auto;
  display:flex; justify-content:flex-start; align-items:flex-end;
  min-height:0; min-width:0;
}
/* stacked controls on the right: pass on top (aligned with the cards' top
   edge), send at the bottom. This column has a fixed width so the hand can
   never cover it, and a high z-index so a lifted card stays behind it. */
.controls{
  flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:stretch;
  position:relative; z-index:200;
  /* height is set from JS to match the card height so pass sits at the top
     edge of the cards; fallback to full bar height */
  align-self:flex-end;
}
.ctrl{
  flex:0 0 auto;
  background:transparent;
  border:1px solid var(--brass);
  color:var(--brass);
  border-radius:8px;
  padding:9px 18px;
  font-family:var(--font); font-size:15px; letter-spacing:.03em;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
}
.ctrl--pass{ background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
.ctrl--send{ background:var(--brass); color:var(--felt); font-weight:600; border-color:var(--brass); }
.ctrl:disabled{ opacity:.35; cursor:not-allowed; }
.ctrl:not(:disabled):active{ transform:translateY(1px); }

/* ---- playing card ----
   Cards keep a fixed 2.5:3.5 aspect ratio (real playing-card proportions).
   Their HEIGHT is driven by the hand bar; width follows from the ratio. The
   hand uses negative margins (set from JS) to overlap cards when 13 of them
   would otherwise push the send button off-screen. */
.card{
  position:relative;
  background:var(--ivory);
  border-radius:6px;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:4px 3px;
  user-select:none;
  transition:transform .12s ease;
  box-sizing:border-box;
  overflow:hidden;
}
/* hand cards: width and height are set explicitly by JS (fixed 2.5:3.5 ratio,
   with overlap only when needed). No CSS size here to avoid conflicts. */
.hand .card{
  cursor:pointer;
  flex:0 0 auto;
}
.hand .card--selected{ transform:translateY(-14px); box-shadow:0 6px 10px rgba(0,0,0,.4); z-index:100 !important; }

/* played cards in the play area: width and height are set explicitly by JS */
.move .card{ flex:0 0 auto; }

.card__corner{ font-weight:700; line-height:1; position:relative; z-index:1; }
.hand .card__corner{ font-size:17px; }
.move .card__corner{ font-size:11px; }
.card__corner--tl{ text-align:left; align-self:flex-start; }
.card__corner--br{ text-align:left; transform:rotate(180deg); align-self:flex-end; }
/* Center pip absolutely centered so it can't push the bottom corner out of the
   card (which overflow:hidden would then clip) and stays inside on Safari. */
.card__pip{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  line-height:1; text-align:center;
}
.hand .card__pip{ font-size:34px; }
.move .card__pip{ font-size:18px; }
.card--red{ color:var(--diamond); }
.card--black{ color:var(--spade); }

/* ---- results ---- */
.result{ height:100%; overflow:auto; padding:32px 20px; max-width:520px; margin:0 auto; }
.result__title{ font-weight:600; letter-spacing:.05em; margin:24px 0 12px; font-size:20px; }
.result__title:first-child{ margin-top:0; }
.result__block{ font-size:16px; }
.result__line{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line); }
.result__line span:last-child{ font-variant-numeric:tabular-nums; }
.pos{ color:#3fb27f; }
.neg{ color:var(--red); }
.result__countdown{ text-align:center; color:var(--muted); margin-top:28px; font-size:15px; }

/* ---- game over ---- */
.over{ height:100%; overflow:auto; padding:40px 20px; max-width:520px; margin:0 auto; text-align:center; }
.over__title{ font-size:22px; font-weight:600; margin:0 0 24px; }
.over__stats{ text-align:left; }
.over__stat{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:15px; }

/* desktop niceties */
@media (min-width:768px){
  .view--center .gate{ max-width:360px; }
  .lobby{ max-width:700px; margin:0 auto; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ---- rotate-to-landscape gate ----
   True orientation lock is impossible on iOS Safari, so instead we cover the
   app with a prompt whenever a touch device is held in portrait. The prompt
   disappears the moment the device is turned to landscape. Non-touch / wide
   screens never see it. */
#rotate-gate{
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background:var(--felt);
  background:radial-gradient(120% 100% at 50% 0%, var(--felt-2), var(--felt) 70%);
  text-align:center; padding:32px;
}
#rotate-gate .rotate__icon{
  font-size:56px; line-height:1; margin-bottom:20px;
  display:inline-block;
  animation:rotateHint 2s ease-in-out infinite;
}
#rotate-gate .rotate__text{
  font-size:18px; letter-spacing:.02em; color:var(--ivory);
}
#rotate-gate .rotate__sub{
  font-size:14px; color:var(--muted); margin-top:8px;
}
@keyframes rotateHint{
  0%,40%{ transform:rotate(0deg); }
  60%,100%{ transform:rotate(-90deg); }
}
@media (prefers-reduced-motion:reduce){
  #rotate-gate .rotate__icon{ animation:none; }
}

/* Show the gate only on touch-capable devices held in portrait.
   The (pointer:coarse) test keeps desktops (even narrow windows) unaffected. */
@media (orientation:portrait) and (pointer:coarse){
  body.rotate-lock #rotate-gate{ display:flex; }
}