/* Layout: a limestone-tiled room around a walnut card table with a mother-of-pearl inlay; flat controls. */
:root {
  --paper: #f3eee5;
  --paper-2: #e9e1d3;
  --tile: #e2d8c7;
  --ink: #2b221c;
  --muted: #7b6e61;
  --line: #d5c9b6;
  --wood: #6e452a;
  --wood-light: #87573a;
  --wood-dark: #47291a;
  --pearl: #efe6d6;
  --on-wood: #f4ebdc;
  --on-wood-dim: rgba(244, 235, 220, 0.72);
  --brass: #b88a33;
  --brass-soft: rgba(184, 138, 51, 0.28);
  --pomegranate: #9e2b2b;
  --pomegranate-dark: #7f2121;
  --cedar: #2f5a44;
  --red: #b0262d;
  --black: #241d18;
  --card: #fffdf8;
  --card-edge: #cfc4b2;
  --wild: #6b3fa0;
  /* Display: Aref Ruqaa, a Ruqaa calligraphy face like old Levantine shop signs and card boxes.
     Body: Alexandria, a clean face with matching Arabic and Latin for everything you read. */
  --tile-drift: 42s; /* how long the background tiles take to drift one tile */
  --font-display: "Aref Ruqaa", "Alexandria", Georgia, serif;
  --font-body: "Alexandria", "Segoe UI", system-ui, sans-serif;
  --font-card: Georgia, "Times New Roman", serif;
  --radius: 4px;
  /* Card sizes: hand, everything on the table (pile, deck, melds), opponents' backs */
  --cw: 122px;
  --tw: 92px;
  --sw: 74px;
  --mw: var(--tw);
  --mahogany: #6a2417;
  --mahogany-dark: #3a120b;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-tap-highlight-color: transparent;
}


button, input, select { font: inherit; }

/* ---- buttons: flat ---- */
button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 16px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, opacity 0.2s;
}
button:hover:not(:disabled) { border-color: var(--ink); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
button.primary { background: var(--pomegranate); border-color: var(--pomegranate); color: var(--on-wood); }
button.primary:hover:not(:disabled) { background: var(--pomegranate-dark); border-color: var(--pomegranate-dark); }
button.ghost { background: transparent; }
button.small { padding: 5px 10px; font-size: 13px; }
button.big { padding: 12px 16px; font-size: 16px; }
button.on { background: var(--wild); border-color: var(--wild); color: var(--on-wood); }
button:disabled { opacity: 0.45; cursor: default; }
button.link { border: 0; background: none; padding: 0; color: var(--pomegranate); text-decoration: underline; text-align: left; word-break: break-all; font-weight: 500; }

.hidden { display: none !important; }
.spacer { flex: 1; }
.status { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status.on-turn { color: var(--ink); font-weight: 600; }
.error { color: var(--red); min-height: 1.2em; margin: 0; font-size: 14px; }
.sub { color: var(--muted); font-size: 14px; margin: 0; }
.center-text { text-align: center; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }

/* ---- home / lobby ---- */
.screen { min-height: 100vh; min-height: 100dvh; position: relative; }
.screen:not(.hidden) { animation: fadeIn 0.3s var(--ease); }
#home, #lobby { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

.panel {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 24px 24px;
  box-shadow: 0 10px 30px -14px rgba(43, 34, 28, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeUp 0.4s var(--ease);
}
.panel h1, .panel h2 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
.panel h1 { font-size: 46px; text-align: center; line-height: 1.1; }
.panel h1 .ar { color: var(--pomegranate); }
.hero .sub { text-align: center; margin-top: -6px; }
.panel label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; flex: 1; }
.panel label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; }
.panel input, .panel select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.panel input:focus, .panel select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.panel input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pomegranate); }
.panel .row { display: flex; gap: 10px; }
.panel .row > * { flex: 1; }
#joinCode { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-weight: 700; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hero-fan { --cw: 70px; position: relative; height: 128px; margin: -6px auto 4px; width: 240px; }
.hero-fan .card { position: absolute; left: 50%; top: 10px; transform-origin: 50% 120%; animation: fanIn 0.7s var(--spring) backwards; }
@keyframes fanIn { from { transform: translateX(-50%) rotate(0deg); opacity: 0; } }

.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.code { text-align: center; font-size: 46px !important; letter-spacing: 0.2em; color: var(--pomegranate); margin-top: -6px !important; padding-left: 0.2em; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; padding: 14px; margin: 0; background: var(--paper); }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.plist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); }
.plist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-weight: 600; animation: fadeUp 0.3s var(--ease) backwards; }
.plist li + li { border-top: 1px solid var(--line); }
.plist li .tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.plist .off { opacity: 0.5; }

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; flex: 0 0 auto;
}

/* ---- game ---- */
/* Below this size the page scrolls instead of squeezing the table, so cards never pile up */
#game { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 980px; min-height: 660px; padding: 8px 16px 0; max-width: 1400px; margin: 0 auto; gap: 8px; }
#game.hidden { display: none; }
#game { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.topbar { display: flex; align-items: center; gap: 8px; flex: none; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; }

/* Mahogany table: a real-grain mahogany top, a dark bevelled rim */
.table {
  position: relative;
  flex: 1;
  min-height: 470px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--on-wood);
  background-color: var(--mahogany);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255, 210, 170, 0.12), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(30, 6, 2, 0.35)),
    url("wood-mahogany.jpg");
  background-size: auto, auto, cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 9px var(--mahogany-dark),
    inset 0 0 0 10px rgba(255, 210, 180, 0.22),
    inset 0 14px 34px rgba(0, 0, 0, 0.5),
    0 18px 36px -14px rgba(43, 20, 12, 0.7);
}

/* Opponents: anchored around an ellipse, hands fanned toward the centre */
.seat { position: absolute; width: 0; height: 0; }
.fan { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--rot)); }
.fan .card { position: absolute; left: calc(var(--sw) * -0.5); bottom: calc(var(--sw) * -0.55); transform-origin: 50% 135%; transform: rotate(var(--a)); }
.seat-tag {
  position: absolute; left: 0; top: 0;
  transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy)));
  white-space: nowrap;
  z-index: 2;
}
.seat.off { opacity: 0.55; }
/* Anchored at the fan's tip; shifted so the block grows away from the player */
.seat-melds { position: absolute; transform: translate(calc(-50% + var(--ux, 0) * 50%), calc(-50% + var(--uy, 0) * 50%)); display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 24px 16px; z-index: 3; }

.meld { display: flex; transform: translate(var(--mox, 0), var(--moy, 0)) rotate(var(--mt, 0deg)); border-radius: 3px; padding: 2px; border: 1px solid transparent; transition: border-color 0.15s, background-color 0.15s; }
.meld .card, .meld .card.small { --cw: var(--mw); transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--ct, 0deg)); }
.meld .card + .card { margin-left: calc(var(--mw) * -0.6); }
.meld.target { cursor: pointer; }
.meld.target:hover, .meld.drop-hover { border-color: var(--brass); background: rgba(184, 138, 51, 0.22); }

/* Centre: the pile, with the deck tilted at its top right */
.center { --cw: var(--tw); z-index: 4; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.table.compact .center { left: 46%; top: 60%; }
.pile { position: relative; width: var(--cw); aspect-ratio: 225 / 314; border-radius: 6px; }
.pile::before { content: ""; position: absolute; inset: -6px; border-radius: 8px; border: 1px dashed rgba(239, 230, 214, 0.18); }
.pile-cards .card { position: absolute; left: 0; top: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--tilt, 0deg)); }
.pile-cards .card.tidying { transition: transform 0.45s var(--spring); }
.pile.active { cursor: pointer; }
.pile.active .pile-cards .card:last-child, .pile.drop-hover .pile-cards .card:last-child { box-shadow: 0 0 0 3px var(--brass), 0 2px 6px rgba(0, 0, 0, 0.4); }
.pile.drop-hover::before { border-color: var(--brass); background: rgba(184, 138, 51, 0.15); }

/* Deck: near the top-right corner of the table, slightly tilted */
.deck { --cw: var(--tw); position: absolute; right: calc(4.5% + var(--tw) * 0.7); top: 15%; transform: rotate(30deg); z-index: 4; }
/* The deck lies sideways (landscape); the wild card underneath keeps its upright position */
.deck-cards { position: relative; width: calc(var(--cw) + (var(--n) - 1) * 2px); aspect-ratio: auto; height: calc(var(--cw) * 1.396); transform: rotate(90deg); }
.deck-cards .card { position: absolute; top: 0; left: calc(var(--k) * 2px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
/* Wild card: tucked under the deck in line with it, half sticking out toward the top right */
.indicator { position: absolute; top: calc(var(--cw) * -0.7); left: calc(var(--cw) * 0.06); }
.indicator:empty { display: none; }
.deck.active { cursor: pointer; }
.deck.active .deck-cards .card:last-child { box-shadow: 0 0 0 3px var(--brass); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 3px var(--pearl); } }
/* Your turn to draw: every few seconds the deck lifts a little to say "start here" */
.deck.active .deck-cards { animation: deckCall 3.2s ease-in-out infinite; }
@keyframes deckCall { 0%, 76%, 100% { transform: rotate(90deg) scale(1); } 86% { transform: rotate(90deg) scale(1.07); } }
/* Tried to play before drawing: the deck flashes */
.deck.nudge .deck-cards { animation: deckNudge 0.42s ease-in-out 3; }
@keyframes deckNudge { 50% { transform: rotate(90deg) scale(1.1); filter: brightness(1.2) drop-shadow(0 0 12px rgba(232, 196, 120, 0.95)); } }
/* A card the pile won't take: the pile shakes it off */
.pile.shake { animation: pileShake 0.45s ease; }
@keyframes pileShake { 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* In front of me: my melds and groups being put together */
.mine {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: min(80%, 980px); min-height: calc(var(--mw) * 1.396 + 14px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  border-radius: 6px; border: 1px dashed transparent; padding: 4px;
  transition: border-color 0.2s, background-color 0.2s;
}
.mine-melds, .stage { display: contents; }
body.is-dragging .mine { border-color: rgba(239, 230, 214, 0.25); }
.mine.drop-hover { border-color: var(--brass); background: rgba(184, 138, 51, 0.12); }
.meld.staged { border: 1px dashed rgba(239, 230, 214, 0.6); animation: pop 0.25s var(--spring); }
.meld.staged.pending { border-color: rgba(239, 230, 214, 0.3); }
.meld.staged .card { cursor: grab; }
.stage-points { font-size: 12px; font-weight: 700; background: rgba(20, 6, 3, 0.45); padding: 1px 8px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.stage-points.ok { background: var(--brass); color: var(--ink); }
.me-tag { position: absolute; left: 16px; bottom: 14px; }

/* My hand */
.handbar { flex: none; position: relative; padding: 4px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid transparent; transition: border-color 0.25s; }
.handbar.turn { border-top-color: var(--brass); }
.hand { display: flex; flex-direction: column; align-items: center; padding-top: 18px; min-height: calc(var(--cw) * 1.396 + 22px); }
.hrow { display: flex; justify-content: center; }
.hrow .card + .card { margin-left: calc(var(--step, var(--cw)) - var(--cw)); }
.hand.rows .hrow + .hrow { margin-top: calc(var(--cw) * -0.98); }
.hand.two .hrow + .hrow { margin-top: calc(var(--cw) * -0.85); }
.hand.two .hrow:nth-child(2) { padding-left: calc(var(--cw) * 0.4); }
.hand.rows .hrow:nth-child(2) { padding-left: calc(var(--cw) * 0.5); }
.hand.rows .hrow:nth-child(3) { padding-left: calc(var(--cw) * 1); }
.clusters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 10px; }
.hcluster { display: flex; padding-bottom: 5px; border-bottom: 2px dashed var(--line); }
.hcluster.valid { border-bottom: 2px solid var(--brass); }
.hcluster .card + .card { margin-left: calc(var(--cw) * -0.45); }
.hand.groups { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.hand.groups .hrow .card + .card { margin-left: calc(var(--cw) * -0.42); }

/* ---- cards: SVG-cards artwork ---- */
.card {
  width: var(--cw);
  aspect-ratio: 225 / 314;
  flex: 0 0 auto;
  position: relative;
  border-radius: calc(var(--cw) * 0.05);
  background: #fff center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s, opacity 0.15s;
}
.card.small { --cw: var(--sw); }
/* Wild cards: a small star under the corner index, where it stays visible when overlapped */
.card.wild::after {
  content: "★";
  position: absolute; left: calc(var(--cw) * 0.035); top: calc(var(--cw) * 0.36);
  width: calc(var(--cw) * 0.15); text-align: center;
  font-size: max(9px, calc(var(--cw) * 0.13)); line-height: 1;
  color: var(--wild);
}
.indicator .card.wild::after { display: none; }
.hand .card { cursor: grab; }
@media (hover: hover) {
  .hand .card:hover { transform: translateY(-8px); }
}
.hand .card.selected { transform: translateY(-16px); box-shadow: 0 0 0 2px var(--brass), 0 8px 14px rgba(0, 0, 0, 0.35); }
.card.must { animation: mustPulse 1.2s ease-in-out infinite; }
/* A card you just drew glows for a moment so it's clear what you picked up */
.card.fresh { animation: freshGlow 1.8s ease-out; }
@keyframes freshGlow { 0%, 40% { box-shadow: 0 0 0 3px var(--brass), 0 0 22px rgba(184, 138, 51, 0.8); } 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.35); } }
@keyframes mustPulse { 50% { box-shadow: 0 0 0 3px var(--red); } }
.card.lifted { opacity: 0.25; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }

.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.drag-ghost .card { position: absolute; left: calc(var(--i, 0) * 20px); top: 0; transform: rotate(calc(var(--i, 0) * 4deg - 4deg)); box-shadow: 0 16px 26px rgba(0, 0, 0, 0.45); }

/* Flying ghost cards used for opponents' draws and takes */
.ghost-card { position: fixed; z-index: 30; pointer-events: none; margin: 0; }

/* ---- menu (Tab) ---- */
.menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 100vw);
  background: var(--card); border-left: 1px solid var(--line);
  padding: calc(16px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 18px;
  overflow-y: auto; z-index: 25;
  box-shadow: -16px 0 40px -20px rgba(43, 34, 28, 0.4);
  transition: transform 0.25s var(--ease), visibility 0.25s;
  display: flex; flex-direction: column; gap: 12px;
}
.menu.closed { transform: translateX(100%); visibility: hidden; }
.menu { background-color: var(--card); isolation: isolate; }
/* The menu's tile pattern drifts too, but blurred and faded so the text reads easily */
.menu::before {
  content: ""; position: fixed; top: -56px; right: 0; bottom: 0; width: calc(min(360px, 100vw) + 56px); z-index: -1; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e2d8c7' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E");
  filter: blur(2.5px); opacity: 0.45; animation: tileSlide var(--tile-drift) linear infinite; pointer-events: none;
}
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.menu h4 { margin: 10px 0 0; font-family: "Fraunces", var(--font-display); font-size: 18px; font-weight: 600; font-style: italic; letter-spacing: 0; color: var(--ink, inherit); }
body.rtl .menu h4 { font-style: normal; }
.menu-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; align-items: center; }
.menu-info dt { color: var(--muted); }
.menu-info dd { margin: 0; font-weight: 600; }
.menu-info select { padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.scroll-x { overflow-x: auto; }
.log { font-size: 13px; }
.log p { margin: 5px 0; color: var(--muted); }
.log p:first-child { color: var(--ink); }
.credits { margin-top: auto; font-size: 11px; color: var(--muted); }

/* ---- log, toast, banner ---- */
.toast {
  /* Up near the top of the table, where the eye already is, not down by the hand */
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top));
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--radius); z-index: 40;
  max-width: calc(100vw - 32px); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease), opacity 0.2s;
  font-size: 15px; font-weight: 600; text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.banner {
  position: fixed; left: 50%; top: 38%;
  transform: translate(-50%, -50%); opacity: 0;
  pointer-events: none; z-index: 35;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 6vw, 40px);
  color: var(--on-wood); background: var(--ink);
  padding: 10px 28px; border-radius: var(--radius);
  white-space: nowrap;
}
.banner.show { animation: bannerIn 2s var(--ease) forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%, -40%); }
  14% { opacity: 1; transform: translate(-50%, -50%); }
  82% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -58%); }
}

/* ---- results overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(43, 34, 28, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; animation: fadeIn 0.25s; }
.overlay .panel { max-width: 640px; max-height: 90vh; overflow-y: auto; animation: pop 0.35s var(--spring); }
.overlay h2 { text-align: center; font-size: 26px; }
.scores { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.scores th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.scores th, .scores td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.scores th:first-child, .scores td:first-child { text-align: left; }
.scores td:first-child { font-weight: 600; }
.scores .who { display: inline-flex; align-items: center; gap: 8px; }
.scores tr { animation: fadeUp 0.35s var(--ease) backwards; }
/* The menu redraws its table on every move, so its rows don't fade in */
.menu .scores tr { animation: none; }
.scores tr.lead td { background: var(--paper); }
.scores tr.lead .who::after { content: "leader"; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cedar); border: 1px solid currentColor; border-radius: 2px; padding: 0 4px; }
.scores .tot { font-weight: 700; }
.lefthands { display: flex; flex-direction: column; gap: 10px; }
.lefthand { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.leftcards { display: flex; flex-wrap: wrap; gap: 3px; }

.confetti { position: fixed; top: -12px; width: 8px; height: 12px; z-index: 50; pointer-events: none; }

@media (max-width: 640px) {
  :root { --cw: 52px; --tw: 52px; --sw: 32px; --mw: 30px; }
  #game { padding: 6px 10px 0; }
  .table { min-height: 380px; }
  .seat-tag { font-size: 11px; }
  .seat-melds { max-width: 36%; }
  .me-tag { display: none; }
  .mine { width: 94%; }
  .panel h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* Language switch on the home screen, and right-to-left text for Arabic */
.lang-switch { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 30; display: flex; gap: 4px; }
#home .panel h1.game-title { font-size: 40px; text-align: center; margin: -4px 0 2px; letter-spacing: 0.02em; }
/* In a game the language lives in the menu, so the pinned switch steps aside */
body.in-game .lang-switch { display: none; }
.custom-box { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.lang-switch button { padding: 3px 9px; font-size: 12px; }
body.rtl .panel, body.rtl .menu, body.rtl .toast, body.rtl .banner, body.rtl .seat-tag, body.rtl .me-tag { direction: rtl; }
body.rtl .menu-info dd, body.rtl .log p { text-align: right; }
body.rtl .scores tr.lead .who::after { content: "الأوّل"; letter-spacing: 0; }

/* Competitive: a dark room. Custom: a plain white room. The table itself stays mahogany. */
body.mode-competitive {
  --paper: #15110e; --paper-2: #1c1713; --ink: #eee5d8; --muted: #a8998a; --line: #3a3029;
  --card: #211a16; color-scheme: dark;
}
body.mode-competitive { background-color: var(--paper); color: var(--ink); }
body.mode-competitive .panel input, body.mode-competitive .panel select, body.mode-competitive .menu-info select { background: #2a221d; color: var(--ink); }
body.mode-competitive .toast, body.mode-competitive .banner { background: #f1e7d8; color: #1b1511; }
body.mode-custom { --paper: #ffffff; --paper-2: #f6f6f6; --card: #ffffff; --line: #dedede; }
body.mode-custom { background-color: #ffffff; }

/* ---- lobby: players on the left, rules on the right ---- */
.panel.lobby { max-width: 920px; padding: 26px 26px 20px; gap: 18px; }
.lobby-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; }
.lobby-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.section-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.invite { border: 1px dashed var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.invite-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invite .code { font-size: 34px !important; margin: 0 !important; text-align: left; }
body.rtl .invite .code { text-align: right; }
.soon { display: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px; }
/* In the solo version, online parts are shown as a preview of what's coming */
body.solo .soon { display: inline-block; }
body.solo .online-only { opacity: 0.5; pointer-events: none; user-select: none; }
body.solo .or { gap: 8px; }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.mode-card b { font-family: var(--font-display); font-size: 17px; }
.mode-card span { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.mode-card.on { color: var(--ink); border-color: var(--pomegranate); box-shadow: inset 0 0 0 1px var(--pomegranate); background: color-mix(in srgb, var(--pomegranate) 7%, var(--card)); }
.mode-card[data-mode="competitive"].on { border-color: #2b221c; box-shadow: inset 0 0 0 1px #2b221c; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; align-self: flex-start; }
.seg button { border: 0; border-radius: 0; padding: 7px 16px; background: transparent; font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--pomegranate); color: var(--on-wood); }

.slider { gap: 4px !important; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.slider output { font-family: var(--font-display); font-size: 18px; color: var(--pomegranate); font-variant-numeric: tabular-nums; }
.slider input[type="range"] { padding: 0; border: 0; accent-color: var(--pomegranate); background: transparent; width: 100%; }

.custom-box { border-top: 1px solid var(--line); padding-top: 14px; gap: 12px; animation: fadeUp 0.25s var(--ease); }
.toggle { flex-direction: row !important; align-items: center; gap: 10px; font-weight: 500 !important; font-size: 14px !important; cursor: pointer; }
.panel .toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px !important; height: 20px !important; border-radius: 999px; background: var(--line); position: relative; flex: none; padding: 0 !important; border: 0 !important; transition: background-color 0.2s; cursor: pointer; }
.panel .toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
.panel .toggle input[type="checkbox"]:checked { background: var(--pomegranate); }
.panel .toggle input[type="checkbox"]:checked::after { transform: translateX(14px); }

.lobby-foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.lobby-foot .row { justify-content: flex-end; }
.lobby-foot .row > * { flex: 0 0 auto; min-width: 140px; }
.lobby-foot .sub { text-align: start; }
@media (max-width: 760px) {
  .lobby-cols { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
}

/* ---- in-game menu sections ---- */
.menu-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 6px; background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); }
.menu-sec h4 { margin: 0; }

/* Modes fade into each other: the room's colour and tile pattern cross-fade */
body { transition: background-color 0.9s ease, color 0.9s ease; }
.panel, .menu, .menu-sec, .mode-card, .plist li, .opp, .handbar, button, input, select, fieldset, .invite {
  transition: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease, transform 0.15s, opacity 0.2s;
}
/* The tiles drift by moving the whole layer (cheap for the GPU), not by repainting the pattern */
.room { position: fixed; top: -56px; left: -56px; right: 0; bottom: 0; z-index: -1; pointer-events: none; opacity: 0; background-color: var(--paper); transition: opacity 0.9s ease, background-color 0.9s ease; animation: tileSlide var(--tile-drift) linear infinite; will-change: transform; }
@keyframes tileSlide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 56px, 0); } }
.room-casual { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e2d8c7' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E"); }
.room-competitive { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23302820' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E"); }
.room-custom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ececec' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E"); }
body:not(.mode-competitive):not(.mode-custom) .room-casual, body.mode-competitive .room-competitive, body.mode-custom .room-custom { opacity: 1; }
/* The body stays clear so the room layers (behind it) show through */
html body, html body.mode-competitive, html body.mode-custom { background-color: transparent; }
body { animation: none; }
body.mode-competitive .menu::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23302820' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E"); }
body.mode-custom .menu::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ececec' stroke-width='1.2'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 10A10 10 0 0 0 10 0M46 0A10 10 0 0 0 56 10M56 46A10 10 0 0 0 46 56M10 56A10 10 0 0 0 0 46'/%3E%3C/g%3E%3C/svg%3E"); }

/* Opponents' cards laid out before they've opened: visible, but not a meld yet */
/* Shown from a player's hand, not on the table: smaller, dimmer, held at an angle, with a dashed edge */
.meld.laid-out { position: relative; border: 1px dashed rgba(239, 230, 214, 0.55); background: rgba(20, 6, 3, 0.25); cursor: help;
  transform: translate(var(--mox, 0), var(--moy, 0)) rotate(var(--mt, 0deg)) scale(0.82); }
.meld.laid-out .card { filter: brightness(0.86) saturate(0.85); }
.meld.laid-out::before {
  content: attr(data-label); position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 5;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 10px/1.2 var(--font-body); color: var(--on-wood); background: rgba(16, 6, 3, 0.8); border: 1px dashed rgba(239, 230, 214, 0.55);
}
.meld.laid-out .card * { pointer-events: none; }
.meld.laid-out.drop-hover { border-color: rgba(239, 230, 214, 0.55); background: rgba(20, 6, 3, 0.25); }

/* Lobby: sliders and fields keep their own height */
.lobby-col > label, .lobby-col > .field, .custom-box > label { flex: none; }

/* Your turn: the table edge glows softly and your name tag pulses, for as long as the turn lasts */
.table::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 50px rgba(214, 170, 80, 0.55); opacity: 0; transition: opacity 0.5s ease; }
.table.my-turn::after { opacity: 1; animation: turnGlow 2.4s ease-in-out infinite; }
@keyframes turnGlow { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .table.my-turn::after, .seat-tag::after, .me-tag::after { animation: none; } }

/* Name tags: a plain dark pill, avatar and name. The player on turn fills with brass,
   and a soft ring breathes around it (opacity only, so it stays smooth). */
.seat-tag, .me-tag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px 0 4px; box-sizing: border-box; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--on-wood); background: rgba(16, 6, 3, 0.55); border: 1px solid rgba(255, 235, 200, 0.14);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.seat-tag::after, .me-tag::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(232, 196, 120, 0.75); opacity: 0; transition: opacity 0.4s ease;
}
.seat.turn .seat-tag::after, .me-tag.turn::after { animation: tagRing 2.4s ease-in-out infinite; will-change: opacity; }
@keyframes tagRing { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.seat-tag .avatar, .me-tag .avatar { width: 22px; height: 22px; font-size: 11px; line-height: 1; }
.seat-tag .note { font-weight: 500; color: var(--on-wood-dim); }
.seat.turn .seat-tag, .me-tag.turn { color: #24140c; background: #dcb560; border-color: #dcb560; }
body.rtl .seat-tag, body.rtl .me-tag { padding: 0 4px 0 14px; }

/* ---- phones ---- */
/* The table fills the screen instead of keeping a desktop minimum size */
@media (max-width: 760px), (max-height: 500px) {
  #game { min-width: 0; min-height: 0; padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); gap: 4px; }
  .topbar { gap: 4px; }
  .topbar button { padding: 4px 9px; font-size: 12px; }
  .status { font-size: 12px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .table { min-height: 0; border-radius: 8px; }
  .menu { width: min(100vw, 380px); }
  .banner { font-size: 24px; padding: 8px 20px; }
  .toast { max-width: calc(100vw - 24px); white-space: normal; top: calc(48px + env(safe-area-inset-top)); font-size: 14px; }
  .seat-tag, .me-tag { font-size: 12px; gap: 6px; height: 26px; padding: 0 10px 0 3px; }
  body.rtl .seat-tag, body.rtl .me-tag { padding: 0 3px 0 10px; }
  .seat-tag .avatar, .me-tag .avatar { width: 19px; height: 19px; font-size: 10px; }
  .mine { width: 96%; bottom: 6px; gap: 4px; }
  .seat-melds { gap: 12px 8px; }
  .hand { padding-top: 12px; }
  .hand .card.selected { transform: translateY(-12px); }
}
/* Portrait phone: opponents across the top, pile in the middle, the deck beside it */
@media (max-width: 760px) {
  :root { --cw: clamp(46px, 15vw, 68px); }
  .table.compact .center { left: 40%; top: 63%; }
  .table.compact .deck { right: 10%; top: 58%; transform: rotate(14deg); }
  .table.compact .seat-melds { gap: 8px 6px; }
  .table.compact .seat-melds .meld .card + .card { margin-left: calc(var(--mw) * -0.68); }
  .table.compact .indicator { top: calc(var(--cw) * -0.55); }
  .me-tag { display: none; }
  .table.compact .seat-tag { max-width: calc(100vw / var(--seats, 3) - 10px); }
  .table.compact .seat-tag > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
  .lang-switch { top: calc(6px + env(safe-area-inset-top)); }
  .panel { padding: 18px 16px; }
}
/* Landscape phone: short screen, so smaller hand cards in one line */
@media (max-height: 500px) {
  :root { --cw: clamp(40px, 13vh, 58px); }
  .handbar { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .hand { padding-top: 8px; }
  .me-tag { bottom: 6px; left: 8px; }
}

.menu.closed::before { animation-play-state: paused; }
.table::after { will-change: opacity; }
/* Touch: dragging on the table or hand never scrolls or zooms the page */
.table, .handbar { touch-action: none; }
button { touch-action: manipulation; }
.menu-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.leave-game { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.scores tr.left td { opacity: 0.5; }
body.rtl input[type="range"] { direction: ltr; }