/* Foundry guests. The world plate is the page; words sit in its own void, in the plate's own label language. */
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap; src: url(assets/fonts/plex-arabic-500.woff2) format("woff2"); }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap; src: url(assets/fonts/plex-arabic-600.woff2) format("woff2"); }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap; src: url(assets/fonts/plex-arabic-700.woff2) format("woff2"); }
:root { --ink: #0B0F14; --ink2: #101722; --line: #253246; --paper: #F6F8FA; --mute: #A9B4C4; --teal: #00D4B8; --amber: #FFB25E; --mint: #3DEBA6; }
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; background: var(--ink); color: var(--paper); font: 500 16px/1.6 "Plex Arabic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
h1 { font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.eyebrow { color: var(--teal); font-weight: 600; font-size: 15px; }
.eyebrow.ok { color: var(--mint); }
.sub { color: var(--mute); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px 1px rgba(61, 235, 166, .7); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn { min-height: 52px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--teal); color: #05241F; font-weight: 700; font-size: 17px; transition: transform .18s ease; }
.btn:hover { background: #2BE3CA; } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: rgba(11, 15, 20, .55); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(246, 248, 250, .26); }
.btn.ghost:hover { background: rgba(246, 248, 250, .1); }
.alpha, .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(11, 15, 20, .74); box-shadow: inset 0 0 0 1px rgba(246, 248, 250, .18); font-size: 12.5px; white-space: nowrap; }
.alpha b { color: var(--teal); font-weight: 700; }

/* ---- the world ----
   Landscape: the whole plate fits the window and floats in the same void it was rendered in (its edges dissolve into the stage),
   and the dock sits in the plate's own empty corner, sized with the plate so it never reaches a painted name.
   Portrait: the plate keeps the full width while the world part (its top 71.5%) fits above the dock; on a shorter phone it
   scales down just enough, and the sides it no longer reaches dissolve the same way. */
.stage { position: relative; height: 100dvh; overflow: hidden; display: grid; background: radial-gradient(75% 66% at 50% 46%, #131b2a 0, #0d121c 58%, #07080c 100%); }
.stage[data-shape="mob"] { grid-template-rows: minmax(0, 1fr) auto; background: linear-gradient(#0d121c 0, #0b1019 62%, #0a0f17 100%); }
.plate-box { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; container-type: size; }
.plate { position: relative; aspect-ratio: var(--pw) / var(--ph); container-type: inline-size; }
.plate-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage[data-shape="desk"] .plate { width: min(100cqw, calc(100cqh * var(--pw) / var(--ph))); }
.stage[data-shape="desk"] .plate-img { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.2%, #000 97.8%, transparent), linear-gradient(to bottom, transparent, #000 2.6%, #000 97.4%, transparent); mask-image: linear-gradient(to right, transparent, #000 2.2%, #000 97.8%, transparent), linear-gradient(to bottom, transparent, #000 2.6%, #000 97.4%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.stage[data-shape="mob"] .plate-box { place-items: start center; }
.stage[data-shape="mob"] .plate { --H: min(calc(100cqw * var(--ph) / var(--pw)), calc((100cqh - 44px) / .715)); --gap: calc((100cqw - var(--H) * var(--pw) / var(--ph)) / 2); --fade: clamp(0px, var(--gap), 8px);
  height: var(--H); margin-top: max(0px, calc(44px - var(--H) * .042));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, #000 71.5%, transparent 78%); mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, #000 71.5%, transparent 78%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hud { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; }
.stage[data-shape="desk"] .hud { top: max(10px, 1.3cqw); inset-inline: max(12px, 1.8cqw); }
.stage[data-shape="mob"] .hud { top: max(8px, env(safe-area-inset-top)); inset-inline: 12px; }
.hud .count { margin-inline-start: auto; color: var(--mute); font-size: 13px; text-shadow: 0 1px 6px var(--ink); }
.hud .count b { color: var(--paper); font-weight: 600; }
.spot { position: absolute; padding: 0; border: 0; background: none; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.house-spot { border-radius: 18px; }
.house-spot:hover { box-shadow: inset 0 0 0 1.5px rgba(0, 212, 184, .75); background: rgba(0, 212, 184, .06); }
.house-spot i { position: absolute; top: 9%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 212, 184, .9), 0 0 16px 6px rgba(0, 212, 184, .5); animation: beacon 2.6s ease-in-out infinite; }
@keyframes beacon { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(2.3); opacity: .25; } }
.dock { display: grid; }
.dock h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: .08em; }
.stage[data-shape="desk"] .dock { position: absolute; z-index: 1; inset-inline-start: 3.1cqw; bottom: 1.9cqw; width: 34cqw; gap: .42cqw; }
.stage[data-shape="desk"] .dock .eyebrow { font-size: max(14px, 1.25cqw); line-height: 1.5; }
.stage[data-shape="desk"] .dock h1 { font-size: max(30px, 2.95cqw); }
.stage[data-shape="desk"] .dock .sub { font-size: max(15px, 1.25cqw); line-height: 1.6; }
.stage[data-shape="desk"] .dock .btn { min-height: max(44px, 3.5cqw); padding: 0 max(18px, 1.7cqw); border-radius: max(12px, 1cqw); font-size: max(15px, 1.2cqw); }
.stage[data-shape="desk"] .dock .acts { gap: max(8px, .7cqw); margin-top: max(4px, .4cqw); }
@container (max-width: 1180px) { .stage[data-shape="desk"] .dock .eyebrow { display: none; } .stage[data-shape="desk"] .dock { width: 30cqw; } }
@container (max-width: 1100px) { .stage[data-shape="desk"] .dock .sub { display: none; } }
.stage[data-shape="mob"] .dock { gap: 4px; padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
.stage[data-shape="mob"] .dock .eyebrow { font-size: 15px; }
.stage[data-shape="mob"] .dock h1 { font-size: 34px; }
.stage[data-shape="mob"] .dock .sub { font-size: 15px; line-height: 1.55; }
.stage[data-shape="mob"] .dock .btn { flex: 1; padding: 0 12px; }
.stage[data-shape="mob"] .hud .chip { display: none; }
@media (max-height: 760px) and (max-aspect-ratio: 1/1) {
  .stage[data-shape="mob"] .dock .eyebrow, .stage[data-shape="mob"] .dock .sub { display: none; }
  .stage[data-shape="mob"] .dock h1 { font-size: 28px; }
  .stage[data-shape="mob"] .dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

#toast { position: fixed; z-index: 30; top: 52px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 16px; background: #0E151E; box-shadow: inset 0 0 0 1px rgba(246, 248, 250, .2), 0 18px 50px rgba(0, 0, 0, .5); font-size: 15px; animation: rise .28s ease; }
#toast[hidden] { display: none; }
#toast button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(0, 212, 184, .14); color: var(--teal); font-weight: 700; white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -8px); } }
/* Portrait: every part of the plate carries a painted name, so the notice takes the place of the action row instead of cutting across the world. */
@media (max-aspect-ratio: 1/1) {
  #toast { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; right: 16px; transform: none; width: auto; max-width: none; min-height: 52px; padding: 4px 4px 4px 16px; justify-content: space-between; border-radius: 14px; animation-name: rise-up; }
  #toast button { min-height: 44px; padding: 0 16px; }
  @keyframes rise-up { from { opacity: 0; transform: translateY(8px); } }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px) { #toast { bottom: max(12px, env(safe-area-inset-bottom)); } }

/* ---- sign-in sheet ---- */
.scrim { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; background: rgba(5, 8, 12, .76); animation: fade .2s ease; }
.sheet { position: relative; width: min(100%, 460px); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--ink2); border: 1px solid var(--line); border-radius: 24px 24px 0 0; animation: up .3s cubic-bezier(.2, .8, .2, 1); }
.sheet .sub { overflow-wrap: anywhere; }
.sheet h2, .sheet .h2 { font-size: 26px; font-weight: 700; line-height: 1.25; margin-inline-end: 48px; }
.sheet .steps { margin-inline-end: 48px; }
.sheet .btn { margin-top: 10px; width: 100%; }
.steps { display: flex; gap: 6px; height: 16px; align-items: center; }
.steps i { width: 26px; height: 3px; border-radius: 2px; background: var(--line); }
.steps .cur { background: var(--teal); }
.x { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--mute); font-size: 26px; line-height: 1; border-radius: 12px; }
label { font-size: 14px; color: var(--mute); margin-top: 6px; }
input, select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #0A1017; border: 1px solid var(--line); border-radius: 12px; font-size: 17px; }
textarea { resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 212, 184, .18); }
.check { display: flex; align-items: center; gap: 10px; color: var(--paper); font-size: 15px; margin-top: 8px; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--teal); flex: none; }
.err { color: #FFB8AB; font-size: 14px; }
.fine { color: var(--mute); font-size: 13px; }
@keyframes fade { from { opacity: 0; } } @keyframes up { from { transform: translateY(24px); opacity: 0; } }

/* ---- the queue: a window on the world ---- */
.queue { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 16px 16px max(18px, env(safe-area-inset-bottom)); }
.win { display: grid; gap: 8px; }
.arch { position: relative; height: 41dvh; overflow: hidden; border-radius: 190px 190px 20px 20px; box-shadow: 0 0 0 1px rgba(246, 248, 250, .2), 0 0 0 7px #0E151E, 0 0 0 8px rgba(246, 248, 250, .08), 0 34px 80px -30px rgba(0, 212, 184, .35); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 31%; display: block; }
.arch::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 60px 12px rgba(5, 8, 12, .7); }
.win figcaption { display: flex; justify-content: space-between; gap: 10px; color: var(--mute); font-size: 13px; }
.win figcaption b { color: var(--paper); font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 7px; }
.live .dot { animation: blink 1.8s ease-in-out infinite; }
.live b { color: var(--paper); font-weight: 600; }
@keyframes blink { 50% { opacity: .3; } }
.q { display: grid; align-content: start; justify-items: start; gap: 2px; }
.q .alpha { margin-bottom: 8px; }
.q-you { color: var(--mute); font-size: 18px; margin-top: 4px; }
.q-num { font-size: clamp(96px, 27vw, 176px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.q-num.tick { animation: tick .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes tick { from { transform: translateY(16%); opacity: .2; } }
.q-eta { font-size: 20px; min-height: 32px; } .q-eta b { color: var(--amber); font-weight: 700; }
.q .sub { font-size: 15px; margin-top: 4px; }
.q .acts { width: 100%; margin-top: 14px; } .q .btn { flex: 1; padding: 0 14px; }
@media (max-height: 760px) and (max-aspect-ratio: 1/1) { .arch { height: 34dvh; } .arch img { object-position: 64% 46%; } .q-num { font-size: 84px; } .q .alpha { margin-bottom: 2px; } .queue { gap: 8px; padding-top: 12px; } }

/* ---- the joining house ---- */
.house { min-height: 100dvh; display: grid; grid-template-rows: 43dvh auto; }
.fig { position: relative; overflow: hidden; }
.shot { position: absolute; inset: 0; transform-origin: 49% 62%; transition: transform 2.2s cubic-bezier(.3, .6, .2, 1); }
.fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 60%; opacity: 0; transition: opacity 1s ease; }
.fig img[data-i="0"], .house[data-lit="1"] img[data-i="1"], .house[data-lit="2"] img[data-i="2"], .house[data-lit="3"] img[data-i="3"] { opacity: 1; }
.fig::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--ink)); }
/* The acceptance moment: the lamps come on one by one (house and board together), the house swells to its welcome
   peak (a rendered light state), the words arrive, and it settles. Reduced motion shows the settled state at once. */
.house[data-cele="run"] .fig img { transition-duration: .55s; }
.house[data-cele="peak"] .fig img[data-i="4"] { opacity: 1; transition-duration: .8s; }
.house[data-cele="done"] .fig img[data-i="4"] { transition-duration: 1.8s; }
.house[data-cele="peak"] .shot { transform: scale(1.055); transition-duration: 1.5s; }
/* The words of the answer are there at once (nothing empties the panel); only the new door waits for the house to light. */
.house[data-cele] .panel > .acts { transition: opacity .6s ease .2s, transform .6s cubic-bezier(.2, .8, .2, 1) .2s; }
.house[data-cele="run"] .panel > .acts { opacity: 0; transform: translateY(8px); pointer-events: none; }
.acts-hold { visibility: hidden; }
.panel { display: grid; align-content: start; gap: 10px; padding: 4px 16px 32px; }
.panel h1 { font-size: 30px; }
.panel form { display: grid; gap: 8px; }
.back { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mute); font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(169, 180, 196, .45); }
.age { display: grid; gap: 6px; }
.board { list-style: none; padding: 0; margin-top: 8px; display: grid; }
.board li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: center; min-height: 64px; color: var(--mute); }
.board li + li::before { content: ""; position: absolute; top: -17px; inset-inline-start: 10px; width: 2px; height: 34px; background: var(--line); }
.board li.on + li::before { background: rgba(255, 178, 94, .6); }
.board b { display: block; font-size: 18px; font-weight: 600; line-height: 1.4; } .board span { font-size: 14px; }
/* A status dot, in the language of the page's other dots: hollow until its step is reached. */
.lamp { position: relative; justify-self: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #46566E; }
.lamp::before, .lamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .5s ease; }
.lamp::before { background: var(--amber); box-shadow: 0 0 0 5px rgba(255, 178, 94, .16), 0 0 18px 3px rgba(255, 170, 80, .5); }
.lamp::after { background: var(--mint); box-shadow: 0 0 0 5px rgba(61, 235, 166, .18), 0 0 20px 4px rgba(61, 235, 166, .55); }
.board .on { color: var(--paper); }
.board .on:not(.fin) .lamp::before, .board .fin .lamp::after { opacity: 1; }
.board .next b { color: var(--paper); }

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .scrim { place-items: center; background: rgba(5, 8, 12, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sheet { border-radius: 24px; padding: 28px; }
  .queue { grid-template: none / minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; padding: 48px 72px; max-width: 1320px; margin-inline: auto; }
  .q { order: -1; gap: 4px; } .q .acts { width: auto; } .q .btn { flex: none; padding: 0 26px; }
  .q-num { font-size: clamp(150px, 15vw, 220px); } .q-eta { font-size: 24px; } .q-you { font-size: 22px; } .q .sub { font-size: 17px; max-width: 26em; }
  .arch { height: min(76dvh, 700px); border-radius: 360px 360px 26px 26px; } .arch img { object-position: 46% 42%; }
  .win figcaption { font-size: 15px; }
  .house { grid-template: none / minmax(420px, .9fr) minmax(0, 1.1fr); align-items: start; }
  .panel { order: -1; align-content: center; gap: clamp(10px, 1vw, 16px); min-height: 100dvh; padding: 40px clamp(40px, 6vw, 104px); max-width: clamp(640px, 50vw, 820px); justify-self: end; width: 100%; }
  .panel h1 { font-size: clamp(40px, 3.5vw, 62px); } .panel .sub { font-size: clamp(18px, 1.45vw, 24px); max-width: 32em; }
  .panel .eyebrow { font-size: clamp(16px, 1.2vw, 20px); } .panel label { font-size: clamp(15px, 1.1vw, 18px); } .panel .fine { font-size: clamp(14px, 1vw, 16px); }
  .panel input, .panel select, .panel textarea { font-size: clamp(17px, 1.3vw, 20px); } .panel .check { font-size: clamp(16px, 1.15vw, 19px); }
  .panel .btn { min-height: clamp(52px, 4vw, 62px); padding: 0 clamp(24px, 2.2vw, 36px); font-size: clamp(17px, 1.3vw, 21px); }
  .back { font-size: clamp(15px, 1.1vw, 18px); }
  .board { margin-top: clamp(8px, 1vw, 18px); } .board li { min-height: clamp(68px, 5.6vw, 92px); gap: clamp(16px, 1.5vw, 24px); }
  .board b { font-size: clamp(20px, 1.7vw, 28px); } .board span { font-size: clamp(15px, 1.2vw, 19px); }
  .board li + li::before { top: calc(-1 * clamp(18px, 1.7vw, 30px)); height: clamp(36px, 3.4vw, 60px); }
  .fig { position: sticky; top: 0; height: 100dvh; } .fig img { object-position: 46% 50%; }
  .fig::after { inset: 0 0 0 auto; width: 22%; height: auto; background: linear-gradient(to left, var(--ink), transparent); }
  #toast { top: 64px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* ---- sign-in page (team-only stage): the same sheet, standing on its own ---- */
.signin .scrim { position: static; min-height: 100dvh; place-items: center; padding: 16px; background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.signin .sheet { border-radius: 24px; padding-bottom: 24px; }
.signin .sheet .h2 { margin-inline-end: 0; }