:root {
  --void: #050808;
  --panel: #0b1111;
  --panel-2: #101818;
  --line: #40e0d0;
  --line-soft: rgba(64, 224, 208, 0.34);
  --text: #efffff;
  --muted: #9eb7b5;
  --danger: #ff7b7b;
  --card-w: clamp(61px, 16.3vw, 112px);
  --card-h: calc(var(--card-w) * 1.52);
  --atlas: url("https://steamusercontent-a.akamaihd.net/ugc/16962330058946320214/9D6B9E212C3A05B29EE16902385DFB9C1A6ACB10/");
  --card-back: url("https://steamusercontent-a.akamaihd.net/ugc/11349435778946611867/90CACD8B331C13BFDDF911107F71A5482E63C963/");
  --board: url("https://steamusercontent-a.akamaihd.net/ugc/13136215952402860334/2FB0EEDC8572140F74B0F5F46D5C8DF2252FEE3B/");
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--void); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(64, 224, 208, 0.14), transparent 48%),
    linear-gradient(180deg, #071010, #030505 70%);
  overscroll-behavior: none;
}
button, input { font: inherit; }
button { touch-action: manipulation; }
.hidden { display: none !important; }
.screen { width: min(100%, 980px); min-height: 100dvh; margin: 0 auto; }

.landing-screen {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: max(22px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));
}
.brand-panel, .join-card, .rules-card, .lobby-panel, .finish-panel {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(16, 25, 25, 0.94), rgba(5, 9, 9, 0.96));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255,255,255,0.025);
}
.brand-panel { padding: 30px 22px; text-align: center; }
.eyebrow { color: var(--line); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.19em; }
h1 { margin: 9px 0 6px; color: var(--line); font-size: clamp(3rem, 15vw, 6.4rem); line-height: 0.82; letter-spacing: -0.055em; }
.motto { margin: 14px 0 0; color: #d9fdf9; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.08em; }
.join-card { display: grid; gap: 9px; padding: 20px; }
label { color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid #2a4745; border-radius: 10px;
  color: var(--text); background: #050909; outline: none;
}
input:focus { border-color: var(--line); box-shadow: 0 0 0 3px rgba(64,224,208,0.12); }
.code-input { text-align: center; text-transform: uppercase; font-weight: 900; letter-spacing: 0.28em; font-size: 1.18rem; }
button {
  border: 1px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 15px;
  color: #04100f; background: var(--line); font-weight: 950; letter-spacing: 0.065em;
}
button:disabled { opacity: 0.28; filter: grayscale(0.5); }
button:not(:disabled):active { transform: translateY(1px) scale(0.99); }
button.secondary { color: var(--line); background: transparent; }
button.ghost { color: #d3eeeb; background: #111b1a; border-color: #29403e; }
button.wide { width: 100%; }
button.compact { min-height: 34px; padding: 0 10px; font-size: 0.68rem; }
.or-line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: #72908d; font-size: 0.65rem; font-weight: 850; }
.or-line::before, .or-line::after { content: ""; height: 1px; background: #243a38; }
.error-text { min-height: 1.1em; margin: 0; color: var(--danger); font-size: 0.8rem; }
.rules-card { padding: 15px 18px; color: #c8ddda; font-size: 0.86rem; line-height: 1.5; }
.rules-card summary { color: var(--line); font-weight: 900; letter-spacing: 0.08em; cursor: pointer; }

.game-screen { padding: max(8px, env(safe-area-inset-top)) 7px max(18px, env(safe-area-inset-bottom)); }
.game-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 9px; border: 1px solid rgba(64,224,208,0.26); border-radius: 12px;
  background: rgba(4, 9, 9, 0.9); backdrop-filter: blur(16px);
}
.room-line { margin-top: 3px; color: #b5c8c6; font-size: 0.68rem; letter-spacing: 0.08em; }
.room-line strong { color: var(--line); font-size: 0.82rem; letter-spacing: 0.15em; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.connection { padding: 6px 7px; border-radius: 6px; font-size: 0.57rem; font-weight: 950; letter-spacing: 0.08em; }
.connection.online { color: var(--line); background: rgba(64,224,208,0.11); }
.connection.offline { color: #ffadad; background: rgba(255,80,80,0.12); }
.connection.connecting { color: #f8df99; background: rgba(248,223,153,0.1); }

.lobby-panel, .finish-panel { margin: 10px 0; padding: 24px 18px; text-align: center; }
.lobby-panel h2, .finish-panel h2 { margin: 7px 0; color: var(--line); }
.large-code { margin: 20px auto; color: var(--line); font-size: clamp(2.7rem, 16vw, 5rem); font-weight: 950; letter-spacing: 0.14em; }

.table-shell {
  position: relative; overflow: hidden; margin-top: 8px; padding: 9px 7px 14px;
  border: 1px solid rgba(64,224,208,0.30); border-radius: 14px;
  background: linear-gradient(180deg, rgba(6,11,11,0.97), rgba(3,6,6,0.98));
}
.table-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(2,5,5,0.76), rgba(2,5,5,0.90)), var(--board);
  background-size: cover; background-position: center top;
  opacity: 0.46; filter: saturate(0.9) contrast(1.1);
}
.table-shell > * { position: relative; z-index: 1; }
.score-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.player-score { min-width: 0; padding: 8px; border: 1px solid #314846; border-radius: 9px; background: rgba(5,10,10,0.88); }
.player-score.active-seat { border-color: rgba(64,224,208,0.72); }
.score-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--line); font-size: 0.68rem; font-weight: 900; }
.score-values { display: flex; justify-content: space-between; gap: 5px; margin-top: 6px; color: #a8c0bd; font-size: clamp(0.55rem, 2.4vw, 0.72rem); }
.score-values b { color: white; }
.seat-status { margin-top: 5px; color: #ff9999; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.1em; }
.seat-status.online { color: var(--line); }

.status-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 1px; padding: 9px 10px; border-left: 4px solid var(--line); background: rgba(12,22,21,0.92); }
.turn-message { color: white; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.04em; }
.stack-count { color: #91aaa7; font-size: 0.62rem; white-space: nowrap; }
.stack-count b { color: var(--line); font-size: 0.88rem; }

h3 { margin: 0; color: #bfd3d0; font-size: 0.64rem; letter-spacing: 0.12em; }
.opponent-hand-area, .your-hand-area, .rail-area { margin-top: 10px; }
.hidden-hand { display: flex; justify-content: center; min-height: 35px; }
.card-back-mini {
  width: 24px; height: 36px; margin-left: -5px; border: 1px solid rgba(64,224,208,0.4); border-radius: 3px;
  background-image: var(--card-back); background-size: cover; background-position: center;
  box-shadow: 0 4px 9px rgba(0,0,0,0.45);
}
.card-back-mini:first-child { margin-left: 0; }

.rail-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 5px; color: #86a4a1; font-size: 0.54rem; font-weight: 850; letter-spacing: 0.06em; }
.rail-heading strong { color: var(--line); font-size: 0.7rem; }
.rail-heading span:last-child { text-align: right; }
.rail, .hand { display: flex; justify-content: center; gap: clamp(3px, 1vw, 7px); }
.card {
  position: relative; flex: 0 0 var(--card-w); width: var(--card-w); height: var(--card-h);
  border: 1px solid rgba(64,224,208,0.82); border-radius: calc(var(--card-w) * 0.055);
  background-color: #0d1515; background-image: var(--atlas); background-repeat: no-repeat; background-size: 800% 400%;
  box-shadow: 0 7px 16px rgba(0,0,0,0.55);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.card.selectable { cursor: pointer; }
.card.selectable.selected { z-index: 3; transform: translateY(-8px); border-color: white; box-shadow: 0 0 0 3px rgba(64,224,208,0.38), 0 12px 22px rgba(0,0,0,0.72); }
.card.selectable:not(.selected):active { transform: translateY(-3px); }
.card.empty { display: grid; place-items: center; border-style: dashed; background-image: none; color: #50706d; font-size: 0.65rem; }
.diagonal-key { margin-top: 6px; text-align: center; color: #78928f; font-size: 0.56rem; letter-spacing: 0.055em; }

.move-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.intake-button { min-height: 52px; color: var(--line); background: rgba(6,16,15,0.96); border-width: 2px; font-size: clamp(0.72rem, 3.2vw, 0.95rem); }
.intake-button.ready { color: #04100f; background: var(--line); box-shadow: 0 0 24px rgba(64,224,208,0.18); }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#selectionHint { color: var(--line); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; }
.your-hand-area { padding-top: 8px; min-height: calc(var(--card-h) + 32px); }

.capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.capture-panel { min-width: 0; padding: 9px; border: 1px solid #263c3a; border-radius: 8px; background: rgba(6,11,11,0.9); }
.capture-panel summary { color: #a7c1be; font-size: 0.59rem; font-weight: 900; cursor: pointer; }
.mini-cards { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.mini-card {
  width: 29px; height: 44px; border: 1px solid #3b7e77; border-radius: 2px;
  background-image: var(--atlas); background-size: 800% 400%; background-repeat: no-repeat;
}

.last-move-panel { margin-top: 10px; padding: 10px; border: 1px solid #243b39; border-radius: 9px; background: rgba(4,8,8,0.91); }
.last-move { margin-top: 7px; color: #dff5f2; font-size: 0.74rem; line-height: 1.35; }
.game-log { max-height: 125px; overflow: auto; margin: 8px 0 0; padding-left: 20px; color: #86a19e; font-size: 0.65rem; line-height: 1.48; }

.finish-panel { margin-top: 10px; }
.final-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.final-score { padding: 13px 8px; border: 1px solid #304c49; border-radius: 10px; background: #070c0c; }
.final-score.winner { border-color: var(--line); box-shadow: 0 0 20px rgba(64,224,208,0.12); }
.final-score strong { display: block; color: var(--line); font-size: 1.7rem; }
.final-score span { color: #9fb5b2; font-size: 0.67rem; }
.rematch-status { margin-top: 10px; color: #a7bfbc; font-size: 0.74rem; }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 30px), 470px); padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px;
  color: white; background: rgba(5,13,12,0.96); box-shadow: 0 10px 40px black; text-align: center; font-size: 0.78rem; font-weight: 800;
}

@media (min-width: 680px) {
  :root { --card-w: clamp(84px, 12vw, 118px); }
  .game-screen { padding-left: 14px; padding-right: 14px; }
  .table-shell { padding: 14px 16px 20px; }
  .landing-screen { grid-template-columns: 1fr 1fr; max-width: 900px; }
  .brand-panel { display: grid; align-content: center; grid-row: span 2; }
}

@media (orientation: landscape) and (max-height: 560px) {
  :root { --card-w: clamp(58px, 8.7vw, 88px); }
  .game-header { position: relative; }
  .opponent-hand-area { position: absolute; right: 14px; top: 78px; margin: 0; }
  .score-strip { padding-right: 110px; }
  .table-shell { padding-bottom: 8px; }
  .game-log { max-height: 70px; }
}