/* Games Confirm / mobile primitives v1. Copy into each game's www. */
:root {
  --gc-ink:#f5f3e9; --gc-muted:#b7c8c5; --gc-surface:#142e31;
  --gc-canvas:#091e23; --gc-line:#355154; --gc-accent:#91e3ad;
  --gc-on-accent:#153729; --gc-gold:#ffd784; --gc-danger:#ff9293;
  --gc-space-1:4px; --gc-space-2:8px; --gc-space-3:12px;
  --gc-space-4:16px; --gc-space-6:24px; --gc-space-8:32px;
  --gc-radius-sm:12px; --gc-radius-md:20px; --gc-radius-lg:28px;
  --gc-touch:48px; --gc-fast:140ms; --gc-ease:cubic-bezier(.2,.8,.2,1);
  --gc-shadow:0 18px 48px #0003;
}
.gc-surface{background:var(--gc-surface);color:var(--gc-ink);border:1px solid var(--gc-line);border-radius:var(--gc-radius-lg);box-shadow:var(--gc-shadow);padding:var(--gc-space-6)}
.gc-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--gc-touch);padding:12px 20px;border:1px solid var(--gc-line);border-radius:var(--gc-radius-sm);background:var(--gc-surface);color:var(--gc-ink);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform var(--gc-fast) var(--gc-ease)}
.gc-button--primary{background:var(--gc-accent);color:var(--gc-on-accent);border-color:transparent}
.gc-button:active:not(:disabled){transform:translateY(2px)}
.gc-button:disabled{opacity:.45;cursor:default}
.gc-button:focus-visible{outline:3px solid var(--gc-gold);outline-offset:4px}
.gc-icon{width:24px;height:24px;flex:none;vertical-align:middle}
.gc-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border:1px solid var(--gc-line);border-radius:999px;color:var(--gc-muted);font-size:12px}
@media(prefers-reduced-motion:reduce){.gc-button{transition:none}}

/* Opt-in components. No global button, canvas or game-engine overrides. */
.gc-phone{max-width:430px;margin-inline:auto;min-height:680px;padding:24px 20px;border:1px solid var(--gc-line);border-radius:36px;background:radial-gradient(ellipse at 50% 0,#ffffff0c,transparent 55%),var(--gc-canvas);color:var(--gc-ink);position:relative;overflow:hidden}
.gc-stack{display:flex;flex-direction:column;gap:12px}.gc-row{display:flex;gap:12px;align-items:center}.gc-row--between{justify-content:space-between}.gc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gc-title{font-size:32px;line-height:1.3;margin:12px 0;font-weight:900}.gc-caption{font-size:12px;color:var(--gc-muted)}.gc-heading{font-size:18px;margin:0 0 12px}.gc-hero{text-align:center;padding:24px 12px}.gc-hero img{width:180px;height:200px;object-fit:contain;filter:drop-shadow(0 16px 16px #0003)}
.gc-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;background:var(--gc-surface);border:1px solid var(--gc-line);border-radius:20px}.gc-stat{display:flex;flex-direction:column;align-items:center;font-variant-numeric:tabular-nums}.gc-stat strong{font-size:20px}.gc-stat span{font-size:11px;color:var(--gc-muted)}
.gc-item{position:relative;padding:16px;border:1px solid var(--gc-line);border-radius:20px;background:var(--gc-surface);color:var(--gc-ink);text-align:center;min-width:0}.gc-item img{height:84px;width:100%;object-fit:contain}.gc-item h3{font-size:15px;margin:10px 0 4px}.gc-item p{font-size:12px;color:var(--gc-muted);margin:4px 0 12px}.gc-item .gc-button{width:100%;font-size:13px;padding-inline:10px}.gc-item[data-rarity="rare"]{border-color:#8caceb}.gc-item[data-rarity="epic"]{border-color:#c29bea}.gc-item[data-selected="true"]{outline:2px solid var(--gc-accent);outline-offset:3px}.gc-item:disabled{opacity:.5}.gc-badge{position:absolute;inset-block-start:8px;inset-inline-end:8px;padding:2px 7px;border-radius:8px;background:var(--gc-gold);color:#332406;font-size:10px}
.gc-progress{display:flex;gap:8px;align-items:center}.gc-progress progress{appearance:none;width:100%;height:9px;border:0;border-radius:99px;overflow:hidden;background:var(--gc-line)}.gc-progress progress::-webkit-progress-bar{background:var(--gc-line)}.gc-progress progress::-webkit-progress-value{background:var(--gc-accent);border-radius:99px}.gc-progress progress::-moz-progress-bar{background:var(--gc-accent)}.gc-progress output{font-size:12px;font-variant-numeric:tabular-nums;min-width:32px}
.gc-arena{position:relative;isolation:isolate;min-height:320px;border-radius:24px;border:1px solid var(--gc-line);overflow:hidden;background:var(--gc-surface)}.gc-arena__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.gc-arena__characters{position:absolute;inset:0;z-index:1}.gc-actor{position:absolute;bottom:18%;left:40%;width:24%;height:48%;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 8px 5px #0004)}.gc-arena__foreground{z-index:2}.gc-arena__hud{position:absolute;inset:12px 12px auto;z-index:3}.gc-arena__controls{position:absolute;inset:auto 14px 12px;display:flex;justify-content:space-between;align-items:end;z-index:4}
.gc-joystick{width:96px;height:96px;border:1px solid #ffffff60;border-radius:50%;background:#071e2366;position:relative;touch-action:none;user-select:none;outline-offset:4px}.gc-joystick__thumb{position:absolute;left:26px;top:26px;width:44px;height:44px;border:2px solid #fff9;border-radius:50%;background:var(--gc-accent);pointer-events:none;transform:translate(var(--gc-stick-x,0px),var(--gc-stick-y,0px))}
.gc-dialog{width:min(380px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--gc-line);border-radius:28px;background:var(--gc-surface);color:var(--gc-ink);padding:24px;box-shadow:var(--gc-shadow);font:inherit}.gc-dialog::backdrop{background:#041418b8;backdrop-filter:blur(6px)}.gc-dialog h2{margin-top:0}.gc-dialog .gc-stack{margin-top:20px}
.gc-toast-region{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 32px));z-index:10000;pointer-events:none}.gc-toast{padding:12px 18px;border:1px solid var(--gc-accent);border-radius:16px;background:var(--gc-surface);color:var(--gc-ink);box-shadow:var(--gc-shadow);margin-top:8px;text-align:center}.gc-empty{padding:32px 20px;border:1px dashed var(--gc-line);border-radius:20px;text-align:center;color:var(--gc-muted)}.gc-skeleton{min-height:16px;border-radius:8px;background:linear-gradient(90deg,var(--gc-line),var(--gc-surface),var(--gc-line));background-size:200% 100%;animation:gc-load 1.5s linear infinite}@keyframes gc-load{to{background-position:-200% 0}}.gc-status{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--gc-muted)}.gc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gc-accent)}.gc-status[data-state="offline"]::before{background:var(--gc-gold)}.gc-status[data-state="error"]::before{background:var(--gc-danger)}
[data-gc-theme="desert"]{--gc-canvas:#271c1b;--gc-surface:#3a2b26;--gc-line:#675044;--gc-accent:#edbc77;--gc-on-accent:#352312;--gc-muted:#cfbfa9;--gc-gold:#ffd591}
[data-gc-theme="arcade"]{--gc-canvas:#141a33;--gc-surface:#222b4c;--gc-line:#414e76;--gc-accent:#94c6ff;--gc-on-accent:#172b47;--gc-muted:#bcc8e4;--gc-gold:#ffda87}
[data-gc-theme="orchard"]{--gc-canvas:#091e23;--gc-surface:#142e31;--gc-line:#355154;--gc-accent:#91e3ad;--gc-on-accent:#153729;--gc-muted:#b7c8c5;--gc-gold:#ffd784}
@media(prefers-reduced-motion:reduce){.gc-skeleton{animation:none}}

/* پوستهٔ «دورهمی» — روی توکن‌های دیزاین سیستم سوار است و آن‌ها را بازتعریف می‌کند.
   هر بازی رنگ شاخص خودش را از data-game می‌گیرد؛ بقیهٔ پوسته مشترک می‌ماند. */

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900; font-display: swap; font-style: normal;
}

:root {
  --gc-canvas: #141022;
  --gc-surface: #211a35;
  --gc-line: #3a3055;
  --gc-ink: #f3eefc;
  --gc-muted: #a99cc4;
  --gc-accent: #ffb454;
  --gc-on-accent: #33210a;
  --gc-gold: #ffd784;
  --gc-danger: #ff8b96;
  --gc-ok: #7ee0a7;
  --gc-radius-sm: 14px;
  --gc-radius-md: 20px;
  --gc-radius-lg: 26px;
  --shell-max: 460px;
}

[data-game='jomlesaz']  { --gc-accent: #ffb454; --gc-on-accent: #33210a; }
[data-game='doroghsanj']{ --gc-accent: #ff8095; --gc-on-accent: #3a0f18; }
[data-game='jasoos']    { --gc-accent: #5ad1d6; --gc-on-accent: #06302f; }
[data-game='codenames'] { --gc-accent: #b39bff; --gc-on-accent: #1e1140; }
[data-game='kiehtemal'] { --gc-accent: #a9e05a; --gc-on-accent: #1d2c07; }
[data-game='esmfamil']  { --gc-accent: #4fb8f5; --gc-on-accent: #06263c; }
[data-game='taboo']     { --gc-accent: #ff6a4d; --gc-on-accent: #3a0d05; }
[data-game='moshaere']  { --gc-accent: #4fd6a4; --gc-on-accent: #05301f; }
[data-game='yekkalame'] { --gc-accent: #cdd9e8; --gc-on-accent: #171f2c; }
[data-game='teif']      { --gc-accent: #7c8cff; --gc-on-accent: #101444; }
[data-game='mafia']     { --gc-accent: #c464d6; --gc-on-accent: #2c0733; }
[data-game='chiam']     { --gc-accent: #ffd75e; --gc-on-accent: #3a2c00; }
[data-game='biharf']    { --gc-accent: #a0e8ff; --gc-on-accent: #04283a; }
[data-game='shart']     { --gc-accent: #63d38b; --gc-on-accent: #06301a; }
[data-game='zanjire']   { --gc-accent: #d9b38c; --gc-on-accent: #2e2013; }
[data-game='aftabparast']{ --gc-accent: #8fe36b; --gc-on-accent: #0d2c05; }
[data-game='khabarchin'] { --gc-accent: #ff9f68; --gc-on-accent: #3a1a05; }
[data-game='kinevesht']  { --gc-accent: #ff7fd0; --gc-on-accent: #3b0b2a; }
[data-game='ratebandi']  { --gc-accent: #6fd0ef; --gc-on-accent: #04283a; }
[data-game='emoji']      { --gc-accent: #ffd93d; --gc-on-accent: #3a2e00; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff0d, transparent 60%),
    var(--gc-canvas);
  color: var(--gc-ink);
  font-family: 'Vazirmatn', system-ui, 'Segoe UI', sans-serif;
  line-height: 1.7;
  direction: rtl;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------------- چیدمان */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  gap: 14px;
}
.screen { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.screen[hidden] { display: none !important; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

/* ---------------------------------------------------------------- سربرگ */

.topbar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  min-height: 44px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 17px; }
.brand .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gc-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-accent) 22%, transparent);
}
.code-pill {
  font-family: ui-monospace, 'Vazirmatn', monospace;
  letter-spacing: .22em; font-weight: 900; font-size: 17px;
  padding: 5px 12px 5px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--gc-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 42%, transparent);
  color: var(--gc-ink); cursor: pointer;
}
.code-pill:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- کارت‌ها */

.card {
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-lg);
  padding: 18px;
}
.card--flat { background: #ffffff08; }
.card--accent { border-color: color-mix(in srgb, var(--gc-accent) 55%, transparent); }

.prompt {
  font-size: 21px; font-weight: 700; line-height: 1.55; margin: 0;
  text-wrap: balance;
}
.prompt .blank {
  display: inline-block; min-width: 74px; border-bottom: 3px dashed var(--gc-accent);
  vertical-align: -4px; height: 20px; margin-inline: 4px;
}
.eyebrow {
  font-size: 11.5px; letter-spacing: .12em; color: var(--gc-muted);
  font-weight: 700; margin: 0;
}
.muted { color: var(--gc-muted); font-size: 13.5px; }
.tiny { font-size: 12px; color: var(--gc-muted); }
h1.title { font-size: 30px; font-weight: 900; margin: 0; line-height: 1.25; text-wrap: balance; }
h2.sub { font-size: 17px; font-weight: 700; margin: 0; }

/* ---------------------------------------------------------------- دکمه‌ها */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 11px 18px;
  border: 1px solid var(--gc-line); border-radius: var(--gc-radius-sm);
  background: #ffffff0a; color: var(--gc-ink);
  font: inherit; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), background 140ms;
}
.btn:hover:not(:disabled) { background: #ffffff14; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 3px; }
.btn--primary { background: var(--gc-accent); color: var(--gc-on-accent); border-color: transparent; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); background: var(--gc-accent); }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--gc-danger); border-color: color-mix(in srgb, var(--gc-danger) 40%, transparent); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 6px 13px; font-size: 13px; }
.btn .ic { width: 20px; height: 20px; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--gc-line); background: #ffffff08;
  color: var(--gc-ink); cursor: pointer;
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }
.ic { width: 22px; height: 22px; display: inline-block; }

/* ---------------------------------------------------------------- فرم */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; color: var(--gc-muted); font-weight: 700; }
input[type='text'], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: var(--gc-radius-sm); border: 1px solid var(--gc-line);
  background: #ffffff0a; color: var(--gc-ink);
  font: inherit; resize: none;
}
input[type='text']:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-accent) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--gc-muted) 70%, transparent); }
.code-input {
  text-align: center; letter-spacing: .5em; font-weight: 900; font-size: 26px;
  text-transform: uppercase; padding-inline-start: .5em;
}

/* ---------------------------------------------------------------- بازیکن‌ها */

.players { display: flex; flex-wrap: wrap; gap: 8px; }
.player {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid var(--gc-line); background: #ffffff08; font-size: 13.5px;
}
.player[data-bot='true'] { border-style: dashed; color: var(--gc-muted); }
.player[data-off='true'] { opacity: .45; }
.player .av {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: var(--gc-on-accent);
  background: var(--gc-accent);
}
.player .pts { font-variant-numeric: tabular-nums; color: var(--gc-muted); font-size: 12px; }
.player[data-host='true'] .av { box-shadow: 0 0 0 2px var(--gc-gold); }

/* ---------------------------------------------------------------- نوار زمان */

.timer {
  display: flex; align-items: center; gap: 10px;
}
.timer .bar {
  flex: 1; height: 8px; border-radius: 99px; background: #ffffff14; overflow: hidden;
}
.timer .bar i {
  display: block; height: 100%; border-radius: 99px; background: var(--gc-accent);
  transition: width 250ms linear;
}
.timer .n {
  font-variant-numeric: tabular-nums; font-weight: 900; min-width: 40px; text-align: center;
  font-size: 15px;
}
.timer[data-low='true'] .bar i { background: var(--gc-danger); }
.timer[data-low='true'] .n { color: var(--gc-danger); }

/* ---------------------------------------------------------------- انتخاب‌ها */

.choice {
  width: 100%; text-align: start; padding: 14px 16px; min-height: 54px;
  border-radius: var(--gc-radius-md); border: 1px solid var(--gc-line);
  background: #ffffff08; color: var(--gc-ink); font: inherit; cursor: pointer;
  display: flex; gap: 11px; align-items: flex-start;
  transition: border-color 140ms, background 140ms;
}
.choice:hover:not(:disabled) { background: #ffffff12; }
.choice:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }
.choice[aria-pressed='true'] {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 16%, transparent);
}
.choice:disabled { opacity: .5; cursor: default; }
.choice .n {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #ffffff12; font-size: 12px; font-weight: 900;
}
.choice .txt { flex: 1; line-height: 1.6; }

/* واژه‌های دستِ بازیکن در جمله‌ساز */
.hand { display: flex; gap: 8px; flex-wrap: wrap; }
.word-chip {
  border: 1px solid var(--gc-line); background: #ffffff0a; color: var(--gc-ink);
  border-radius: 999px; padding: 8px 15px; font: inherit; font-weight: 700; font-size: 14px;
  min-height: 40px; cursor: pointer;
}
.word-chip[data-used='true'] {
  border-color: var(--gc-accent); background: color-mix(in srgb, var(--gc-accent) 20%, transparent);
}
.word-chip:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- نتیجه */

.result-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--gc-radius-md);
  border: 1px solid var(--gc-line); background: #ffffff06;
}
.result-row[data-top='true'] {
  border-color: var(--gc-gold);
  background: color-mix(in srgb, var(--gc-gold) 12%, transparent);
}
.result-row[data-truth='true'] {
  border-color: var(--gc-ok);
  background: color-mix(in srgb, var(--gc-ok) 14%, transparent);
}
.result-row .votes {
  flex: none; min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.result-row .votes b { display: block; font-size: 20px; font-weight: 900; }
.result-row .votes span { font-size: 10.5px; color: var(--gc-muted); }

.scoreboard { display: flex; flex-direction: column; gap: 6px; }
.score-line {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 14px; background: #ffffff08; border: 1px solid transparent;
}
.score-line[data-me='true'] { border-color: var(--gc-accent); }
.score-line .rank { width: 22px; font-weight: 900; color: var(--gc-muted); font-variant-numeric: tabular-nums; }
.score-line .nm { flex: 1; font-weight: 700; }
.score-line .sc { font-variant-numeric: tabular-nums; font-weight: 900; }

/* ---------------------------------------------------------------- کدنیمز */

.board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.cell {
  aspect-ratio: 1 / 1.12; border-radius: 12px; border: 1px solid var(--gc-line);
  background: #ffffff0c; color: var(--gc-ink); font: inherit; font-weight: 700;
  font-size: clamp(10px, 3vw, 14px); line-height: 1.25; padding: 3px;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  word-break: break-word; overflow: hidden;
}
.cell:disabled { cursor: default; }
.cell:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }
.cell[data-key='red']      { background: #ff6b7a26; border-color: #ff6b7a7a; }
.cell[data-key='blue']     { background: #6ba8ff26; border-color: #6ba8ff7a; }
.cell[data-key='neutral']  { background: #d8c9a626; border-color: #d8c9a666; }
.cell[data-key='assassin'] { background: #0000006e; border-color: #ffffff55; }
.cell[data-revealed='true'] { opacity: .96; font-size: 11px; }
.cell[data-revealed='true'][data-key='red']      { background: #ff6b7a; color: #33070d; }
.cell[data-revealed='true'][data-key='blue']     { background: #6ba8ff; color: #06183a; }
.cell[data-revealed='true'][data-key='neutral']  { background: #d8c9a6; color: #2e2718; }
.cell[data-revealed='true'][data-key='assassin'] { background: #0b0b12; color: #ff8b96; border-color: #ff8b96; }

.team-bar { display: flex; gap: 8px; }
.team-bar .t {
  flex: 1; padding: 8px 10px; border-radius: 14px; text-align: center;
  border: 1px solid var(--gc-line); background: #ffffff06;
}
.team-bar .t[data-turn='true'] { border-color: currentColor; }
.team-bar .t b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.team-bar .t[data-team='red'] { color: #ff8b96; }
.team-bar .t[data-team='blue'] { color: #8cb9ff; }
.team-bar .t span { font-size: 11px; color: var(--gc-muted); }

.clue-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px; border-radius: var(--gc-radius-md);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 50%, transparent);
  background: color-mix(in srgb, var(--gc-accent) 13%, transparent);
}
.clue-banner b { font-size: 22px; font-weight: 900; }
.clue-banner .cnt {
  min-width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gc-accent); color: var(--gc-on-accent); font-weight: 900;
}

/* ---------------------------------------------------------------- جاسوس */

.role-card {
  padding: 20px; border-radius: var(--gc-radius-lg); text-align: center;
  border: 1px solid var(--gc-line); background: #ffffff08;
}
.role-card b { display: block; font-size: 26px; font-weight: 900; margin-top: 4px; }
.role-card[data-spy='true'] {
  border-color: var(--gc-danger);
  background: color-mix(in srgb, var(--gc-danger) 14%, transparent);
}
.qa-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.qa {
  padding: 10px 12px; border-radius: 14px; background: #ffffff08;
  border: 1px solid var(--gc-line); font-size: 13.5px;
}
.qa .who { color: var(--gc-muted); font-size: 11.5px; margin-bottom: 3px; }
.qa .q { font-weight: 700; }
.qa .a { margin-top: 4px; padding-inline-start: 10px; border-inline-start: 2px solid var(--gc-accent); }

/* ---------------------------------------------------------------- اسم فامیل */

.letter-card { text-align: center; padding: 14px 18px; }
.letter-card .letter {
  display: block; font-size: 62px; line-height: 1.1; font-weight: 900;
  color: var(--gc-accent); margin: 2px 0 4px;
}
.ans-field { display: flex; align-items: center; gap: 10px; }
.ans-field label {
  flex: none; width: 62px; font-size: 13px; font-weight: 700; color: var(--gc-muted);
}
.ans-field input { flex: 1; }

.ans-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 12px;
  background: #ffffff08; border: 1px solid transparent; font-size: 13.5px;
}
.ans-row .lbl { flex: none; min-width: 68px; color: var(--gc-muted); }
.ans-row .val { flex: 1; font-weight: 700; word-break: break-word; }
.ans-row .pt { flex: none; font-size: 11.5px; color: var(--gc-muted); font-variant-numeric: tabular-nums; }
.ans-row[data-status='only']   { border-color: color-mix(in srgb, var(--gc-gold) 55%, transparent); }
.ans-row[data-status='unique'] { border-color: color-mix(in srgb, var(--gc-ok) 45%, transparent); }
.ans-row[data-status='shared'] { border-color: var(--gc-line); }
.ans-row[data-status='bad']    { color: var(--gc-danger); border-color: color-mix(in srgb, var(--gc-danger) 35%, transparent); }
.ans-row[data-status='empty']  { opacity: .5; }

/* ---------------------------------------------------------------- تابو */

.taboo-chip {
  border: 1px solid color-mix(in srgb, var(--gc-danger) 45%, transparent);
  background: color-mix(in srgb, var(--gc-danger) 13%, transparent);
  color: var(--gc-danger); border-radius: 999px;
  padding: 6px 13px; font-size: 13.5px; font-weight: 700;
}
.feed { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.feed-row {
  padding: 8px 11px; border-radius: 12px; background: #ffffff08;
  border: 1px solid var(--gc-line); font-size: 13.5px;
}
.feed-row .who { display: block; font-size: 11px; color: var(--gc-muted); margin-bottom: 2px; }
.feed-row .txt { line-height: 1.55; }
.feed-row[data-kind='hit'] {
  border-color: color-mix(in srgb, var(--gc-ok) 55%, transparent);
  background: color-mix(in srgb, var(--gc-ok) 13%, transparent);
}
.feed-row[data-kind='foul'] {
  border-color: color-mix(in srgb, var(--gc-danger) 55%, transparent);
  color: var(--gc-danger);
}
.feed-row[data-kind='miss'] { opacity: .68; }
.feed-row[data-kind='skip'] { opacity: .68; font-style: italic; }
.feed-row[data-kind='clue'] { border-color: color-mix(in srgb, var(--gc-accent) 45%, transparent); }

/* ---------------------------------------------------------------- مشاعره */

.lives { display: flex; flex-wrap: wrap; gap: 7px; }
.life {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--gc-line); background: #ffffff08;
}
.life .hearts { color: var(--gc-danger); letter-spacing: 1px; }
.life[data-out='true'] { opacity: .42; text-decoration: line-through; }
.life[data-out='true'] .hearts { color: var(--gc-muted); text-decoration: none; }
.life[data-turn='true'] { border-color: var(--gc-accent); }

.chain { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; }
.chain .verse {
  padding: 10px 13px; border-radius: 14px; background: #ffffff08;
  border: 1px solid var(--gc-line);
  border-inline-start: 3px solid color-mix(in srgb, var(--gc-accent) 70%, transparent);
}
.chain .txt { font-weight: 700; line-height: 1.75; }
.chain .who { font-size: 11.5px; color: var(--gc-muted); margin-top: 3px; }

/* ---------------------------------------------------------------- همه یک کلمه */

.clue-chip {
  border: 1px solid color-mix(in srgb, var(--gc-accent) 50%, transparent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
  border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 700;
}
.clue-chip[data-dropped='true'] {
  border-color: var(--gc-line); background: transparent;
  color: var(--gc-muted); text-decoration: line-through;
}

/* ---------------------------------------------------------------- طیف */

.spectrum { direction: ltr; display: flex; flex-direction: column; gap: 8px; }
.spectrum .ends {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--gc-muted);
}
.spectrum .bar {
  position: relative; height: 26px; border-radius: 999px;
  border: 1px solid var(--gc-line);
  background: linear-gradient(90deg, #3d4a8f, var(--gc-accent) 50%, #f2a45c);
}
.spectrum .marker {
  position: absolute; top: -5px; width: 4px; height: 36px; border-radius: 3px;
  transform: translateX(-2px); background: var(--gc-ink);
  box-shadow: 0 0 0 2px #0006;
}
.spectrum .marker[data-kind='target'] { background: var(--gc-gold); width: 6px; transform: translateX(-3px); }
.spectrum .marker[data-kind='me'] { background: var(--gc-ink); }
.spectrum .marker[data-kind='other'] { background: #ffffffcc; width: 3px; height: 30px; top: -2px; }
.spectrum .marker span {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 900; color: var(--gc-ink);
}
input[type='range'].dial {
  width: 100%; min-height: 44px; padding: 0; margin: 0;
  background: transparent; border: none; accent-color: var(--gc-accent);
}
input[type='range'].dial:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 4px; }

/* ---------------------------------------------------------------- مافیا */

.role-card[data-team='mafia'] {
  border-color: var(--gc-danger);
  background: color-mix(in srgb, var(--gc-danger) 14%, transparent);
}
.mafia-board {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: var(--gc-radius-md);
  border: 1px solid var(--gc-line); background: #ffffff06;
}
.mafia-board .stat { flex: none; text-align: center; min-width: 46px; }
.mafia-board .stat b { display: block; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mafia-board .stat span { font-size: 10.5px; color: var(--gc-muted); }
.mafia-board .gone { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.mafia-board .out {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--gc-line); color: var(--gc-muted); text-decoration: line-through;
}

/* ---------------------------------------------------------------- من چی‌ام */

.heads { display: flex; flex-wrap: wrap; gap: 8px; }
.head {
  flex: 1 1 92px; min-width: 92px; padding: 10px 8px;
  border-radius: var(--gc-radius-sm); border: 1px solid var(--gc-line);
  background: #ffffff08; text-align: center;
}
.head .w {
  display: block; font-weight: 900; font-size: 15px; line-height: 1.35;
  word-break: break-word; min-height: 2.7em;
}
.head .nm { display: block; font-size: 11px; color: var(--gc-muted); margin-top: 4px; }
.head[data-me='true'] {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
}
.head[data-me='true'] .w { font-size: 30px; color: var(--gc-accent); }
.head[data-turn='true'] { box-shadow: 0 0 0 2px var(--gc-gold) inset; }
.head[data-solved='true'] .w { text-decoration: line-through; opacity: .6; }

.verdict {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px; border-radius: var(--gc-radius-md);
  border: 1px solid var(--gc-line); background: #ffffff08;
}
.verdict b { font-size: 26px; font-weight: 900; }
.verdict[data-v='yes'] {
  border-color: color-mix(in srgb, var(--gc-ok) 55%, transparent);
  background: color-mix(in srgb, var(--gc-ok) 12%, transparent);
}
.verdict[data-v='no'] {
  border-color: color-mix(in srgb, var(--gc-danger) 55%, transparent);
  background: color-mix(in srgb, var(--gc-danger) 12%, transparent);
}

/* ---------------------------------------------------------------- بی‌حرف */

.lives-row { display: flex; align-items: center; gap: 7px; }
.lives-row .hearts { display: inline-flex; gap: 4px; }
.lives-row .hp {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--gc-danger); background: transparent;
}
.lives-row .hp[data-on='true'] { background: var(--gc-danger); }

.pile, .hand-nums { display: flex; flex-wrap: wrap; gap: 7px; }
.pile .num, .hand-nums .num {
  min-width: 42px; padding: 7px 10px; border-radius: 12px;
  border: 1px solid var(--gc-line); background: #ffffff0c;
  font-weight: 900; font-size: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pile .num[data-bad='true'], .pile .num[data-burn='true'] {
  border-color: color-mix(in srgb, var(--gc-danger) 55%, transparent);
  color: var(--gc-danger); text-decoration: line-through;
}
.hand-nums .num[data-next='true'] {
  border-color: var(--gc-accent); color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
}
.hands-row { display: flex; flex-wrap: wrap; gap: 7px; }
.play-btn { min-height: 62px; font-size: 18px; }

/* ---------------------------------------------------------------- حدس و شرط */

input[type='text'].num-input {
  text-align: center; font-size: 30px; font-weight: 900; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; min-height: 64px;
}
.choice.bet { align-items: center; }
.choice.bet .takers {
  flex: none; font-size: 11.5px; color: var(--gc-muted);
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--gc-line);
}

/* ---------------------------------------------------------------- زنجیره */

.story { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.story .line {
  padding: 9px 12px; border-radius: 12px; background: #ffffff08;
  border-inline-start: 3px solid color-mix(in srgb, var(--gc-accent) 60%, transparent);
}
.story .txt { display: block; line-height: 1.7; }
.story .who { display: block; font-size: 11px; color: var(--gc-muted); margin-top: 3px; }
.story .line:first-child {
  border-inline-start-color: var(--gc-gold);
  background: color-mix(in srgb, var(--gc-gold) 8%, transparent);
}

/* ---------------------------------------------------------------- متفرقه */

.banner {
  padding: 11px 14px; border-radius: 14px; font-size: 13.5px;
  border: 1px solid var(--gc-line); background: #ffffff08;
}
.banner[data-kind='warn'] { border-color: color-mix(in srgb, var(--gc-gold) 50%, transparent); }
.banner[data-kind='bad'] { border-color: color-mix(in srgb, var(--gc-danger) 50%, transparent); color: var(--gc-danger); }
.banner[data-kind='good'] { border-color: color-mix(in srgb, var(--gc-ok) 50%, transparent); }

.game-card {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: start;
  padding: 14px; border-radius: var(--gc-radius-md);
  border: 1px solid var(--gc-line); background: #ffffff08; color: var(--gc-ink);
  font: inherit; cursor: pointer;
}
.game-card[aria-pressed='true'] {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
}
.game-card .glyph {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 21px; background: #ffffff10;
}
.game-card h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.game-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--gc-muted); line-height: 1.5; }

.toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 28px));
  z-index: 60; pointer-events: none; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 11px 16px; border-radius: 14px; text-align: center; font-size: 13.5px;
  background: #2c2244; border: 1px solid var(--gc-accent);
  box-shadow: 0 18px 48px #0007;
}

.waiting-dots::after {
  content: '…'; display: inline-block; width: 1.2em; text-align: start;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }

.pop { animation: pop 260ms cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- آفتاب‌پرست */

/* شانزده کلمه در چهار ستون؛ تختهٔ پنج‌ستونیِ کدنیمز اینجا خیلی باریک می‌شد. */
.board--4 { grid-template-columns: repeat(4, 1fr); }
.board--4 .cell { aspect-ratio: 1 / .78; }
.cell[data-target='true'] {
  background: var(--gc-accent); color: var(--gc-on-accent);
  border-color: transparent; font-weight: 900;
}

/* ---------------------------------------------------------------- رتبه‌بندی جمع */

.rank-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 14px;
  background: #ffffff08; border: 1px solid var(--gc-line);
}
.rank-row .rank {
  width: 22px; font-weight: 900; color: var(--gc-muted); font-variant-numeric: tabular-nums;
}
.rank-row .nm { flex: 1; font-weight: 700; }
.rank-row[data-me='true'] { border-color: var(--gc-accent); }
.rank-row .icon-btn { min-width: 40px; height: 40px; font-size: 15px; }

/* ---------------------------------------------------------------- حدس با ایموجی */

.emoji-card {
  border-radius: var(--gc-radius-lg); border: 1px solid var(--gc-line);
  background: color-mix(in srgb, var(--gc-accent) 12%, transparent);
  padding: 20px 14px; text-align: center;
}
.emoji-card .glyphs {
  direction: ltr; letter-spacing: 6px; line-height: 1.3;
  font-size: clamp(42px, 17vw, 72px);
}

/* ---------------------------------------------------------------- برند موبایل‌بازی */
/* فقط در بیلدِ سایت دیده می‌شود (وقتی window.MB_BRAND ست شده باشد). */

.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center;
  justify-items: center; gap: 12px; background: var(--gc-canvas);
  animation: splash-in 320ms ease-out;
}
.splash[data-out='true'] { opacity: 0; transition: opacity 400ms ease; }
.splash img { width: 96px; height: 96px; object-fit: contain; }
.splash__line { margin: 0; font-size: 17px; font-weight: 700; }
.splash__site { margin: 0; font-size: 13px; color: var(--gc-muted); letter-spacing: 1px; }
@keyframes splash-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.credits { border-top: 1px solid var(--gc-line); padding-top: 10px; }
.credits summary { cursor: pointer; font-size: 13px; color: var(--gc-muted); }
.credits a { color: var(--gc-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
@media (max-width: 340px) {
  .shell { padding-inline: 12px; }
  h1.title { font-size: 25px; }
}

/* ---------------------------------------------------------------- جاسوسِ پاس‌کاری */

.pass-card {
  padding: 34px 20px; border-radius: var(--gc-radius-lg); text-align: center;
  border: 1px dashed var(--gc-line); background: #ffffff06;
}
.pass-card b {
  display: block; font-size: 30px; font-weight: 900; margin: 6px 0 10px;
  color: var(--gc-accent);
}
.seat-row { display: flex; gap: 8px; align-items: center; }
.seat-row .num {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: #ffffff12; font-size: 12px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.seat-row input[type='text'] { min-height: 42px; }
.mode-pick { display: flex; flex-direction: column; gap: 8px; }
.mode-pick button {
  text-align: start; padding: 12px 14px; min-height: 48px;
  border-radius: var(--gc-radius-sm); border: 1px solid var(--gc-line);
  background: #ffffff08; color: var(--gc-ink); font: inherit; cursor: pointer;
}
.mode-pick button[aria-pressed='true'] {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 15%, transparent);
}
.mode-pick button:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }
.mode-pick b { display: block; font-size: 14.5px; }
.mode-pick span { font-size: 12px; color: var(--gc-muted); line-height: 1.5; }

/* ---------------------------------------------------------------- خانه: فهرست فشرده + نوار چسبان */

.screen--home { padding-bottom: 150px; } /* جا برای نوار چسبان */
.game-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.game-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 84px; padding: 10px 12px; text-align: start;
  border-radius: var(--gc-radius-md); border: 1px solid var(--gc-line);
  background: #ffffff08; color: var(--gc-ink); font: inherit; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.game-tile .glyph {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #ffffff10; margin-bottom: 4px;
}
.game-tile .glyph .ic { width: 18px; height: 18px; }
.game-tile .t { font-weight: 700; font-size: 14px; line-height: 1.3; }
.game-tile .p { font-size: 11.5px; color: var(--gc-muted); }
.game-tile[aria-pressed='true'] {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 16%, transparent);
}
.game-tile[aria-pressed='true'] .glyph { background: var(--gc-accent); color: var(--gc-on-accent); }
.game-tile:focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; }
.game-tile:active { transform: translateY(1px); }

.code-input--sm { font-size: 18px; letter-spacing: .3em; min-height: 46px; flex: 1; }

.dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(var(--shell-max), 100%);
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--gc-canvas) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gc-line);
  display: flex; flex-direction: column; gap: 10px; z-index: 40;
}
.dock__pick { display: flex; flex-direction: column; line-height: 1.4; }
.dock__pick b { font-size: 16px; }

/* روی گوشی‌های باریک، زیرعنوانِ کنارِ «یک بازی انتخاب کن» جا نمی‌شود و خط را می‌شکند. */
@media (max-width: 360px) {
  .screen--home .row--between > .tiny { display: none; }
}