@font-face {
  font-family: "Vazirmatn Local";
  src: url("../icons/vazirmatn-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 2px solid #f3b829; outline-offset: 2px; }
img, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3, strong { font-family: "Vazirmatn Local", Vazirmatn, Tahoma, "Segoe UI", sans-serif; }
p { line-height: 1.8; }
.icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; }
.sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 200;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  transform: translateY(-160%);
  padding: .55rem .75rem;
  color: #071019;
  background: #f3b829;
  border-radius: .45rem;
}
.skip-link:focus { transform: none; }
.scene-art--procedural {
  min-block-size: 100%;
  background:
    linear-gradient(145deg, transparent 38%, rgba(209,155,50,.1) 39% 40%, transparent 41%),
    radial-gradient(circle at 60% 25%, rgba(55,88,107,.4), transparent 30%),
    linear-gradient(150deg,#152530,#060c11);
}
input, select, textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 3rem;
  padding: .68rem .72rem;
  color: #f3f1ec;
  background: #09151e;
  border: 1px solid rgba(175,193,202,.3);
  border-radius: .58rem;
}
textarea { resize: vertical; line-height: 1.85; }
input::placeholder, textarea::placeholder { color: #707d85; }
.field { min-inline-size: 0; display: grid; gap: .35rem; color: #909ca3; font-size: .64rem; }

/* Game-first visual system — inspired by the supplied mobile references. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  font-family: "Vazirmatn Local", Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #071019;
  --ink-2: #0b1620;
  --ink-3: #111f2a;
  --surface: #0d1923;
  --surface-raised: #13212c;
  --paper: #e4d6bc;
  --paper-soft: #9ba5aa;
  --gold: #d19b32;
  --gold-bright: #f3b829;
  --wine: #8e2424;
  --wine-bright: #c73732;
  --sage: #52a27d;
  --mist: #f3f1ec;
  --line: rgba(145, 165, 177, .18);
  --line-strong: rgba(175, 193, 202, .3);
  --shadow: 0 20px 58px rgba(0, 0, 0, .48);
  --card-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  --radius-xs: .55rem;
  --radius-sm: .8rem;
  --radius-md: 1rem;
  --radius-lg: 1.3rem;
  --hud-height: 4.5rem;
  --case-nav-height: 4.55rem;
}

html {
  min-inline-size: 320px;
  background: #050b10;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  min-inline-size: 320px;
  min-block-size: 100dvh;
  color: var(--mist);
  background:
    radial-gradient(circle at 80% -10%, rgba(41, 79, 102, .22), transparent 28rem),
    linear-gradient(180deg, #071019 0%, #060d13 100%);
  font-family: "Vazirmatn Local", Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(95deg, transparent 0 6px, rgba(255,255,255,.018) 7px 8px), radial-gradient(circle at 12% 12%, rgba(209,155,50,.08), transparent 24rem);
}
body.drawer-open { overflow: hidden; }
.app-root, .game-shell, .game-view { min-inline-size: 0; inline-size: 100%; }
.game-shell { padding-block-start: calc(var(--hud-height) + var(--safe-top)); }
.game-view { min-block-size: calc(100dvh - var(--hud-height) - var(--safe-top)); overflow: visible; }
.app-root.case-active .game-view { padding-block-start: var(--case-nav-height); }
.game-view:focus { outline: none; }

.hud {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 30;
  min-block-size: calc(var(--hud-height) + var(--safe-top));
  padding: calc(.55rem + var(--safe-top)) .65rem .55rem;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  background: rgba(5, 13, 19, .94);
  border-block-end: 1px solid rgba(209,155,50,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.hud::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(209,155,50,.42), transparent); }
.hud-control, .icon-button {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: #c8d0d5;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: .75rem;
}
.hud-control:active, .icon-button:active { transform: scale(.96); }
.hud-brand {
  min-inline-size: 0;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0;
  color: var(--mist);
  background: transparent;
  text-align: start;
}
.hud-brand img { inline-size: 2.55rem; block-size: 2.55rem; border-radius: .75rem; box-shadow: 0 0 0 1px rgba(209,155,50,.25), 0 8px 18px #0007; }
.hud-brand__copy { min-inline-size: 0; display: grid; line-height: 1.2; }
.hud-brand__copy strong { font-size: .93rem; letter-spacing: -.015em; }
.hud-brand__copy small { margin-block-start: .18rem; color: #84919a; font-size: .58rem; white-space: nowrap; }
.hud-actions { display: flex; gap: .3rem; direction: rtl; }
.hud-actions .hud-control { inline-size: 2.55rem; block-size: 2.55rem; background: transparent; border-color: transparent; }
.hud-actions .hud-control:hover { background: rgba(255,255,255,.045); border-color: var(--line); }
.hud-status__label { display: none; }
.hud-status:not(.is-offline) .icon { color: var(--sage); }
.hud-status.is-offline .icon { color: #c65f59; }
.hud-wallet .icon { color: var(--gold-bright); }

.case-nav {
  position: fixed;
  inset-block-start: calc(var(--hud-height) + var(--safe-top));
  inset-inline: 0;
  z-index: 24;
  min-block-size: var(--case-nav-height);
  padding: .48rem .55rem;
  background: rgba(7,16,25,.97);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.case-nav__rail { display: flex; align-items: stretch; gap: .38rem; min-inline-size: max-content; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x pan-y; }
.case-nav__rail::-webkit-scrollbar { display: none; }
.case-nav__case { min-inline-size: 3.6rem; display: grid; place-items: center; padding: .4rem .55rem; color: var(--gold); font: 700 .66rem ui-monospace, monospace; border: 1px solid rgba(209,155,50,.3); border-radius: .65rem; background: rgba(209,155,50,.07); direction: ltr; }
.case-nav button { min-inline-size: 4.35rem; min-block-size: 3.5rem; padding: .38rem .48rem; display: grid; justify-items: center; align-content: center; gap: .24rem; color: #82909a; background: transparent; border: 1px solid transparent; border-radius: .65rem; scroll-snap-align: start; }
.case-nav button .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.case-nav button span { font-size: .58rem; white-space: nowrap; }
.case-nav button.is-active { color: #ffd573; border-color: rgba(202,55,50,.48); background: linear-gradient(180deg, rgba(142,36,36,.34), rgba(142,36,36,.14)); box-shadow: inset 0 -2px 0 var(--wine-bright); }
.case-nav button.is-locked { color: #53616a; opacity: .72; cursor: help; }
.case-nav button.is-locked.is-active { border-color: rgba(145,165,177,.18); background: rgba(145,165,177,.05); box-shadow: none; }

.drawer-overlay { position: fixed; z-index: 70; inset: 0; inline-size: 100%; block-size: 100%; background: rgba(0,5,9,.72); border: 0; backdrop-filter: blur(3px); }
.drawer {
  position: fixed;
  z-index: 80;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(90vw, 22rem);
  padding: calc(.8rem + var(--safe-top)) .75rem calc(.8rem + var(--safe-bottom));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: .8rem;
  color: var(--mist);
  background: linear-gradient(160deg, #101d27, #060d13 72%);
  border-inline-end: 1px solid rgba(209,155,50,.3);
  box-shadow: -28px 0 80px rgba(0,0,0,.64);
  overflow: hidden;
  animation: drawer-in .2s ease-out both;
}
.drawer__header { min-block-size: 3.7rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.drawer__brand { min-inline-size: 0; display: flex; align-items: center; gap: .65rem; }
.drawer__brand img { inline-size: 3rem; block-size: 3rem; border-radius: .8rem; }
.drawer__brand > div { display: grid; gap: .15rem; }
.drawer__brand strong { font-size: 1.08rem; }
.drawer-player { min-inline-size: 0; padding: .75rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; background: linear-gradient(120deg, rgba(209,155,50,.1), rgba(255,255,255,.025)); border: 1px solid rgba(209,155,50,.24); border-radius: var(--radius-sm); }
.drawer-player__avatar { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; color: #1a1308; background: linear-gradient(145deg, #f7c550, #b87c14); border-radius: 50%; font-weight: 900; }
.drawer-player > div { min-inline-size: 0; display: grid; gap: .1rem; }
.drawer-player strong { font-size: .78rem; }
.drawer-player small { color: #87949c; font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-player__rank { padding: .18rem .4rem; color: #87d1ad; background: rgba(82,162,125,.1); border: 1px solid rgba(82,162,125,.24); border-radius: 99px; font-size: .55rem; }
.drawer nav { min-block-size: 0; display: grid; align-content: start; gap: .3rem; padding-inline: .05rem; overflow-y: auto; overscroll-behavior: contain; }
.drawer nav button { min-block-size: 3.75rem; inline-size: 100%; padding: .55rem .62rem; display: grid; grid-template-columns: 2.25rem minmax(0,1fr) auto; align-items: center; gap: .65rem; color: #b8c1c6; text-align: start; background: transparent; border: 1px solid transparent; border-radius: .72rem; }
.drawer nav button.is-current { color: #fff3d4; background: linear-gradient(90deg, rgba(142,36,36,.34), rgba(142,36,36,.08)); border-color: rgba(199,55,50,.34); box-shadow: inset -3px 0 0 var(--wine-bright); }
.drawer__icon { inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; color: var(--gold); background: rgba(209,155,50,.07); border-radius: .55rem; }
.drawer__copy { min-inline-size: 0; display: grid; gap: .08rem; }
.drawer__copy strong { font-size: .76rem; }
.drawer__copy small { color: #74818a; font-size: .55rem; }
.drawer nav button > .icon:last-child { inline-size: .9rem; color: #66737c; }
.drawer footer { min-block-size: 2.4rem; display: flex; align-items: center; justify-content: center; gap: .45rem; color: #76838b; border-block-start: 1px solid var(--line); font-size: .6rem; }
.connection-dot { inline-size: .48rem; block-size: .48rem; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(82,162,125,.1); }
@keyframes drawer-in { from { transform: translateX(102%); } }

.toast { position: fixed; z-index: 100; inset-inline: .8rem; inset-block-end: calc(.8rem + var(--safe-bottom)); max-inline-size: 32rem; margin-inline: auto; padding: .8rem 1rem; color: #f7edd8; background: #15232c; border: 1px solid rgba(209,155,50,.4); border-radius: var(--radius-sm); box-shadow: var(--shadow); text-align: center; font-size: .75rem; }
.boot-screen {
  min-block-size: 100dvh;
  padding: 1.5rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .55rem;
  text-align: center; background: radial-gradient(circle at center, rgba(209,155,50,.12), transparent 18rem), #071019; }
.boot-mark { inline-size: 4.5rem; block-size: 4.5rem; margin-block-end: .5rem; border-radius: 1.2rem; box-shadow: 0 18px 50px #000a; }
.boot-screen strong { color: #f7ead0; font-size: 1.7rem; }
.boot-screen > span { color: #8f9ba3; font-size: .75rem; }

.page-heading { padding: 1.5rem 1rem .8rem; }
.page-heading h1 { margin: .25rem 0 .35rem; color: var(--mist); font-size: clamp(1.55rem, 7vw, 2.3rem); letter-spacing: -.035em; }
.page-heading p { margin: 0; color: #8e9aa2; font-size: .77rem; line-height: 1.75; }
.eyebrow { color: var(--gold); font-size: .62rem; font-weight: 750; letter-spacing: .02em; }
.action {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 3.55rem;
  padding: .68rem .82rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--mist);
  text-align: center; border-radius: .72rem; font-weight: 760; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.action--primary { color: #161006; background: linear-gradient(180deg, #ffc94b, #e9a91b); border: 1px solid #ffd263; text-shadow: 0 1px rgba(255,255,255,.25); }
.action--primary:active { background: #d99a16; transform: translateY(1px); }
.action--secondary { background: linear-gradient(180deg, #182833, #101b24); border-color: var(--line-strong); border-radius: .72rem; }
.action--quiet { background: rgba(255,255,255,.025); border-color: var(--line); border-radius: .72rem; }
.action--danger { background: linear-gradient(180deg, #a52c29, #761a1c); border-color: #c43b36; border-radius: .72rem; }
.metric {
  min-inline-size: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .08rem; padding: .25rem; border-color: transparent; background: transparent; }
.metric strong { color: #f0c86d; font-size: .92rem; }
.metric span { color: #849098; font-size: .58rem; }
.progress {
  position: relative;
  min-inline-size: 0;
  min-block-size: 1.35rem;
  padding-block-end: 1.15rem;
  overflow: hidden;
}
.progress::before, .progress > span {
  content: "";
  position: absolute;
  inset-block-end: .55rem;
  inset-inline-start: 0;
  block-size: 3px; border-radius: 99px; }
.progress::before { background: rgba(170,187,196,.18); }
.progress > span { background: linear-gradient(90deg, #d99915, #f7c84c); box-shadow: 0 0 10px rgba(247,200,76,.35); }
.progress small { color: #9ba6ad; font-size: .62rem; }

.detective-status { padding: .8rem .85rem; display: grid; gap: .75rem; background: linear-gradient(120deg, rgba(255,255,255,.025), transparent); border-block-end: 1px solid var(--line); }
.detective-status__identity { min-inline-size: 0; display: flex; align-items: center; gap: .65rem; }
.detective-avatar { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; color: #211706; background: linear-gradient(145deg,#f1bd46,#a56a0d); border: 2px solid #f1c159; border-radius: 50%; box-shadow: 0 8px 18px #0007; font-weight: 900; }
.detective-status__identity > div { display: grid; gap: .12rem; }
.detective-status__identity strong { font-size: .88rem; }
.detective-stats { display: grid; grid-template-columns: 4rem 4rem minmax(0,1fr); align-items: center; gap: .35rem; }
.status-credit { min-inline-size: 0; min-block-size: 2.8rem; padding: .4rem .55rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem; color: #f2d894; background: linear-gradient(120deg, rgba(209,155,50,.14), rgba(209,155,50,.04)); border: 1px solid rgba(209,155,50,.32); border-radius: .68rem; }
.status-credit .icon { inline-size: 1rem; block-size: 1rem; }
.status-credit span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }

.command-scene { position: relative; min-block-size: min(36rem, 72svh); margin: .75rem; border: 1px solid rgba(209,155,50,.32); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 22px 52px #0008, inset 0 0 0 1px rgba(255,255,255,.025); }
.command-scene::after { content: ""; position: absolute; z-index: 2; inset: .45rem; pointer-events: none; border: 1px solid rgba(255,255,255,.06); border-radius: .95rem; }
.command-scene > .scene-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08) brightness(.8); }
.scene-vignette { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(3,8,12,.08) 15%, rgba(5,10,14,.2) 38%, rgba(4,9,13,.97) 100%), linear-gradient(90deg, rgba(3,8,12,.4), transparent 55%); }
.mission-status { position: absolute; z-index: 4; inset-block-start: .95rem; inset-inline-start: .95rem; padding: .35rem .55rem; display: flex; align-items: center; gap: .35rem; color: #f2dca7; background: rgba(4,10,14,.82); border: 1px solid rgba(209,155,50,.3); border-radius: 99px; font-size: .58rem; }
.mission-status code { color: #88959d; font-size: .56rem; }
.mission-copy { position: absolute; z-index: 4; inset-inline: 1rem; inset-block-end: 9.4rem; }
.mission-copy h1 { margin: .24rem 0 .48rem; color: #fff8e9; font-size: clamp(1.7rem, 8.5vw, 2.6rem); line-height: 1.22; text-shadow: 0 4px 20px #000; }
.mission-copy p { margin: 0; max-inline-size: 34rem; color: #c4c7c5; font-size: .75rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mission-tags { margin-block-start: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.mission-tags span { padding: .25rem .45rem; color: #d6c5a4; background: rgba(5,11,15,.72); border: 1px solid rgba(209,155,50,.2); border-radius: 99px; font-size: .56rem; }
.mission-console { position: absolute; z-index: 5; inset-inline: .75rem; inset-block-end: .75rem; padding: .7rem; display: grid; gap: .48rem; background: rgba(7,15,21,.9); border: 1px solid rgba(177,193,202,.2); border-radius: .85rem; backdrop-filter: blur(8px); }
.mission-console .objective { margin: 0; color: #aeb6ba; font-size: .65rem; line-height: 1.6; }
.mission-console .action { min-block-size: 3.25rem; }

.game-mode-launcher { padding: .1rem .75rem .75rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.home-action { min-inline-size: 0; min-block-size: 5.8rem; padding: .75rem; display: grid; grid-template-columns: 2.4rem minmax(0,1fr); align-items: center; gap: .55rem; color: var(--mist); text-align: start; background: linear-gradient(145deg,#132534,#0b1822); border: 1px solid #254052; border-radius: var(--radius-sm); box-shadow: var(--card-shadow); }
.home-action > .icon:last-child { display: none; }
.home-action__icon { inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; color: #77b9e8; background: rgba(41,126,182,.14); border-radius: .65rem; }
.home-action__copy { min-inline-size: 0; display: grid; gap: .15rem; }
.home-action__copy strong { font-size: .78rem; }
.home-action__copy small { color: #87959e; font-size: .56rem; line-height: 1.5; }
.home-action--cases { background: linear-gradient(145deg,#251a3a,#131326); border-color: #4d3670; }
.home-action--cases .home-action__icon { color: #c79bff; background: rgba(137,77,204,.14); }
.home-missions { padding: 0 .75rem .85rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .48rem; }
.home-missions .home-action { min-block-size: 5.3rem; padding: .58rem .35rem; grid-template-columns: 1fr; justify-items: center; text-align: center; }
.home-missions .home-action__copy small { display: none; }
.home-missions .home-action__icon { inline-size: 2.2rem; block-size: 2.2rem; color: #f1b73c; background: rgba(209,155,50,.12); }
.home-missions .home-action__copy strong { font-size: .65rem; white-space: nowrap; }
.home-action--league { background: linear-gradient(145deg,#2a1f0b,#141209); border-color: #5f481d; }
.home-action--weekly { background: linear-gradient(145deg,#182b25,#0b1714); border-color: #295849; }
.home-action--store { background: linear-gradient(145deg,#0c2d31,#07181d); border-color: #1d5961; }

.home-section { padding: .3rem 0 .9rem; }
.home-section__heading { padding: .55rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.home-section__heading h2 { margin: 0; font-size: .92rem; }
.home-section__heading > span, .home-section__heading button { color: #89969e; background: transparent; font-size: .58rem; }
.home-section__heading button { display: flex; align-items: center; gap: .3rem; }
.home-section__heading button .icon { inline-size: .8rem; }
.continue-list { padding: 0 .75rem; display: grid; gap: .55rem; }
.continue-card { position: relative; min-block-size: 7.4rem; padding: .75rem; display: grid; grid-template-columns: minmax(0,1fr) 2.5rem; align-items: end; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--card-shadow); }
.continue-card > img, .continue-card > .scene-art--procedural { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.65) brightness(.65); }
.continue-card__shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,11,15,.98),rgba(5,11,15,.38)); }
.continue-card__copy, .continue-card > button { position: relative; z-index: 2; }
.continue-card__copy { min-inline-size: 0; display: grid; gap: .15rem; }
.continue-card__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.continue-card__copy .progress { max-inline-size: 14rem; }
.continue-card > button { inline-size: 2.45rem; block-size: 2.45rem; display: grid; place-items: center; color: #211605; background: var(--gold-bright); border-radius: 50%; }
.home-case-rail { padding: 0 .75rem .45rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw,16rem); gap: .65rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-case-rail::-webkit-scrollbar { display: none; }
.home-case-card { position: relative; min-block-size: 12rem; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--card-shadow); }
.home-case-card__hit { position: absolute; z-index: 4; inset: 0; inline-size: 100%; block-size: 100%; background: transparent; }
.home-case-card > img, .home-case-card > .scene-art--procedural { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.7) brightness(.76); }
.home-case-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 20%,rgba(5,10,14,.96)); }
.difficulty-badge { position: relative; display: inline-flex; inline-size: fit-content; padding: .22rem .45rem; color: #ffd3ce; background: rgba(142,36,36,.86); border: 1px solid rgba(235,83,76,.38); border-radius: 99px; font-size: .55rem; }
.difficulty-badge--easy { color: #a8e0c2; background: rgba(34,105,75,.84); border-color: rgba(82,162,125,.45); }
.difficulty-badge--medium { color: #f5d68c; background: rgba(130,86,16,.88); border-color: rgba(209,155,50,.45); }
.home-case-card > .difficulty-badge { position: absolute; z-index: 3; inset-block-start: .6rem; inset-inline-end: .6rem; }
.home-case-card__copy { position: absolute; z-index: 2; inset-inline: .7rem; inset-block-end: .65rem; display: grid; gap: .12rem; }
.home-case-card__copy small { color: var(--gold); font: 650 .53rem ui-monospace,monospace; }
.home-case-card__copy strong { font-size: .85rem; }
.home-case-card__copy span { color: #929da4; font-size: .56rem; }
.saved-grid { padding: 0 .75rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.saved-grid .home-case-card { min-block-size: 10rem; }

.catalog-hero { padding: 1.5rem 1rem .8rem; background: radial-gradient(circle at 100% 0,rgba(142,36,36,.16),transparent 16rem); }
.catalog-hero > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.catalog-hero h1 { margin: .25rem 0; font-size: 1.7rem; }
.catalog-hero p { margin: .3rem 0 0; color: #8b979e; font-size: .7rem; line-height: 1.7; }
.catalog-count { padding: .25rem .5rem; color: #f2ca6f; background: rgba(209,155,50,.08); border: 1px solid rgba(209,155,50,.22); border-radius: 99px; font-size: .6rem; white-space: nowrap; }
.case-filter { margin: 0 .75rem .75rem; padding: .7rem; display: grid; grid-template-columns: 1fr; gap: .55rem; background: rgba(14,27,37,.86); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.catalog-search { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .45rem; padding-inline: .7rem; background: #09131c; border: 1px solid var(--line-strong); border-radius: .65rem; }
.catalog-search .icon { color: #71808a; }
.catalog-search input { min-inline-size: 0; padding-inline: 0; background: transparent; border: 0; outline: 0; }
.filter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; }
.filter-grid select { min-inline-size: 0; min-block-size: 2.75rem; padding: .5rem; background: #0a151e; border-color: var(--line); border-radius: .55rem; font-size: .65rem; }
.case-filter .compact-button { min-block-size: 3rem; display: flex; align-items: center; justify-content: center; gap: .5rem; color: #171006; background: linear-gradient(180deg,#f5c14b,#d99613); border: 1px solid #f2c75f; border-radius: .6rem; font-weight: 800; }
.result-count { margin: 0; padding: .25rem .9rem .7rem; }
.case-files { padding: 0 .75rem 1rem; display: grid; gap: .6rem; }
.case-file { position: relative; min-block-size: 8.9rem; padding: .55rem; display: grid; grid-template-columns: 6.25rem minmax(0,1fr) 1.8rem; gap: .65rem; background: linear-gradient(135deg,#111f29,#0a151e); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--card-shadow); }
.case-file::before { content: ""; position: absolute; inset-block: .6rem; inset-inline-start: 0; inline-size: 2px; background: var(--wine-bright); opacity: calc(.25 + var(--index) * .12); }
.case-file__hit { position: absolute; z-index: 5; inset: 0; inline-size: 100%; block-size: 100%; background: transparent; }
.case-file__art { position: relative; min-inline-size: 0; border-radius: .6rem; overflow: hidden; }
.case-file__art > img, .case-file__art > .scene-art--procedural { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.65) brightness(.8); }
.case-file__art .difficulty-badge { position: absolute; inset-inline: .35rem; inset-block-end: .35rem; }
.case-file__body { min-inline-size: 0; align-self: center; }
.case-file__topline { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.case-file__topline code { color: var(--gold); font-size: .52rem; }
.case-file__topline span { color: #7f8d95; font-size: .5rem; }
.case-file__body h2 { margin: .24rem 0 .32rem; font-size: .9rem; line-height: 1.35; }
.case-file__body p { margin: 0 0 .45rem; color: #8e9ba2; font-size: .6rem; line-height: 1.55; -webkit-line-clamp: 2; }
.case-file__meta { gap: .25rem; }
.case-file__meta span { padding: .16rem .3rem; color: #9ba6ac; background: rgba(255,255,255,.035); border-radius: .28rem; font-size: .48rem; }
.case-file__progress { margin-block-start: .35rem; }
.case-file__progress .progress { padding-block-end: .85rem; }
.case-file__progress .progress small { font-size: .5rem; }
.case-file__arrow { align-self: center; color: #6f7e87; }
.case-file__arrow .icon { inline-size: 1rem; }

.case-detail { background: linear-gradient(180deg,#071019,#060c12); }
.case-brief-cover { min-block-size: min(32rem,61svh); border-block-end: 1px solid rgba(209,155,50,.2); }
.case-brief-cover > img { filter: saturate(.72) contrast(1.06) brightness(.8); }
.cover-shade { background: linear-gradient(180deg,rgba(2,6,9,.08),rgba(4,9,13,.25) 35%,#071019 100%); }
.back-control { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; color: #e2e6e7; background: rgba(3,9,13,.72); border: 1px solid rgba(255,255,255,.18); border-radius: .72rem; }
.case-cover-status { position: absolute; z-index: 3; inset-block-start: 1rem; inset-inline-end: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.league-badge { padding: .24rem .45rem; color: #f4d784; background: rgba(98,70,10,.72); border: 1px solid rgba(209,155,50,.35); border-radius: 99px; font-size: .54rem; }
.cover-copy { padding: 2.4rem 1rem 1rem; }
.cover-copy h1 { font-size: clamp(1.85rem,9vw,3.5rem); }
.cover-copy p { color: #c4c7c5; font-size: .75rem; line-height: 1.7; }
.cover-copy .progress { margin-block-start: .8rem; max-inline-size: 24rem; }
.case-intel { padding: .85rem .85rem 1.5rem; }
.intel-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .35rem; padding: .45rem; background: linear-gradient(145deg,#111f29,#0b161f); border: 1px solid var(--line); border-radius: .75rem; }
.case-summary { margin-block: 1rem; padding: 1rem; background: rgba(13,25,35,.78); border: 1px solid var(--line); border-radius: .75rem; }
.case-summary h2 { margin: .24rem 0 .4rem; font-size: 1rem; }
.case-summary p { margin: 0; color: #a5afb4; font-size: .72rem; line-height: 1.9; }
.case-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.case-tags span { padding: .25rem .48rem; color: #aab4b9; background: #0d1a23; border: 1px solid var(--line); border-radius: 99px; font-size: .55rem; }
.content-warning { border-radius: .65rem; }
.case-detail__actions { display: grid; gap: .5rem; margin-block-start: 1rem; }

.mode-screen { min-block-size: calc(100dvh - var(--hud-height)); padding-block-end: 1.2rem; background: radial-gradient(circle at 50% 10%,rgba(209,155,50,.09),transparent 18rem); }
.mode-choices { padding: .5rem .8rem 1rem; }
.mode-choice { position: relative; min-block-size: 13.5rem; padding: 1rem; display: grid; grid-template-columns: 3.1rem minmax(0,1fr) auto; align-content: center; gap: .45rem .7rem; background: linear-gradient(145deg,#132534,#0a1720); border: 1px solid #284253; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--card-shadow); }
.mode-choice::after { content: ""; position: absolute; inline-size: 10rem; block-size: 10rem; inset-inline-end: -4rem; inset-block-end: -5rem; border-radius: 50%; background: rgba(51,126,174,.12); }
.mode-choice--group { background: linear-gradient(145deg,#22203a,#111324); border-color: #483b68; }
.mode-choice--group::after { background: rgba(133,78,199,.12); }
.mode-choice__icon { grid-row: 1 / span 4; inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; color: #78bce9; background: rgba(44,128,182,.15); border: 1px solid rgba(67,151,203,.25); border-radius: .75rem; }
.mode-choice--group .mode-choice__icon { color: #c69cff; background: rgba(137,78,199,.14); border-color: rgba(156,103,212,.28); }
.mode-choice > .eyebrow, .mode-choice strong, .mode-choice p, .mode-choice__cta { grid-column: 2; }
.mode-choice > strong { font-size: 1.08rem; }
.mode-choice p { font-size: .7rem; line-height: 1.7; }
.mode-choice__cta { color: #f0c763; font-size: .65rem; }
.mode-choice > .icon:last-child { z-index: 1; }
.mode-screen > .action { inline-size: calc(100% - 1.6rem); margin-inline: .8rem; }

.brief-screen { padding-block-end: 1.25rem; }
.brief-hero { position: relative; margin: .85rem; padding: 1.2rem 1rem; background: linear-gradient(150deg,#15242e,#0b161e); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--card-shadow); overflow: hidden; }
.brief-hero::after { content: ""; position: absolute; inset-inline-start: -2rem; inset-block-end: -2rem; inline-size: 8rem; block-size: 8rem; border: 1rem double rgba(209,155,50,.05); border-radius: 50%; }
.brief-hero__stamp { position: absolute; inset-block-start: .8rem; inset-inline-start: .8rem; padding: .25rem .45rem; color: #d88179; border: 1px solid rgba(199,55,50,.5); border-radius: .3rem; transform: rotate(-5deg); font-size: .55rem; }
.brief-hero h1 { margin: .3rem 0 .55rem; font-size: 1.45rem; }
.brief-hero p { margin: 0; color: #a3adb2; font-size: .72rem; line-height: 1.85; }
.brief-record, .objective-sheet { margin: 0 .85rem .7rem; border-radius: .75rem; }
.brief-record { grid-template-columns: 5.2rem minmax(0,1fr); align-items: center; }
.record-mark { inline-size: 5rem; block-size: 5.6rem; border-radius: .2rem; }
.record-mark strong { max-inline-size: 4.5rem; font-size: .7rem; overflow-wrap: anywhere; }
.brief-record__copy { min-inline-size: 0; }
.brief-record__copy strong { color: #e2e1dc; font-size: .8rem; }
.brief-record__copy p { margin: .35rem 0 0; color: #929ea5; font-size: .65rem; line-height: 1.75; }
.objective-sheet { display: grid; grid-template-columns: 2.8rem minmax(0,1fr); gap: .65rem; border-inline-start: 1px solid var(--line); }
.objective-sheet__number { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; color: #1e1505; background: var(--gold-bright); border-radius: 50%; font-weight: 900; }
.objective-sheet h2 { font-size: .95rem; }
.objective-sheet p { font-size: .68rem; line-height: 1.75; }
.brief-actions { margin: 1rem .85rem 0; display: grid; gap: .55rem; text-align: center; }
.brief-actions small { color: #77858d; font-size: .58rem; }

/* Gameplay surfaces inherit the same game language while keeping document scroll. */
.tool-screen, .accusation-screen, .score-screen, .simple-screen, .rooms-screen, .store-screen, .league-screen, .competition-screen { min-height: calc(100dvh - var(--hud-height) - var(--safe-top)); padding-block-end: calc(1.2rem + var(--safe-bottom)); }
.investigation-screen { min-block-size: calc(100dvh - var(--hud-height) - var(--case-nav-height) - var(--safe-top)); background: #050b10; }
.investigation-scene { position: relative; min-block-size: 23rem; overflow: hidden; isolation: isolate; touch-action: pan-y pinch-zoom; border-block-end: 1px solid rgba(209,155,50,.22); }
.investigation-scene .scene-art { filter: saturate(.72) contrast(1.08) brightness(.84); }
.scene-objective { background: linear-gradient(180deg,#101e28,#09141c); }
.scene-objective h1 { color: #fff5e0; }
.hotspot {
  position: absolute;
  z-index: 4;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff2c8;
  background: rgba(7,14,19,.82);
  border: 1px solid #efbd49;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(239,189,73,.13),0 0 26px rgba(239,189,73,.28);
  transform: translate(50%, -50%);
  touch-action: manipulation;
  font-weight: 900;
  animation: hotspot 2.1s ease-in-out infinite;
}
.hotspot.is-found { color: #071019; background: #efbd49; animation: none; }
.evidence-slide, .suspect-record, .hint-levels article, .room-actions form, .offer-strip, .profile-dossier, .shared-ledger, .ballot-ledger, .rules-ledger, .score-total, .transaction-ledger { border-radius: .7rem; }
.suspect-record { margin: .45rem .75rem; background: linear-gradient(145deg,#111f29,#0a151e); border: 1px solid var(--line); border-radius: .7rem; }
.suspect-record:last-child { border-block-end: 1px solid var(--line); }
.portrait-placeholder { border-radius: .55rem; }
.interrogation-header { margin: .7rem; padding: .55rem; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .65rem; background: linear-gradient(145deg,#14232d,#0a151d); border: 1px solid var(--line); border-radius: .75rem; }
.interrogation-header h1 { margin: .15rem 0 0; }
.suspect-facts section, .transcript blockquote, .hint-levels article { border-radius: .55rem; }
.timeline-builder li { margin-block: .4rem; padding-inline: 2.8rem .55rem; background: rgba(15,29,39,.76); border: 1px solid var(--line); border-radius: .65rem; }
.evidence-board { border-radius: .7rem; }
.notebook textarea { border-radius: .5rem; }
.archivist-presence { background: linear-gradient(180deg,rgba(209,155,50,.05),transparent); }
.competition-hero, .league-hero { background: radial-gradient(circle at 50% 0,rgba(209,155,50,.2),transparent 45%),linear-gradient(#111e28,#071019); }
.wallet-balance { background: radial-gradient(circle,rgba(209,155,50,.18),transparent 55%); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(1,5,8,.78);
  backdrop-filter: blur(3px);
}
.reveal-dialog {
  inline-size: min(32rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: 1.1rem;
  color: var(--mist);
  background: linear-gradient(160deg, #14242f, #08121a 72%);
  border: 1px solid rgba(209,155,50,.4);
  border-radius: .8rem;
  box-shadow: var(--shadow);
  direction: rtl;
  overflow: auto;
  display: grid;
  gap: .75rem;
}
.reveal-dialog p { margin: 0; color: #d8dde0; }
.reveal-dialog .action { inline-size: 100%; }

@media (max-width: 23rem) {
  .hud { grid-template-columns: 2.7rem minmax(0,1fr) auto; padding-inline: .5rem; }
  .hud-actions { gap: 0; }
  .hud-actions .hud-control { inline-size: 2.3rem; }
  .hud-actions .hud-status { display: none; }
  .hud-brand img { inline-size: 2.35rem; block-size: 2.35rem; }
  .hud-brand__copy small { display: none; }
  .detective-status { grid-template-columns: 1fr; }
  .command-scene { min-block-size: min(34rem,72svh); margin-inline: .55rem; }
  .mission-copy { inset-inline: .85rem; inset-block-end: 9.3rem; }
  .game-mode-launcher, .home-missions, .case-files { padding-inline: .55rem; }
  .home-action { padding-inline: .6rem; }
  .home-action__copy strong { font-size: .72rem; }
  .home-missions .home-action__copy strong { font-size: .59rem; }
  .case-file { grid-template-columns: 5.55rem minmax(0,1fr) 1rem; gap: .5rem; }
  .case-file__body h2 { font-size: .82rem; }
  .case-file__meta span:nth-child(n+4) { display: none; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 48rem) {
  .hud { grid-template-columns: 3rem minmax(0,1fr) auto; padding-inline: 1rem; }
  .detective-status { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding-inline: 1.5rem; }
  .detective-stats { min-inline-size: 22rem; }
  .command-scene { min-block-size: min(42rem,76svh); margin-inline: 1.5rem; }
  .mission-copy { inset-inline: 2rem; inset-block-end: 8.8rem; }
  .mission-console { inset-inline: 1.5rem; grid-template-columns: minmax(0,1fr) 18rem; align-items: center; }
  .mission-console .action { grid-column: 2; grid-row: 1; }
  .game-mode-launcher, .home-missions { padding-inline: 1.5rem; }
  .continue-list { padding-inline: 1.5rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-case-rail { padding-inline: 1.5rem; grid-auto-columns: 16rem; }
  .saved-grid { padding-inline: 1.5rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .catalog-hero { padding-inline: 2rem; }
  .case-filter { margin-inline: 2rem; grid-template-columns: minmax(15rem,2fr) minmax(0,3fr) auto; align-items: center; }
  .case-filter label { grid-column: auto; }
  .filter-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .case-filter .compact-button { grid-column: auto; padding-inline: .9rem; }
  .case-files { padding-inline: 2rem; grid-template-columns: repeat(2,minmax(0,1fr)); background: transparent; gap: .7rem; }
  .case-detail { grid-template-columns: minmax(24rem,1.2fr) minmax(21rem,.8fr); }
  .case-brief-cover { min-block-size: calc(100dvh - var(--hud-height)); }
  .case-intel { padding: 2rem; }
  .mode-choices { padding-inline: 2rem; }
  .brief-screen { padding-block-start: .5rem; }
  .scene-toolbelt { grid-template-columns: repeat(3,minmax(7rem,1fr)); }
  .deduction-workbench { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deduction-workbench h2, .deduction-workbench > p, .deduction-workbench .action { grid-column: 1 / -1; }
  .question-deck, .contradiction-challenges { margin-inline: 2rem; }
  .contradiction-evidence { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .evidence-reel { grid-auto-columns: 19rem; padding-inline: 2rem; }
  .suspect-lineup { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .onboarding-screen, .access-screen { grid-template-columns: minmax(0,1.2fr) minmax(22rem,.8fr); grid-template-rows: 100dvh; }
  .mission-list, .offer-list { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 2rem; }
  .search-command { grid-template-columns: minmax(0,1fr) auto; }
  .search-command .action { inline-size: auto; min-inline-size: 9rem; }
}

@media (min-width: 64rem) {
  body.desktop-sidebar .game-shell { padding-inline-end: 5rem; }
  body.desktop-sidebar-expanded .game-shell { padding-inline-end: 22rem; }
  body.desktop-sidebar .drawer { inline-size: 5rem; animation: none; }
  body.desktop-sidebar .drawer.is-expanded { inline-size: 22rem; }
  body.desktop-sidebar .drawer:not(.is-expanded) .drawer__brand > div,
  body.desktop-sidebar .drawer:not(.is-expanded) .drawer__header .icon-button,
  body.desktop-sidebar .drawer:not(.is-expanded) .drawer-player,
  body.desktop-sidebar .drawer:not(.is-expanded) .drawer__copy,
  body.desktop-sidebar .drawer:not(.is-expanded) nav button > .icon:last-child,
  body.desktop-sidebar .drawer:not(.is-expanded) footer { display: none; }
  body.desktop-sidebar .drawer:not(.is-expanded) .drawer__brand { justify-content: center; }
  body.desktop-sidebar .drawer:not(.is-expanded) nav button { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  .home-screen { max-inline-size: 84rem; margin-inline: auto; }
}

/* Interactive investigation states. */
.scene-toolbelt {
  margin-block: .6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .38rem;
}
.scene-tool {
  min-inline-size: 0;
  min-block-size: 3.25rem;
  padding: .42rem .3rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .12rem;
  color: #9da9af;
  background: #09151d;
  border: 1px solid var(--line);
  border-radius: .55rem;
}
.scene-tool strong { font-size: .61rem; }
.scene-tool small { max-inline-size: 100%; color: #6e7c84; font-size: .47rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-tool.is-active { color: #ffe5a5; background: linear-gradient(180deg,rgba(142,36,36,.38),rgba(142,36,36,.15)); border-color: rgba(213,63,56,.52); box-shadow: inset 0 -2px 0 var(--wine-bright),0 0 16px rgba(199,55,50,.1); }
.hotspot.is-tool-rejected { opacity: .42; filter: grayscale(1); animation: none; }
.investigation-map {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(33,73,93,.3), transparent 48%),
    linear-gradient(145deg,#0d1d27,#040a0f 72%);
}
.investigation-map::before,
.investigation-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.investigation-map::before {
  inset: 7%;
  border: 1px solid rgba(209,155,50,.18);
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(130,159,175,.14) 50%,transparent 50.2%),
    linear-gradient(transparent 49.8%,rgba(130,159,175,.14) 50%,transparent 50.2%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55);
}
.investigation-map::after {
  inset: 0;
  background: radial-gradient(circle,transparent 35%,rgba(2,7,10,.82) 100%);
}
.investigation-map__grid {
  position: absolute;
  z-index: 1;
  inset: 8%;
  opacity: .5;
  background-image:
    linear-gradient(rgba(119,151,168,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(119,151,168,.13) 1px,transparent 1px);
  background-size: 12.5% 12.5%;
  transform: perspective(28rem) rotateX(8deg);
}
.investigation-map__label {
  position: relative;
  z-index: 2;
  max-inline-size: 13rem;
  padding: .7rem .9rem;
  display: grid;
  justify-items: center;
  gap: .15rem;
  color: #d3bd87;
  background: rgba(5,13,18,.76);
  border: 1px solid rgba(209,155,50,.28);
  border-radius: .55rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.investigation-map__label::before { content: "شبکهٔ بازسازی صحنه"; color: #788891; font-size: .5rem; }
.evidence-slide.is-examined { border-color: rgba(82,162,125,.52); background: linear-gradient(145deg,#163128,#0a1d18); }
.evidence-slide.is-examined > .icon:first-of-type { color: #82d0aa; }
.gameplay-gate { margin: .65rem 1rem 1rem; padding: .7rem .8rem; color: #a3afb5; background: rgba(14,28,38,.8); border: 1px dashed rgba(155,174,184,.3); border-radius: .6rem; font-size: .65rem; line-height: 1.65; text-align: center; }

.examination-protocols { display: grid; gap: .55rem; }
.examination-step { position: relative; padding: .7rem; display: grid; gap: .55rem; background: linear-gradient(145deg,#111f29,#0a151e); border: 1px solid var(--line); border-radius: .65rem; overflow: hidden; }
.examination-step::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: #52636d; }
.examination-step > div { display: flex; align-items: center; gap: .55rem; }
.examination-step > div > span { inline-size: 1.7rem; block-size: 1.7rem; display: grid; place-items: center; color: #8b969c; background: rgba(255,255,255,.045); border-radius: 50%; font-size: .58rem; }
.examination-step > div strong { font-size: .75rem; }
.examination-step > p { margin: 0; color: #9da8ad; font-size: .68rem; line-height: 1.8; }
.examination-step .action { min-block-size: 2.85rem; }
.examination-step.is-complete { background: linear-gradient(145deg,#132b24,#0a1a16); border-color: rgba(82,162,125,.34); }
.examination-step.is-complete::before { background: var(--sage); }
.examination-step.is-complete > div > span { color: #d7f3e4; background: rgba(82,162,125,.2); }

.question-deck, .contradiction-challenges { margin: .75rem; padding: .75rem; display: grid; gap: .6rem; background: rgba(9,20,28,.72); border: 1px solid var(--line); border-radius: .75rem; }
.question-deck > h2, .contradiction-challenges > h2 { margin: 0 .1rem .2rem; color: #f0e8d9; font-size: .9rem; }
.question-deck > .action { min-block-size: 3.65rem; justify-content: start; text-align: start; }
.interrogation-turn { padding: .75rem; background: linear-gradient(145deg,#14242e,#0a161e); border: 1px solid var(--line); border-radius: .62rem; }
.interrogation-turn > span { color: var(--gold); font-size: .53rem; }
.interrogation-turn > strong { display: block; margin-block: .22rem .6rem; font-size: .76rem; }
.interrogation-turn blockquote { margin: .45rem 0; padding: .55rem .65rem; background: rgba(255,255,255,.035); border-inline-start: 2px solid #687a85; border-radius: .4rem; }
.interrogation-turn cite { color: #d8b96f; font-size: .55rem; font-style: normal; }
.interrogation-turn p { margin: .16rem 0 0; color: #b4bdc1; font-size: .66rem; line-height: 1.7; }
.interrogation-turn.is-revealed { border-color: rgba(209,155,50,.3); }

.contradiction-challenge { padding: .75rem; background: linear-gradient(145deg,#151e24,#0b151c); border: 1px solid var(--line); border-radius: .62rem; }
.contradiction-challenge > strong { color: #efe7d8; font-size: .78rem; }
.contradiction-challenge > p { margin: .35rem 0; color: #99a4aa; font-size: .66rem; line-height: 1.7; }
.contradiction-challenge.is-proven { background: linear-gradient(145deg,rgba(70,21,23,.72),rgba(32,13,16,.82)); border-color: rgba(199,55,50,.48); }
.contradiction-challenge.is-proven > strong::after { content: " · اثبات شد"; color: #e26b64; font-size: .55rem; }
.contradiction-evidence { margin-block-start: .6rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .38rem; }
.contradiction-evidence > small { grid-column: 1 / -1; color: #78868e; font-size: .53rem; }
.contradiction-evidence button { min-inline-size: 0; min-block-size: 2.8rem; padding: .45rem; color: #aeb7bb; background: #09141c; border: 1px solid var(--line); border-radius: .5rem; font-size: .58rem; line-height: 1.5; }
.contradiction-evidence button.is-selected { color: #f9dfa2; background: rgba(209,155,50,.12); border-color: rgba(209,155,50,.42); }

.deduction-workbench { margin: .75rem 1rem 1rem; padding: .85rem; display: grid; gap: .65rem; background: linear-gradient(145deg,#162632,#0b1720); border: 1px solid rgba(209,155,50,.25); border-radius: .75rem; box-shadow: var(--card-shadow); }
.deduction-workbench h2 { margin: 0; font-size: .9rem; }
.deduction-workbench > p { margin: 0; color: #8f9ba2; font-size: .64rem; line-height: 1.7; }
.deduction-workbench .field { min-inline-size: 0; }
.deduction-workbench select { min-inline-size: 0; }
.deduction-workbench .action { margin-block-start: .15rem; }

.gameplay-readiness { margin: .75rem 1rem 1rem; padding: .8rem; display: grid; gap: .45rem; background: linear-gradient(145deg,#14232e,#09151d); border: 1px solid var(--line); border-radius: .72rem; }
.gameplay-readiness > div { min-block-size: 2.35rem; padding: .35rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; background: rgba(255,255,255,.026); border: 1px solid transparent; border-radius: .45rem; }
.gameplay-readiness > div:first-child { background: transparent; border-block-end: 1px solid var(--line); border-radius: 0; }
.gameplay-readiness > div:first-child strong { font-size: .8rem; }
.gameplay-readiness > div:first-child span { color: var(--gold-bright); font-weight: 850; }
.gameplay-readiness > div > span { font-size: .63rem; }
.gameplay-readiness > div > small { color: #78868e; font-size: .56rem; }
.gameplay-readiness > div.is-complete { color: #bce9d1; background: rgba(82,162,125,.08); border-color: rgba(82,162,125,.22); }
.gameplay-readiness > div.is-complete small { color: #75b897; }
.theory-ledger article.is-validated { margin-block: .45rem; padding: .75rem; background: rgba(35,91,67,.16); border: 1px solid rgba(82,162,125,.32); border-radius: .6rem; }
.theory-ledger article.needs-work { margin-block: .45rem; padding: .75rem; background: rgba(117,76,16,.12); border: 1px solid rgba(209,155,50,.27); border-radius: .6rem; }
.theory-prompts { margin: .55rem .85rem .75rem; padding: .75rem; display: grid; gap: .45rem; background: linear-gradient(145deg,#14232e,#09151d); border: 1px solid rgba(209,155,50,.23); border-radius: .68rem; }
.theory-prompts h2 { margin: 0 0 .15rem; font-size: .86rem; }
.theory-prompts p { position: relative; margin: 0; padding: .55rem 2.4rem .55rem .55rem; color: #a4afb4; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .5rem; font-size: .63rem; line-height: 1.7; }
.theory-prompts p > span { position: absolute; inset-inline-start: .55rem; inset-block-start: .55rem; inline-size: 1.45rem; block-size: 1.45rem; display: grid; place-items: center; color: #231807; background: var(--gold-bright); border-radius: 50%; font-size: .52rem; font-weight: 850; }
.link-ledger > div.is-validated { color: #a9dbc2; border-color: rgba(82,162,125,.24); }
.link-ledger > div.is-legacy { color: #8d989e; opacity: .8; }
.link-ledger > div small { font-size: .52rem; }

/* Canonical secondary screens and gameplay components. */
.archive-screen, .board-screen, .interrogation-screen, .archivist-screen,
.accusation-form, .theory-form, .search-command { min-inline-size: 0; }
.strip-actions { min-inline-size: 0; display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.dossier-strip {
  min-inline-size: 0;
  margin: .5rem .75rem;
  padding: .75rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(145deg,#111f29,#0a151e);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.dossier-strip h2 { margin: 0 0 .2rem; font-size: .82rem; }
.dossier-strip p { margin: 0; color: #8e9ba2; font-size: .62rem; line-height: 1.6; }
.dossier-strip .action { inline-size: auto; min-block-size: 2.65rem; padding-inline: .6rem; }
.catalog-pagination {
  padding: .7rem .8rem 1.2rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: .4rem;
}
.catalog-pagination > :last-child { justify-self: end; }
.catalog-pagination .action { inline-size: auto; min-block-size: 2.8rem; }
.catalog-pagination strong { color: #a3adb2; font-size: .65rem; }

.evidence-reel {
  padding: .5rem .8rem 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw,19rem);
  gap: .65rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.evidence-reel::-webkit-scrollbar { display: none; }
.evidence-slide {
  min-inline-size: 0;
  min-block-size: 16rem;
  padding: .85rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-content: center;
  gap: .6rem;
  color: var(--mist);
  background: linear-gradient(145deg,#182934,#0b1720);
  text-align: start;
  scroll-snap-align: center;
  border: 1px solid var(--line-strong);
}
.evidence-slide strong, .evidence-slide p, .evidence-slide > span:not(.evidence-number) { grid-column: 1 / -1; }
.evidence-slide strong { font-size: .92rem; }
.evidence-slide p { margin: 0; color: #929ea5; font-size: .66rem; }
.evidence-slide > span:not(.evidence-number) { color: #f2c96b; font-size: .62rem; }
.evidence-number { justify-self: end; color: #6f7d85; font: .55rem ui-monospace,monospace; }
.gameplay-gate + .action, .tool-screen > .action { inline-size: calc(100% - 2rem); margin-inline: 1rem; }

.evidence-inspector { min-block-size: calc(100dvh - var(--hud-height)); background: #071019; }
.evidence-inspector > header {
  min-block-size: 3.8rem;
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #89969e;
}
.inspection-stage {
  position: relative;
  min-block-size: 44svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle,#192934,#050b10 70%);
  border-block: 1px solid var(--line);
}
.inspection-stage img { max-inline-size: 92%; max-block-size: 42svh; object-fit: contain; }
.inspection-stage audio { inline-size: calc(100% - 1.5rem); }
.object-silhouette {
  inline-size: 9rem;
  block-size: 11rem;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(209,155,50,.05);
  border: 1px solid var(--line-strong);
  border-radius: .65rem;
}
.object-silhouette .icon { inline-size: 3.5rem; block-size: 3.5rem; }
.scan-line {
  position: absolute;
  inset-inline: 5%;
  inset-block-start: 20%;
  block-size: 1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow: 0 0 14px var(--gold);
  animation: scan 4s ease-in-out infinite;
}
.inspection-copy { padding: 1rem .85rem 1.5rem; }
.inspection-copy h1 { margin: .25rem 0 .8rem; font-size: 1.4rem; }
.inspection-copy > p { color: #d1d1cb; }
.inspection-copy > .action { margin-block-start: .8rem; }

.suspect-lineup { padding: .2rem 0 .8rem; display: grid; }
.suspect-copy { min-inline-size: 0; display: grid; gap: .18rem; }
.suspect-copy strong { font-size: .88rem; }
.suspect-copy small { color: #8a969d; font-size: .62rem; }
.suspect-copy em { color: var(--gold); font-size: .57rem; font-style: normal; }
.gesture-hint { display: flex; align-items: center; gap: .45rem; }
.gesture-dot { inline-size: .55rem; block-size: .55rem; border: 1px solid var(--gold); border-radius: 50%; }
.interrogation-screen { padding-block-end: 1.2rem; }
.conflict { color: #e07a73 !important; }
.reorder-controls { display: grid; gap: .22rem; }
.reorder-controls button {
  inline-size: 2.3rem;
  block-size: 2.3rem;
  display: grid;
  place-items: center;
  color: #a5afb4;
  background: #0b1720;
  border: 1px solid var(--line);
  border-radius: .45rem;
}
.time-stamp { color: #f0bd49; font: .65rem ui-monospace,monospace; direction: ltr; }
.thread-layer { position: absolute; inset: 0; pointer-events: none; }
.autosave-label { display: block; margin: 0 1rem 1rem; color: #73b894; font-size: .62rem; }
.stage-locked { display: grid; align-content: start; }
.stage-locked__seal { inline-size: 5.5rem; block-size: 5.5rem; margin: 1rem auto 1.4rem; display: grid; place-items: center; color: #7b8991; background: radial-gradient(circle,rgba(209,155,50,.08),transparent 68%); border: 1px solid var(--line); border-radius: 50%; }
.stage-locked__seal .icon { inline-size: 2.4rem; block-size: 2.4rem; }

.theory-form, .accusation-form, .search-command {
  margin: .45rem .85rem 1rem;
  display: grid;
  gap: .7rem;
}
.citation-picker {
  min-inline-size: 0;
  margin: 0;
  padding: .7rem;
  display: grid;
  gap: .35rem;
  background: rgba(12,25,34,.7);
  border: 1px solid var(--line);
  border-radius: .65rem;
}
.citation-picker legend { padding-inline: .3rem; color: var(--gold); font-size: .62rem; }
.citation-picker label, .final-confirm { min-inline-size: 0; min-block-size: 2.7rem; display: flex; align-items: center; gap: .5rem; font-size: .65rem; }
.citation-picker input, .final-confirm input { inline-size: 1.1rem; block-size: 1.1rem; min-block-size: 0; accent-color: var(--gold); }
.final-confirm { color: #9ba6ac; }

.archivist-screen { min-block-size: calc(100dvh - var(--hud-height)); padding-block-end: 1.5rem; background: radial-gradient(circle at 50% 10%,rgba(209,155,50,.1),transparent 18rem); }
.archivist-silhouette {
  min-block-size: 14rem;
  display: grid;
  place-items: center;
  clip-path: polygon(28% 0,72% 0,80% 25%,100% 100%,0 100%,20% 25%);
  color: var(--gold);
  background: linear-gradient(#1a252c,#05080b);
  border-block-end: 2px solid var(--gold);
  font-size: 2rem;
}
.group-vote-note, .purchase-return, .transparency-notice {
  margin: .65rem .85rem 0;
  padding: .7rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: .5rem;
  color: #a7b1b6;
  background: rgba(14,28,38,.8);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.group-vote-note p, .purchase-return p, .transparency-notice p { margin: 0; font-size: .62rem; line-height: 1.7; }
.purchase-return { border-color: rgba(209,155,50,.42); }
.transparency-notice { color: #e1bab5; background: rgba(142,36,36,.13); border-color: rgba(199,55,50,.4); }
.purchase-return > .action { grid-column: 1 / -1; }
.archivist-screen > .action { inline-size: calc(100% - 1.7rem); margin-inline: .85rem; }

.result-screen {
  min-block-size: calc(100dvh - var(--hud-height) - var(--safe-top));
  padding: 2rem .85rem calc(1.4rem + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.result-screen > h1 { margin: .35rem 0; max-inline-size: 30rem; }
.result-screen > p { max-inline-size: 34rem; color: #a7b1b6; line-height: 1.9; }
.result-screen.is-wrong .result-seal, .result-screen.is-exhausted .result-seal { color: #c88478; border-color: #9a4c47; }
.attempt-status, .extra-attempt-offer {
  inline-size: min(100%,34rem);
  margin-block-start: .85rem;
  padding: .85rem;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem;
  text-align: start;
  background: rgba(12,25,34,.88);
  border: 1px solid var(--line);
  border-radius: .65rem;
}
.attempt-status > p, .extra-attempt-offer > * { grid-column: 1 / -1; }
.attempt-status > p, .extra-attempt-offer > p, .extra-attempt-offer > small { margin: 0; color: #a7b1b6; line-height: 1.8; }
.extra-attempt-offer { border-color: rgba(209,155,50,.45); }
.extra-attempt-offer > h2 { margin: 0; }
.extra-attempt-offer > .action { inline-size: 100%; }
.result-actions { inline-size: min(100%,34rem); margin-block-start: 1rem; display: grid; gap: .55rem; }
.result-actions > .action { inline-size: 100%; }

.result-seal {
  inline-size: 7rem;
  block-size: 7rem;
  margin-block-end: .8rem;
  display: grid;
  place-items: center;
  color: var(--sage);
  border: 2px solid var(--sage);
  border-radius: 50%;
  transform: rotate(-6deg);
}
.result-seal .icon { inline-size: 3.3rem; block-size: 3.3rem; }
.score-ledger { margin: 0 .85rem 1rem; }
.score-ledger > div {
  min-block-size: 3.25rem;
  padding-inline: .25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  border-block-start: 1px solid var(--line);
}

.onboarding-screen, .access-screen {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: minmax(16rem,52svh) auto;
  background: #061019;
}
.onboarding-scene {
  position: relative;
  display: grid;
  place-content: end;
  padding: 1.2rem;
  background: radial-gradient(circle at 50% 30%,rgba(209,155,50,.18),transparent 18rem),linear-gradient(#14232d,#071019);
  overflow: hidden;
}
.onboarding-scene::before {
  content: "آ";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  color: rgba(209,155,50,.16);
  font-size: min(52vw,13rem);
  font-weight: 900;
}
.onboarding-scene > * { position: relative; z-index: 1; }
.onboarding-scene h1 { margin: .25rem 0; font-size: 2.1rem; }
.onboarding-scene p { margin: 0; color: #9ba6ac; font-size: .72rem; }
.onboarding-actions { padding: 1rem .85rem calc(1rem + var(--safe-bottom)); display: grid; align-content: center; gap: .55rem; }
.access-choice {
  min-block-size: 8rem;
  padding: .85rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .65rem;
  color: var(--mist);
  text-align: start;
  background: linear-gradient(145deg,#12232e,#09151d);
  border: 1px solid var(--line);
  border-radius: .75rem;
}
.access-choice.is-primary { border-color: rgba(209,155,50,.4); background: linear-gradient(145deg,#29200f,#121209); }
.access-choice strong, .access-choice p { grid-column: 2; }
.access-choice strong { font-size: .92rem; }
.access-choice p { margin: 0; color: #8f9ba2; font-size: .63rem; }
.access-error { margin: .5rem .85rem; padding: .7rem; color: #e6aaa4; background: rgba(142,36,36,.15); border: 1px solid rgba(199,55,50,.4); border-radius: .55rem; font-size: .64rem; }

.live-badge { justify-self: start; padding: .22rem .45rem; color: #ffe0dc; background: var(--wine); border-radius: 99px; font-size: .55rem; }
.countdown { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }
.countdown > * { min-inline-size: 0; }
.mission-list, .offer-list { padding: .65rem .75rem 1rem; display: grid; gap: .55rem; }
.league-metrics, .profile-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }
.section-title { padding: .7rem .85rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.section-title h2 { margin: 0; font-size: .88rem; }
.section-title span { color: #7f8c94; font-size: .57rem; }
.leaderboard { margin-block: .75rem; }
.leaderboard ol { margin: 0; padding: 0 .75rem; list-style: none; }
.leaderboard li {
  min-inline-size: 0;
  min-block-size: 3.7rem;
  padding: .45rem .55rem;
  display: grid;
  grid-template-columns: 1.5rem 2.2rem minmax(0,1fr) 1.7rem 3rem;
  align-items: center;
  gap: .35rem;
  background: rgba(13,26,35,.76);
  border-block-start: 1px solid var(--line);
}
.leaderboard li:first-child { border-start-start-radius: .6rem; border-start-end-radius: .6rem; }
.leaderboard li:last-child { border-end-start-radius: .6rem; border-end-end-radius: .6rem; }
.leaderboard li.is-current { position: sticky; inset-block-end: 0; z-index: 4; background: #213126; border: 1px solid rgba(82,162,125,.42); }
.leaderboard li strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; }
.leaderboard li b { color: #efc35e; text-align: end; font-size: .65rem; }
.avatar, .profile-mark {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  color: #e5d8bd;
  background: #26343d;
  border-radius: 50%;
  font-size: .65rem;
}
.rank { color: var(--gold); font-size: .6rem; }
.rank-change { color: var(--sage); font-size: .55rem; }
.prize-dossier { margin: .75rem; padding: .85rem; background: rgba(209,155,50,.06); border: 1px solid rgba(209,155,50,.4); border-radius: .72rem; }
.prize-dossier > .icon { inline-size: 3rem; block-size: 3rem; margin-inline: auto; color: var(--gold); }
.prize-dossier dl > div { min-block-size: 2.8rem; display: grid; grid-template-columns: 5.5rem minmax(0,1fr); align-items: center; border-block-start: 1px solid var(--line); }
.prize-dossier dt { color: #849098; font-size: .62rem; }
.prize-dossier dd { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; font-size: .68rem; }

.room-lobby { min-block-size: calc(100dvh - var(--hud-height)); padding: 1rem .8rem; display: grid; align-content: center; gap: .8rem; background: radial-gradient(circle at 50% 15%,rgba(82,162,125,.13),transparent 18rem); }
.lobby-header { text-align: center; }
.lobby-header .live-badge { display: inline-flex; }
.presence-row { margin-block: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; }
.presence-row .presence { inline-size: 4.5rem; display: grid; justify-items: center; gap: .2rem; }
.invite-panel {
  min-inline-size: 0;
  padding: .7rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: .7rem;
  background: rgba(13,27,36,.88);
  border: 1px solid var(--line);
  border-radius: .65rem;
}
.invite-panel img { inline-size: 6.6rem; block-size: 6.6rem; padding: .2rem; background: #fff; }
.invite-panel strong, .invite-panel p, .invite-panel a { min-inline-size: 0; overflow-wrap: anywhere; }
.invite-panel p { margin: .2rem 0; color: #8d999f; font-size: .6rem; line-height: 1.55; }
.invite-panel a { color: #eec464; font-size: .58rem; }
.lobby-controls { display: grid; gap: .5rem; }
.ballot-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.reconnect-note { display: flex; align-items: center; justify-content: center; gap: .4rem; color: #7e8b93; font-size: .58rem; }

.offer-list { padding-block-start: 0; }
.profile-mark { inline-size: 4.2rem; block-size: 4.2rem; color: #fff2d8; background: var(--wine); font-size: 1.4rem; }
.settings-list { margin: .5rem .8rem; }
.settings-list > label, .settings-list > button {
  min-inline-size: 0;
  min-block-size: 4rem;
  inline-size: 100%;
  padding: .65rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .6rem;
  color: var(--mist);
  text-align: start;
  background: transparent;
  border-block-start: 1px solid var(--line);
}
.settings-list span { min-inline-size: 0; display: grid; gap: .12rem; }
.settings-list small { color: #7f8c94; font-size: .56rem; }
.settings-list input { inline-size: 2.6rem; min-block-size: 1.4rem; accent-color: var(--gold); }
.search-command { grid-template-columns: minmax(0,1fr); }
.search-command .action { inline-size: 100%; }

.truth-state {
  min-block-size: 14rem;
  padding: 2rem 1rem;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.truth-state > .icon { inline-size: 2.7rem; block-size: 2.7rem; color: #78868e; }
.truth-state h2 { margin: .7rem 0 .25rem; font-size: 1rem; }
.truth-state p { max-inline-size: 26rem; margin: 0 0 .8rem; color: #8c989f; font-size: .68rem; }
.truth-state .action { max-inline-size: 19rem; }
.skeleton-stack { padding: .8rem; display: grid; gap: .55rem; }
.skeleton-stack i { min-block-size: 4.6rem; display: block; background: linear-gradient(90deg,#0e1922,#1b2a35,#0e1922); background-size: 200% 100%; border-radius: .65rem; animation: shimmer 1.3s linear infinite; }

@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(243,184,41,0); } }
@keyframes hotspot { 50% { box-shadow: 0 0 0 11px rgba(209,155,50,.05),0 0 30px rgba(209,155,50,.3); } }
@keyframes scan { 0%,100% { inset-block-start: 18%; opacity: .2; } 50% { inset-block-start: 82%; opacity: .8; } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; scroll-behavior: auto !important; }