/* =============================================================================
   Liar's Dice — a saloon card table.

   A different room from the spy games, on purpose: walnut planks instead of
   navy glass, parchment wanted posters for every seat, a bid nailed up on a
   plank, ivory dice and a leather cup, brass buttons. Rye (a wood-type face,
   SIL OFL) carries English headings; Persian stays in Vazirmatn at its
   heaviest, which has the same poster weight.

   Colour has one job each:
     brass  — what you can press, and the dice that match the bid;
     rust   — "Liar!", losses and the out stamp;
     green  — a true bid;
     parchment/ink — the posters and the plank.

   Prefix `ld-`. Parts made by game-kit.js keep their `gk-` names.
   ========================================================================== */

@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rye-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}

.ld-page {
  --ld-wood-0: #1c110a;
  --ld-wood-1: #2c1b10;
  --ld-wood-2: #3d2615;
  --ld-wood-3: #5a3a20;
  --ld-paper: #ecdcb4;
  --ld-paper-2: #dcc592;
  --ld-ink: #33200f;
  --ld-ink-soft: #6b4b2a;
  --ld-brass: #e0b04f;
  --ld-brass-hi: #f6d98c;
  --ld-brass-deep: #8e621b;
  --ld-rust: #c4402f;
  --ld-rust-deep: #7c2216;
  --ld-green: #4f9a5a;
  --ld-felt: #1f4a33;
  --ld-felt-2: #143222;
  --ld-ivory: #f7f0e1;
  --ld-cow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 100 Q14 70 50 64 Q86 70 88 100 Z'/%3E%3Cpath d='M40 64 L50 78 L60 64 Z' fill-opacity='.6'/%3E%3Cellipse cx='50' cy='48' rx='12' ry='14'/%3E%3Cpath d='M34 34 Q34 14 42 13 Q50 18 58 13 Q66 14 66 34 Z'/%3E%3Cpath d='M8 36 Q20 28 50 30 Q80 28 92 36 Q80 42 50 39 Q20 42 8 36 Z'/%3E%3C/svg%3E");
  --ld-display: 'Rye', var(--font-sans);
  padding-block-start: calc(var(--header-h) + var(--space-8));
}
.ld-page :lang(fa),
.ld-page:lang(fa) { --ld-display: var(--font-sans); }

.gk-icon { display: inline-grid; place-items: center; flex: none; }
.gk-icon svg { inline-size: 1.2em; block-size: 1.2em; }

/* --- Hero ----------------------------------------------------------------- */
.ld-hero { padding-block: var(--space-4) var(--space-6); }
.ld-hero .h1 { font-family: var(--ld-display); font-size: var(--text-5xl); font-weight: 900; color: var(--ld-brass-hi); text-shadow: 0 3px 0 var(--ld-brass-deep), 0 0 30px rgb(224 176 79 / 25%); }
.ld-hero .lede { margin-block-start: var(--space-4); color: var(--text-soft); }
.ld-back { display: flex; inline-size: fit-content; align-items: center; gap: var(--space-2); margin-block-end: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
.ld-back:hover { color: var(--text); }
ul.ld-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.ld-noscript { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--ld-rust); border-radius: var(--r-md); color: var(--ld-rust); }

body.ld-is-playing .ld-hero,
body.ld-is-playing .ld-method { display: none; }
body.ld-is-playing .ld-page { padding-block-start: calc(var(--header-h) + var(--space-3)); }
.ld-game { display: grid; gap: var(--space-4); padding-block-end: var(--space-8); scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); }
body.ld-is-playing .ld-game.shell { max-inline-size: min(100%, 110rem); padding-block-end: var(--space-3); }
.ld-stage { display: grid; gap: var(--space-5); min-inline-size: 0; }

/* --- Wood ----------------------------------------------------------------- */
.ld-board {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 0.6rem;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0%) 0 2px, rgb(0 0 0 / 18%) 2px 3px, rgb(0 0 0 / 0%) 3px 9rem),
    repeating-linear-gradient(0deg, rgb(255 220 170 / 3%) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--ld-wood-3), var(--ld-wood-2) 40%, var(--ld-wood-1));
  box-shadow: inset 0 2px 0 rgb(255 220 170 / 18%), inset 0 0 0 2px rgb(0 0 0 / 35%), inset 0 -6px 0 rgb(0 0 0 / 25%), 0 22px 40px -18px rgb(0 0 0 / 90%);
  color: #f4e6c8;
}
/* Four nails, one in each corner */
.ld-nails { position: absolute; inset: 0.6rem; pointer-events: none;
  background:
    radial-gradient(circle at 0.4rem 0.4rem, #c9b183 0 0.18rem, #5b4526 0.2rem 0.32rem, transparent 0.34rem) left top / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle at 0.4rem 0.4rem, #c9b183 0 0.18rem, #5b4526 0.2rem 0.32rem, transparent 0.34rem) right top / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle at 0.4rem 0.4rem, #c9b183 0 0.18rem, #5b4526 0.2rem 0.32rem, transparent 0.34rem) left bottom / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle at 0.4rem 0.4rem, #c9b183 0 0.18rem, #5b4526 0.2rem 0.32rem, transparent 0.34rem) right bottom / 0.8rem 0.8rem no-repeat; }

/* --- Buttons: brass, rust, rope ------------------------------------------------ */
.ld-btn {
  --face: linear-gradient(180deg, var(--ld-brass-hi), var(--ld-brass) 50%, #b98a2e);
  --lip: var(--ld-brass-deep);
  --ink: #2c1a07;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 2.9rem; padding: 0.55rem 1.3rem;
  border: 0; border-radius: 0.45rem;
  background: var(--face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 0 0 1px rgb(0 0 0 / 20%), 0 4px 0 var(--lip), 0 10px 20px -10px rgb(0 0 0 / 80%);
  color: var(--ink); font: inherit; font-weight: 900; line-height: 1.2; white-space: nowrap;
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
  cursor: pointer; transition: transform 80ms ease-out, box-shadow 80ms ease-out, filter 120ms;
  -webkit-tap-highlight-color: transparent;
}
.ld-btn:hover { filter: brightness(1.08); }
.ld-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 0 0 1px rgb(0 0 0 / 20%), 0 1px 0 var(--lip); }
.ld-btn:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 4px; }
.ld-btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); transform: none; }
.ld-btn[hidden] { display: none; }
.ld-btn--brass:lang(en) .gk-text, .ld-btn--red:lang(en) .gk-text { font-family: var(--ld-display); font-weight: 400; letter-spacing: 0.03em; }
.ld-btn--red { --face: linear-gradient(180deg, #e0634f, var(--ld-rust) 55%, #9f2e20); --lip: var(--ld-rust-deep); --ink: #fff4e6; text-shadow: 0 1px 0 rgb(0 0 0 / 30%); }
.ld-btn--ghost { --face: transparent; --lip: transparent; box-shadow: inset 0 0 0 2px rgb(236 220 180 / 30%); color: #f0deb6; text-shadow: none; }
.ld-btn--ghost:active { box-shadow: inset 0 0 0 2px rgb(236 220 180 / 30%); }
.ld-btn--sm { min-block-size: 2.4rem; padding: 0.4rem 0.95rem; font-size: var(--text-sm); }
.ld-btn--lg { min-block-size: 3.3rem; padding-inline: 1.6rem; font-size: var(--text-lg); }
.ld-btn--xl { min-block-size: 4rem; padding-inline: 2.5rem; font-size: var(--text-xl); }

/* --- Dice: ivory, seven pips, the face picks which show ----------------------------- */
.ld-die {
  --s: 2.6rem;
  position: relative; display: inline-grid; flex: none;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas: 'tl . tr' 'ml c mr' 'bl . br';
  inline-size: var(--s); block-size: var(--s);
  padding: calc(var(--s) * 0.14);
  border-radius: calc(var(--s) * 0.2);
  background: radial-gradient(circle at 30% 25%, #fffdf6, var(--ld-ivory) 45%, #d9ccb0);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 15%), inset 0 1px 0 #fff, 0 2px 0 #9c8a68, 0 4px 8px -2px rgb(0 0 0 / 60%);
}
.ld-pip { display: none; place-self: center; inline-size: 72%; block-size: 72%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a2e18, #1b0f06); }
.ld-pip--tl { grid-area: tl; } .ld-pip--tr { grid-area: tr; } .ld-pip--ml { grid-area: ml; } .ld-pip--c { grid-area: c; }
.ld-pip--mr { grid-area: mr; } .ld-pip--bl { grid-area: bl; } .ld-pip--br { grid-area: br; }
.ld-die[data-face='1'] .ld-pip--c { display: block; background: radial-gradient(circle at 40% 35%, #d9473a, #8f1c12); inline-size: 90%; block-size: 90%; }
.ld-die[data-face='2'] :is(.ld-pip--tl, .ld-pip--br),
.ld-die[data-face='3'] :is(.ld-pip--tl, .ld-pip--c, .ld-pip--br),
.ld-die[data-face='4'] :is(.ld-pip--tl, .ld-pip--tr, .ld-pip--bl, .ld-pip--br),
.ld-die[data-face='5'] :is(.ld-pip--tl, .ld-pip--tr, .ld-pip--c, .ld-pip--bl, .ld-pip--br),
.ld-die[data-face='6'] :is(.ld-pip--tl, .ld-pip--tr, .ld-pip--ml, .ld-pip--mr, .ld-pip--bl, .ld-pip--br) { display: block; }
.ld-die--xs { --s: 1.15rem; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%), 0 1px 0 #9c8a68; }
.ld-die--sm { --s: 1.9rem; }
.ld-die--md { --s: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); }
.ld-die--lg { --s: clamp(3.2rem, 2.4rem + 3vw, 5rem); }
.ld-die.is-match { box-shadow: inset 0 -2px 0 rgb(0 0 0 / 15%), 0 2px 0 #9c8a68, 0 0 0 3px var(--ld-brass), 0 0 18px var(--ld-brass); }
.ld-die.is-dim { opacity: 0.35; filter: grayscale(0.5); }

/* --- The leather cup ---------------------------------------------------------------- */
.ld-cup { position: relative; display: inline-block; inline-size: 4.5rem; block-size: 4rem;
  background: linear-gradient(90deg, #3b2010, #7a4524 35%, #5a2f16 70%, #2c170b);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  border-radius: 0.3rem; box-shadow: inset 0 0.5rem 0 rgb(0 0 0 / 30%); }
.ld-cup::before { content: ''; position: absolute; inset-inline: 10%; inset-block-end: 22%; block-size: 0.35rem; background: repeating-linear-gradient(90deg, #d8b46a 0 4px, transparent 4px 8px); opacity: 0.7; }
.ld-cup--big { inline-size: 7rem; block-size: 6.2rem; }

/* --- Setup board ------------------------------------------------------------------- */
.ld-setup { display: grid; gap: var(--space-6); }
.ld-setup__title { font-family: var(--ld-display); font-size: var(--text-4xl); font-weight: 900; color: var(--ld-brass-hi); text-shadow: 0 2px 0 rgb(0 0 0 / 50%); }
.ld-setup__intro { margin-block-start: var(--space-2); max-inline-size: 44rem; color: #e6d2a8; }
.ld-setup__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.ld-setup__col { display: grid; gap: var(--space-5); min-inline-size: 0; }
.ld-setup__go { justify-self: center; min-inline-size: min(100%, 22rem); }
.ld-field { display: grid; gap: var(--space-2); }
.ld-field__label { color: var(--ld-brass-hi); font-size: var(--text-sm); font-weight: 900; }
.ld-input {
  inline-size: 100%; min-block-size: 3rem; padding: 0.45rem 0.9rem;
  border: 0; border-radius: 0.35rem;
  background: linear-gradient(180deg, var(--ld-paper), var(--ld-paper-2));
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 25%), 0 1px 0 rgb(255 220 170 / 20%);
  color: var(--ld-ink); font: inherit; font-size: var(--text-lg); font-weight: 800;
}
.ld-input::placeholder { color: rgb(51 32 15 / 45%); }
.ld-input:focus { outline: 3px solid var(--ld-brass); outline-offset: 2px; }
.ld-friends { display: grid; gap: var(--space-2); }
.ld-friends:empty { display: none; }
.ld-friends__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-2); }
.ld-note { min-block-size: 1.2em; color: #ffb4a4; font-size: var(--text-sm); font-weight: 700; }
.ld-note:empty { display: none; }
.ld-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 0.4rem; background: rgb(0 0 0 / 25%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 35%); }
.ld-resume__title { font-weight: 900; color: var(--ld-brass-hi); }
.ld-resume__note { color: #e6d2a8; font-size: var(--text-sm); }
.ld-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Option rows (game-kit selector), as burned-in signs */
.ld-options { display: grid; gap: var(--space-2); }
.ld-option { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); align-items: center; gap: var(--space-3); padding: var(--space-2); padding-inline-start: var(--space-4); border-radius: 0.4rem; background: rgb(0 0 0 / 22%); box-shadow: inset 0 1px 0 rgb(0 0 0 / 30%), 0 1px 0 rgb(255 220 170 / 8%); }
.ld-option:focus-within { box-shadow: inset 0 0 0 2px rgb(224 176 79 / 55%); }
.ld-option__text { display: grid; min-inline-size: 0; }
.ld-option__label { font-weight: 900; color: #f4e6c8; }
.ld-option__hint { color: #c8ad80; font-size: var(--text-xs); }
.ld-option__control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.ld-option__middle { display: grid; justify-items: center; gap: 0.3rem; min-inline-size: 0; }
.ld-option__value { overflow: hidden; max-inline-size: 100%; color: var(--ld-brass-hi); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ld-option__value.is-bump { animation: ld-bump 220ms var(--ease-out); }
@keyframes ld-bump { from { transform: scale(0.8); opacity: 0.4; } }
.ld-option__pips { display: flex; gap: 0.25rem; }
.ld-option__pip { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: rgb(0 0 0 / 35%); }
.ld-option__pip.is-on { background: var(--ld-brass); box-shadow: 0 0 6px var(--ld-brass); }
.ld-option__arrow { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: 0.35rem; background: linear-gradient(180deg, var(--ld-brass-hi), var(--ld-brass)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 3px 0 var(--ld-brass-deep); color: #2c1a07; cursor: pointer; transition: transform 80ms; }
.ld-option__arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ld-brass-deep); }
.ld-option__arrow:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-option__arrow[disabled] { opacity: 0.3; cursor: default; transform: none; }

/* =============================================================================
   The table
   ========================================================================== */
.ld-arena {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  block-size: calc(100dvh - var(--header-h) - var(--space-6));
  min-block-size: 34rem;
  padding: var(--space-3);
  border-radius: 0.8rem;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0%) 0 2px, rgb(0 0 0 / 22%) 2px 3px, rgb(0 0 0 / 0%) 3px 7.5rem),
    repeating-linear-gradient(0deg, rgb(255 220 170 / 2.5%) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, var(--ld-wood-2), var(--ld-wood-1) 60%, var(--ld-wood-0));
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 40%), inset 0 2px 0 rgb(255 220 170 / 14%), 0 30px 60px -30px #000;
  color: #f4e6c8;
  overflow: hidden;
}
.ld-arena.is-shot { animation: ld-recoil 420ms ease-out; }
@keyframes ld-recoil { 10% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -2px); } 55% { transform: translate(-3px, 1px); } 100% { transform: none; } }

/* Bar */
.ld-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ld-bar__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.ld-bar__round { font-family: var(--ld-display); font-size: var(--text-xl); color: var(--ld-brass-hi); }
.ld-bar__dice { color: #c8ad80; font-size: var(--text-sm); font-weight: 700; }
.ld-bar__tools { display: flex; gap: var(--space-2); }
.ld-tool { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: 0.6rem; border: 0; border-radius: 0.4rem; background: rgb(0 0 0 / 28%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 30%); color: #e6d2a8; font: inherit; font-size: var(--text-xs); font-weight: 800; cursor: pointer; }
.ld-tool:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--ld-brass); }
.ld-tool:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-tool--wide { padding-inline: 0.9rem; }

/* The table area: posters, then the felt with the plank */
.ld-table { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); min-block-size: 0; }
.ld-posters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(0.4rem, 1.2vw, 1rem); margin: 0; padding: 0.4rem 0.2rem 0; list-style: none; }
.ld-poster {
  --tilt: -1.2deg;
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 0.25rem;
  min-inline-size: 0;
  padding: 0.7rem 0.5rem 0.6rem;
  background: radial-gradient(120% 80% at 50% 0%, #f6ead0, var(--ld-paper) 55%, var(--ld-paper-2));
  color: var(--ld-ink);
  clip-path: polygon(0 2%, 8% 0, 22% 1.5%, 40% 0, 58% 1.8%, 76% 0, 92% 1.4%, 100% 0, 99% 22%, 100% 48%, 98.5% 75%, 100% 100%, 84% 98.5%, 63% 100%, 44% 98%, 25% 100%, 9% 98.4%, 0 100%, 1.5% 72%, 0 46%, 1.2% 20%);
  transform: rotate(var(--tilt));
  transition: transform 220ms var(--ease-out), filter 220ms;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 55%));
}
.ld-poster:nth-child(even) { --tilt: 1.4deg; }
.ld-poster:nth-child(3n) { --tilt: -0.4deg; }
.ld-poster.is-turn { transform: rotate(0deg) translateY(-4px) scale(1.04); filter: drop-shadow(0 0 14px rgb(224 176 79 / 85%)) drop-shadow(0 8px 10px rgb(0 0 0 / 60%)); }
.ld-poster.is-out { filter: grayscale(1) brightness(0.55) drop-shadow(0 4px 6px rgb(0 0 0 / 60%)); }
.ld-poster.is-me::before { content: '★'; position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.4rem; color: var(--ld-brass-deep); font-size: 0.9rem; }
.ld-portrait { display: block; inline-size: clamp(2.6rem, 6vw, 4.2rem); aspect-ratio: 1; border-radius: 0.25rem; background: radial-gradient(circle at 50% 35%, #e5cf9f, #b89562); box-shadow: inset 0 0 0 2px rgb(51 32 15 / 45%); position: relative; overflow: hidden; }
.ld-portrait::after { content: ''; position: absolute; inset: 8% 4% 0; background: var(--ld-ink); -webkit-mask: var(--ld-cow) center bottom / contain no-repeat; mask: var(--ld-cow) center bottom / contain no-repeat; opacity: 0.88; }
.ld-poster.is-human .ld-portrait { background: radial-gradient(circle at 50% 35%, #f1d79d, #c79a4a); }
.ld-poster__name { max-inline-size: 100%; overflow: hidden; font-family: var(--ld-display); font-size: clamp(0.75rem, 0.6rem + 0.5vw, 1.05rem); font-weight: 900; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ld-poster__dice { display: flex; gap: 0.18rem; }
.ld-mini { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 0.12rem; box-shadow: inset 0 0 0 1px rgb(51 32 15 / 45%); }
.ld-mini.is-on { background: var(--ld-ink); box-shadow: none; }
.ld-poster .spy-stamp { position: absolute; inset-block-start: 40%; --c: var(--ld-rust); font-size: var(--text-sm); }

/* Speech bubbles */
.ld-bubble {
  position: absolute; inset-block-start: -0.4rem; inset-inline-end: -0.3rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.5rem; border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: #fffaf0; color: var(--ld-ink); font-size: var(--text-sm); font-weight: 900;
  box-shadow: 0 3px 8px rgb(0 0 0 / 45%);
  transform: rotate(calc(var(--tilt) * -1));
  animation: ld-pop 260ms var(--ease-out);
}
.ld-bubble--think { color: var(--ld-ink-soft); font-size: var(--text-2xs); font-weight: 700; }
.ld-bubble--think::after { content: ''; inline-size: 0.35rem; block-size: 0.35rem; border-radius: 50%; background: currentcolor; animation: ld-blink 0.9s steps(2) infinite; }
.ld-bubble--shout { background: var(--ld-rust); color: #fff4e6; font-family: var(--ld-display); font-size: var(--text-base); animation: ld-shout 380ms cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes ld-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ld-shout { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } }
@keyframes ld-blink { to { visibility: hidden; } }

/* The felt and the plank */
.ld-center {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: var(--space-3);
  min-block-size: 0;
  padding: var(--space-4);
  border-radius: 50% / 38%;
  background: radial-gradient(ellipse at 50% 40%, #2c6346, var(--ld-felt) 50%, var(--ld-felt-2));
  box-shadow: inset 0 0 0 0.6rem #4a2c17, inset 0 0 0 0.8rem #2a170b, inset 0 0 50px rgb(0 0 0 / 55%);
  overflow: hidden;
}
.ld-plank {
  position: relative;
  display: grid; justify-items: center; gap: 0.2rem;
  min-inline-size: min(100%, 18rem);
  padding: 0.8rem 1.8rem 0.9rem;
  border-radius: 0.3rem;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0%) 0 5px, rgb(0 0 0 / 7%) 5px 6px),
    linear-gradient(180deg, #b07a45, #8a5a2e 60%, #6c4422);
  box-shadow: inset 0 2px 0 rgb(255 230 190 / 35%), inset 0 -3px 0 rgb(0 0 0 / 30%), 0 10px 20px -8px rgb(0 0 0 / 80%);
  color: #2b1708;
  transform: rotate(-1.2deg);
}
.ld-plank .ld-nails { inset: 0.35rem; }
.ld-plank__label { font-size: var(--text-xs); font-weight: 900; color: #3b2210; opacity: 0.8; }
.ld-plank__bid { display: flex; align-items: center; gap: var(--space-3); }
.ld-plank__qty { font-family: var(--ld-display); font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); font-weight: 900; line-height: 1; color: #241204; text-shadow: 0 1px 0 rgb(255 230 190 / 40%); }
.ld-plank__x { font-size: var(--text-2xl); font-weight: 900; opacity: 0.6; }
.ld-plank__empty { font-family: var(--ld-display); font-size: var(--text-4xl); opacity: 0.5; }
.ld-plank__by { font-size: var(--text-sm); font-weight: 800; color: #3b2210; }
.ld-log { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; max-inline-size: 40rem; }
.ld-log__item { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: var(--r-full); background: rgb(0 0 0 / 30%); color: #d9e9d9; font-size: var(--text-xs); font-weight: 700; }
.ld-log__who { opacity: 0.75; }

/* The rack: tray + controls */
.ld-rack { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-4); align-items: stretch; padding: var(--space-3); border-radius: 0.6rem; background: linear-gradient(180deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 35%)); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 20%); }
.ld-tray { display: grid; align-content: center; gap: var(--space-2); min-inline-size: 0; }
.ld-tray__label { color: var(--ld-brass-hi); font-size: var(--text-sm); font-weight: 900; }
.ld-tray__dice { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.4rem, 1vw, 0.8rem); min-block-size: 3.6rem; }
.ld-tray__dice .ld-die.is-rolling { animation: ld-roll 520ms cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ld-roll { 0% { transform: translateY(-1.2rem) rotate(-200deg) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

.ld-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'turn turn' 'qty faces' 'actions actions' 'hint hint'; align-items: center; gap: var(--space-2) var(--space-3); min-inline-size: 0; }
.ld-controls.is-waiting { display: grid; place-items: center; grid-template-columns: 1fr; grid-template-areas: none; }
.ld-controls__wait { color: #e6d2a8; font-size: var(--text-lg); font-weight: 800; text-align: center; }
.ld-controls__turn { grid-area: turn; font-family: var(--ld-display); font-size: var(--text-xl); color: var(--ld-brass-hi); }
.ld-qty { grid-area: qty; display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'label label label' 'minus value plus'; align-items: center; gap: 0.2rem 0.4rem; }
.ld-qty__label { grid-area: label; color: #c8ad80; font-size: var(--text-2xs); font-weight: 800; }
.ld-qty__value { grid-area: value; min-inline-size: 2.4ch; font-family: var(--ld-display); font-size: var(--text-3xl); line-height: 1; text-align: center; color: #fff4dd; }
.ld-step { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: 50%; background: linear-gradient(180deg, var(--ld-brass-hi), var(--ld-brass)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 3px 0 var(--ld-brass-deep); color: #2c1a07; font: inherit; font-size: var(--text-xl); font-weight: 900; line-height: 1; cursor: pointer; }
.ld-step:first-of-type { grid-area: minus; }
.ld-step:last-of-type { grid-area: plus; }
.ld-step:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ld-brass-deep); }
.ld-step[disabled] { opacity: 0.3; cursor: default; transform: none; }
.ld-step:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-faces { grid-area: faces; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; }
.ld-face { display: grid; place-items: center; min-block-size: 3rem; padding: 0.3rem; border: 0; border-radius: 0.45rem; background: rgb(0 0 0 / 30%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 20%); cursor: pointer; transition: transform 100ms, box-shadow 120ms; }
.ld-face .ld-die { --s: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem); }
.ld-face:hover:not([disabled]) { transform: translateY(-2px); }
.ld-face.is-on { background: rgb(224 176 79 / 25%); box-shadow: inset 0 0 0 2px var(--ld-brass), 0 0 16px -2px var(--ld-brass); }
.ld-face[disabled] { opacity: 0.25; cursor: not-allowed; }
.ld-face:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ld-actions > .ld-btn { flex: 1 1 auto; }
.ld-actions__raise { flex: 2 1 12rem !important; }
.ld-actions__qty { font-family: var(--ld-display); font-size: 1.2em; font-weight: 400; }
.ld-controls__hint { grid-area: hint; min-block-size: 1.2em; color: #ffb4a4; font-size: var(--text-xs); font-weight: 700; }
.ld-controls__hint:empty { display: none; }

/* --- Splashes ------------------------------------------------------------------------- */
.ld-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: safe center; overflow-y: auto; padding: var(--space-4); background: radial-gradient(circle, rgb(20 11 5 / 70%), rgb(10 6 2 / 92%)); backdrop-filter: blur(3px); animation: ld-fade 200ms ease-out; }
.ld-overlay[hidden] { display: none; }
@keyframes ld-fade { from { opacity: 0; } }
.ld-splash { display: grid; justify-items: center; gap: var(--space-3); inline-size: min(100%, 38rem); text-align: center; animation: ld-drop 340ms cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes ld-drop { from { opacity: 0; transform: translateY(-2rem) rotate(-2deg); } }
.ld-splash__title { font-family: var(--ld-display); font-size: var(--text-3xl); font-weight: 900; color: var(--ld-brass-hi); outline: none; }
.ld-splash__sub { color: #e6d2a8; }
.ld-claim { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 1rem; border-radius: var(--r-full); background: rgb(0 0 0 / 30%); font-weight: 900; }
.ld-claim__qty { font-family: var(--ld-display); font-size: var(--text-2xl); font-weight: 400; color: #fff4dd; }
.ld-showdown { display: grid; gap: 0.4rem; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.ld-showdown__row { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: 0.4rem 0.7rem; border-radius: 0.4rem; background: rgb(0 0 0 / 25%); text-align: start; }
.ld-showdown__row.is-loser { box-shadow: inset 0 0 0 2px var(--ld-rust); background: rgb(196 64 47 / 15%); }
.ld-showdown__name { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ld-showdown__dice { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ld-showdown__dice .ld-die { animation: ld-roll 480ms cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--d, 0) * 40ms); }
.ld-tally { font-family: var(--ld-display); font-size: var(--text-3xl); color: #fff4dd; }
.ld-tally__num { color: var(--ld-brass-hi); }
.ld-verdict[hidden], .ld-lines[hidden] { display: none; }
.ld-verdict { --c: var(--ld-rust); }
.ld-lines { display: grid; gap: 0.2rem; }
.ld-lines__main { font-size: var(--text-lg); font-weight: 900; }
.ld-lines__count { color: #c8ad80; font-size: var(--text-sm); }
.ld-lines__loss { color: #ffb4a4; font-weight: 800; }
.ld-lines__loss.is-out { color: var(--ld-rust); }
.ld-lines__note { color: #c8ad80; font-size: var(--text-xs); }

/* The end: a wanted poster */
.ld-wanted {
  position: relative;
  display: grid; justify-items: center; gap: var(--space-2);
  inline-size: min(100%, 26rem);
  padding: 1.5rem 1.6rem 1.4rem;
  background: radial-gradient(120% 80% at 50% 0%, #f8eed8, var(--ld-paper) 55%, var(--ld-paper-2));
  color: var(--ld-ink); text-align: center;
  clip-path: polygon(0 1%, 10% 0, 30% 1%, 52% 0, 74% 1.2%, 100% 0, 99% 30%, 100% 62%, 98.8% 100%, 70% 99%, 46% 100%, 22% 98.8%, 0 100%, 1.2% 66%, 0 34%);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 70%));
  animation: ld-drop 420ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
.ld-wanted__head { font-family: var(--ld-display); font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1; letter-spacing: 0.04em; color: var(--ld-ink); }
.ld-wanted__head:lang(fa), .ld-page:lang(fa) .ld-wanted__head { font-weight: 900; letter-spacing: 0; }
.ld-portrait--big { inline-size: 8rem; }
.ld-wanted__name { font-family: var(--ld-display); font-size: var(--text-3xl); font-weight: 900; outline: none; }
.ld-wanted__line { font-weight: 800; color: var(--ld-ink-soft); }
.ld-wanted__reward { display: grid; gap: 0; padding-block: 0.4rem; border-block: 2px solid var(--ld-ink); inline-size: 100%; }
.ld-wanted__reward span { font-family: var(--ld-display); font-size: var(--text-lg); }
.ld-wanted__reward b { font-family: var(--ld-display); font-size: var(--text-4xl); font-weight: 400; line-height: 1.1; unicode-bidi: isolate; direction: ltr; }
.ld-wanted__meta { color: var(--ld-ink-soft); font-size: var(--text-xs); font-weight: 700; }
.ld-wanted__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.ld-wanted__actions .ld-btn--ghost { box-shadow: inset 0 0 0 2px rgb(51 32 15 / 40%); color: var(--ld-ink); }
.ld-wanted > .spy-stamp { position: absolute; inset-block-start: 38%; --c: var(--ld-rust); }

/* --- Method -------------------------------------------------------------------------- */
.ld-method { display: grid; gap: var(--space-5); padding-block: var(--space-8) var(--space-12); }
.ld-method__title { font-family: var(--ld-display); font-size: var(--text-2xl); color: var(--ld-brass-hi); }
.ld-method__intro { max-inline-size: 46rem; color: var(--text-muted); }
ol.ld-method__steps { display: grid; gap: var(--space-3); max-inline-size: 52rem; padding-inline-start: 1.4rem; color: var(--text-soft); line-height: var(--leading-normal); list-style: decimal; }
.ld-method__steps li::marker { color: var(--ld-brass); font-weight: 900; }
.ld-method__line { max-inline-size: 52rem; color: var(--text-soft); line-height: var(--leading-normal); }
.ld-method__basis { max-inline-size: 52rem; padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--ld-brass); background: rgb(224 176 79 / 7%); color: var(--text-soft); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* --- Full screen ---------------------------------------------------------------------- */
.ld-game:fullscreen { display: block; overflow: hidden; padding: clamp(0.5rem, 1.2vw, 1.25rem); background: var(--ld-wood-0); }
.ld-game:fullscreen .ld-stage { inline-size: 100%; block-size: 100%; }
.ld-game:fullscreen .ld-arena { block-size: calc(100dvh - 2 * clamp(0.5rem, 1.2vw, 1.25rem)); }

@media (prefers-reduced-motion: reduce) {
  .ld-arena.is-shot, .ld-tray__dice .ld-die.is-rolling, .ld-showdown__dice .ld-die, .ld-bubble, .ld-splash, .ld-wanted, .ld-bubble--think::after { animation: none; }
}

/* --- Narrower ---------------------------------------------------------------------------- */
@media (max-width: 56rem) {
  .ld-setup__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ld-rack { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ld-tray { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
  .ld-tray__dice { min-block-size: 0; }
}
@media (max-width: 40rem) {
  .ld-hero .h1 { font-size: var(--text-4xl); }
  .ld-option { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .ld-setup__go { inline-size: 100%; }
  .ld-arena { padding: var(--space-2); gap: var(--space-2); min-block-size: 32rem; block-size: calc(100dvh - var(--header-h) - var(--space-4)); }
  .ld-posters { grid-auto-columns: minmax(4.6rem, 1fr); overflow-x: auto; padding-block-end: 0.3rem; scrollbar-width: none; }
  .ld-poster { padding: 0.5rem 0.3rem 0.45rem; }
  .ld-portrait { inline-size: 2.3rem; }
  .ld-tool--wide .gk-text { display: none; }
  .ld-center { padding: var(--space-2); border-radius: 1rem; box-shadow: inset 0 0 0 0.35rem #4a2c17, inset 0 0 30px rgb(0 0 0 / 55%); }
  .ld-plank { padding: 0.5rem 1.2rem 0.6rem; min-inline-size: 0; }
  .ld-log { display: none; }
  .ld-controls { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'turn' 'faces' 'qty' 'actions' 'hint'; }
  .ld-controls__turn { font-size: var(--text-base); }
  .ld-qty { grid-template-columns: auto auto auto auto; grid-template-areas: 'label minus value plus'; justify-content: center; }
  .ld-face { min-block-size: 2.6rem; }
  .ld-btn--lg { min-block-size: 3rem; padding-inline: 1rem; font-size: var(--text-base); }
  .ld-showdown__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .ld-die--md { --s: 2.4rem; }
}

/* Seats: the poster is clipped to its torn edge; bubbles and stamps sit outside it */
.ld-seat { position: relative; min-inline-size: 0; transition: transform 220ms var(--ease-out); }
.ld-seat.is-turn { transform: translateY(-4px) scale(1.04); z-index: 1; }
.ld-seat.is-turn .ld-poster { transform: none; filter: drop-shadow(0 0 14px rgb(224 176 79 / 85%)) drop-shadow(0 8px 10px rgb(0 0 0 / 60%)); }
.ld-poster { block-size: 100%; }
.ld-seat > .spy-stamp { position: absolute; inset-block-start: 40%; inset-inline: 0; margin-inline: auto; inline-size: fit-content; --c: var(--ld-rust); font-size: var(--text-sm); }
.ld-poster .spy-stamp { display: none; }
.ld-posters { padding-block-start: 0.9rem; }
.ld-bubble { inset-block-start: -0.7rem; }

/* Showdown: one viewport, above the site header, compact rows */
.ld-overlay { position: fixed; inset: 0; z-index: 200; padding: calc(var(--header-h) + var(--space-3)) var(--space-4) var(--space-4); }
.ld-overlay.ld-page { padding-block-start: calc(var(--header-h) + var(--space-3)); }
.ld-game:fullscreen .ld-overlay { padding-block-start: var(--space-4); }
.ld-game:fullscreen > .ld-overlay { padding-block-start: var(--space-4); }
.ld-splash--reveal { gap: var(--space-2); inline-size: min(100%, 44rem); }
.ld-splash--reveal .ld-splash__title { font-size: var(--text-2xl); }
.ld-showdown__row { padding-block: 0.3rem; }
.ld-tally { display: flex; align-items: baseline; justify-content: center; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--text-base); color: #e6d2a8; }
.ld-tally__num { font-family: var(--ld-display); font-size: var(--text-4xl); line-height: 1; }
.ld-tally__label, .ld-tally__claim { font-weight: 800; }
.ld-verdict { margin-block: calc(var(--space-2) * -1) 0; }

@media (max-width: 40rem) {
  .ld-posters { padding-block-start: 1.2rem; }
  .ld-bubble { inset-block-start: -1rem; inset-inline-end: -0.1rem; font-size: var(--text-xs); }
  .ld-bar__dice { font-size: var(--text-xs); }
}
.ld-wanted__name { color: var(--ld-ink); }
.ld-wanted .ld-portrait--big { inline-size: clamp(6rem, 22vw, 8rem); }
.ld-wanted > .spy-stamp { inset-block-start: 1.2rem; inset-inline-end: 0.8rem; inset-inline-start: auto; }
@media (max-width: 40rem) {
  /* No sideways scroll on the poster row: it would clip the speech bubbles. */
  .ld-posters { grid-auto-columns: minmax(0, 1fr); overflow: visible; gap: 0.3rem; }
  .ld-poster { padding-inline: 0.15rem; }
  .ld-portrait { inline-size: 2rem; }
  .ld-poster__name { font-size: 0.68rem; }
  .ld-mini { inline-size: 0.42rem; block-size: 0.42rem; }
  .ld-bubble { padding-inline: 0.35rem; }
  .ld-bubble .ld-die--xs { --s: 0.95rem; }
}
@media (max-width: 40rem) {
  .ld-bar { flex-wrap: nowrap; }
  .ld-bar__dice { display: none; }
  .ld-tool { min-inline-size: 2.2rem; block-size: 2.2rem; }
  .ld-tray__dice { gap: 0.35rem; flex-wrap: nowrap; }
  .ld-tray__dice .ld-die--md { --s: clamp(1.9rem, 10vw, 2.4rem); }
  .ld-center { min-block-size: 7rem; }
  .ld-arena { grid-template-rows: auto minmax(0, 1fr) auto; }
}
@media (max-width: 40rem) and (max-height: 44rem) {
  .ld-plank { padding: 0.35rem 1rem 0.4rem; }
  .ld-plank__label, .ld-plank__by { display: none; }
  .ld-plank__qty { font-size: 2.2rem; }
  .ld-plank .ld-die--lg { --s: 2.6rem; }
  .ld-controls__turn { display: none; }
  .ld-tray__label { font-size: var(--text-xs); }
  .ld-rack { padding: var(--space-2); }
}
.ld-bar { margin-block-end: 0.2rem; }

/* --- Hand-over: nothing of the table shows behind it ------------------------------- */
.ld-overlay[data-kind='pass'] { background: radial-gradient(circle at 50% 40%, #2c1b10, #0d0703 75%); backdrop-filter: none; }

/* --- Setup: how are you playing? -------------------------------------------------- */
.ld-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ld-mode { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'glyph name' 'glyph sub'; align-items: center; gap: 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 0; border-radius: 0.5rem; background: rgb(0 0 0 / 25%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 22%); color: #f4e6c8; font: inherit; text-align: start; cursor: pointer; transition: transform 100ms, box-shadow 140ms, background 140ms; }
.ld-mode:hover { transform: translateY(-2px); }
.ld-mode:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-mode.is-on { background: linear-gradient(180deg, rgb(224 176 79 / 28%), rgb(224 176 79 / 12%)); box-shadow: inset 0 0 0 2px var(--ld-brass), 0 0 18px -4px var(--ld-brass); }
.ld-mode__glyph { grid-area: glyph; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 0.4rem; background: var(--ld-brass-hi); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; opacity: 0.85; }
.ld-mode[data-mode='here'] .ld-mode__glyph { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3C/svg%3E"); }
.ld-mode[data-mode='host'] .ld-mode__glyph { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='5' width='7' height='13' rx='1.5'/%3E%3Crect x='8.5' y='3' width='7' height='15' rx='1.5'/%3E%3Crect x='16' y='5' width='7' height='13' rx='1.5'/%3E%3Crect x='3' y='20' width='18' height='2' rx='1'/%3E%3C/svg%3E"); }
.ld-mode[data-mode='join'] .ld-mode__glyph { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h4v4H3zM10 4h4v4h-4zM17 4h4v4h-4zM3 11h4v4H3zM10 11h4v4h-4zM17 11h4v4h-4zM10 18h4v4h-4z'/%3E%3C/svg%3E"); }
.ld-mode__name { grid-area: name; font-weight: 900; color: var(--ld-brass-hi); }
.ld-mode__sub { grid-area: sub; color: #c8ad80; font-size: var(--text-xs); }
.ld-setup__body { display: grid; gap: var(--space-6); }
.ld-join { display: grid; gap: var(--space-6); }
.ld-table-intro { color: #e6d2a8; line-height: var(--leading-normal); }
.ld-table-note { color: #c8ad80; font-size: var(--text-xs); }
.ld-codeinput { font-family: var(--font-mono, monospace); font-size: var(--text-2xl); font-weight: 800; letter-spacing: 0.12em; text-align: center; }
.ld-codeinput[aria-invalid='true'] { outline: 3px solid var(--ld-rust); }
.ld-codeinput.is-shake { animation: ld-shake 360ms; }
@keyframes ld-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* --- Lobby ------------------------------------------------------------------------- */
.ld-splash--lobby { inline-size: min(100%, 34rem); }
.ld-bigcode__label { color: #c8ad80; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ld-bigcode { font-family: var(--ld-display); font-size: clamp(2.4rem, 1.6rem + 4vw, 3.8rem); line-height: 1; color: #fff4dd; letter-spacing: 0.08em; text-shadow: 0 3px 0 var(--ld-brass-deep), 0 0 24px rgb(224 176 79 / 35%); unicode-bidi: isolate; }
.ld-page:lang(fa) .ld-bigcode { font-family: var(--font-sans); font-weight: 900; letter-spacing: 0.04em; }
.ld-splash__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ld-status { min-block-size: 1.2em; color: var(--ld-brass-hi); font-size: var(--text-sm); font-weight: 700; }
.ld-lobby-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ld-lobby-seat { display: grid; justify-items: center; gap: 0.25rem; padding: 0.4rem 0.5rem; border-radius: 0.4rem; background: rgb(0 0 0 / 22%); color: #e6d2a8; font-size: var(--text-xs); font-weight: 800; }
.ld-lobby-seat .ld-portrait { inline-size: 2.4rem; }
.ld-lobby-seat.is-me { box-shadow: inset 0 0 0 2px var(--ld-brass); color: var(--ld-brass-hi); }

/* --- Table play -------------------------------------------------------------------- */
.ld-bubble--opens { color: var(--ld-ink-soft); font-size: var(--text-2xs); font-weight: 800; }
.ld-plank__opens { font-family: var(--ld-display); font-size: var(--text-2xl); opacity: 1; }
.ld-page:lang(fa) .ld-plank__opens { font-family: var(--font-sans); font-weight: 900; }
.ld-tray__toggle { position: relative; inline-size: 100%; padding: 0.4rem; border: 0; border-radius: 0.5rem; background: rgb(0 0 0 / 22%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 25%); color: inherit; font: inherit; cursor: pointer; justify-content: center; }
.ld-tray__toggle:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-tray__toggle[aria-pressed='false'] { animation: ld-glow 2.4s ease-in-out infinite; }
@keyframes ld-glow { 50% { box-shadow: inset 0 0 0 2px var(--ld-brass), 0 0 16px -4px var(--ld-brass); } }
.ld-tray__dice.ld-tray__toggle { flex-wrap: wrap; }
.ld-tray__hint { flex-basis: 100%; color: #c8ad80; font-size: var(--text-2xs); font-weight: 800; text-align: center; }
.ld-tray__out { color: #c8ad80; font-size: var(--text-xs); }
.ld-controls.is-table { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-content: center; justify-items: stretch; gap: var(--space-3); }
.ld-controls__howto { color: #e6d2a8; font-size: var(--text-sm); text-align: center; }
.ld-controls__call { min-block-size: 3.6rem; font-size: var(--text-xl); }

/* The call: who bid what */
.ld-splash--call { gap: var(--space-3); inline-size: min(100%, 40rem); }
.ld-who { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ld-who__seat { display: grid; justify-items: center; gap: 0.25rem; min-inline-size: 4.6rem; padding: 0.45rem 0.5rem; border: 0; border-radius: 0.45rem; background: rgb(0 0 0 / 28%); box-shadow: inset 0 0 0 1px rgb(224 176 79 / 22%); color: #f4e6c8; font: inherit; font-size: var(--text-xs); font-weight: 800; cursor: pointer; transition: transform 100ms; }
.ld-who__seat .ld-portrait { inline-size: 2.4rem; }
.ld-who__seat:hover { transform: translateY(-2px); }
.ld-who__seat.is-on { background: rgb(224 176 79 / 25%); box-shadow: inset 0 0 0 2px var(--ld-brass), 0 0 16px -2px var(--ld-brass); color: var(--ld-brass-hi); }
.ld-who__seat:focus-visible { outline: 3px solid var(--ld-brass-hi); outline-offset: 2px; }
.ld-who__name { max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-callform__bid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); inline-size: 100%; }
.ld-callform__caller { min-block-size: 1.2em; color: var(--ld-brass-hi); font-weight: 800; }
.ld-splash--call .ld-actions { inline-size: 100%; }
/* The bid parts carry grid-area names for the rack; here they just stack. */
.ld-splash--call .ld-qty, .ld-splash--call .ld-faces, .ld-splash--call .ld-actions { grid-area: auto; }
.ld-check { color: #c8ad80; font-size: var(--text-xs); font-weight: 700; }
.ld-check[hidden], .ld-undo[hidden] { display: none; }
@media (max-width: 40rem) {
  .ld-modes { grid-template-columns: minmax(0, 1fr); }
  .ld-mode { padding-block: var(--space-2); }
  .ld-mode__glyph { inline-size: 1.8rem; block-size: 1.8rem; }
  .ld-callform__bid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ld-callform__bid .ld-faces { inline-size: 100%; }
  .ld-controls__call { min-block-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-tray__toggle[aria-pressed='false'], .ld-codeinput.is-shake { animation: none; }
}