/* DNUP — styles */

:root {
  --felt-1: #17362a;
  --felt-2: #0c221a;
  --ink: #eef4f0;
  --dim: #9fb4aa;
  --panel: #10231c;
  --panel-2: #163026;
  --line: rgba(255, 255, 255, 0.1);
  --gold: #ffc53d;
  --up: #3dd68c;
  --down: #ff8b3d;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  --radius: 14px;
  /* card hue per value 1-10 */
  --v1: #e5484d;
  --v2: #f76b15;
  --v3: #d99b0d;
  --v4: #6fa41a;
  --v5: #22a865;
  --v6: #12a594;
  --v7: #4a7fe0;
  --v8: #6e56cf;
  --v9: #9d4edd;
  --v10: #d6409f;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(90, 220, 160, 0.14), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(40, 140, 220, 0.08), transparent 55%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
}

a {
  color: var(--gold);
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- screens */

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#screen-home,
#screen-lobby {
  justify-content: center;
  padding: 24px;
  gap: 14px;
}

.back-home {
  position: fixed;
  top: 14px;
  left: 16px;
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}

.back-home:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- home */

.logo {
  font-size: 82px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.logo .dn {
  color: var(--ink);
}

.logo .up {
  background: linear-gradient(180deg, var(--gold), var(--down));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transform: rotate(180deg);
  translate: 0 -6px;
}

.logo .arrows {
  font-size: 0.36em;
  vertical-align: 0.6em;
  letter-spacing: 0;
  margin-left: 8px;
}

.logo .arrows .a-up {
  color: var(--up);
}

.logo .arrows .a-dn {
  color: var(--down);
}

.tagline {
  margin: 0 0 10px;
  color: var(--dim);
  text-align: center;
  max-width: 36em;
  line-height: 1.55;
}

.field {
  width: min(340px, 86vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 17px;
  padding: 13px 16px;
  outline: none;
}

.field:focus {
  border-color: rgba(255, 197, 61, 0.55);
}

.field::placeholder {
  color: #6f8478;
}

.btn {
  border-radius: var(--radius);
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease;
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  filter: grayscale(0.6) brightness(0.65);
  cursor: default;
}

.btn.primary {
  background: linear-gradient(180deg, #ffd76e, #f0a020);
  color: #3a2500;
  width: min(340px, 86vw);
}

.btn.secondary {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--dim);
  font-weight: 600;
  padding: 9px 16px;
  font-size: 14px;
}

.btn.slim {
  width: auto;
  padding: 10px 18px;
  font-size: 15px;
}

.join-row {
  display: flex;
  gap: 10px;
  width: min(340px, 86vw);
}

.join-row .field {
  flex: 1;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.divider {
  color: #587065;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(340px, 86vw);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

#home-status {
  min-height: 22px;
  color: var(--dim);
  text-align: center;
  max-width: 36em;
}

#home-status.error {
  color: #ff9c9c;
}

.small-print {
  color: #587065;
  font-size: 12.5px;
  text-align: center;
  max-width: 44em;
  line-height: 1.55;
}

.small-print a {
  color: #7d9a8c;
}

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

.lobby-panel {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 28px;
  width: min(430px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}

.lobby-label {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#lobby-code {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  color: var(--gold);
  text-shadow: 0 4px 18px rgba(255, 197, 61, 0.25);
  user-select: all;
}

.copy-row {
  display: flex;
  gap: 10px;
}

#lobby-players {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
}

.seat-row.empty {
  opacity: 0.45;
  border-style: dashed;
}

.seat-name {
  font-weight: 700;
}

.seat-name.dim {
  color: var(--dim);
  font-weight: 500;
}

.chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--dim);
}

.chip.you {
  background: rgba(61, 214, 140, 0.18);
  color: var(--up);
}

.chip.bot {
  background: rgba(154, 92, 208, 0.22);
  color: #c9a4ee;
}

.kick {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.kick:hover {
  background: rgba(229, 72, 77, 0.3);
  color: #ffb4b4;
}

#lobby-hint {
  color: var(--dim);
  text-align: center;
  min-height: 20px;
}

/* ---------------------------------------------------------------- avatars */

.av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  flex: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}

.av.s0 { background: linear-gradient(160deg, #ff7a59, #d33a2c); }
.av.s1 { background: linear-gradient(160deg, #58a6ff, #2f6fd0); }
.av.s2 { background: linear-gradient(160deg, #3dd68c, #1f9d61); }
.av.s3 { background: linear-gradient(160deg, #c084fc, #8a3fd0); }
.av.s4 { background: linear-gradient(160deg, #ffc53d, #d98a0e); }

.av.empty {
  background: rgba(255, 255, 255, 0.07);
  color: #587065;
}

.av.bot {
  background: linear-gradient(160deg, #6b7a99, #3d4a66);
  font-size: 20px;
}

/* ---------------------------------------------------------------- game */

#screen-game {
  min-height: 100dvh;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  gap: 10px;
}

.topbar {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#room-chip,
#round-chip {
  font-weight: 800;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

#room-chip {
  color: var(--gold);
  letter-spacing: 0.18em;
}

#round-chip {
  color: var(--dim);
}

.topbar .spacer {
  flex: 1;
}

#opponents {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
}

.opp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Badges hang over the box edge, so keep every box above the turn glow that a
   neighbouring box paints outside itself. */
.opp {
  z-index: 2;
}

.opp.turn {
  border-color: rgba(255, 197, 61, 0.8);
  box-shadow: 0 0 0 2px rgba(255, 197, 61, 0.35), 0 0 24px rgba(255, 197, 61, 0.25);
  z-index: 1;
}

.opp.offline {
  opacity: 0.5;
}

.opp-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.opp-name {
  font-weight: 700;
  font-size: 14px;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.opp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.backs {
  display: inline-flex;
  align-items: center;
}

.mini-back {
  width: 13px;
  height: 19px;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #1c2c50 0 4px, #26386a 4px 8px);
  border: 1px solid #3c5290;
  margin-left: -6px;
}

.mini-back:first-child {
  margin-left: 0;
}

.backs + .count,
.count {
  font-weight: 800;
  font-size: 13px;
  color: var(--dim);
}

.score {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
}

.star-badge {
  color: var(--gold);
  font-size: 12px;
}

.tag {
  position: absolute;
  top: -9px;
  right: 10px;
  z-index: 4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
}

.tag.dnup {
  background: var(--gold);
  color: #3a2500;
  animation: bounce 0.8s ease infinite alternate;
}

/* 2-3 cards left: a quieter heads-up than the 1-card alarm */
.tag.low {
  background: rgba(255, 197, 61, 0.22);
  color: var(--gold);
  border: 1px solid rgba(255, 197, 61, 0.5);
}

.tag.win {
  background: var(--up);
  color: #04321c;
}

.tag.off {
  background: #444;
  color: #bbb;
}

.zone-label .tag {
  position: static;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

/* play areas & table sets */

.areas {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tset {
  position: relative;
  min-width: 86px;
  min-height: 110px;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.03);
}

.tset:not(.empty) {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.25);
}

.tset-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f8478;
}

.tset-label.now {
  color: var(--gold);
}

.tset-cards {
  display: flex;
}

.tset-cards .mcard {
  margin-left: -9px;
}

.tset-cards .mcard:first-child {
  margin-left: 0;
}

.tset-none {
  color: #4a5f54;
  font-size: 22px;
  line-height: 40px;
}

/* what the owner just did here (or what happened to their set) */
.tset-note {
  color: var(--dim);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  max-width: 116px;
  padding: 6px 2px;
  align-self: center;
}

.tset-tag {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--dim);
}

.tset-acts {
  display: flex;
  gap: 6px;
}

.sbtn {
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: filter 0.15s ease, transform 0.06s ease;
}

.sbtn:active {
  transform: translateY(1px);
}

.sbtn.add {
  background: linear-gradient(180deg, #ffd76e, #f0a020);
  color: #3a2500;
  border: 0;
}

.sbtn.take {
  background: var(--panel-2);
  color: var(--dim);
}

.sbtn.take:hover {
  color: var(--ink);
}

.tset.pop {
  animation: pop 0.3s ease;
}

.dnup-pop {
  position: absolute;
  left: 50%;
  top: -8px;
  color: var(--gold);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 197, 61, 0.5);
  pointer-events: none;
  z-index: 6;
  animation: dnupPop 1.4s ease forwards;
}

@keyframes dnupPop {
  0% {
    transform: translate(-50%, 6px) scale(0.4) rotate(-160deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -6px) scale(1.2) rotate(0deg);
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -14px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -26px) scale(0.95);
    opacity: 0;
  }
}

@keyframes pop {
  from {
    transform: scale(0.7);
    opacity: 0.3;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* mini table card — two-tone halves: top = active value, bottom = inactive */

.mcard {
  position: relative;
  width: 36px;
  height: 50px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  flex: none;
  background: linear-gradient(180deg, var(--ca) 0%, var(--ca) 55%, var(--cb) 55%, var(--cb) 100%);
}

.mcard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.mc-top {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mc-bot {
  position: absolute;
  bottom: 3px;
  left: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.u69 {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.13em;
}

/* two-digit values (10) shrink a touch so both digits stay visible */
.mc-top.two { font-size: 13px; top: 4px; }
.mc-bot.two { font-size: 9px; }
.pc-top.two { font-size: 27px; top: 9px; }
.pc-bot.two { font-size: 19px; }

/* hand card — two-tone halves: top = active value, bottom = inactive.
   The button itself is a stationary, invisible hit slot; all visuals live on
   .pc-body, which is what lifts. Hover geometry therefore never changes and
   hover flicker is structurally impossible. */

.pcard {
  position: relative;
  width: 66px;
  height: 96px;
  color: #fff;
  font-weight: 800;
  flex: none;
  user-select: none;
  touch-action: none;
  transition: margin 0.15s ease;
}

.pc-body {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 10px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--ca) 0%, var(--ca) 55%, var(--cb) 55%, var(--cb) 100%);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.2s ease;
}

.pc-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 2px;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.42);
}

.pc-top {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: 33px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.pc-bot {
  position: absolute;
  bottom: 7px;
  left: 7px;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.pcard.inert .pc-body {
  filter: saturate(0.75) brightness(0.85);
}

.pcard.dragging {
  transition: none;
  z-index: 30;
  cursor: grabbing;
}

#hand {
  display: flex;
  justify-content: safe center;
  align-items: flex-end;
  padding: 24px 12px 6px;
  width: 100%;
  max-width: 1080px;
  overflow-x: auto;
  overflow-y: visible;
  min-height: 130px;
  margin: 0 auto;
}

#hand .pcard {
  margin-left: -20px;
  cursor: pointer;
}

#hand .pcard:first-child {
  margin-left: 0;
}

/* Only the artwork moves — the button (hit target) stays put. */
#hand .pcard:hover {
  z-index: 2;
}

#hand .pcard:hover .pc-body {
  transform: translateY(-8px);
}

#hand .pcard.sel {
  z-index: 1;
}

#hand .pcard.sel .pc-body {
  transform: translateY(-16px);
  box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255, 197, 61, 0.55), 0 8px 16px rgba(0, 0, 0, 0.45);
}

#hand .pcard.dragging .pc-body {
  transform: none;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  transition: none;
}

/* while dragging, the other cards glide aside to show the landing gap */
#hand.reordering .pcard:not(.dragging) {
  transition: transform 0.16s ease, margin 0.15s ease;
}

body:not(.my-turn) #hand .pcard .pc-body {
  filter: saturate(0.85) brightness(0.92);
}

/* center strip */

#table-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  max-width: 900px;
}

.status {
  min-height: 24px;
  color: var(--dim);
  font-weight: 600;
  text-align: center;
}

.status.mine {
  color: var(--gold);
  animation: glowText 1.4s ease infinite alternate;
}

@keyframes glowText {
  from { text-shadow: 0 0 4px rgba(255, 197, 61, 0.2); }
  to { text-shadow: 0 0 16px rgba(255, 197, 61, 0.65); }
}

/* my zone + actions */

#my-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.zone-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 60px;
}

#sel-hint {
  color: var(--dim);
  font-size: 13px;
  max-width: 34em;
}

/* feed */

#feed {
  position: fixed;
  right: 12px;
  top: 64px;
  width: 230px;
  max-height: min(42dvh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  z-index: 5;
}

#feed:empty {
  display: none;
}

#feed::-webkit-scrollbar {
  width: 8px;
}

#feed::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

/* keep the docked log AND the chat column clear of the table on wide screens */
@media (min-width: 1000px) {
  #screen-game {
    padding-right: 320px; /* log is 230px, chat panel 300px + 12px margin */
  }
}

/* Below that there is no right-hand gutter: the log sits in the flow, and chat
   moves up beside the topbar buttons so it cannot cover cards or controls. */
@media (max-width: 999px) {
  #feed {
    position: static;
    width: min(100%, 460px);
    max-height: 96px;
    margin: 0 auto;
  }
}

.feed-line {
  font-size: 12px;
  color: #cfe0d6;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 4px 9px;
  flex: none;
}

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

#toasts {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}

.toast {
  background: rgba(8, 18, 14, 0.92);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.toast.gone {
  opacity: 0;
  transform: translateY(-8px);
}

.flash {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(30px, 7vw, 58px);
  font-weight: 900;
  letter-spacing: 0.06em;
  z-index: 55;
  pointer-events: none;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
  animation: flashPop 0.5s ease;
  white-space: nowrap;
}

.flash.up { color: var(--up); }
.flash.down { color: var(--down); }
.flash.dnup { color: var(--gold); }

@keyframes flashPop {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-180deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.12) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 8, 0.72);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 70;
  padding: 18px;
}

.panel {
  background: linear-gradient(180deg, #142e24, #0d211a);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 28px;
  width: min(500px, 94vw);
  max-height: 86dvh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.panel h2 {
  margin: 0;
  font-size: 26px;
  text-align: center;
}

.panel .rules {
  margin: 0;
  padding-left: 20px;
  color: #cfe0d6;
  line-height: 1.6;
  font-size: 14px;
}

.panel .rules li {
  margin-bottom: 8px;
}

.panel .rules b {
  color: var(--ink);
}

.panel .credit {
  color: #6f8478;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

#go-sub,
#re-sub {
  color: var(--dim);
  margin: -4px 0 4px;
  text-align: center;
}

#go-rank,
#re-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
}

.rank-row.me {
  border-color: rgba(255, 197, 61, 0.6);
}

.rank-row .av {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.rank-pos {
  font-weight: 900;
  width: 20px;
  text-align: center;
  color: var(--dim);
}

.rank-row:first-child .rank-pos {
  color: var(--gold);
}

.rank-name {
  flex: 1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-cards {
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
}

.rank-cards .delta {
  color: var(--gold);
  font-weight: 900;
}

#go-wait,
#re-wait {
  color: var(--dim);
  font-size: 14px;
}

.panel .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------------------------------------------- chat */

#chat {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 72;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

#chat-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 20px;
  cursor: pointer;
  position: relative;
}

#chat-unread {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px rgba(12, 34, 26, 0.9);
}

#chat-peek {
  max-width: min(260px, 80vw);
  background: rgba(10, 24, 18, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  word-break: break-word;
  animation: peekIn 0.25s ease;
}

@keyframes peekIn {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#chat-panel {
  width: min(300px, 92vw);
  background: rgba(10, 24, 18, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-head {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}

#chat-msgs {
  height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-msg {
  font-size: 13.5px;
  line-height: 1.35;
  word-break: break-word;
}

.chat-time {
  margin-right: 6px;
  color: #587065;
  font-size: 10.5px;
  line-height: 1.7;
}

.chat-name {
  font-weight: 800;
  margin-right: 6px;
}

.chat-name.s0 { color: #ff8a70; }
.chat-name.s1 { color: #6cb1ff; }
.chat-name.s2 { color: #4fe3a3; }
.chat-name.s3 { color: #cf9bff; }
.chat-name.s4 { color: #ffd166; }

.chat-msg.mine .chat-name {
  color: var(--gold);
}

#chat-form {
  display: flex;
  border-top: 1px solid var(--line);
}

#chat-input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
}

#chat-input::placeholder {
  color: #6f8478;
}

.chat-send {
  padding: 0 14px;
  color: var(--gold);
  cursor: pointer;
  font-size: 16px;
}

/* confetti */

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 65;
}

#confetti i {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(105vh) rotate(720deg);
  }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .logo { font-size: 58px; }

  .pcard {
    width: 56px;
    height: 82px;
  }

  .pc-top { font-size: 27px; }
  .pc-bot { font-size: 19px; }

  .mcard {
    width: 31px;
    height: 44px;
  }

  .mc-top { font-size: 16px; }

  #hand .pcard {
    margin-left: -16px;
  }

  .feed-line {
    font-size: 11px;
  }

  .opp {
    padding: 8px 10px;
  }

  .opp .av {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  #round-chip {
    display: none;
  }
}

/* chat bubble floating over a player's seat */
#my-zone {
  position: relative;
}

.chat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  max-width: 210px;
  width: max-content;
  background: linear-gradient(180deg, #fff5d6, #ffe9a8);
  color: #3a2500;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 7px 11px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  z-index: 9;
  pointer-events: none;
  animation: bubbleIn 0.22s ease;
}

.chat-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffe9a8;
}

@keyframes bubbleIn {
  from {
    transform: translateX(-50%) translateY(5px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

/* Below the docked-log breakpoint there is no right-hand gutter, so a floating
   chat button would sit on top of the cards and the action buttons. Chat moves
   up beside the topbar buttons instead, dropping its panel down from there.
   (This block must come after the base #chat rules to win on order.) */
@media (max-width: 999px) {
  #chat {
    top: 8px;
    bottom: auto;
    left: 12px;
    right: 12px;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .topbar {
    padding-right: 52px;
  }

  #chat-panel {
    width: min(320px, 100%);
    align-self: flex-end;
  }

  #chat-toggle {
    align-self: flex-end;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  #chat-peek {
    align-self: flex-end;
    max-width: min(320px, 100%);
  }
}

/* Disconnect banner: the table stalls until the player returns or the host
   resolves it (neutral tones so it reads on any of our palettes) */
#dc-banner { display: none; }
#dc-banner.on { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 2px; max-width: 620px; padding: 0 10px; }
#dc-banner .dc-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: rgba(255, 92, 92, 0.14); border: 1px solid rgba(255, 92, 92, 0.55); border-radius: 10px; padding: 7px 12px; font-size: 13px; line-height: 1.35; }
#dc-banner .dc-row.covered { background: rgba(127, 127, 127, 0.12); border-color: rgba(127, 127, 127, 0.45); }
#dc-banner .dc-btn { border: 1px solid rgba(127, 127, 127, 0.55); background: rgba(127, 127, 127, 0.16); color: inherit; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
#dc-banner .dc-btn:hover { background: rgba(127, 127, 127, 0.28); }

/* Observers: watch chip, lobby note, and the shadow-a-player bar */
#watch-chip { display: none; }
#watch-chip.on { display: inline-block; margin-left: 8px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, 0.16); border: 1px solid rgba(127, 127, 127, 0.4); vertical-align: middle; }
#lobby-watch { display: none; }
#lobby-watch.on { display: block; margin: 6px auto 0; font-size: 12.5px; opacity: 0.85; text-align: center; }
#ob-bar { display: none; }
#ob-bar.on { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 2px; max-width: 620px; padding: 0 10px; }
#ob-bar .ob-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: rgba(120, 160, 255, 0.12); border: 1px solid rgba(120, 160, 255, 0.5); border-radius: 10px; padding: 7px 12px; font-size: 13px; line-height: 1.35; }
#ob-bar .ob-switch { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#ob-bar .ob-btn { border: 1px solid rgba(127, 127, 127, 0.55); background: rgba(127, 127, 127, 0.16); color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
#ob-bar .ob-btn:hover { background: rgba(127, 127, 127, 0.28); }
#ob-bar .ob-btn.on { background: rgba(120, 160, 255, 0.3); border-color: rgba(120, 160, 255, 0.75); cursor: default; }

/* Seat claiming / resigning */
#ob-bar .ob-btn.claim { background: rgba(120, 230, 160, 0.18); border-color: rgba(120, 230, 160, 0.6); }
#ob-bar .ob-btn.claim:hover { background: rgba(120, 230, 160, 0.3); }
#lobby-watch button { margin-left: 8px; border: 1px solid rgba(120, 230, 160, 0.6); background: rgba(120, 230, 160, 0.18); color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
#lobby-watch button:hover { background: rgba(120, 230, 160, 0.3); }

/* Rectangular table: players face each other on the top and bottom edges;
   play areas sit on each player's table-facing side */
.prow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: flex-start; min-height: 120px; }
#row-bottom { align-items: flex-end; }
#row-bottom #my-zone { flex: 0 1 auto; min-width: 260px; }

/* Announcements must survive any browser width: wrap instead of clipping */
.flash { max-width: min(92vw, 780px); width: max-content; white-space: normal; overflow-wrap: break-word; text-align: center; box-sizing: border-box; }

/* Game table-talk: the same bubbles as chat, tinted as the game speaking */
.chat-bubble.say { border: 1px solid rgba(255, 205, 110, 0.75); background: rgba(66, 52, 22, 0.96); color: #ffe9c4; font-weight: 600; }

/* Top-row players speak toward the table: bubbles hang below their seat */
.chat-bubble { max-width: min(210px, 60vw); }
.chat-bubble.below { bottom: auto; top: calc(100% + 9px); }
.chat-bubble.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff5d6; }
.chat-bubble.say::after { border-top-color: rgba(66, 52, 22, 0.96); }
.chat-bubble.say.below::after { border-top-color: transparent; border-bottom-color: rgba(66, 52, 22, 0.96); }

/* Bubbles on a fixed overlay: flicker-free, unclippable, above the seats */
#bubble-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
#bubble-layer .bubble-stack { position: absolute; display: flex; flex-direction: column; gap: 4px; transform: translate(-50%, calc(-100% - 10px)); }
#bubble-layer .chat-bubble { position: relative; left: auto; top: auto; bottom: auto; right: auto; margin: 0; transform: none; }
#bubble-layer .chat-bubble::after { display: none; }
#bubble-layer .chat-bubble:last-child::after { display: block; left: 50%; right: auto; bottom: -12px; top: auto; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #ffe9a8; }
#bubble-layer .chat-bubble.say:last-child::after { border-top-color: rgba(66, 52, 22, 0.96); }
#row-top { margin-top: 84px; }
.opp { width: 272px; min-height: 168px; }
#row-bottom #my-zone { min-height: 168px; }
.prow .opp { flex: 0 0 272px; }