/* ================================================================ the testnet allowlist's page, in the game's Ash Glass (28 October 2026)
   The owner's flow of 27 October 2026 ("allowlist linkine telegram twitter bi yerden tıkladı, cüzdan bağladı, ... twitter
   bağladı ... select job ... choose name ... card ... QRT ATTI ... ekip inceliyor ... approved ve yönlendirme ... denied ve
   sorry") on one pane of the game's own look. The page first wore the adventurer's journal (parchment, Alegreya, oxide
   green), the look of a redesign of the game that the owner sent back on 28 October ("bi onceki ui i canliya al"); the
   same day he asked for this page to look like the game as it is live ("allowlist ui oyun uina benzetilecek aktif"):
   Ash Glass, client/theme.css. So it is dressed as the game's door (the login box) is: the painted town of Ashhold
   behind it, darkened; one dark glass pane with a gold hairline and the two gold corner accents; "Hall of Ash" in
   Marcellus SC with its ember glow; Inter for the words and Marcellus SC for titles, names and buttons; the game's
   buttons (glass with a gold hairline), each step's main action in the ember of the fight's End Turn (#b-end.mine);
   the jobs as the door's class cards (.ccard: glass with a gold hairline, the chosen one outlined in ember); the
   steps in gold and ember; red only for errors and "Denied", the game's green for what is good. Self-contained: the
   game's style.css and theme.css are not loaded here (their html/body rules hold the game's one screen still; this
   page scrolls), so the tokens it uses are copied below: keep them in step with theme.css. A phone (390 px wide) gets
   one column; a computer (1366 x 768) sees each step's main action without scrolling. */

:root {
  /* Ash Glass's inks (theme.css :root, .panel .greet, b) */
  --ink: #f1ece4;
  --ink-2: #d8cfbf;
  --ink-dim: #b8b0a3;
  /* (theme.css's faint ink is #8a8377: a step lighter here, so the small words keep 4.5:1 on the glass even where a
     lamp of the town shines through it) */
  --ink-faint: #9b9385;
  --head: #f4dfae;
  --b-ink: #f3d68e;
  --gold: #e8c47a;
  --gold-dim: #a8894e;
  --ember: #ff8a4c;
  --ember-ink: #ffb27a;
  --good-ink: #9fe28c;
  --bad: #e0624f;
  --bad-ink: #ff8a7a;
  /* the discs that mark a step or a word: the gold of a step done, the ember of the one now, the game's green and red */
  --disc-gold: #d9b25e;
  --disc-good: #74c260;
  --disc-bad: #b8402f;
  /* the pane, its hairline and its lift (theme.css), and the rules inside it */
  --glass: linear-gradient(180deg, rgba(27, 27, 34, 0.92), rgba(10, 10, 14, 0.94));
  --hair: inset 0 0 0 1px rgba(201, 162, 90, 0.32), inset 0 1px 0 rgba(255, 236, 200, 0.08);
  --lift: 0 0 0 1px rgba(0, 0, 0, 0.72), 0 14px 34px rgba(0, 0, 0, 0.55);
  --rule: rgba(201, 162, 90, 0.24);
  /* the faces (theme.css --serif and --caps): the words in Inter, titles, names and buttons in Marcellus SC */
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --title: 'Marcellus SC', 'Cinzel', Georgia, serif;
  /* the marks drawn once: the tick (dark, on the gold, the ember and the green), the cross (light, on the red) */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.6 2.6 5-5.4' fill='none' stroke='%231f1406' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%23fff0ec' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  /* (Marcellus SC has one weight: never a bold made up from it) */
  font-synthesis-weight: none;
  color-scheme: dark;
}
/* Chinese: its characters fall back as the game's do (i18n.js: Noto Serif SC after each Latin face, index.html
   #font-zh, which allowlist.js switches on for Chinese), the Latin words keep Inter and Marcellus SC */
html[lang^="zh"] {
  --text: 'Inter', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --title: 'Marcellus SC', 'Noto Serif SC', 'Songti SC', 'SimSun', Georgia, serif;
  font-synthesis: weight;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #060608; }
body { margin: 0; min-height: 100vh; font: 400 15px/1.5 var(--text); color: var(--ink); }
html[lang^="zh"] body { line-height: 1.65; }
/* The town behind the pane, as the game's door shows it: the painted Ashhold at night, its square, its statue and its
   gate, darkened toward the edges (the door's own veil, style.css #login, a little deeper: this page is read, not
   glanced at). One picture made from the town's own tiles (client/img/town/l1, the picture of TOWN_IMG ver 6: the crop
   x 600-2400, y 494-1506 of the 3344 x 1882 level, at 1600 x 900, WebP quality 55; made again the same way if the
   picture changes). Fixed behind the page, which scrolls over it; under it the night's dark while it loads. */
body::before {
  content: ''; position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(6, 6, 8, 0.42), rgba(6, 6, 8, 0.84)), url(town.webp) 55% 36% / cover no-repeat, #0b0c12;
}
button, input { font: inherit; color: inherit; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff4d8; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: rgba(232, 196, 122, 0.3); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* figures that keep their places: a serial, a code, an address, a count */
.tab, .mono, .rail .num, .who b, .count, .facts .code { font-variant-numeric: tabular-nums; }

code, .mono { font: 600 0.95em var(--text); letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }

/* ================================================================ the pane: the game's glass, its gold hairline and corner accents */
.sheet {
  position: relative; isolation: isolate; width: min(904px, calc(100vw - 32px)); margin: 24px auto 32px; padding: 26px 44px 30px;
  color: var(--ink); background: var(--glass); border-radius: 10px; box-shadow: var(--hair), var(--lift);
}
/* (theme.css .login-box::before and ::after: gold at the top left and at the bottom right) */
.sheet::before, .sheet::after { content: ''; position: absolute; z-index: 3; width: 14px; height: 14px; pointer-events: none; }
.sheet::before { left: 0; top: 0; border-left: 2px solid #e2b968; border-top: 2px solid #e2b968; border-radius: 10px 0 0 0; }
.sheet::after { right: 0; bottom: 0; border-right: 2px solid #e2b968; border-bottom: 2px solid #e2b968; border-radius: 0 0 10px 0; }

/* ---------------------------------------------------------------- the head: the badge, the languages, the title, what this is, the steps */
.hd { text-align: center; }
/* the testnet's word in the pane's corner: the door's own badge (style.css #net-badge) */
.stamp { position: absolute; left: 16px; top: 14px; padding: 2px 9px 1px 12px; font: 400 11.5px/17px var(--title); letter-spacing: 0.3em; text-transform: uppercase;
  color: #9fd4ff; background: rgba(20, 40, 60, 0.45); border: 1px solid #2e4a6a; border-radius: 2px; }
/* the language switch at the other corner: the door's (i18n.js .langsw), the one in use in gold, underlined */
/* the top right corner: the FAQ, Discord and X (/js/links.js), as the game's door has them, then the languages */
.hd-top { position: absolute; right: 14px; top: 9px; z-index: 2; display: flex; align-items: center; gap: 12px; }
.soc { display: flex; align-items: center; gap: 6px; }
.soc-b { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0; border-radius: 14px; color: var(--gold); text-decoration: none;
  background: linear-gradient(180deg, rgba(27, 27, 34, 0.86), rgba(10, 10, 14, 0.9)); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.42), 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: color 0.15s, box-shadow 0.15s, background 0.15s; }
.soc-b svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.soc-b:hover, .soc-b:focus-visible { color: #fff4d8; background: linear-gradient(180deg, rgba(48, 42, 34, 0.92), rgba(18, 16, 14, 0.94));
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.85), 0 0 12px rgba(232, 196, 122, 0.25); }
.soc-faq { padding: 0 10px; font: 400 12px/1 var(--title); letter-spacing: 0.1em; }
.lang { display: flex; align-items: center; gap: 4px; font: 400 13px var(--title); letter-spacing: 0.06em; }
.lang button { padding: 3px 5px; color: var(--ink-dim); background: none; border: 0; cursor: pointer; }
.lang button:hover { color: #fff4d8; }
.lang button[aria-pressed="true"] { color: var(--gold); text-decoration: underline 1px; text-underline-offset: 4px; }
.lang i { font-style: normal; color: var(--ink-faint); }
/* the title as the door has it (theme.css .login-box h1): Marcellus SC in pale gold, its ember glow and its shadow */
.hd h1 { margin: 12px 0 0; font: 400 50px/1.1 var(--title); letter-spacing: 0.08em; color: #f6dca0;
  text-shadow: 0 0 26px rgba(255, 130, 50, 0.45), 0 3px 0 #2a1a0c, 0 8px 18px #000; }
/* (its spacing after the last letter too, balanced by as much before the first, so it stands in the middle) */
.hd .sub { margin: 6px 0 0; padding-left: 0.4em; font: 400 13px var(--title); letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-faint); }
html[lang^="zh"] .hd .sub { padding-left: 0.2em; letter-spacing: 0.2em; }
/* under it, a gold hairline that fades at both ends */
.hd .sub::after { content: ''; display: block; width: 220px; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, rgba(232, 196, 122, 0.6), transparent); }
.hd .intro { max-width: 560px; margin: 12px auto 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* past the first step the title steps back (smaller, without its hairline), so each step's own words and its action
   stay on a laptop's screen (1366 x 768: about 650 px of page) */
.sheet.on { padding-top: 20px; }
.sheet.on .hd h1 { margin-top: 2px; font-size: 30px; text-shadow: 0 0 18px rgba(255, 130, 50, 0.4), 0 2px 0 #2a1a0c, 0 5px 12px #000; }
.sheet.on .hd .sub { margin-top: 4px; font-size: 12px; }
.sheet.on .hd .sub::after { display: none; }
.sheet.on .hd .intro { display: none; }
.sheet.on .rail { margin-top: 14px; }

/* The steps: a line of six, each a numbered disc and its name. Done ones in the game's gold with a tick, the one now
   in ember with its name underlined (told by more than a colour), the rest faint, a denial in the game's red with a
   cross. A step already done in a draft can be gone back to. */
.rail { display: flex; justify-content: center; align-items: center; margin: 18px auto 0; padding: 0; list-style: none; }
.rail li { display: flex; align-items: center; }
.rail li + li::before { content: ''; flex: none; width: 26px; height: 1px; margin: 0 8px; background: rgba(201, 162, 90, 0.42); }
.rail .rs { display: inline-flex; align-items: center; gap: 7px; padding: 3px 2px; font: 500 13.5px var(--text); color: var(--ink-faint); background: none; border: 0; white-space: nowrap; }
.rail button.rs { cursor: pointer; }
.rail button.rs:hover .rn { color: #fff4d8; text-decoration: underline 1px; text-underline-offset: 3px; }
.rail .num { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  font: 600 11.5px/1 var(--text); color: var(--ink-faint); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.45); }
.rail .done .num { color: transparent; background: var(--disc-gold) var(--tick) center / 14px no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.45); }
.rail .done .rn { color: var(--ink-dim); }
.rail .now .num { color: #1f0d04; background: linear-gradient(180deg, #ff9a5c, #d4561f); box-shadow: inset 0 0 0 1px rgba(255, 226, 168, 0.7), 0 0 12px rgba(255, 110, 50, 0.55); }
.rail .now .rn { color: var(--ember-ink); text-decoration: underline 2px var(--ember); text-underline-offset: 5px; }
.rail .no .num { color: transparent; background: var(--disc-bad) var(--cross) center / 14px no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(224, 98, 79, 0.4); }
.rail .no .rn { color: var(--bad-ink); }
.rail-now { display: none; }

/* who is signed in: at the page's foot, under a gold rule, the way out small after it (at the head it pushed each
   step's action off a laptop's screen) */
.who { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-faint); }
.who b { margin-left: 3px; font: 600 13.5px var(--text); color: var(--b-ink); }
.who .sep { color: var(--gold-dim); }
.who .link { font-size: 13.5px; }

/* ---------------------------------------------------------------- a step: its title in Marcellus SC after a gold rule, its words, its action */
.step { margin-top: 20px; padding-top: 18px; background: linear-gradient(90deg, transparent, rgba(201, 162, 90, 0.42) 14%, rgba(201, 162, 90, 0.42) 86%, transparent) top / 100% 1px no-repeat; }
.sheet.on .step { margin-top: 16px; padding-top: 14px; }
.step > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 400 23px/1.2 var(--title); letter-spacing: 0.03em; color: var(--head);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); outline: none; }
.step > h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 90, 0.4), transparent); }
/* approved (and already in): the game's green disc and its tick; denied: its red, the cross, the title in red */
.step > h2.ok::before, .step > h2.bad::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--disc-good) var(--tick) center / 15px no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(127, 207, 106, 0.4); }
.step > h2.ok { color: #b8ec9e; }
.step > h2.bad { color: var(--bad-ink); }
.step > h2.bad::before { background: var(--disc-bad) var(--cross) center / 15px no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(224, 98, 79, 0.4); }
.lead { margin: 0 0 14px; font-size: 15.5px; color: var(--ink-2); }
.lead b { font-weight: 600; color: var(--b-ink); }
.hint { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-faint); }
/* the way to what is kept, and why (privacy.html), under the consent its box stands for */
.hint.priv { margin: 6px 0 0 28px; }
/* a word for the way here (X connected): a strip of gold light with the gold at its edge */
.note { margin: 0 0 14px; padding: 7px 12px; font-size: 14.5px; color: var(--ink-2); border-radius: 7px; background: rgba(232, 196, 122, 0.07);
  box-shadow: inset 3px 0 0 var(--gold-dim), inset 0 0 0 1px rgba(201, 162, 90, 0.2); }
/* a small section's name: the game's (theme.css .sect), with a gold rule after it */
.sect { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font: 400 12.5px/1.3 var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.sect::after { content: ''; flex: 1 1 24px; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 90, 0.35), transparent); }
/* what went wrong: in the game's red, after its mark (never the colour alone) */
.err { margin: 10px 0 0; font-size: 14.5px; color: var(--bad-ink); }
.err:empty { display: none; }
.err::before { content: '!'; display: inline-block; width: 17px; height: 17px; margin: 0 7px 0 0; border-radius: 50%; font: 700 11.5px/17px var(--text); text-align: center; vertical-align: 1px;
  color: #fff0ec; background: var(--disc-bad); }
/* a good word: its tick in the game's green */
.okw { font-weight: 600; color: var(--good-ink); }
.okw::before { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; border-radius: 50%; background: var(--disc-good) var(--tick) center / 11px no-repeat; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------- buttons: the game's (theme.css .btn); the main action in ember */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 15px; font: 400 14px/1.2 var(--title); letter-spacing: 0.05em;
  color: #f3e3c0; text-shadow: 0 1px 1px #000; text-decoration: none; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, #2e2e37, #17171d); border: 0; border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 6px rgba(0, 0, 0, 0.55);
  transition: background-color 0.12s, box-shadow 0.12s, color 0.12s; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) { color: #fff4d8; background: linear-gradient(180deg, #3a3a45, #1d1d24);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 14px rgba(232, 196, 122, 0.22), 0 2px 6px rgba(0, 0, 0, 0.55); }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* each step's main action (Save and go on or Connect X, Create my card, Download card then Next, Open X, Submit): the
   ember of the fight's End Turn when it is the player's (theme.css #b-end.mine), dark words on it */
.btn.main { min-height: 42px; padding: 9px 22px; font-size: 15.5px; color: #1f0d04; text-shadow: none; background: linear-gradient(180deg, #ff9a5c, #d4561f);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 168, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 22px rgba(255, 110, 50, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6); }
.btn.main:hover:not(:disabled):not([aria-disabled="true"]) { color: #1f0d04; background: linear-gradient(180deg, #ffab72, #e2632a);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 196, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 26px rgba(255, 120, 60, 0.6), 0 4px 10px rgba(0, 0, 0, 0.6); }
/* approved, or already in: the way into the game (Enter the game) in the game's green (theme.css .btn.green), the
   colour of the good news above it, at the size of a main action */
.step:has(> h2.ok) .btn.main { color: #cdf3b6; text-shadow: 0 1px 1px #000; background: linear-gradient(180deg, #2a4520, #12200d);
  box-shadow: inset 0 0 0 1px rgba(127, 207, 106, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(127, 207, 106, 0.25), 0 4px 10px rgba(0, 0, 0, 0.6); }
.step:has(> h2.ok) .btn.main:hover:not(:disabled):not([aria-disabled="true"]) { color: #e6ffd8; background: linear-gradient(180deg, #33542a, #172a10);
  box-shadow: inset 0 0 0 1px rgba(160, 230, 140, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 22px rgba(127, 207, 106, 0.4), 0 4px 10px rgba(0, 0, 0, 0.6); }
/* (an action that cannot be taken yet keeps its colour, dimmed, and loses its glow) */
.btn.main:disabled, .btn.main[aria-disabled="true"] { opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(255, 226, 168, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5); }
.btn.small { min-height: 30px; padding: 4px 11px; font-size: 12.5px; border-radius: 6px; }
.btn.link { min-height: 0; padding: 0; font: 600 13.5px var(--text); letter-spacing: 0; color: var(--gold); text-shadow: none; background: none; border-radius: 0; box-shadow: none;
  text-decoration: underline 1px; text-underline-offset: 3px; }
.btn.link:hover:not(:disabled):not([aria-disabled="true"]) { color: #fff4d8; background: none; box-shadow: none; }
/* waiting on the server: the words give way to a turning ring, the button at its full colour */
.btn[aria-busy="true"] { position: relative; color: transparent !important; text-shadow: none; cursor: progress; }
.btn[aria-busy="true"]:disabled { opacity: 1; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -9px 0 0 -9px; border: 2px solid rgba(243, 227, 192, 0.25);
  border-top-color: var(--gold); border-radius: 50%; animation: al-spin 0.8s linear infinite; }
.btn.main[aria-busy="true"]::after { border-color: rgba(31, 13, 4, 0.25); border-top-color: #1f0d04; }
@keyframes al-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }

/* fields: the game's (theme.css): dark, a gold hairline, brighter with the caret in it, red when wrong */
.fld { display: block; margin: 0 0 6px; font: 600 14px var(--text); color: var(--ink-2); }
input[type="text"], input[type="url"], input:not([type]) {
  width: 100%; min-height: 42px; padding: 8px 12px; font: 400 16px var(--text); color: var(--ink); background: rgba(0, 0, 0, 0.45); border: 0; border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.34); outline: none; }
input[type="text"]:focus, input[type="url"]:focus, input:not([type]):focus { box-shadow: inset 0 0 0 1.5px rgba(232, 196, 122, 0.9), 0 0 0 3px rgba(232, 196, 122, 0.16), 0 0 12px rgba(232, 196, 122, 0.2); }
input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad) !important; }
input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1.5px var(--bad), 0 0 0 3px rgba(224, 98, 79, 0.2) !important; }
input::placeholder { color: #8f887b; }
/* the X handle: its @ before the field, part of it */
.handle { position: relative; max-width: 360px; }
.handle span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 500 16px var(--text); color: var(--ink-dim); pointer-events: none; }
.handle input { padding-left: 29px; }
/* the consent: a real checkbox (in ember once ticked), its words beside it, on its own line */
.consent { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ember); cursor: pointer; }

/* ---------------------------------------------------------------- the wallets this browser has, then the others (the door's picker, style.css .wp-w) */
.wl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl.found .ww:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ww { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px; font: 500 14.5px var(--text); color: var(--ink); text-decoration: none; text-align: left;
  background: rgba(255, 255, 255, 0.035); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.25); cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s; }
.ww:hover { color: #fff4d8; background: rgba(232, 196, 122, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.6); }
.ww .wn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww small { flex: none; font: 400 12.5px var(--text); color: var(--ink-faint); }
/* the ones found here are the step's main action (connecting the wallet): outlined in ember with its glow, as the
   door's chosen class card is (a row filled with ember would drown the wallet's own icon), "Detected" in ember */
.wl.found .ww { font-weight: 600; background: rgba(255, 138, 76, 0.08); box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 14px rgba(255, 122, 61, 0.25); }
.wl.found .ww:hover { color: #fff4d8; background: rgba(255, 138, 76, 0.14); box-shadow: inset 0 0 0 1.5px #ffa070, 0 0 20px rgba(255, 122, 61, 0.45); }
.wl.found .ww small { font-weight: 600; color: var(--ember-ink); }
.wl.more .ww { background: rgba(0, 0, 0, 0.22); }
.ww img, .ww .mono { flex: none; width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ww .mono { display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--text); font-style: normal; color: #fff; background: #444; }
.wnone { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-2); }
.wstate { min-height: 22px; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.wstate:empty { min-height: 0; margin: 0; }
.wstate b { font-weight: 600; color: var(--b-ink); }

/* ---------------------------------------------------------------- the jobs: the door's class cards (style.css and theme.css .ccard) */
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; }
.job { position: relative; display: block; padding: 10px 10px 12px; text-align: center; cursor: pointer; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.25); transition: background-color 0.15s, box-shadow 0.15s; }
.job:hover { background: rgba(232, 196, 122, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.6); }
.job input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.job canvas { display: block; width: 88px; height: 96px; margin: 0 auto 2px; }
.job .jn { display: block; margin: 0; font: 400 17px/1.2 var(--title); letter-spacing: 0.03em; color: var(--head); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.job .jd { display: block; margin: 5px 0 8px; font-size: 13px; line-height: 1.32; color: var(--ink-dim); }
/* the class's three ways, as the door shows them: each name in its own colour (made for the dark), what it does
   best under it */
.job .specs { display: block; margin: 0 0 8px; }
.job .sp { display: block; margin-top: 5px; font-size: 12px; line-height: 1.28; color: var(--ink-dim); }
/* (a touch lighter than the game's own, where the browser can mix it: still 4.5:1 where a lamp of the town shines
   through the glass) */
.job .sp b { display: block; font: 400 12.5px/1.3 var(--title); letter-spacing: 0.04em; color: var(--bc, var(--gold)); color: color-mix(in srgb, var(--bc, var(--gold)) 86%, #fff); }
.job .sp > span { display: block; }
.job .st { display: block; padding-top: 6px; border-top: 1px solid rgba(201, 162, 90, 0.2); font: 600 11.5px var(--text); letter-spacing: 0.05em; color: var(--ink-faint);
  /* (where a card is too narrow for the four on one line, a tablet's: two even lines, broken only after a dot,
     allowlist.js stats) */
  text-wrap: balance; }
/* the job chosen: outlined in ember with its glow (theme.css .ccard.on), the ember disc with its tick in the corner and
   the word "Chosen" under it (told by more than a colour) */
.job.on { background: rgba(255, 138, 76, 0.12); box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 18px rgba(255, 122, 61, 0.35); }
.job.on::after { content: ''; position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: #f07a3a var(--tick) center / 14px no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 110, 50, 0.5); }
.job:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.job .chosen { display: none; }
.job.on .chosen { display: block; margin-top: 6px; font: 400 11.5px/15px var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-ink); }

/* the name: the field, what is known of it under it as it is typed, the main action beside it */
.namerow { display: grid; grid-template-columns: minmax(0, 360px) max-content; justify-content: start; align-items: start; gap: 6px 16px; margin-top: 16px; }
.namerow .fld { grid-column: 1 / -1; }
.namerow .btn.main { min-width: 200px; }
.ncheck { min-height: 21px; margin: 7px 0 0; font-size: 14px; color: var(--ink-faint); }
.ncheck.bad { color: var(--bad-ink); }
.ncheck.bad::before { content: '!'; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; border-radius: 50%; font: 700 11px/16px var(--text); text-align: center; vertical-align: 1px;
  color: #fff0ec; background: var(--disc-bad); }
.ncheck.good { font-weight: 600; color: var(--good-ink); }
.ncheck.good::before { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; border-radius: 50%; background: var(--disc-good) var(--tick) center / 11px no-repeat; }

/* ---------------------------------------------------------------- the card: the picture and what goes with it */
.cardrow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
.cardimg { margin: 0; }
/* the picture itself (a long press saves it where a download does not start): the card's own shape, a deep shadow under it */
.cardimg img, .cardimg .wait { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 10px 26px rgba(0, 0, 0, 0.6);
  -webkit-touch-callout: default; user-select: auto; }
.cardimg .wait { display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-dim); background: linear-gradient(180deg, #1e1e26, #0c0c10);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.3), 0 10px 26px rgba(0, 0, 0, 0.6); }
/* what the card says, as a list: the labels in the game's small gold capitals */
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 16px; font-size: 15px; }
.facts dt { font: 400 12px/22px var(--title); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.facts dd { margin: 0; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.facts dd b { font-weight: 600; color: var(--b-ink); }
/* (the hero's name in the face of the game's names) */
.facts dd > b:not(.tab) { font: 400 17px/22px var(--title); letter-spacing: 0.03em; color: var(--head); }
.facts .code { font: 700 18px var(--text); letter-spacing: 0.14em; color: var(--b-ink); }
.cardside .acts { margin-top: 20px; }
.cardside .hint { max-width: 420px; }

/* ---------------------------------------------------------------- the share: three short steps in a numbered list */
.howto { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: how; }
.howto > li { position: relative; padding: 0 0 18px 40px; counter-increment: how; }
.howto > li + li { padding-top: 16px; border-top: 1px solid var(--rule); }
.howto > li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font: 600 12.5px/1 var(--text); color: var(--gold); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.5); }
.howto > li + li::before { top: 16px; }
.howto h3 { margin: 2px 0 6px; font: 400 17px/1.3 var(--title); letter-spacing: 0.02em; color: var(--head); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.howto p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-dim); }
/* the words the post opens with, as X will show them: a quotation on the glass, a gold bar before it and a warm light
   behind it (not a field: they are typed by X, never here) */
.pre { margin: 0 0 12px; padding: 5px 12px; font-size: 15px; color: var(--ink); background: linear-gradient(90deg, rgba(232, 196, 122, 0.08), rgba(232, 196, 122, 0)); border-left: 3px solid var(--gold-dim);
  border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.attach { color: var(--head); }
.postrow { display: flex; gap: 10px; align-items: flex-start; max-width: 640px; }
.postrow input { flex: 1; min-width: 0; }
.postrow .btn { flex: none; min-width: 110px; }
.pcheck { min-height: 21px; margin: 7px 0 0; font-size: 14px; color: var(--ink-faint); }
.pcheck.bad { color: var(--bad-ink); }
.pcheck.bad::before { content: '!'; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; border-radius: 50%; font: 700 11px/16px var(--text); text-align: center; vertical-align: 1px;
  color: #fff0ec; background: var(--disc-bad); }
.pcheck.good { font-weight: 600; color: var(--good-ink); }
.pcheck.good::before { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; border-radius: 50%; background: var(--disc-good) var(--tick) center / 11px no-repeat; }
/* (a post by another account: allowed, said in gold, after its mark) */
.pcheck.warn { color: var(--b-ink); }
.pcheck.warn::before { content: '!'; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; border-radius: 50%; font: 700 11px/16px var(--text); text-align: center; vertical-align: 1px;
  color: #1f1406; background: var(--disc-gold); }

/* ---------------------------------------------------------------- the review and its outcomes */
.revrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 4px; }
.revrow .cardimg img, .revrow .cardimg .wait { border-radius: 7px; }
.count { margin: 12px 0 0; font-size: 14px; color: var(--ink-faint); }
.revrow .hint { overflow-wrap: anywhere; }

/* ================================================================ over the page: the line lost, a new version */
/* (the game's own notes: a toast of glass, theme.css .toast) */
.slip { position: fixed; z-index: 10; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; font-size: 14px; color: var(--ink); background: linear-gradient(180deg, rgba(27, 27, 34, 0.96), rgba(10, 10, 14, 0.97)); border-radius: 9px;
  box-shadow: var(--hair), 0 8px 22px rgba(0, 0, 0, 0.6); }
.slip .btn { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
/* the line lost: the game's red bar for it (theme.css #conn) */
#al-conn.slip { font-family: var(--title); letter-spacing: 0.04em; color: #ffd8cc; background: linear-gradient(180deg, #6a1e17, #3e100c); box-shadow: inset 0 0 0 1px rgba(224, 98, 79, 0.5), 0 4px 14px rgba(0, 0, 0, 0.6); }
/* the page's files did not all load: said in both languages, on glass of its own over the town */
#al-fail { width: min(904px, calc(100vw - 32px)); margin: 24px auto; padding: 12px 16px; font-size: 14.5px; color: #ffc0b4; background: var(--glass); border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(224, 98, 79, 0.55), var(--lift); }
#al-fail .btn { margin-left: 8px; }

/* ================================================================ Chinese: no spacing between characters, nothing slanted (as the game's i18n.js) */
html[lang^="zh"] :is(.stamp, .sect, .btn, .job .jn, .job .sp b, .job .st, .job .chosen, .facts dt, .rail-now, .howto h3, .step > h2) { letter-spacing: 0; }
html[lang^="zh"] body * { font-style: normal !important; }
/* (a button and a job's attributes break at their spaces, never inside a word: 体力, as the game's i18n.js keeps them) */
html[lang^="zh"] :is(.btn, .job .st) { word-break: keep-all; }

/* ================================================================ a phone: one column, the same pane */
@media (max-width: 720px) {
  .sheet { width: calc(100vw - 16px); margin: 8px auto 20px; padding: 46px 16px 22px; }
  /* (the title always under the badge and the languages: a phone has no room for the three on one line) */
  .sheet.on { padding-top: 44px; }
  .stamp { left: 12px; top: 12px; }
  .hd-top { right: 8px; top: 8px; gap: 8px; }
  .hd h1 { margin-top: 0; font-size: 38px; }
  .sheet.on .hd h1 { font-size: 27px; }
  .hd .sub { font-size: 11.5px; letter-spacing: 0.3em; padding-left: 0.3em; }
  .hd .intro { font-size: 14.5px; }
  /* the steps: the six discs in a line, the current one's name under them */
  .rail { margin-top: 14px; }
  .rail .rn { display: none; }
  .rail li + li::before { width: 18px; margin: 0 4px; }
  .rail .num { width: 26px; height: 26px; font-size: 12px; }
  /* (in Inter: Marcellus SC draws its 1 like an I) */
  .rail-now { display: block; margin: 8px 0 0; font: 600 12px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
  .rail-now b { font-weight: 700; color: var(--ember-ink); }
  /* (the name in the colour of its disc: red once denied, gold once every step is done) */
  .hd:has(.rail .no) .rail-now b { color: var(--bad-ink); }
  .hd:has(.rail li:last-child.done) .rail-now b { color: var(--gold); }
  .who { margin-top: 18px; font-size: 13.5px; }
  /* (the way to another wallet on a line of its own, without a dot left hanging at the end of the one above) */
  .who .sep.last { display: none; }
  .who .link { flex-basis: 100%; }
  .step { margin-top: 14px; padding-top: 14px; }
  .step > h2 { font-size: 21px; }
  .lead { font-size: 15px; }
  .wl { grid-template-columns: minmax(0, 1fr); }
  .wl.found .ww:last-child:nth-child(odd) { grid-column: auto; }
  /* a job is a row: its figure beside its words (four columns of 90 px read like a ransom note) */
  .jobs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .job { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; padding: 10px 12px 10px 6px; text-align: left; }
  .job canvas { grid-row: 1 / span 6; width: 76px; height: 84px; margin: 0; align-self: start; }
  .job .jn { justify-self: start; padding-right: 28px; font-size: 18px; }
  .job .jd { margin: 3px 0 6px; font-size: 13px; }
  .job .sp { margin-top: 4px; }
  .job .sp b { display: inline; margin-right: 6px; }
  .job .sp > span { display: inline; }
  .job.on::after { top: 10px; right: 10px; width: 18px; height: 18px; background-size: 12px; }
  .namerow { grid-template-columns: minmax(0, 1fr); }
  .namerow .btn.main { width: 100%; }
  .cardrow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cardrow .cardimg { width: min(100%, 340px); margin: 0 auto; }
  .facts { font-size: 14.5px; }
  .acts .btn { flex: 1 1 100%; }
  .howto > li { padding-left: 36px; }
  .postrow { flex-direction: column; align-items: stretch; }
  .postrow .btn { width: 100%; }
  .revrow { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
}

/* Cloudflare's Turnstile widget under the sheet (allowlist.js tsSetup): it shows itself only when Cloudflare wants a press */
#al-ts { display: flex; justify-content: center; margin: 10px auto 0; }