/* James Bond -- dark tuxedo table, brass accents. */

:root {
  --ink: #0a0c0f;
  --ink-2: #12161c;
  --line: #262d36;
  --felt: #10402f;
  --felt-2: #0b2c21;
  --brass: #d4af37;
  --brass-dim: #8d7426;
  --paper: #f6f3ec;
  --red: #c02a2a;
  --text: #e8e6e1;
  --muted: #8b93a0;
  --good: #3fbf7f;
  --card-w: clamp(44px, min(6.2vw, 10.5vh), 82px);
  --pile-w: clamp(36px, min(5vw, 8.5vh), 68px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 700px at 50% -10%, #1b2029, var(--ink) 70%);
  color: var(--text);
  font: 15px/1.45 "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }
.screen { height: 100%; }
.hidden { display: none !important; }

kbd {
  font: 600 11px/1 ui-monospace, "Cascadia Code", monospace;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 5px;
  background: #1a1f27;
  color: var(--muted);
}

/* --------------------------------------------------------------- lobby */

#lobby {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}

.lobby-card {
  width: min(560px, 100%);
  background: linear-gradient(180deg, #161b22, #101419);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 30px 80px #0008;
}

.wordmark {
  margin: 0;
  font: 800 clamp(30px, 5vw, 44px)/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.18em;
}
.wordmark span { color: var(--brass); }
.brand { font-weight: 800; letter-spacing: 0.16em; font-size: 14px; }
.brand span { color: var(--brass); }

.tagline { color: var(--muted); margin: 10px 0 26px; letter-spacing: 0.04em; }

.field { display: block; margin-bottom: 22px; }
.field span { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 6px; }

input {
  width: 100%;
  background: #0c1015;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--brass-dim); box-shadow: 0 0 0 3px #d4af3722; }

select {
  width: 100%;
  background: #0c1015;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.field.inline { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 0; }
.field.inline span { margin: 0; }

button {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: 9px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: #1a2028;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.06s, background 0.15s, border-color 0.15s;
}
button:hover:not(:disabled) { background: #222a34; border-color: #38414d; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }

button.primary {
  background: linear-gradient(180deg, var(--brass), #b7952c);
  border-color: #e6c352;
  color: #17130a;
}
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #e6c352, var(--brass)); }
button.ghost { background: transparent; }
button.small { padding: 7px 11px; font-size: 12px; }

.lobby-actions { display: grid; gap: 16px; }
.action-block { display: grid; gap: 10px; }
.or { text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 0.2em; }
.join-row { display: flex; gap: 10px; }
.join-row input {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-align: center;
  max-width: 150px;
}
.check { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--muted); }
.check input { width: auto; }

.rules { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.rules summary { cursor: pointer; color: var(--brass); font-size: 13px; letter-spacing: 0.06em; }
.rules ol { color: var(--muted); font-size: 13px; padding-left: 20px; }
.rules li { margin: 8px 0; }
.rules b { color: var(--text); }

.error-line { color: var(--red); font-size: 13px; min-height: 18px; margin: 14px 0 0; }

/* --------------------------------------------------------------- table */

#table { display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #0c1014;
}
.topbar-mid { display: flex; gap: 8px; flex-wrap: wrap; }
.topbar-right { display: flex; gap: 10px; align-items: center; }

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.pill b { color: var(--brass); letter-spacing: 0.24em; }
#clock { font-variant-numeric: tabular-nums; min-width: 76px; text-align: center; }

.link-status { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.link-status.live { color: var(--good); }
.link-status.down { color: var(--red); }

.felt {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(4px, 1.2vh, 12px);
  padding: clamp(6px, 1.6vh, 16px) clamp(12px, 3vw, 40px);
  background:
    radial-gradient(900px 500px at 50% 45%, var(--felt), var(--felt-2) 75%, #071a13);
  border-bottom: 1px solid var(--line);
  min-height: 0;
}

.side { display: grid; gap: clamp(3px, 0.9vh, 8px); justify-items: center; align-content: start; }

/* Everyone else, side by side across the top of the felt. */
.opponents {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 2.4vw, 34px);
  row-gap: clamp(6px, 1.4vh, 14px);
}
.opp { display: grid; gap: 5px; justify-items: center; }
.opp .piles { gap: clamp(3px, 0.6vw, 9px); }
.opp.away { opacity: 0.45; }
.opponents.many .card { --pile-w: clamp(24px, min(3.6vw, 6.4vh), 46px); }
.opponents.many .who { font-size: 13px; }
.opponents.many .tag { font-size: 10px; }
.side.you { align-content: end; }
.side-label { display: flex; gap: 10px; align-items: baseline; }
.who { font-weight: 700; letter-spacing: 0.06em; }
.tag { font-size: 11px; letter-spacing: 0.14em; color: #b9d8c9; text-transform: uppercase; }
.tag.hot { color: var(--brass); }

.zone-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #9fc4b3;
  text-transform: uppercase;
  text-align: center;
}

.piles, .middle, .hand { display: flex; gap: clamp(6px, 1vw, 14px); justify-content: center; }

.middle-zone { display: grid; gap: 8px; align-content: center; justify-items: center; }
.middle {
  padding: clamp(7px, 1.6vh, 14px) clamp(10px, 2vw, 22px);
  border: 1px dashed #2f7a5c;
  border-radius: 16px;
  background: #0000002e;
}

.hand-zone { display: grid; gap: clamp(3px, 0.9vh, 8px); justify-items: center; }
.putdown { padding: 9px 16px; font-size: 13px; }
.putdown kbd { margin-left: 6px; background: #00000030; border-color: #00000040; color: #2b2410; }

/* ------------------------------------------------------------ cards */

.card {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  display: grid;
  place-content: center;
  position: relative;
  user-select: none;
  font-weight: 700;
  box-shadow: 0 4px 10px #0006;
  transition: transform 0.09s, box-shadow 0.12s, outline-color 0.12s;
}

.card.face {
  background: linear-gradient(160deg, #fffdf7, var(--paper));
  color: #14181d;
  border: 1px solid #cdc6b6;
}
.card.face .rank { font-size: clamp(17px, 2.1vw, 25px); line-height: 1; }
.card.face .suit { font-size: clamp(15px, 1.9vw, 22px); line-height: 1; text-align: center; }
.card.face.red { color: var(--red); }
.card.face .corner {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 10px;
  letter-spacing: -0.02em;
  opacity: 0.75;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #1d2733 0 5px, #16202b 5px 10px);
  border: 1px solid #2b3947;
  color: #46586c;
}
.card.back::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid #33445588;
  border-radius: 4px;
}

.card.slot {
  background: #ffffff0a;
  border: 1px dashed #ffffff2e;
  box-shadow: none;
  color: #ffffff40;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.card.clickable { cursor: pointer; }
.card.clickable:hover { transform: translateY(-5px); box-shadow: 0 10px 18px #0007; }

.card.selected {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  transform: translateY(-8px);
  box-shadow: 0 12px 22px #0008, 0 0 24px #d4af3755;
}

.card.solved {
  outline: 2px solid var(--good);
  outline-offset: 2px;
}
.card .badge {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--good);
  color: #06180f;
  font-size: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px #0007;
}

.card .keyhint {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 9px;
  font-weight: 700;
  opacity: 0.45;
}

.card.held { opacity: 0.55; }
.card.fresh { animation: pop 0.28s ease-out; }
@keyframes pop {
  0% { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 26px #d4af3788; }
  100% { transform: none; }
}

.piles .card { --card-w: var(--pile-w); }

/* ---------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  background: #05070ade;
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 20px;
}
.overlay-card {
  background: linear-gradient(180deg, #171c23, #0f1318);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 34px;
  text-align: center;
  max-width: min(720px, 100%);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 30px 90px #000a;
}
.overlay-card h2 { margin: 0 0 8px; letter-spacing: 0.1em; font-size: 24px; }
.overlay-card h2 .gold { color: var(--brass); }
.overlay-card p { color: var(--muted); margin: 6px 0 18px; }
.overlay-card .code-out {
  font: 800 34px/1 ui-monospace, monospace;
  letter-spacing: 0.34em;
  color: var(--brass);
  margin: 14px 0 4px;
}
.overlay-card .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.count {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(60px, min(16vw, 22vh), 150px);
  line-height: 1;
  color: var(--brass);
  text-shadow: 0 0 60px #d4af3755;
}

.reveal { display: grid; gap: 16px; margin: 8px 0 20px; text-align: left; }
.reveal-row h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.reveal-piles { display: flex; flex-wrap: wrap; gap: 10px; }
.reveal-pile {
  display: flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1014;
}
.reveal-pile.good { border-color: var(--good); }
.reveal-pile span { font-weight: 700; font-size: 13px; }
.reveal-pile span.red { color: #ff6b6b; }

/* ------------------------------------------------------------ toasts */

.toasts {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  z-index: 40;
  pointer-events: none;
}
.toast {
  background: #171d25f2;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  animation: rise 0.2s ease-out;
  box-shadow: 0 10px 24px #0008;
}
.toast.warn { border-left-color: #e0a336; }
.toast.bad { border-left-color: var(--red); }
.toast.win { border-left-color: var(--good); }
.toast.go { border-left-color: var(--good); font-weight: 700; letter-spacing: 0.1em; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.keyhints {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 11px;
  color: var(--muted);
  background: #0c1014;
}

@media (max-width: 560px) {
  .keyhints { display: none; }
  .lobby-card { padding: 22px; }
}

/* Short windows: shed the labels before the cards. */
@media (max-height: 660px) {
  .zone-label { font-size: 9px; letter-spacing: 0.14em; }
  .putdown { padding: 6px 12px; font-size: 12px; }
  .keyhints { padding: 5px 12px; }
  .topbar { padding: 6px 14px; }
}
@media (max-height: 520px) {
  .side-label .tag { display: none; }
  .middle-zone .zone-label { display: none; }
}

/* ---------------------------------------------------------- seat list */

.seats {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
  text-align: left;
}
.seats li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0d1116;
  font-size: 14px;
}
.seats .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.seats li.ready { border-color: #2f6b50; }
.seats li.ready .dot { background: var(--good); box-shadow: 0 0 10px #3fbf7f88; }
.seats li.away { color: var(--muted); border-style: dashed; }
.seats li.away .dot { background: var(--red); }
.seats li.empty { color: #5d6672; border-style: dashed; background: transparent; }
.seats .seat-tag {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fineprint { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ------------------------------------------------------- table browser */

.tables-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d1116;
  padding: 12px;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.panel-count { color: var(--brass); letter-spacing: 0.1em; }

.tables { display: grid; gap: 7px; max-height: 208px; overflow-y: auto; }

.table-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: #12171d;
  border: 1px solid var(--line);
  font-weight: 500;
}
.table-row:hover:not(:disabled) { border-color: var(--brass-dim); }
.table-row .tcode {
  font: 700 14px/1 ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: var(--brass);
}
.table-row .tinfo {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-row .tstate {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
  flex: none;
}
.table-row .tstate.running { color: #e0a336; }
.tables-empty { font-size: 13px; color: var(--muted); padding: 6px 2px; }

button.linkish {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--brass);
  text-decoration: underline;
  cursor: pointer;
}

.held-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}