/* 7Tir: lapis, turquoise, saffron gold, pomegranate and ivory, after Persian tilework and miniatures.
   style.css: tokens, type, controls, the title gate, the character creator, modals.
   hud.css: the in-game interface.  All layout uses logical properties, so Persian mirrors itself. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"), url("/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --ink: #0a1131;            /* lapis night: text on gold, deepest shade */
  --lapis-950: #0d1640;
  --lapis-900: #121d4d;
  --lapis-800: #18266a;
  --lapis-700: #213487;
  --lapis-500: #3554b8;
  --lapis-300: #7f97e6;
  --firuze: #3cc2b4;         /* turquoise */
  --firuze-hi: #79ded2;
  --firuze-deep: #1d8a80;
  --saffron: #f2b53a;        /* saffron gold */
  --saffron-hi: #ffd479;
  --saffron-deep: #b9811c;
  --anar: #d0334d;           /* pomegranate */
  --anar-hi: #ff9aa9;
  --anar-deep: #8f1d33;
  --ivory: #f6eedc;
  --ivory-2: rgba(246, 238, 220, 0.78);
  --ivory-3: rgba(246, 238, 220, 0.58);
  --line: rgba(242, 181, 58, 0.42);        /* gold hairline */
  --line-soft: rgba(246, 238, 220, 0.14);
  --glass: rgba(15, 24, 64, 0.7);
  --glass-strong: rgba(11, 18, 50, 0.9);
  --field: rgba(5, 9, 30, 0.5);

  /* type: Vazirmatn for both scripts; a major-third scale from 15px */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs--2: 0.75rem;     /* 11.25 */
  --fs--1: 0.867rem;    /* 13 */
  --fs-0: 1rem;         /* 15 */
  --fs-1: 1.25rem;      /* 18.75 */
  --fs-2: 1.5625rem;    /* 23.4 */
  --fs-3: 1.953rem;     /* 29.3 */
  --fs-4: 2.441rem;     /* 36.6 */
  --fs-5: 3.052rem;     /* 45.8 */
  --fs-6: 3.815rem;     /* 57.2 */
  --lh: 1.5;
  --lh-tight: 1.15;

  /* rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 8px; --r: 12px; --r-lg: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
:root:lang(fa) { --lh: 1.8; --lh-tight: 1.45; }

* { box-sizing: border-box; }
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  font: 400 var(--fs-0) / var(--lh) var(--font);
  color: var(--ivory);
  background: radial-gradient(120% 90% at 70% 10%, #2a3f8f 0%, var(--lapis-900) 45%, var(--ink) 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--saffron-hi); outline-offset: 2px; }
::selection { background: rgba(60, 194, 180, 0.4); color: var(--ivory); }
svg { width: 1em; height: 1em; flex: none; }

/* Wait for the language before showing text (with a failsafe if scripts are slow). */
.i18n-pending .screen, .i18n-pending .hud { visibility: hidden; animation: reveal 0s 1.2s forwards; }
@keyframes reveal { to { visibility: visible; } }

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ controls */
button { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.55em 1.15em; border-radius: var(--r);
  font: 600 var(--fs-0) / 1.2 var(--font); color: var(--ivory); text-decoration: none; text-align: center;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn.primary {
  color: var(--ink);
  background: linear-gradient(180deg, #ffd682 0%, #f2b53a 100%);
  border-color: #ffe3a3;
  box-shadow: inset 0 -2px 0 rgba(140, 86, 10, 0.5), 0 8px 22px rgba(242, 181, 58, 0.2);
}
.btn.primary:hover { background: linear-gradient(180deg, #ffe09b 0%, #f7c04e 100%); }
.btn.primary:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(140, 86, 10, 0.5); }
.btn.quiet { border-color: rgba(246, 238, 220, 0.26); background: rgba(246, 238, 220, 0.04); }
.btn.quiet:hover { border-color: rgba(246, 238, 220, 0.55); background: rgba(246, 238, 220, 0.09); }
.btn.ghost { color: var(--ivory-2); }
.btn.ghost:hover { color: var(--ivory); background: rgba(246, 238, 220, 0.07); }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 54px; font-size: var(--fs-1); border-radius: 14px; }
.btn.small { min-height: 34px; padding: 0.3em 0.8em; font-size: var(--fs--1); border-radius: var(--r-sm); }
.btn.danger { color: var(--anar-hi); border-color: rgba(208, 51, 77, 0.5); }
.btn.danger:hover { background: rgba(208, 51, 77, 0.14); border-color: var(--anar); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.busy { cursor: progress; }
.link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs--1) / 1.4 var(--font); color: var(--firuze-hi);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.link:hover { color: #a6efe6; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none;
  border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(246, 238, 220, 0.04); color: var(--ivory-2); cursor: pointer;
}
.icon-btn:hover { color: var(--ivory); border-color: rgba(246, 238, 220, 0.4); }
.icon-btn svg { width: 20px; height: 20px; }

input, select, textarea {
  font: 400 var(--fs-0) / 1.35 var(--font); color: var(--ivory);
  background: var(--field); border: 1px solid rgba(246, 238, 220, 0.24); border-radius: 10px;
  padding: 0.65em 0.85em; min-width: 0; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--ivory-3); }
input:hover, select:hover, textarea:hover { border-color: rgba(246, 238, 220, 0.4); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--firuze); box-shadow: 0 0 0 3px rgba(60, 194, 180, 0.32); }
input[aria-invalid="true"] { border-color: var(--anar); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(208, 51, 77, 0.32); }
input[type="email"], input[dir="ltr"] { text-align: start; }
:root:lang(fa) input[type="email"] { text-align: end; }
select { appearance: none; padding-inline-end: 2.2em; background-image: linear-gradient(45deg, transparent 50%, var(--ivory-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ivory-2) 50%); background-size: 6px 6px; background-repeat: no-repeat; background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; }
:root[dir="rtl"] select { background-position: 12px 55%, 18px 55%; }
option { background: var(--lapis-900); color: var(--ivory); }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--saffron); box-shadow: none; }
input[type="checkbox"] { width: auto; accent-color: var(--firuze); }

kbd {
  display: inline-block; min-width: 1.7em; padding: 0 0.4em; text-align: center; direction: ltr;
  font: 600 0.82em / 1.6 var(--font); color: var(--ivory);
  background: linear-gradient(180deg, rgba(246, 238, 220, 0.14), rgba(246, 238, 220, 0.06));
  border: 1px solid rgba(246, 238, 220, 0.28); border-bottom-width: 2px; border-radius: 6px;
}

/* language switch: EN | فا */
.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(8, 13, 40, 0.6); border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.lang-switch button {
  min-width: 52px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ivory-2); font: 700 var(--fs-0) / 1 var(--font);
}
.lang-switch button[lang="fa"] { font-size: var(--fs-1); }
.lang-switch button:hover { color: var(--ivory); }
.lang-switch button[aria-pressed="true"] { background: var(--saffron); color: var(--ink); }

/* segmented control (tabs, dress style) */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(4, 8, 28, 0.5); border: 1px solid var(--line-soft);
}
.seg button {
  min-height: 40px; padding: 0.4em 1em; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ivory-2); font: 600 var(--fs-0) / 1.2 var(--font);
  transition: background-color 0.15s, color 0.15s;
}
.seg button:hover { color: var(--ivory); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] {
  color: var(--ivory); background: linear-gradient(180deg, var(--lapis-500), var(--lapis-700));
  box-shadow: inset 0 0 0 1px rgba(242, 181, 58, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.seg.small button { min-height: 34px; font-size: var(--fs--1); }

/* fields */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 6px; }
.field > label { font-weight: 600; font-size: var(--fs--1); color: var(--ivory); }
.tag {
  display: inline-block; margin-inline-start: 0.35em; padding: 0 0.55em; border-radius: 999px;
  font-size: var(--fs--2); font-weight: 600; color: var(--firuze-hi); background: rgba(60, 194, 180, 0.14); vertical-align: 0.1em;
}
.help { font-size: var(--fs--1); color: var(--ivory-3); }
.field-err { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs--1); font-weight: 500; color: var(--anar-hi); }
.field-err:empty { display: none; }
.field:has(.field-err:not(:empty)) .help { display: none; }
.field-err::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 1px; background: var(--anar); transform: rotate(45deg); }
.caps { display: flex; align-items: center; gap: 6px; font-size: var(--fs--1); color: var(--saffron-hi); }
.caps svg { width: 16px; height: 16px; }
.pw { position: relative; }
.pw input { padding-inline-end: 48px; }
.pw-eye {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--ivory-3); cursor: pointer;
}
.pw-eye:hover { color: var(--ivory); background: rgba(246, 238, 220, 0.07); }
.pw-eye svg { width: 20px; height: 20px; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 4px; }
.strength i { height: 4px; border-radius: 2px; background: rgba(246, 238, 220, 0.14); transition: background-color 0.2s; }
.strength span { min-width: 7em; padding-inline-start: 8px; font-size: var(--fs--2); color: var(--ivory-3); text-align: end; }
.strength[data-s="0"] i:nth-child(1) { background: var(--anar); }
.strength[data-s="1"] i:nth-child(-n+1) { background: var(--anar); }
.strength[data-s="2"] i:nth-child(-n+2) { background: var(--saffron); }
.strength[data-s="3"] i:nth-child(-n+3) { background: var(--firuze); }
.strength[data-s="4"] i:nth-child(-n+4) { background: var(--firuze-hi); }
.strength[data-s="empty"] { visibility: hidden; }
.msg { font-size: var(--fs--1); font-weight: 500; color: var(--anar-hi); }
.msg:empty { display: none; }
.msg.good { color: var(--firuze-hi); }
.form-status { margin-block-start: calc(var(--s2) * -1); }

/* ------------------------------------------------------------------ title gate */
.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen > * { pointer-events: auto; }

.title {
  display: grid; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 7vw, 140px);
  padding: clamp(14px, 2.4vw, 32px) clamp(16px, 5vw, 80px) clamp(20px, 3vw, 40px);
}
.title-top { grid-column: 1 / -1; display: flex; justify-content: flex-end; pointer-events: none; }
.title-top > * { pointer-events: auto; }

.brand { position: relative; align-self: center; max-width: 31rem; padding-block: var(--s5); text-shadow: 0 1px 2px rgba(4, 8, 26, 0.8), 0 0 28px rgba(4, 8, 26, 0.55); }
.brand::before {
  content: ""; position: absolute; inset: -30% -40% -30% -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 12, 38, 0.55), rgba(7, 12, 38, 0.3) 50%, rgba(7, 12, 38, 0));
}
.brand-emblem { display: block; width: clamp(84px, 9vw, 128px); height: auto; margin-block-end: var(--s2); filter: drop-shadow(0 6px 18px rgba(4, 8, 26, 0.6)); }
.wordmark { display: flex; flex-direction: column; gap: 0.1em; margin: 0; font-weight: 800; }
.wm-latin { font-size: clamp(3.4rem, 7.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--ivory); }
.wm-fa {
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.3; font-weight: 800; color: var(--saffron);
  align-self: flex-start;
}
:root:lang(fa) .wm-fa { order: -1; font-size: clamp(3.6rem, 7.6vw, 5.8rem); line-height: 1.15; font-weight: 900; }
:root:lang(fa) .wm-latin { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: var(--saffron); align-self: flex-start; }
/* the script of the current language leads, gilded; the other follows in saffron */
:root:not(:lang(fa)) .wm-latin {
  color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #fffaf0 0%, var(--ivory) 55%, #e6d6b2 100%);
  filter: drop-shadow(0 2px 3px rgba(4, 8, 26, 0.75));
}
:root:lang(fa) .wm-fa {
  color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #ffe7a8 0%, var(--saffron) 60%, #d99a24 100%);
  filter: drop-shadow(0 2px 3px rgba(4, 8, 26, 0.75));
}
.tagline { margin-block-start: var(--s3); font-size: var(--fs-1); font-weight: 600; color: var(--ivory); }
.premise { margin-block-start: var(--s3); max-width: 40ch; color: var(--ivory); text-shadow: 0 1px 2px rgba(4, 8, 26, 0.9), 0 0 12px rgba(4, 8, 26, 0.7); }
.live {
  display: inline-flex; align-items: center; gap: 10px; margin-block-start: var(--s5);
  padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(8, 13, 40, 0.55); border: 1px solid var(--line-soft);
  font-size: var(--fs--1); color: var(--ivory-2); text-shadow: none;
}
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--firuze); box-shadow: 0 0 0 0 rgba(60, 194, 180, 0.6); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(60, 194, 180, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(60, 194, 180, 0); } }
.motd {
  margin-block-start: var(--s4); padding: 10px 14px; max-width: 42ch; border-radius: 0 10px 10px 0;
  border-inline-start: 3px solid var(--saffron); background: rgba(8, 13, 40, 0.6); font-size: var(--fs--1); text-shadow: none;
}
:root[dir="rtl"] .motd { border-radius: 10px 0 0 10px; }

/* The gate: the account panel is an iwan, a pointed arch with the emblem at its crown. */
.gate { --arch: 136px; position: relative; align-self: center; justify-self: end; width: 100%; max-width: 430px; margin-block: var(--s4); }
.gate-shade { position: absolute; inset: -8% -16% -10%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(3, 6, 22, 0.6), rgba(3, 6, 22, 0)); }
.gate-glass {
  position: relative; z-index: 1;
  padding: calc(var(--arch) - 18px) clamp(20px, 2.6vw, 34px) 26px;
  background: linear-gradient(180deg, rgba(25, 39, 98, 0.74) 0%, rgba(13, 21, 58, 0.84) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line); border-top: 0;
  clip-path: polygon(0 var(--arch), 0.22% calc(var(--arch) * .9185), 0.89% calc(var(--arch) * .8374), 1.99% calc(var(--arch) * .7574), 3.52% calc(var(--arch) * .6787), 5.48% calc(var(--arch) * .602), 7.85% calc(var(--arch) * .5276), 10.62% calc(var(--arch) * .456), 13.76% calc(var(--arch) * .3876), 17.27% calc(var(--arch) * .3229), 21.12% calc(var(--arch) * .2621), 25.29% calc(var(--arch) * .2058), 29.76% calc(var(--arch) * .1541), 34.49% calc(var(--arch) * .1074), 39.46% calc(var(--arch) * .066), 44.64% calc(var(--arch) * .0301), 50% 0, 55.36% calc(var(--arch) * .0301), 60.54% calc(var(--arch) * .066), 65.51% calc(var(--arch) * .1074), 70.24% calc(var(--arch) * .1541), 74.71% calc(var(--arch) * .2058), 78.88% calc(var(--arch) * .2621), 82.73% calc(var(--arch) * .3229), 86.24% calc(var(--arch) * .3876), 89.38% calc(var(--arch) * .456), 92.15% calc(var(--arch) * .5276), 94.52% calc(var(--arch) * .602), 96.48% calc(var(--arch) * .6787), 98.01% calc(var(--arch) * .7574), 99.11% calc(var(--arch) * .8374), 99.78% calc(var(--arch) * .9185), 100% var(--arch), 100% 100%, 0 100%);
}
.gate-arch { position: absolute; z-index: 2; top: 0; inset-inline: 0; width: 100%; height: var(--arch); overflow: visible; pointer-events: none; }
.gate-arch polyline { fill: none; stroke: var(--saffron); stroke-opacity: 0.75; stroke-width: 1.5; stroke-linejoin: round; }
.gate-medallion { position: absolute; top: 34px; inset-inline-start: calc(50% - 34px); width: 68px; height: 68px; filter: drop-shadow(0 4px 10px rgba(3, 6, 22, 0.5)); }
.view { display: grid; gap: var(--s4); }
.view-title { font-size: var(--fs-2); font-weight: 800; }
.lead { color: var(--ivory-2); font-size: var(--fs--1); }
.form-aside { text-align: center; margin-block-start: calc(var(--s1) * -1); }
.form-title { font-size: var(--fs-1); margin-block-start: var(--s3); padding-block-start: var(--s4); border-block-start: 1px solid var(--line-soft); }
#title-msg { margin-block-start: var(--s4); padding: 10px 12px; border-radius: 10px; background: rgba(208, 51, 77, 0.14); border: 1px solid rgba(208, 51, 77, 0.35); }
#title-msg.good { background: rgba(60, 194, 180, 0.12); border-color: rgba(60, 194, 180, 0.35); }
.gate-foot { display: grid; gap: var(--s2); margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--line-soft); }

.ready { display: grid; justify-items: center; text-align: center; gap: 2px; }
.ready-figure {
  display: grid; place-items: end center; width: 128px; height: 128px; margin-block-end: var(--s2); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(60, 194, 180, 0.28), rgba(33, 52, 135, 0.4) 55%, rgba(8, 13, 40, 0.7) 72%);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 6px rgba(8, 13, 40, 0.35);
  overflow: hidden;
}
.ready-figure canvas { width: 112px; height: 112px; image-rendering: pixelated; }
.ready-hello { font-size: var(--fs--1); color: var(--ivory-3); }
.ready-name { font-size: var(--fs-3); font-weight: 800; line-height: 1.15; word-break: break-word; }
.ready-who { color: var(--saffron-hi); font-weight: 500; }
#enter-btn { margin-block-start: var(--s3); }
.ready-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* ------------------------------------------------------------------ character creator */
.creator { display: grid; place-items: center; padding: clamp(8px, 2vw, 28px); }
.creator-shell {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1280px, 100%); height: min(860px, 100%);
  background: linear-gradient(180deg, rgba(22, 35, 90, 0.8), rgba(11, 18, 50, 0.88));
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(3, 6, 22, 0.55); overflow: hidden;
}
.creator-head { display: flex; align-items: center; gap: var(--s4); padding: 16px 28px; border-block-end: 1px solid var(--line-soft); }
.creator-emblem { width: 44px; height: 44px; }
.creator-heading { flex: 1; min-width: 0; }
.creator-heading h2 { font-size: var(--fs-3); font-weight: 800; }
.creator-heading p { color: var(--ivory-2); font-size: var(--fs--1); }
.creator-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) minmax(0, 1fr); min-height: 0; }
.creator-grid > section { min-height: 0; overflow-y: auto; padding: 20px 24px; }
.creator-grid > section + section { border-inline-start: 1px solid var(--line-soft); }
.col-title { font-size: var(--fs-1); font-weight: 700; margin-block-end: var(--s3); }
.people-grid .group { margin: var(--s4) 0 var(--s2); font-size: var(--fs--1); font-weight: 700; color: var(--saffron-hi); }
.people-grid .group:first-child { margin-block-start: 0; }
.people-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pick {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 4px 8px;
  border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(4, 8, 28, 0.35); cursor: pointer;
  font: 500 var(--fs--1) / 1.25 var(--font); color: var(--ivory-2); text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}
.pick:hover { border-color: rgba(246, 238, 220, 0.4); color: var(--ivory); }
.pick canvas { width: 60px; height: 60px; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(127, 151, 230, 0.25), rgba(4, 8, 28, 0)); }
.pick[aria-checked="true"] { border-color: var(--saffron); color: var(--ivory); background: linear-gradient(180deg, rgba(53, 84, 184, 0.45), rgba(33, 52, 135, 0.3)); box-shadow: inset 0 0 0 1px rgba(242, 181, 58, 0.5); }
.pick[aria-checked="true"]::after {
  content: ""; position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--saffron) url("/img/check-ink.svg") center / 12px no-repeat;
}
.cr-stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); background: radial-gradient(90% 60% at 50% 34%, rgba(60, 194, 180, 0.12), rgba(0, 0, 0, 0)); }
.plinth { position: relative; display: grid; place-items: end center; width: 260px; height: 290px; flex: none; }
.plinth::before {
  content: ""; position: absolute; inset-inline: 18px; bottom: 6px; height: 64px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 181, 58, 0.32), rgba(242, 181, 58, 0.06) 70%, rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 0 1px rgba(242, 181, 58, 0.45);
}
.plinth::after {
  content: ""; position: absolute; inset-inline: 54px; bottom: 20px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(60, 194, 180, 0.6);
}
.plinth canvas { position: relative; z-index: 1; width: 256px; height: 256px; image-rendering: pixelated; margin-block-end: 18px; }
.turn { display: flex; align-items: center; gap: var(--s3); }
.turn-view { min-width: 6.5em; font-size: var(--fs--1); font-weight: 600; color: var(--ivory-2); }
.people-name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25em 0.6em; font-size: var(--fs-3); font-weight: 800; margin-block-start: var(--s2); }
.people-name .other { font-size: var(--fs-1); font-weight: 600; color: var(--saffron-hi); }
.people-home { color: var(--ivory-2); font-size: var(--fs--1); }
.attire { max-width: 36ch; font-size: var(--fs--1); color: var(--ivory); padding: 10px 14px; border-radius: 12px; background: rgba(4, 8, 28, 0.35); border: 1px solid var(--line-soft); }
.role-list { display: grid; gap: 8px; }
.role {
  display: grid; gap: 4px; padding: 12px 14px 12px; text-align: start; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line-soft); border-inline-start: 4px solid var(--hero, var(--saffron));
  background: rgba(4, 8, 28, 0.35); color: var(--ivory-2); font: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}
.role:hover { color: var(--ivory); border-color: rgba(246, 238, 220, 0.4); border-inline-start-color: var(--hero, var(--saffron)); }
.role[aria-checked="true"] { color: var(--ivory); background: linear-gradient(180deg, rgba(53, 84, 184, 0.42), rgba(33, 52, 135, 0.28)); border-color: var(--saffron); border-inline-start-color: var(--hero, var(--saffron)); }
.role-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; font-size: var(--fs-1); font-weight: 700; color: var(--ivory); line-height: 1.25; }
.role-name .other { font-size: var(--fs--1); font-weight: 500; color: var(--ivory-3); }
.role-spirit { font-size: var(--fs--2); color: var(--saffron-hi); font-weight: 600; }
.role-sum { font-size: var(--fs--1); line-height: 1.5; }
:root:lang(fa) .role-sum { line-height: 1.75; }
.role-abs { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }
.role-abs span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; background: rgba(246, 238, 220, 0.07); font-size: var(--fs--2); font-weight: 600; color: var(--ivory); }
:root[dir="rtl"] .role-abs span { padding: 2px 3px 2px 10px; }
.role-abs kbd { font-size: 0.9em; }
.creator-foot { display: flex; align-items: center; gap: var(--s4); padding: 14px 28px; border-block-start: 1px solid var(--line-soft); }
.creator-foot .help { flex: 1; }
.creator-actions { display: flex; gap: var(--s2); }
#creator-ok { min-width: 11em; }

/* ------------------------------------------------------------------ modals */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5, 9, 28, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-box {
  width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 28px;
  background: linear-gradient(180deg, rgba(24, 38, 96, 0.94), rgba(11, 18, 50, 0.96));
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(3, 6, 22, 0.6);
}
.modal-box.wide { width: min(1080px, 100%); }
.modal-box h2 { font-size: var(--fs-2); font-weight: 800; margin-block-end: var(--s4); }
.menu-list { display: grid; gap: var(--s2); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 4px 6px 14px; border-radius: var(--r); border: 1px solid rgba(246, 238, 220, 0.26); font-weight: 600; }
:root[dir="rtl"] .menu-row { padding: 6px 14px 6px 4px; }
#m-leave-note { padding-inline: 4px; }
.modal-actions { display: flex; justify-content: flex-end; margin-block-start: var(--s5); }
.help-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); }
.help-cols h3 { font-size: var(--fs-1); margin-block-end: var(--s3); color: var(--saffron-hi); }
.keys { width: 100%; border-collapse: collapse; font-size: var(--fs--1); }
.keys th { padding: 7px 0; padding-inline-end: var(--s3); text-align: start; font-weight: 500; color: var(--ivory-2); vertical-align: top; }
.keys td { padding: 7px 0; text-align: end; white-space: nowrap; vertical-align: top; }
.keys tr + tr { border-block-start: 1px solid var(--line-soft); }
.keys kbd { margin-inline: 1px; }
.rules { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; font-size: var(--fs--1); color: var(--ivory-2); }
.rules li { position: relative; padding-inline-start: 22px; }
.rules li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.55em; width: 9px; height: 9px; background: var(--saffron); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rules b { color: var(--ivory); }

/* asleep */
.slept { display: grid; place-items: center; padding: 16px; background: rgba(5, 9, 28, 0.45); }
.slept-box {
  display: grid; justify-items: center; gap: var(--s3); width: min(460px, 100%); padding: 32px; text-align: center;
  background: linear-gradient(180deg, rgba(24, 38, 96, 0.9), rgba(11, 18, 50, 0.94)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 24px;
}
.slept-box h2 { font-size: var(--fs-3); font-weight: 800; }
.slept-box p { color: var(--ivory-2); }
.slept-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-block-start: var(--s2); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 1080px) {
  .creator-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage stage" "peoples roles"; grid-auto-rows: max-content; align-content: start; overflow-y: auto; }
  .creator-grid > section { overflow: visible; min-height: auto; }
  .cr-stage { grid-area: stage; border-block-end: 1px solid var(--line-soft); }
  .cr-peoples { grid-area: peoples; }
  .cr-roles { grid-area: roles; }
  .creator-grid > .cr-peoples { border-inline-start: 0; }
  .plinth { height: 220px; width: 220px; }
  .plinth canvas { width: 192px; height: 192px; }
}
@media (max-width: 860px) {
  .title { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; }
  .brand { justify-self: center; text-align: center; padding-block: var(--s2) var(--s4); }
  .brand-emblem { display: none; }
  .wordmark { align-items: center; }
  .wm-fa, :root:lang(fa) .wm-latin { align-self: center; }
  .wm-latin { font-size: 3.2rem; }
  :root:lang(fa) .wm-fa { font-size: 3.4rem; }
  .premise { margin-inline: auto; font-size: var(--fs--1); }
  .tagline { font-size: var(--fs-0); }
  .gate { justify-self: center; --arch: 104px; }
  .gate-medallion { top: 26px; width: 54px; height: 54px; inset-inline-start: calc(50% - 27px); }
  .help-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .creator { padding: 0; }
  .creator-shell { height: 100%; border-radius: 0; border: 0; }
  .creator-head { padding: 12px 16px; flex-wrap: wrap; }
  .creator-heading p { display: none; }
  .creator-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "peoples" "roles"; }
  .creator-grid > section { padding: 16px; }
  .creator-grid > section + section { border-inline-start: 0; border-block-start: 1px solid var(--line-soft); }
  .people-row { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .creator-foot { flex-wrap: wrap; padding: 12px 16px; }
  .creator-foot .help { flex-basis: 100%; }
  .creator-actions { flex: 1; }
  .creator-actions .btn { flex: 1; }
  #creator-ok { min-width: 0; }
  .premise { display: none; }
  .modal-box { padding: 20px; }
  .seg button { font-size: var(--fs--1); padding-inline: 0.6em; }
}

/* ------------------------------------------------------------------ touch screens (html.touch, see touch.js)
   The page itself never pans, zooms, rubber-bands or selects text; scrolling boxes keep their own scrolling. */
.stage { touch-action: none; -webkit-touch-callout: none; }
:root.touch, :root.touch body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
:root.touch body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root.touch :is(input, textarea, select, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
:root.touch :is(.title, .creator-grid, .creator-grid > section, .modal-box, .slept) { touch-action: pan-y; }
:root.touch :is(button, a, .btn, label, select) { touch-action: manipulation; }
/* Safari zooms into fields with text under 16px */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em); } }
:root.touch :is(input, select, textarea) { font-size: max(16px, 1em); }
:root.touch .btn.small { min-height: 42px; }
:root.touch .icon-btn { width: 44px; height: 44px; }
:root.touch .link { min-height: 36px; }
:root.touch .help-cols .keys td { white-space: normal; text-align: start; }
:root.touch .role-abs kbd { display: none; }
:root.touch .role-abs span { padding-inline: 10px; }
@media (min-width: 481px) { :root.touch .help-cols .keys th { width: 42%; } }

/* safe areas (notch, home indicator) on every full-screen layer */
.title { padding-top: max(clamp(14px, 2.4vw, 32px), env(safe-area-inset-top, 0px)); padding-bottom: max(clamp(20px, 3vw, 40px), env(safe-area-inset-bottom, 0px)); padding-inline: max(clamp(16px, 5vw, 80px), env(safe-area-inset-left, 0px)) max(clamp(16px, 5vw, 80px), env(safe-area-inset-right, 0px)); }
.modal, .slept { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }

/* phones held upright */
@media (max-width: 480px) {
  .title { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .gate { --arch: 88px; margin-block: var(--s2) 0; }
  .gate-glass { padding: calc(var(--arch) - 14px) 18px 20px; }
  .gate-medallion { top: 20px; width: 46px; height: 46px; inset-inline-start: calc(50% - 23px); }
  .wm-latin { font-size: 2.7rem; }
  :root:lang(fa) .wm-fa { font-size: 2.9rem; }
  .brand { padding-block: 0 var(--s2); }
  .live { margin-block-start: var(--s3); }
  .ready-figure { width: 104px; height: 104px; }
  .ready-figure canvas { width: 92px; height: 92px; }
  .ready-name { font-size: var(--fs-2); }
  .ready-links .btn { flex: 1 1 40%; }
  .modal { padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); }
  .modal-box { padding: 18px 16px; border-radius: 16px; }
  .modal-box h2 { font-size: var(--fs-1); }
  .help-cols { gap: var(--s4); }
  .keys th, .keys td { display: block; padding: 0; }
  .keys th { padding-block-start: 8px; color: var(--ivory-3); }
  .keys td { padding-block-end: 8px; text-align: start; white-space: normal; }
  .slept-box { padding: 24px 18px; }
  .creator-head h2 { font-size: var(--fs-2); }
  .plinth { width: 180px; height: 190px; }
  .plinth canvas { width: 160px; height: 160px; margin-block-end: 12px; }
  .people-name { font-size: var(--fs-2); }
}
/* phones on their side: brand and gate side by side, the gate scrolls */
@media (max-height: 540px) and (orientation: landscape) {
  .title { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto 1fr; column-gap: clamp(16px, 4vw, 48px); align-content: start; }
  .title-top { grid-column: 1 / -1; }
  .brand { justify-self: stretch; text-align: start; align-self: start; padding-block: 0; }
  .brand-emblem { display: block; width: 56px; }
  .wordmark { align-items: flex-start; }
  .wm-fa, :root:lang(fa) .wm-latin { align-self: flex-start; }
  .wm-latin { font-size: 2.6rem; }
  :root:lang(fa) .wm-fa { font-size: 2.8rem; }
  .tagline { font-size: var(--fs-0); margin-block-start: var(--s2); }
  .premise { display: block; margin-inline: 0; font-size: var(--fs--1); }
  .gate { --arch: 72px; justify-self: end; align-self: start; margin-block: 0; }
  .gate-glass { padding: calc(var(--arch) - 12px) 18px 18px; }
  .gate-medallion { top: 16px; width: 40px; height: 40px; inset-inline-start: calc(50% - 20px); }
  .ready-figure { width: 84px; height: 84px; }
  .ready-figure canvas { width: 74px; height: 74px; }
  .ready-name { font-size: var(--fs-2); }
  .gate-foot { margin-block-start: var(--s3); padding-block-start: var(--s3); }
  .creator { padding: 0; }
  .creator-shell { height: 100%; border-radius: 0; border: 0; padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .creator-head { padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
  .creator-heading h2 { font-size: var(--fs-1); }
  .creator-heading p, .creator-emblem { display: none; }
  .creator-grid { grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage peoples roles"; grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
  .creator-grid > section { overflow-y: auto; min-height: 0; padding: 12px 14px; }
  .creator-grid > section + section { border-inline-start: 1px solid var(--line-soft); }
  .cr-stage { border-block-end: 0; gap: var(--s2); }
  .people-row { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .pick canvas { width: 48px; height: 48px; }
  .plinth { width: 170px; height: 170px; }
  .plinth canvas { width: 150px; height: 150px; margin-block-end: 10px; }
  .people-name { font-size: var(--fs-1); }
  .attire { display: none; }
  .creator-foot { padding: 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .creator-foot .help { display: none; }
  .modal-box { padding: 16px 20px; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 700px) {
  .title { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .premise { display: none; }
}

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