:root {
  --ink: #edf3eb;
  --muted: #9aaca3;
  --night: #07110e;
  --panel: #0d1c17;
  --felt: #124c3a;
  --felt-deep: #0b382b;
  --felt-light: #1d674f;
  --gold: #d8b769;
  --gold-bright: #f1d58a;
  --coral: #e87761;
  --wood: #4b2919;
  --wood-light: #785038;
  --line: rgba(224, 239, 227, 0.12);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  font-family: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--night);
}

.rotate-hint { display: none; }
button, select { touch-action: manipulation; }
@media (max-width: 600px) and (orientation: portrait) {
  .rotate-hint { display: block; position: sticky; top: 0; z-index: 20; padding: 14px; background: #d8b769; color: #07110e; text-align: center; font-size: 15px; }
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night); }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 16% -10%, rgba(31, 103, 78, 0.28), transparent 36rem),
    radial-gradient(circle at 90% 15%, rgba(216, 183, 105, 0.08), transparent 30rem),
    linear-gradient(160deg, #091711 0%, #050b09 72%);
  color: var(--ink);
  overflow-x: hidden;
}

button, select { font: inherit; }

button { color: inherit; }

button:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.app-shell { width: min(1540px, 100%); margin: 0 auto; padding: 22px clamp(16px, 3vw, 44px) 34px; }

.topbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 18px; }

.brand-block { display: flex; align-items: center; gap: 16px; }

.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(241, 213, 138, 0.5);
  border-radius: 18px 5px 18px 5px;
  background: linear-gradient(145deg, rgba(216, 183, 105, 0.18), rgba(216, 183, 105, 0.02));
  box-shadow: inset 0 0 20px rgba(216, 183, 105, 0.08);
  color: var(--gold-bright);
  font-family: Georgia, "Songti SC", serif;
  font-size: 28px;
}

.eyebrow, .modal-kicker, .quiz-kicker {
  margin: 0 0 3px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.25em;
}

h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(27px, 3vw, 40px); font-weight: 600; letter-spacing: 0.08em; }

.brand-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.topbar-stats {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 18px;
  padding: 10px 13px 10px 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(13, 28, 23, 0.72);
  backdrop-filter: blur(16px);
}

.stat-item, .level-select-wrap { display: flex; flex-direction: column; gap: 4px; }
.stat-item span, .level-select-wrap span { color: var(--muted); font-size: 10px; letter-spacing: 0.1em; }
.stat-item strong { font-size: 16px; }
.stat-item b { color: var(--gold-bright); font-size: 23px; }
.stat-divider { width: 1px; height: 34px; background: var(--line); }

.level-select-wrap select {
  min-width: 72px;
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(216, 183, 105, 0.5);
  border-radius: 0;
  padding: 1px 22px 3px 1px;
  background: linear-gradient(45deg, transparent 50%, var(--gold) 50%) right 6px center / 6px 6px no-repeat;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.level-select-wrap select:disabled { opacity: 0.6; }

.level-chip {
  display: grid;
  min-width: 56px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(241, 213, 138, 0.34);
  border-radius: 12px;
  background: rgba(216, 183, 105, 0.1);
  color: var(--gold-bright);
  font-weight: 800;
}

.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 12px 10px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 20, 16, 0.82);
}
.control-bar--side { position: fixed; z-index: 20; top: 50%; right: max(10px, env(safe-area-inset-right)); display: flex; width: 48px; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px; border: 1px solid rgba(216,183,105,.24); border-radius: 18px; background: rgba(8,29,23,.92); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.control-bar--side .control-status { justify-content: center; }
.control-bar--side .control-status > span:last-child { display: none; }
.control-bar--side .control-actions { display: flex; flex-direction: column; gap: 8px; }
.control-bar--side .control-button { display: grid; width: 34px; height: 34px; margin: 0; padding: 0; place-items: center; border-radius: 10px; }
.control-bar--side .control-icon { font-size: 18px; line-height: 1; }

.control-status { display: flex; align-items: center; gap: 9px; color: #c6d2cc; font-size: 12px; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #70d49a; box-shadow: 0 0 0 5px rgba(112, 212, 154, 0.09), 0 0 14px #70d49a; }
.control-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.control-button, .primary-button {
  min-height: 36px;
  border: 1px solid rgba(227, 240, 230, 0.13);
  border-radius: 10px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #dce6e0;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.control-button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(241, 213, 138, 0.42); background: rgba(216, 183, 105, 0.09); }
.control-button:disabled { opacity: 0.35; cursor: not-allowed; }
.control-button--accent { border-color: rgba(216, 183, 105, 0.4); color: var(--gold-bright); background: rgba(216, 183, 105, 0.09); }

.game-workspace { display: grid; gap: 14px; }

.table-frame {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 8px solid var(--wood);
  border-radius: 72px 72px 52px 52px;
  background: var(--wood);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 221, 167, 0.15), 0 0 0 1px #2b180f;
}

.table-frame::before {
  position: absolute;
  z-index: 3;
  inset: -2px;
  border: 2px solid rgba(245, 199, 134, 0.17);
  border-radius: inherit;
  box-shadow: inset 0 5px 9px rgba(255, 209, 156, 0.1), inset 0 -8px 16px rgba(0, 0, 0, 0.4);
  content: "";
  pointer-events: none;
}

.wood-inlay {
  position: absolute;
  z-index: 4;
  inset: 9px;
  border: 1px solid rgba(226, 176, 111, 0.21);
  border-radius: 58px 58px 39px 39px;
  pointer-events: none;
}

.game-table {
  --countdown-progress: 1;
  position: relative;
  display: grid;
  min-height: 744px;
  grid-template-columns: minmax(185px, 0.8fr) minmax(350px, 1.7fr) minmax(185px, 0.8fr);
  grid-template-rows: 156px minmax(270px, 1fr) 290px;
  grid-template-areas: ". north ." "west center east" "south south south";
  gap: 4px 18px;
  overflow: hidden;
  border: 3px solid var(--wood-light);
  border-radius: 62px 62px 42px 42px;
  padding: 12px clamp(12px, 2vw, 34px) 8px;
  background:
    radial-gradient(ellipse at center, rgba(35, 109, 83, 0.92), rgba(12, 58, 44, 0.98) 68%),
    var(--felt);
}

.game-table::before {
  position: absolute;
  inset: 18% 25%;
  border: 1px solid rgba(222, 239, 227, 0.055);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(133, 224, 179, 0.04);
  content: "";
}

.felt-grain {
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image:
    repeating-linear-gradient(17deg, transparent 0 3px, rgba(255,255,255,.04) 3px 4px),
    repeating-linear-gradient(93deg, transparent 0 5px, rgba(0,0,0,.07) 5px 6px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.seat { position: relative; z-index: 2; min-width: 0; }
.seat--north { grid-area: north; display: flex; flex-direction: column; align-items: center; }
.seat--west { grid-area: west; display: grid; grid-template-columns: auto 36px minmax(88px, 1fr); align-items: center; gap: 9px; }
.seat--east { grid-area: east; display: grid; grid-template-columns: minmax(88px, 1fr) 36px auto; align-items: center; gap: 9px; }
.seat--south { grid-area: south; display: flex; flex-direction: column; align-items: center; }

.seat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(232, 242, 234, 0.11);
  border-radius: 13px;
  padding: 7px 9px;
  background: rgba(4, 26, 19, 0.58);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.seat.is-active .seat-person { border-color: rgba(241, 213, 138, 0.55); box-shadow: 0 0 0 3px rgba(241, 213, 138, 0.06), 0 8px 24px rgba(0,0,0,.2); }

.seat-person--vertical { flex-direction: column; width: 84px; text-align: center; }
.seat-person--south { min-width: 198px; background: rgba(8, 40, 30, 0.88); }

.avatar {
  display: grid;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  font-family: Georgia, "Songti SC", serif;
  font-size: 17px;
  font-weight: 700;
}

.avatar--north { color: #b6cde0; background: linear-gradient(145deg, #2c4553, #12252d); }
.avatar--east { color: #9fe0d6; background: linear-gradient(145deg, #27675f, #11332e); }
.avatar--west { color: #f1ece3; background: linear-gradient(145deg, #686a65, #292d2b); }
.avatar--south { color: #ffd1c7; background: linear-gradient(145deg, #9b4b42, #4b241f); }

.seat-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.seat-copy strong { white-space: nowrap; font-size: 13px; }
.seat-direction { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.partner-tag, .opponent-tag, .observer-tag { color: #8cb9a7; font-size: 9px; white-space: nowrap; }
.opponent-tag { color: #c5a891; }
.observer-tag { color: #e9b5a9; }

.card-count { display: flex; flex-direction: column; align-items: center; margin-left: 4px; color: var(--muted); font-size: 8px; }
.card-count b { color: var(--gold-bright); font-size: 18px; line-height: 1; }

.opponent-hand { display: flex; justify-content: center; height: 22px; margin-top: -2px; }
.opponent-hand i {
  width: 27px;
  height: 38px;
  margin-left: -19px;
  transform: rotate(calc((var(--i, 0) - 2) * 4deg));
  transform-origin: bottom center;
  border: 1px solid rgba(234,220,185,.36);
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #7d3029 0 3px, #a4473d 3px 5px);
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.opponent-hand i:first-child { margin-left: 0; }
.opponent-hand i:nth-child(1) { --i: 0; }.opponent-hand i:nth-child(2) { --i: 1; }.opponent-hand i:nth-child(3) { --i: 2; }.opponent-hand i:nth-child(4) { --i: 3; }.opponent-hand i:nth-child(5) { --i: 4; }
.opponent-hand--vertical { flex-direction: column; width: 25px; height: 120px; margin: 0; }
.opponent-hand--vertical i { margin: -25px 0 0; transform: rotate(90deg); transform-origin: center; }
.opponent-hand--vertical i:first-child { margin-top: 0; }

.play-zone {
  position: relative;
  z-index: 5;
  display: flex;
  min-width: 96px;
  min-height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.play-zone--horizontal { width: min(470px, 86vw); }
.play-zone--vertical { min-width: 116px; }
.play-zone.is-visible { opacity: 1; }

@keyframes action-life {
  0% { opacity: 0; transform: translateY(-4px) scale(.98); }
  5%, 96% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.play-type-label {
  margin-bottom: 5px;
  border: 1px solid rgba(241,213,138,.24);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(4,21,16,.78);
  color: var(--gold-bright);
  font-size: 9px;
  letter-spacing: .12em;
}

.played-cards { display: flex; justify-content: center; padding-left: 15px; filter: drop-shadow(0 8px 9px rgba(0,0,0,.32)); }
.played-cards .card { margin-left: -15px; }
.play-zone .card--compact {
  width: 67.5px;
  height: 96px;
  padding: 6px;
  border-radius: 7px;
}
.play-zone .card--compact .card-corner { font-size: 24.5px; }
.play-zone .card--compact .card-suit { font-size: 40px; }
.play-zone .card--compact .card-tag { font-size: 9px; }
.wild-note { margin-top: 5px; color: #ffe0a1; font-size: 9px; }

.pass-chip {
  display: grid;
  width: 53px;
  height: 53px;
  place-items: center;
  border: 1px solid rgba(222,238,226,.18);
  border-radius: 50%;
  background: rgba(5,27,20,.7);
  color: #bdcbc3;
  font-family: Georgia, "Songti SC", serif;
  font-size: 21px;
  box-shadow: 0 7px 16px rgba(0,0,0,.2);
}

.table-center {
  z-index: 1;
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.deal-announcement {
  order: -1;
  border: 1px solid rgba(216, 183, 105, 0.32);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(216, 183, 105, 0.09);
  color: var(--gold-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 0 20px rgba(216,183,105,.06);
}

.countdown-ring {
  position: relative;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--countdown-progress) * 1turn), rgba(255,255,255,.07) 0);
  box-shadow: 0 0 35px rgba(216,183,105,.08);
}

.countdown-ring::before { position: absolute; width: 94px; height: 94px; border: 1px solid rgba(241,213,138,.12); border-radius: 50%; background: #0c3a2c; content: ""; }
.countdown-ring div { z-index: 1; display: flex; flex-direction: column; align-items: center; }
.countdown-ring strong { color: var(--gold-bright); font-family: Georgia, serif; font-size: 28px; font-variant-numeric: tabular-nums; }
.countdown-ring span { color: #91a99e; font-size: 8px; letter-spacing: .12em; }

.center-brand { text-align: center; }
.center-brand > span { color: rgba(237,243,235,.18); font-family: Georgia, "Songti SC", serif; font-size: 40px; }
.center-brand p { margin: -5px 0 0; color: #8fa69b; font-size: 9px; letter-spacing: .25em; }
.trick-status { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.trick-status span { color: #9eafa7; }
.trick-status strong { border-left: 1px solid rgba(255,255,255,.14); padding-left: 8px; color: #d5dfd9; }

.round-metrics {
  display: grid;
  width: min(325px, 100%);
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(231,244,233,.09);
  border-radius: 11px;
  background: rgba(5,26,19,.38);
}
.round-metrics > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.round-metrics > div + div { border-left: 1px solid rgba(231,244,233,.09); }
.round-metrics span { color: #8ea399; font-size: 9px; }
.round-metrics strong { color: #dce6df; font-size: 12px; }

.south-console {
  display: flex;
  width: min(1180px, 100%);
  min-height: 130px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(239,248,241,.09);
  padding: 10px 8px 0;
  background: linear-gradient(180deg, rgba(8,41,31,0), rgba(6,31,23,.48));
}

.hand-wrap { flex: 1; min-width: 0; }
.hand-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 8px 4px; }
.hand-caption span { color: #c9d6cf; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.hand-caption small { color: #7f978c; font-size: 8px; }

.south-hand {
  --card-height: clamp(102px, 9vw, 136px);
  --stack-step: calc(var(--card-height) / 3);
  display: flex;
  min-height: calc(var(--card-height) + 20px);
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, .65vw, 10px);
  overflow-x: auto;
  overflow-y: visible;
  padding: 5px 6px 6px;
  scrollbar-color: rgba(216,183,105,.3) transparent;
  scrollbar-width: thin;
}
.hand-group {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--card-height) + (var(--stack-size) - 1) * var(--stack-step));
  align-self: flex-end;
}
.hand-group .card {
  position: absolute;
  top: calc(var(--stack-index) * var(--stack-step));
  left: 0;
  width: 100%;
  height: var(--card-height);
  margin: 0;
  padding: clamp(5px, .55vw, 9px);
  transition: transform 140ms ease;
}
.hand-group .card:hover { z-index: 20 !important; transform: translateY(-7px); }

.card {
  position: relative;
  display: flex;
  width: 58px;
  height: 82px;
  flex-direction: column;
  border: 1px solid #d5d3c9;
  border-radius: 7px;
  padding: 6px;
  overflow: hidden;
  background:
    linear-gradient(150deg, transparent 55%, rgba(65,63,52,.05)),
    #f4f1e8;
  color: #1c2924;
  box-shadow: 0 4px 8px rgba(0,0,0,.24);
}
.card::after { position: absolute; right: -8px; bottom: -16px; color: currentColor; content: attr(data-suit); font-size: 44px; opacity: .04; }
.card--compact { width: 45px; height: 64px; border-radius: 5px; padding: 4px; }
.card--red { color: #b53e38; }
.card--level { border: 2px solid var(--gold); box-shadow: 0 0 0 1px rgba(78,58,18,.35), 0 4px 10px rgba(0,0,0,.28); }
.card--wild { border: 2px solid #e9ba4b; background: linear-gradient(145deg, #fff8db, #f2ead5); box-shadow: 0 0 15px rgba(241,196,79,.28), 0 4px 10px rgba(0,0,0,.28); }
.card-corner { display: flex; align-items: baseline; gap: 3px; min-height: 1em; font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 800; line-height: 1; }
.card-rank, .card-corner-suit { font-size: inherit; font-weight: inherit; line-height: inherit; }
.card-suit { display: grid; flex: 1; place-items: center; margin: 0; text-align: center; font-size: 36px; line-height: 1; }
.card--compact .card-corner { gap: 2px; font-size: 17px; }
.card--compact .card-suit { font-size: 28px; }
.card-tag { position: absolute; right: 2px; bottom: 3px; border-radius: 3px; padding: 1px 2px; background: #b18322; color: #fff8de; font-size: 6px; font-weight: 800; writing-mode: vertical-rl; }
.hand-group .card-corner { gap: clamp(2px, .25vw, 4px); font-size: clamp(21px, 2.25vw, 32px); }
.hand-group .card-suit { font-size: clamp(44px, 4.2vw, 75px); }
.hand-group .card-tag { font-size: clamp(6px, .55vw, 9px); }

.memory-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 11px 15px;
  background: rgba(12,27,22,.76);
}
.memory-strip__icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(216,183,105,.3); border-radius: 10px; color: var(--gold); }
.top-inventory-wrap { display: grid; min-width: 0; gap: 4px; align-self: stretch; }
.top-inventory-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9fb2a7; font-size: 8px; line-height: 1; }
.top-inventory-heading strong { color: var(--gold-bright); font-size: 9px; }
.top-inventory-heading__wild { color: #ef6b6b; }
.top-inventory { display: flex; min-width: 0; justify-content: flex-end; gap: 6px; overflow-x: auto; }
.top-inventory__item { display: grid; min-width: 70px; grid-template-columns: 22px 1fr; grid-template-rows: 22px auto; column-gap: 4px; align-items: center; padding: 5px 6px; border: 1px solid rgba(216,183,105,.22); border-radius: 10px; background: rgba(216,183,105,.06); }
.top-inventory__icon { display: grid; grid-row: 1 / span 2; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: var(--gold-bright); background: rgba(216,183,105,.13); font-family: Georgia, serif; font-size: 16px; }
.top-inventory__name { color: #cbd8cf; font-size: 8px; line-height: 1; white-space: nowrap; }
.top-inventory__dots { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 6px); grid-auto-rows: 6px; gap: 3px; justify-content: center; padding-top: 3px; }
.top-inventory__dots--big, .top-inventory__dots--small { grid-template-columns: repeat(2, 7px); }
.top-inventory__dot { width: 6px; height: 6px; border: 1px solid rgba(220,232,225,.72); border-radius: 50%; background: transparent; }
.top-inventory__dots--big .top-inventory__dot, .top-inventory__dots--small .top-inventory__dot { width: 7px; height: 7px; }
.top-inventory__dot.is-filled { background: #dce8e1; box-shadow: 0 0 5px rgba(220,232,225,.32); }
.top-inventory__dot--wild { border-color: #ef6b6b; }
.top-inventory__dot--wild.is-filled { background: #ef6b6b; box-shadow: 0 0 6px rgba(239,107,107,.5); }
.memory-strip > div:nth-child(2) { display: flex; min-width: 210px; flex: 1; flex-direction: column; gap: 2px; }
.memory-strip span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.memory-strip strong { color: #c8d4cd; font-size: 11px; font-weight: 500; }
.memory-strip small { color: #8fa398; font-size: 9px; }
.memory-strip ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.memory-strip li { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 5px 8px; color: #94a79e; font-size: 9px; white-space: nowrap; }
.memory-strip li b { color: #d8e1dc; }
.visual-inventory-strip { display: flex; min-width: 0; flex: 2; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.visual-shelf { display: flex; min-width: max-content; align-items: center; gap: 7px; border: 1px solid rgba(216,183,105,.18); border-radius: 10px; padding: 6px 8px; background: rgba(216,183,105,.045); }
.visual-shelf__icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 8px; background: rgba(216,183,105,.11); color: var(--gold-bright); font-family: Georgia, "Songti SC", serif; font-size: 18px; }
.visual-shelf__icon--big { color: #ffd43b; background: linear-gradient(145deg,#ff9f1c,#e85d04); text-shadow: 0 0 7px rgba(255,244,170,.9); }
.visual-shelf__icon--small { color: #eef4ff; background: linear-gradient(145deg,#4169e1,#182848); text-shadow: 0 0 7px rgba(210,230,255,.9); }
.visual-shelf__icon--level { color: #fff2b2; background: linear-gradient(145deg,#e63946,#7b1e2b); text-shadow: 0 0 5px rgba(255,230,150,.8); }
.visual-shelf__icon--aces { color: #9dffcf; background: linear-gradient(145deg,#118ab2,#073b4c); }
.visual-shelf__icon--tens { color: #ffe29a; background: linear-gradient(145deg,#9b5de5,#4a2a82); }
.visual-shelf__icon--kings { color: #ffd6a5; background: linear-gradient(145deg,#f3722c,#8f2d56); }
.visual-shelf__wild-dots { display: inline-flex; gap: 1px; align-items: center; margin-left: -2px; }
.visual-shelf__level-dots { display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 2px; align-items: center; margin-left: 2px; }
.visual-shelf__level-dot { width: 5px; height: 5px; border: 1px solid rgba(220,232,225,.8); border-radius: 50%; background: transparent; }
.visual-shelf__level-dot.is-filled { background: #f3e7b3; box-shadow: 0 0 4px rgba(243,231,179,.7); }
.visual-shelf__heart { color: rgba(239,107,107,.5); font-style: normal; font-size: 13px; line-height: 1; }
.visual-shelf__heart.is-filled { color: #ff4d6d; text-shadow: 0 0 5px rgba(255,77,109,.7); }
.visual-shelf__copy { display: grid; gap: 1px; }
.visual-shelf__copy strong { color: #d8e1dc; font-size: 9px; font-weight: 700; }
.visual-shelf__copy small { color: #a9bbb1; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
.visual-shelf__count { min-width: 20px; color: var(--gold-bright); font-family: Georgia, serif; font-size: 20px; font-style: normal; font-weight: 800; text-align: center; }
.visual-shelf--anchor { padding-inline: 7px; }

.modal {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink);
}
.modal--wide { width: min(1080px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(2,8,6,.78); backdrop-filter: blur(9px); }
.modal-surface { max-height: calc(100vh - 24px); overflow: auto; border: 1px solid rgba(230,240,232,.13); border-radius: 23px; background: #0d1b17; box-shadow: 0 35px 100px rgba(0,0,0,.62); }

.quiz-surface { padding: clamp(22px, 4vw, 42px); }
.quiz-topline { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; color: #98aaa1; font-size: 11px; }
.quiz-topline span:last-child { color: var(--gold-bright); font-weight: 800; }
.quiz-heading { margin: 24px 0 23px; }
.quiz-heading h2 { margin: 3px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 30px; }
.quiz-heading p { margin: 0; color: var(--muted); font-size: 12px; }
#quiz-prompt { min-height: 56px; margin: 0 0 18px; font-size: clamp(17px, 2.5vw, 23px); line-height: 1.5; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-option { min-height: 57px; border: 1px solid rgba(230,242,232,.12); border-radius: 12px; padding: 10px 13px; background: rgba(255,255,255,.035); color: #dbe6df; cursor: pointer; text-align: left; font-size: 12px; line-height: 1.45; }
.answer-option:hover:not(:disabled) { border-color: rgba(216,183,105,.5); background: rgba(216,183,105,.08); }
.answer-option.is-correct { border-color: #58bf82; background: rgba(88,191,130,.14); }
.answer-option.is-wrong { border-color: #df7462; background: rgba(223,116,98,.13); }
.quiz-feedback { min-height: 44px; margin: 18px 0 0; border-left: 2px solid transparent; padding: 8px 11px; color: #aebdb5; font-size: 11px; line-height: 1.6; }
.quiz-feedback.is-correct { border-color: #58bf82; color: #b6dfc6; }
.quiz-feedback.is-wrong { border-color: #df7462; color: #edc0b7; }
.quiz-result { margin-top: 18px; }
.quiz-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.primary-button { border-color: rgba(216,183,105,.55); padding: 10px 17px; background: var(--gold); color: #1c2119; font-weight: 800; }
.primary-button:hover { transform: translateY(-1px); background: var(--gold-bright); }
.secondary-button { border-color: rgba(230,242,232,.18); padding: 10px 17px; background: rgba(255,255,255,.05); color: #dbe6df; font-weight: 700; }
.secondary-button:hover { transform: translateY(-1px); border-color: rgba(216,183,105,.5); background: rgba(216,183,105,.08); }

.guide-surface, .review-surface { padding: 0 clamp(18px, 3.5vw, 40px) 36px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 0 22px; border-bottom: 1px solid var(--line); background: #0d1b17; }
.sticky-header { position: sticky; z-index: 4; top: 0; }
.modal-header h2 { margin: 5px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: clamp(24px, 4vw, 34px); }
.modal-header p { margin: 0; color: var(--muted); font-size: 12px; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); color: #b9c7c0; cursor: pointer; font-size: 24px; }
.icon-button:hover { border-color: rgba(216,183,105,.45); color: var(--gold-bright); }

.guide-method { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 24px 0; }
.guide-method article { position: relative; min-height: 230px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.025); }
.method-number { position: absolute; top: 13px; right: 14px; color: rgba(216,183,105,.42); font-family: Georgia, serif; font-size: 12px; }
.method-visual { display: flex; height: 88px; align-items: center; justify-content: center; gap: 7px; }
.method-visual i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; font-style: normal; font-weight: 800; }
.coordinate-visual .east { color: #91ddd0; background: #173e38; }.coordinate-visual .north { color: #bfd6e3; background: #263d48; }.coordinate-visual .west { color: #e8e4dc; background: #444846; }
.card-code-visual i { border-radius: 6px; background: #f2eee2; color: #a63834; font-family: Georgia, serif; font-size: 19px; box-shadow: 0 5px 9px rgba(0,0,0,.25); }
.card-code-visual em { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: rgba(216,183,105,.13); color: var(--gold); font-style: normal; }
.chain-visual i { font-size: 28px; font-style: normal; }.chain-visual b { color: var(--gold); }
.guide-method h3 { margin: 4px 0 7px; font-size: 15px; }
.guide-method p { margin: 0; color: #9fb0a7; font-size: 11px; line-height: 1.7; }

.coding-key { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.coding-key > div { border-radius: 12px; padding: 14px; background: rgba(255,255,255,.025); }
.coding-key h3 { margin: 0 0 7px; color: var(--gold-bright); font-size: 12px; }
.coding-key p { margin: 0; color: #9fafaa; font-size: 10px; line-height: 1.9; }
.coding-key p b { color: #d8e2dc; }
.coding-key .wild-guide { display: flex; grid-column: 1 / -1; align-items: center; gap: 15px; border: 1px solid rgba(216,183,105,.18); background: rgba(216,183,105,.06); }
.wild-guide > span { display: grid; min-width: 62px; height: 62px; place-items: center; border: 2px solid var(--gold); border-radius: 9px; background: #fff8df; color: #b43f38; font-family: Georgia, serif; font-size: 19px; font-weight: 800; }
.anchor-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.anchor-legend article { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 2px 8px; border: 1px solid rgba(216,183,105,.15); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.025); }
.anchor-legend b { display: grid; grid-row: 1 / 3; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(216,183,105,.09); color: var(--gold-bright); font-family: Georgia, "Songti SC", serif; font-size: 21px; }
.anchor-legend strong { color: #d8e1dc; font-size: 10px; }
.anchor-legend span { color: #8fa398; font-size: 9px; }

.examples-section { padding-top: 24px; }
.examples-section .section-heading p { margin: 5px 0 15px; color: #899e94; font-size: 10px; line-height: 1.6; }
.memory-examples-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.memory-example { border: 1px solid var(--line); border-radius: 15px; padding: 15px 17px; background: rgba(255,255,255,.025); }
.memory-example header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(224,239,227,.08); padding-bottom: 8px; }
.memory-example header span { color: var(--gold-bright); font-size: 10px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.memory-example h4 { margin: 0; color: #e0e8e3; font-size: 13px; }
.memory-example__focus { margin: 10px 0 8px; color: #b3c2ba; font-size: 10px; line-height: 1.6; }
.memory-example ol { display: grid; gap: 4px; margin: 0; padding-left: 22px; color: #9fafaa; font-size: 9px; line-height: 1.55; }
.memory-example li::marker { color: var(--gold); font-family: Georgia, serif; }
.memory-example__recall { margin: 11px 0 0; border-left: 2px solid var(--gold); padding: 7px 9px; background: rgba(216,183,105,.055); color: #d5dfd9; font-size: 9px; line-height: 1.55; }
.memory-example__chain { margin: 9px 0 0; color: #d8e2dc; font-size: 9px; line-height: 1.55; }
.memory-example__chain strong { color: var(--gold-bright); }
.memory-example__checkpoint { margin: 7px 0 0; color: #849b8f; font-size: 8px; line-height: 1.5; }

.coordinate-section { padding-top: 24px; }
.section-heading span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.section-heading h3 { margin: 4px 0 15px; font-size: 18px; }
.coordinate-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.coordinate-item { display: flex; min-height: 68px; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; background: rgba(255,255,255,.02); }
.coordinate-item strong { color: var(--gold-bright); font-size: 12px; }.coordinate-item span { color: #899e94; font-size: 9px; }

.review-intro { display: flex; align-items: center; gap: 12px; margin: 22px 0; border: 1px solid rgba(216,183,105,.17); border-radius: 12px; padding: 12px 15px; background: rgba(216,183,105,.055); }
.review-intro span { border-right: 1px solid rgba(216,183,105,.2); padding-right: 12px; color: var(--gold-bright); font-size: 11px; font-weight: 800; }
.review-intro p { margin: 0; color: #acbbb3; font-size: 10px; }
.review-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-step { position: relative; border: 1px solid var(--line); border-radius: 15px; padding: 17px; background: rgba(255,255,255,.025); }
.review-step__number { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.review-step__position { position: absolute; top: 13px; right: 15px; color: #91a69b; font-size: 10px; }
.review-step h4 { margin: 12px 0 10px; color: #e0e8e3; font-size: 13px; }
.review-step p { margin: 6px 0; color: #9eafa6; font-size: 10px; line-height: 1.65; }
.review-step p strong { color: #c6d2cc; }
.review-checkpoint { color: #849b8f !important; font-size: 9px !important; }
.review-step .recall-line { margin-top: 12px; border-left: 2px solid var(--gold); padding: 7px 10px; background: rgba(216,183,105,.05); color: #d5dfd9; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 16px); border: 1px solid rgba(216,183,105,.3); border-radius: 999px; padding: 8px 14px; background: rgba(8,22,17,.94); color: #dce5e0; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 10px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

.photo-section { padding-top: 24px; }
.photo-section .section-heading p { margin: 5px 0 15px; color: #899e94; font-size: 10px; line-height: 1.7; }
.stamp-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; }
.stamp-legend__item { display: grid; justify-items: center; gap: 6px; min-height: 86px; border: 1px solid rgba(224,239,227,.09); border-radius: 12px; padding: 8px 5px; background: rgba(255,255,255,.025); color: #aabbb2; font-size: 9px; }
.card-stamp { position: relative; display: inline-flex; width: 72px; min-height: 62px; align-items: center; justify-content: center; border: 1px solid rgba(216,183,105,.3); border-radius: 10px; background: linear-gradient(145deg, rgba(216,183,105,.16), rgba(255,255,255,.035)); color: #f1d892; overflow: hidden; }
.card-stamp__shape { position: absolute; inset: 9px 7px 12px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.stamp-card { display: block; width: 11px; height: 17px; border: 1px solid currentColor; border-radius: 2px; background: rgba(235,247,238,.18); transform: translate(calc(var(--stamp-index) * -2px), calc(var(--stamp-index) * -1px)); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.card-stamp__point { position: relative; z-index: 2; font: 800 17px/1 Georgia, serif; text-shadow: 0 1px 0 #101a16; }
.card-stamp__attachment, .card-stamp__range, .card-stamp__wild { position: absolute; z-index: 3; right: 4px; bottom: 2px; color: #dfc67f; font-size: 7px; }
.card-stamp__range { left: 4px; right: auto; }
.card-stamp__wild { top: 2px; bottom: auto; right: 4px; color: #ff9b9b; font-size: 7px; }
.card-stamp--single .card-stamp__shape { transform: scale(.8); }
.card-stamp--pair .stamp-card { width: 17px; height: 24px; }
.card-stamp--triple .stamp-card { width: 15px; height: 22px; }
.card-stamp--full-house .card-stamp__shape { display: grid; grid-template-columns: repeat(3, 12px); grid-template-rows: repeat(2, 16px); gap: 1px; }
.card-stamp--full-house .stamp-card:nth-child(4), .card-stamp--full-house .stamp-card:nth-child(5) { grid-row: 2; }
.card-stamp--straight .card-stamp__shape, .card-stamp--straight-flush .card-stamp__shape { gap: 0; transform: rotate(-4deg) scale(.86); }
.card-stamp--straight-flush { box-shadow: inset 0 0 0 2px rgba(216,183,105,.45); }
.card-stamp--triple-pair .card-stamp__shape { display: grid; grid-template-columns: repeat(3, 16px); gap: 1px; }
.card-stamp--triple-pair .stamp-card:nth-child(2n) { transform: translateY(4px); }
.card-stamp--steel-plate .card-stamp__shape { display: grid; grid-template-columns: repeat(2, 19px); gap: 3px; }
.card-stamp--steel-plate .stamp-card { width: 16px; height: 26px; }
.card-stamp--bomb .card-stamp__shape { flex-direction: column; gap: 0; }
.card-stamp--bomb .stamp-card { width: 33px; height: 10px; }
.card-stamp--joker-bomb .card-stamp__shape { display: grid; grid-template-columns: repeat(2, 18px); grid-template-rows: repeat(2, 16px); gap: 2px; }
.card-stamp--joker-bomb .stamp-card { width: 18px; height: 16px; }
.trick-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trick-photo { border: 1px solid rgba(224,239,227,.1); border-radius: 15px; padding: 12px; background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.trick-photo.is-complete { border-color: rgba(216,183,105,.28); }
.trick-photo header, .trick-photo footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #93a79b; font-size: 9px; }
.trick-photo header { border-bottom: 1px solid rgba(224,239,227,.08); padding-bottom: 8px; color: var(--gold-bright); font-weight: 800; }
.trick-photo header strong { color: #d7e4db; font-size: 9px; }
.photo-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 93px; align-items: end; padding: 10px 0; }
.photo-event { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.photo-event__seat { color: #a7b8ad; font-size: 8px; white-space: nowrap; }
.photo-event .card-stamp { width: 56px; min-height: 52px; transform: scale(.82); transform-origin: center bottom; }
.photo-event .card-stamp__point { font-size: 15px; }
.photo-event .card-stamp__range, .photo-event .card-stamp__attachment, .photo-event .card-stamp__wild { font-size: 6px; }
.photo-event.is-pass { opacity: .4; }
.photo-pass { display: grid; place-items: center; width: 29px; height: 29px; border: 1px dashed rgba(224,239,227,.22); border-radius: 50%; color: #8fa298; font-size: 10px; }
.trick-photo footer { padding-top: 7px; border-top: 1px solid rgba(224,239,227,.07); color: #7f958a; }
.photo-inventory { margin-top: 14px; border: 1px solid rgba(216,183,105,.2); border-radius: 13px; padding: 12px 14px; background: rgba(216,183,105,.055); }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--gold-bright); font-size: 10px; }
.inventory-heading strong { color: #d9e4dc; font-size: 9px; }
.inventory-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.inventory-pills span { border: 1px solid rgba(224,239,227,.12); border-radius: 999px; padding: 4px 8px; color: #b5c5bc; background: rgba(255,255,255,.035); font-size: 9px; }
.inventory-pills b { color: #f0d68c; }
.inventory-pills .inventory-pill--wild { border-color: rgba(255,138,138,.3); color: #ffb4b4; }
.review-photo-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border: 1px solid rgba(216,183,105,.17); border-radius: 10px; padding: 10px 12px; background: rgba(216,183,105,.04); color: #aebfb5; font-size: 10px; }
.review-photo-summary strong { color: var(--gold-bright); }
.trick-photos--review { grid-template-columns: 1fr; }
.trick-photos--review .photo-events { min-height: 105px; }
.photo-inventory--review { margin-top: 12px; }

@media (max-width: 1050px) {
  .game-table { grid-template-columns: 155px minmax(310px, 1fr) 155px; gap: 3px 5px; padding-inline: 10px; }
  .seat--west, .seat--east { gap: 3px; }
  .seat-person--vertical { width: 73px; }
  .seat-copy strong { font-size: 11px; }
  .table-frame { min-height: 750px; }
  .game-table { min-height: 734px; grid-template-rows: 156px minmax(250px, 1fr) 300px; }
  .coordinate-list { grid-template-columns: repeat(3, 1fr); }
  .guide-method { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .app-shell { padding: 12px 8px 24px; }
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .topbar-stats { width: 100%; justify-content: space-between; }
  .brand-mark { width: 46px; height: 46px; }
  .brand-subtitle, .eyebrow { display: none; }
  .topbar-stats { min-height: 52px; gap: 10px; padding: 7px 8px 7px 12px; }
  .stat-divider, .level-chip { display: none; }
  .control-bar { align-items: flex-start; flex-direction: column; }
  .control-actions { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .control-button { white-space: nowrap; }
  .table-frame { min-height: 730px; border-width: 5px; border-radius: 34px; }
  .game-table {
    min-height: 714px;
    grid-template-columns: 100px minmax(150px, 1fr) 100px;
    grid-template-rows: 128px 286px 300px;
    border-radius: 28px;
    padding: 7px 5px 3px;
  }
  .seat-person--vertical { width: 57px; padding: 5px 3px; }
  .seat-person--vertical .seat-copy strong { font-size: 9px; }
  .seat-person--vertical .seat-direction, .seat-person--vertical .opponent-tag { display: none; }
  .avatar { width: 32px; height: 32px; font-size: 14px; }
  .card-count b { font-size: 14px; }
  .seat--west { grid-template-columns: 58px 18px minmax(54px,1fr); }
  .seat--east { grid-template-columns: minmax(54px,1fr) 18px 58px; }
  .opponent-hand--vertical { transform: scale(.8); }
  .play-zone--vertical { min-width: 82px; }
  .play-zone .card--compact { width: 52.5px; height: 76.5px; padding: 5px; }
  .play-zone .card--compact .card-corner { font-size: 20px; }
  .play-zone .card--compact .card-suit { font-size: 32px; }
  .countdown-ring { width: 83px; height: 83px; }
  .countdown-ring::before { width: 72px; height: 72px; }
  .countdown-ring strong { font-size: 21px; }
  .center-brand { display: none; }
  .round-metrics { grid-template-columns: 1fr; width: 142px; }
  .round-metrics > div + div { border-top: 1px solid rgba(231,244,233,.09); border-left: 0; }
  .south-console { align-items: flex-end; gap: 7px; }
  .seat-person--south { min-width: 67px; flex-direction: column; padding: 5px; text-align: center; }
  .seat-person--south .seat-copy { align-items: center; }
  .seat-person--south .seat-direction, .seat-person--south .observer-tag, .seat-person--south .card-count { display: none; }
  .hand-caption small { display: none; }
  .card { width: 48px; height: 72px; }
  .south-hand { --card-height: 88px; --stack-step: 29px; justify-content: flex-start; gap: 4px; }
  .hand-group { flex: 0 0 48px; width: 48px; height: calc(var(--card-height) + (var(--stack-size) - 1) * var(--stack-step)); }
  .hand-group .card { width: 48px; }
  .memory-strip ol { display: none; }
  .memory-strip > div:nth-child(2) { min-width: 0; }
  .quiz-options, .guide-method, .coding-key, .memory-examples-grid, .review-list, .trick-photos { grid-template-columns: 1fr; }
  .stamp-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-events { gap: 3px; }
  .coding-key .wild-guide { grid-column: auto; }
  .coordinate-list { grid-template-columns: 1fr; }
  .modal-header { padding-top: 20px; }
}

/* Residual memory method: the table remains the simulation surface; only the
   guide and review use a compact three-column inventory calculation. */
.guide-method--residual article { min-height: 238px; }
.residual-visual { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 68px; border: 1px solid rgba(216,183,105,.22); border-radius: 12px; background: rgba(216,183,105,.06); color: var(--gold-bright); }
.residual-visual b { display: grid; min-width: 28px; height: 28px; place-items: center; border: 1px solid rgba(216,183,105,.42); border-radius: 8px; background: rgba(0,0,0,.16); font-size: 18px; }
.residual-visual small { color: #a7b8ae; font-size: 9px; }
.slot-demo { flex-direction: column; gap: 3px; }
.slot-demo b { width: auto; min-width: 82px; height: 24px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; letter-spacing: .08em; }
.residual-example { padding-top: 22px; }
.residual-example .section-heading p { margin: 5px 0 15px; color: #899e94; font-size: 10px; line-height: 1.7; }
.residual-equation { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; border: 1px solid rgba(216,183,105,.2); border-radius: 12px; padding: 14px; background: rgba(216,183,105,.05); color: #b9c7bf; font-size: 11px; }
.residual-equation span, .residual-equation strong { border-radius: 8px; padding: 9px 11px; background: rgba(255,255,255,.05); }
.residual-equation b { color: var(--gold-bright); font-size: 18px; margin-left: 3px; }
.residual-equation i { color: var(--gold); font-style: normal; font-size: 18px; }
.residual-equation strong { color: #cde8d5; }
.review-residual-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border: 1px solid rgba(216,183,105,.17); border-radius: 10px; padding: 10px 12px; background: rgba(216,183,105,.04); color: #aebfb5; font-size: 10px; }
.review-residual-summary strong { color: var(--gold-bright); }
.review-residual-list { display: grid; gap: 8px; margin-bottom: 16px; }
.review-residual-row { display: grid; grid-template-columns: 64px 90px minmax(130px, 1fr); gap: 8px; align-items: center; border: 1px solid rgba(224,239,227,.09); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.025); color: #c3d0c8; font-size: 11px; }
.review-residual-row small { grid-column: 1 / -1; color: #8fa398; font-size: 9px; }
.review-step { color: var(--gold); font-size: 10px; }
.residual-table { border: 1px solid rgba(216,183,105,.18); border-radius: 12px; padding: 12px; background: rgba(216,183,105,.04); }
.residual-table__head { display: flex; justify-content: space-between; gap: 12px; color: #aebfb5; font-size: 10px; }
.residual-table__head strong { color: var(--gold-bright); font-weight: 600; }
.residual-table__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.residual-table__grid > div { display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; color: #9fb0a7; font-size: 10px; }
.residual-table__grid b { color: #d8e1dc; }
.residual-table__grid strong { color: var(--gold-bright); font-size: 17px; }
@media (max-width: 760px) { .residual-equation { gap: 5px; }.review-residual-row { grid-template-columns: 56px 1fr; }.review-residual-row > span:nth-child(3) { grid-column: 2; }.residual-table__grid { grid-template-columns: 1fr; }.anchor-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }.memory-strip { align-items: stretch; flex-wrap: wrap; }.memory-strip__copy { min-width: 0 !important; }.visual-inventory-strip { flex-basis: 100%; }.visual-shelf { padding: 5px 7px; } }

@media (max-width: 980px) { .topbar { grid-template-columns: 1fr auto; }.top-inventory-wrap { grid-column: 1 / -1; }.top-inventory { justify-content: stretch; }.top-inventory__item { flex: 1 1 0; } }

@media (max-width: 430px) {
  h1 { font-size: 23px; }
  .stat-item strong { font-size: 12px; }
  .stat-item b { font-size: 17px; }
  .game-table { grid-template-columns: 84px minmax(136px, 1fr) 84px; }
  .opponent-hand--vertical { display: none; }
  .seat--west { grid-template-columns: 57px minmax(50px,1fr); }
  .seat--east { grid-template-columns: minmax(50px,1fr) 57px; }
  .play-zone .card--compact { width: 52.5px; height: 76.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .play-zone.is-visible { animation: none; opacity: 1; }
}