/* VEYLTAK — Midnight Heist.
   A dark planning desk, three brass vault façades, a security terminal for risk.
   Gold belongs to Loot and nothing else. Mint belongs to what you are choosing.
   Amber-to-red belongs to Heat. Colour is never the only signal: every state
   also carries an icon and a word. One deliberate break: the SEALED stamp. */

/* Fonts, self-hosted: loading the game makes no third-party request. The Arabic faces download only
   when a page shows Arabic (unicode-range). Every family is SIL Open Font License 1.1; see
   fonts/LICENSES.md. The faces sit here rather than in stylesheets of their own, so the page makes
   one render-blocking request instead of three. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/golos-text-latin-83cb19f9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/golos-text-latin-83cb19f9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-0a7197f9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-0a7197f9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oranienbaum';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/oranienbaum-latin-e67fc15d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oswald-latin-78c7a4dd.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oswald-latin-78c7a4dd.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"El Messiri";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/el-messiri-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/noto-kufi-arabic-arabic-500-700.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}

:root{
  --ink-0:#090d13;--ink-1:#10151d;--ink-2:#1b2430;--ink-3:#253140;--line:#2f3c4b;--line-2:#3d4c5d;
  --text:#f2efe7;--text-2:#bcc5cf;--text-3:#8793a1;
  --brass:#dab56c;--brass-2:#a8864a;--brass-glow:rgba(218,181,108,.38);
  --mint:#8fd2ce;--mint-2:#5fa9a5;--mint-glow:rgba(143,210,206,.3);
  --heat:#e59b55;--danger:#e4574b;--danger-2:#f0a097;--paper:#e9e1cf;
  /* Each role names its Arabic companion second; its @font-face covers only Arabic,
     so Latin still comes from the first face. */
  --f-display:'Oranienbaum','El Messiri','Prata',Georgia,serif;
  --f-num:'Oswald','Noto Kufi Arabic','Arial Narrow','Roboto Condensed',sans-serif;
  --f-mono:'JetBrains Mono','Noto Kufi Arabic',ui-monospace,Consolas,monospace;
  --f-body:'Golos Text','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:3px;--gap:clamp(6px,1.3vw,14px);--tap:44px;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-slam:cubic-bezier(.3,1.55,.5,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink-0);color:var(--text);font:400 16px/1.45 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(110% 65% at 50% 40%,#172230 0%,var(--ink-1) 48%,var(--ink-0) 100%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;height:100%;height:100dvh}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}
.i-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor}
.label{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ------------------------------------------------------------------ buttons */
.btn{min-height:var(--tap);padding:0 22px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 15px/1 var(--f-body);letter-spacing:.02em;transition:transform .15s var(--ease-out),background .2s,box-shadow .2s,color .2s}
.btn:active,.icon-btn:active,.boost-btn:active,.level:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,#ebca85,var(--brass) 55%,#b58e4c);color:#1a1307;
  box-shadow:0 0 0 1px #f3d99b inset,0 12px 32px -14px var(--brass-glow)}
.btn-primary:hover{box-shadow:0 0 0 1px #f8e5b8 inset,0 14px 44px -12px rgba(218,181,108,.6)}
.btn-primary[disabled]{background:var(--ink-3);color:var(--text-3);box-shadow:0 0 0 1px var(--line) inset;cursor:default}
.btn-ghost{color:var(--text-2);box-shadow:0 0 0 1px var(--line-2) inset}
.btn-ghost:hover{color:var(--text);box-shadow:0 0 0 1px var(--mint-2) inset}
.btn-ghost[disabled]{opacity:.4;cursor:default}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;color:var(--text-2);border-radius:var(--r);font-size:20px;transition:transform .15s var(--ease-out),background .2s,color .2s}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.lang-btn{font:600 12px/1 var(--f-mono);letter-spacing:.1em}

/* -------------------------------------------------------------------- art */
.vault-art,.crest{display:block;width:100%;height:auto}
.v-mass{fill:#131b25;stroke:var(--brass-2);stroke-width:1.5}
.v-mass-2{fill:#0f161e;stroke:var(--line-2);stroke-width:1.2}
.v-line{fill:none;stroke:var(--brass-2);stroke-width:1.5}
.v-fine{fill:none;stroke:var(--brass-2);stroke-width:1;opacity:.7}
.v-crest{fill:none;stroke:var(--brass);stroke-width:2}
.v-panel{fill:#0e141c;stroke:var(--line-2);stroke-width:1}
.v-door{fill:#0b1118;stroke:var(--brass);stroke-width:2}
.v-ring{fill:none;stroke:var(--brass-2);stroke-width:3;stroke-dasharray:2 6}
.v-bolt{fill:var(--brass-2)}
.v-arc{fill:none;stroke:var(--mint-2);stroke-width:1.5;stroke-linecap:round}
.v-beacon{fill:var(--danger)}
.crew-art{display:block;width:100%;height:100%}
.c-coat{fill:#233142}.c-shade{fill:#162231}.c-ink{fill:#0b1118}.c-skin{fill:#cbbba2}
.c-rim{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round}
.c-mirror{fill:none;stroke:var(--mint);stroke-width:1.5}
.c-prop{fill:var(--brass)}.c-prop-line{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round}
.c-glint{fill:none;stroke:#fff6dc;stroke-width:2;stroke-linecap:round}
.c-paper{fill:var(--paper)}.c-fold{fill:#b6ab95}.c-fine{fill:none;stroke:var(--text-3);stroke-width:1}
.c-hot{fill:var(--danger)}.c-visor{fill:var(--mint)}.c-arc{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round}
.c-roof{fill:#0d141c}
.coin{display:block;width:28px;height:auto}
.coin-edge{fill:#8a6a32}.coin-face{fill:var(--brass)}.coin-inner{fill:none;stroke:#f6dea4;stroke-width:1.2;opacity:.8}

/* ---------------------------------------------------------------- screens */
.screen{position:absolute;inset:0;display:none}
.screen.is-active{display:grid}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The wordmark lifts without fading: text first painted at opacity 0 never counts as the page's largest paint. */
@keyframes lift{from{transform:translateY(14px)}to{transform:none}}

.title-screen{place-items:center;padding:24px;overflow:auto}
.title-stack{display:grid;justify-items:center;gap:16px;text-align:center;max-width:560px}
/* The rest of the title needs about 600px of height; on a shorter window the art gives way first, down to 120px, so the buttons stay in view. */
.title-art{width:min(58vw,290px);width:min(58vw,290px,max(120px,calc(100dvh - 600px)));filter:drop-shadow(0 34px 60px rgba(0,0,0,.65));animation:rise 1s var(--ease-out) both}
.title-art .door{transform-box:fill-box;transform-origin:center;animation:idle-door 16s ease-in-out infinite}
@keyframes idle-door{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}
.wordmark{margin:0;font:400 clamp(52px,12vw,104px)/.9 var(--f-display);letter-spacing:.14em;padding-left:.14em;
  text-shadow:0 0 50px rgba(218,181,108,.2);animation:lift 1s .1s var(--ease-out) both}
.tagline{margin:0;color:var(--text-2);font-size:clamp(15px,2.3vw,18px);max-width:34ch;text-wrap:balance;animation:rise 1s .2s var(--ease-out) both}
.title-actions{display:grid;gap:10px;width:min(100%,330px);margin-top:8px;animation:rise 1s .3s var(--ease-out) both}
.title-actions .btn{width:100%}
.title-tools{display:flex;gap:4px;animation:rise 1s .4s var(--ease-out) both}
.title-note{margin:0;max-width:34ch;color:var(--text-2);font-size:14px;text-wrap:balance}
/* Tonight's rival. A choice is mint, never gold: gold belongs to Loot and the one primary action. */
.rival-pick{display:grid;justify-items:center;gap:10px;width:min(100%,380px);margin-top:6px;animation:rise 1s .25s var(--ease-out) both}
.rival-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;width:100%}
.rival-id{display:grid;gap:5px;min-height:64px;align-content:center}
.rival-name{font:400 clamp(22px,4.2vw,28px)/1.05 var(--f-display);letter-spacing:.03em;text-wrap:balance}
.rival-line{color:var(--text-2);font-size:14px;line-height:1.35;text-wrap:balance}
.icon-flip svg{transform:scaleX(-1)}
/* Arrows point the way the page reads. */
:root[dir="rtl"] .icon-dir svg{transform:scaleX(-1)}
:root[dir="rtl"] .icon-flip svg{transform:none}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:var(--r);box-shadow:0 0 0 1px var(--line) inset}
.level{min-height:40px;padding:0 6px;border-radius:var(--r);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);transition:transform .15s var(--ease-out),color .2s,box-shadow .2s,background .2s}
.level:hover{color:var(--text)}
.level[aria-pressed="true"]{color:var(--mint);background:rgba(143,210,206,.07);box-shadow:0 0 0 1px var(--mint-2) inset}
.level-hint{margin:0;min-height:1.4em;color:var(--text-3);font-size:13px}

/* ------------------------------------------------------------------ table */
/* On a short screen the table scrolls instead of crushing the vaults, and the
   dock with the hand and Seal stays pinned to the bottom edge. */
.table-screen{grid-template-rows:auto auto minmax(132px,1fr) auto auto;width:100%;max-width:1180px;margin:0 auto;gap:var(--gap);
  overflow-y:auto;overscroll-behavior:contain;
  padding:max(6px,env(safe-area-inset-top)) clamp(8px,2.4vw,28px) max(10px,env(safe-area-inset-bottom))}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hud-tools{display:flex;justify-content:flex-end;gap:2px}
.night{display:grid;justify-items:center;gap:7px}
.night-label{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.night-label.final{color:var(--heat)}
.pips{display:flex;gap:6px}
.pip{width:20px;height:4px;background:var(--line);border-radius:1px}
.pip.done{background:var(--brass-2)}.pip.now{background:var(--mint);box-shadow:0 0 10px var(--mint-glow)}

.strip{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px}
.who{display:grid;gap:6px}
.who-name{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.pile{display:flex;align-items:flex-end;gap:10px}
.pile-coins{position:relative;width:40px;height:48px}
.pile-coins .coin{position:absolute;inset-inline-start:4px;width:32px;bottom:calc(var(--i) * 4px)}
.pile-total{font:700 clamp(30px,4.6vw,44px)/1 var(--f-num);color:var(--brass);text-shadow:0 0 26px var(--brass-glow);font-variant-numeric:tabular-nums}
.pile-rival .pile-total{color:var(--danger-2);text-shadow:none}
.pile-total small{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--text-3);margin-top:4px}
.pile.bump .pile-total{animation:bump .55s var(--ease-slam)}
@keyframes bump{40%{transform:scale(1.28)}}

.vaults{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:var(--gap);min-height:0}
.vault{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:4px;min-height:0;padding:6px;border-radius:4px;
  background:linear-gradient(180deg,rgba(27,36,48,.55),rgba(16,21,29,.15));box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .25s,background .25s}
.vault-lane{display:flex;align-items:center;justify-content:center;gap:6px;min-height:68px}
.vault-power{font:700 30px/1 var(--f-num);color:var(--text);min-width:1.5em;text-align:center;font-variant-numeric:tabular-nums}
.vault-power.zero{opacity:.45}
.vault-power.empty{visibility:hidden}
.vault-body{position:relative;display:grid;place-items:end center;min-height:0;overflow:hidden}
.vault-body svg{max-height:100%;max-width:88%;width:auto;height:100%}
.vault-plate{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:grid;justify-items:center;gap:3px;
  padding:6px 10px 5px;background:rgba(9,13,19,.88);box-shadow:0 0 0 1px var(--brass-2) inset;border-radius:2px;white-space:nowrap}
.vault-name{font:400 clamp(14px,1.7vw,19px)/1 var(--f-display);letter-spacing:.04em}
.vault-reward{display:flex;align-items:center;gap:5px;font:600 12px/1 var(--f-mono);color:var(--brass)}
.vault-reward .coin{width:15px}
.vault .door{transform-box:fill-box;transform-origin:center;transition:transform 1s var(--ease-out)}
.vault.is-target{cursor:pointer;box-shadow:0 0 0 1px var(--mint-2) inset;animation:breathe 1.8s ease-in-out infinite}
.vault.is-target:hover,.vault.is-target:focus-visible{background:linear-gradient(180deg,rgba(143,210,206,.12),rgba(16,21,29,.15))}
/* With a crew picked, keys 1 to 3 send it; the badge says which key is which. */
.vault-key{display:none;position:absolute;top:6px;inset-inline-start:6px;z-index:2;min-width:20px;padding:4px 5px;border-radius:2px;
  font:500 11px/1 var(--f-mono);text-align:center;color:var(--mint);background:rgba(9,13,19,.88);box-shadow:0 0 0 1px var(--mint-2) inset}
@media (hover:hover) and (pointer:fine){.vault.is-target .vault-key{display:block}}
@keyframes breathe{50%{box-shadow:0 0 0 1px var(--mint) inset,0 0 30px -8px var(--mint-glow)}}
.vault.is-open .door{transform:rotate(-80deg) scale(.94)}
.vault.won-you{box-shadow:0 0 0 1px var(--brass) inset,0 0 44px -12px var(--brass-glow)}
.vault.won-you .vault-body::after{content:"";position:absolute;inset:auto 10% 0;height:75%;pointer-events:none;
  background:radial-gradient(50% 65% at 50% 100%,rgba(218,181,108,.55),transparent 72%);animation:rise .8s var(--ease-out) both}
.vault.won-rival{box-shadow:0 0 0 1px rgba(228,87,75,.65) inset}
.vault-result{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;display:flex;gap:6px;align-items:center;white-space:nowrap;
  font:600 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:2px;background:rgba(9,13,19,.92);opacity:0;pointer-events:none}
.vault.show-result .vault-result{opacity:1;animation:pop .35s var(--ease-slam)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.6)}}
.vault.won-you .vault-result{color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.vault.won-rival .vault-result{color:var(--danger-2);box-shadow:0 0 0 1px rgba(228,87,75,.7) inset}
.vault.tie .vault-result{color:var(--text-2);box-shadow:0 0 0 1px var(--line-2) inset}

.token{position:relative;width:52px;height:64px;border-radius:2px;overflow:hidden;flex:none;
  background:linear-gradient(180deg,#1f2b38,#121a23);box-shadow:0 0 0 1px var(--line-2) inset;animation:drop .45s var(--ease-slam) both}
.token .crew-art{position:absolute;inset:4px 4px 17px}
.token-power{position:absolute;left:0;right:0;bottom:0;height:17px;font:700 14px/17px var(--f-num);text-align:center;background:rgba(9,13,19,.9)}
.token-you{box-shadow:0 0 0 1px var(--mint-2) inset}
.token-rival{box-shadow:0 0 0 1px rgba(228,87,75,.6) inset}
.token.boosted .token-power{color:var(--heat)}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.85)}}

.meters{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.meter{display:grid;gap:6px;justify-items:end}
.meter-head{display:flex;align-items:center;gap:7px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.meter-value{font:700 20px/1 var(--f-num);letter-spacing:0;font-variant-numeric:tabular-nums}
.m-energy .meter-head{color:var(--mint)}
.m-heat .meter-head{color:var(--heat)}
.e-pips{display:flex;gap:5px}
.e-pip{width:13px;height:13px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--line-2)}
.e-pip.on{background:var(--mint)}.e-pip.spent{background:rgba(143,210,206,.28)}
.segs{display:grid;grid-template-columns:repeat(6,14px);gap:3px}
.seg{height:10px;background:var(--line);border-radius:1px;transition:background .3s}
.seg.on{background:var(--heat)}.seg.on.hot{background:var(--danger)}
.seg.preview{background:repeating-linear-gradient(90deg,var(--heat) 0 3px,transparent 3px 5px)}
.seg.cooling{background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 5px)}
.segs.mini{grid-template-columns:repeat(6,8px);gap:2px}.segs.mini .seg{height:6px}
.heat-next{font:500 11px/1.2 var(--f-mono);color:var(--text-2)}

.dock{display:grid;gap:10px;position:sticky;bottom:0;z-index:5}
.hand{display:flex;gap:10px;justify-content:center;padding:18px 2px 4px}
.card{position:relative;width:clamp(100px,11vw,146px);aspect-ratio:5/7;border-radius:4px;flex:none;text-align:start;overflow:hidden;
  background:linear-gradient(180deg,#1f2b38,#121a23);box-shadow:0 0 0 1px var(--line-2) inset,0 12px 26px -14px #000;
  transition:transform .22s var(--ease-out),box-shadow .22s,opacity .22s,filter .22s}
.card-portrait{position:absolute;inset:0 0 30% 0;background:radial-gradient(90% 80% at 50% 32%,#2c3d4f,#121a23 76%)}
.card-portrait .crew-art{position:absolute;inset:16% 8% 0}
.card-cost,.card-power{position:absolute;top:6px;z-index:1;display:flex;align-items:center;gap:2px;height:24px;padding:0 6px;
  font:700 16px/1 var(--f-num);border-radius:2px;background:rgba(9,13,19,.88)}
.card-cost{inset-inline-start:6px;color:var(--mint);box-shadow:0 0 0 1px var(--mint-2) inset}
.card-cost .icon{font-size:11px}
.card-power{inset-inline-end:6px;color:var(--text)}
.card-text{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 9px;background:linear-gradient(180deg,rgba(9,13,19,0),rgba(9,13,19,.94) 34%)}
.card-name{display:block;font:600 12px/1.15 var(--f-body)}
.card-line{display:block;margin-top:3px;font:italic 400 11px/1.4 var(--f-body);color:var(--text-3)}
.card-assigned{display:none;position:absolute;left:6px;right:6px;top:36px;z-index:2;justify-content:center;padding:4px;border-radius:2px;
  font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-0);background:var(--mint)}
.card:hover{transform:translateY(-6px)}
.card.is-selected{transform:translateY(-16px);box-shadow:0 0 0 2px var(--mint) inset,0 22px 44px -18px var(--mint-glow)}
.card.is-staged{opacity:.6}.card.is-staged .card-assigned{display:flex}.card.is-staged .card-line{visibility:hidden}
.card.is-poor{filter:saturate(.25) brightness(.72)}
.card.is-poor .card-cost{color:var(--danger-2);box-shadow:0 0 0 1px rgba(228,87,75,.6) inset}

.controls{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px}
.boost-btn{min-height:var(--tap);padding:6px 14px;display:flex;align-items:center;gap:10px;border-radius:var(--r);text-align:start;box-shadow:0 0 0 1px var(--line-2) inset;transition:transform .15s var(--ease-out),box-shadow .2s,background .2s}
.boost-btn .icon{font-size:20px;color:var(--heat)}
.boost-btn b{display:block;font:600 14px/1.1 var(--f-body)}
.boost-btn small{display:block;font:500 11px/1.25 var(--f-mono);color:var(--text-3)}
.boost-btn[aria-pressed="true"]{background:rgba(229,155,85,.1);box-shadow:0 0 0 1px var(--heat) inset,0 0 26px -8px rgba(229,155,85,.55)}
.boost-btn[aria-pressed="true"] small{color:var(--heat)}
.boost-btn[disabled]{opacity:.45;cursor:not-allowed}
.status{font:500 13px/1.3 var(--f-body);color:var(--text-2);text-align:center}
.status.warn{color:var(--danger-2)}
.seal{min-width:200px}

/* The one break in the system: the plan is sealed with a stamp that crosses the board. */
.stamp{position:absolute;left:50%;top:47%;z-index:20;pointer-events:none;opacity:0;white-space:nowrap;
  font:700 clamp(40px,9vw,96px)/1 var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:var(--danger);
  padding:.1em .38em;border:clamp(4px,.7vw,7px) solid var(--danger);border-radius:6px;transform:translate(-50%,-50%) rotate(-9deg)}
.table-screen.is-sealed .stamp{animation:slam .5s var(--ease-slam) forwards}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(2.3)}60%{opacity:.92}100%{opacity:.88;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}
.table-screen.is-revealing .stamp{animation:unseal .4s ease-in forwards}
@keyframes unseal{from{opacity:.88;transform:translate(-50%,-50%) rotate(-9deg)}to{opacity:0;transform:translate(-50%,-62%) rotate(-3deg) scale(.9)}}
.table-screen.is-sealed .hand,.table-screen.is-revealing .hand{pointer-events:none}
.table-screen.is-sealed .card,.table-screen.is-revealing .card{opacity:.35;transform:none}
.skip{min-width:120px}
.fly-coin{position:fixed;z-index:30;width:26px;pointer-events:none;left:0;top:0}
.fly-coin .coin{width:100%}

/* ----------------------------------------------------------------- result */
.result-screen{place-items:center;padding:20px;z-index:40;overflow-y:auto;overscroll-behavior:contain;background:rgba(9,13,19,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.result-panel{width:min(100%,540px);display:grid;gap:18px;padding:30px 24px;text-align:center;border-radius:6px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));box-shadow:0 0 0 1px var(--brass-2) inset,0 40px 90px -30px #000;animation:rise .6s var(--ease-out) both}
.result-title{margin:0;font:400 clamp(34px,7vw,54px)/1.05 var(--f-display)}
.result-score{font:700 clamp(40px,9vw,66px)/1 var(--f-num);color:var(--brass);text-shadow:0 0 30px var(--brass-glow)}
.nights{display:grid;grid-template-columns:auto repeat(6,1fr);gap:6px}
.night-cell{display:grid;gap:4px;padding:8px 2px;border-radius:2px;background:var(--ink-1);box-shadow:0 0 0 1px var(--line) inset;font:700 14px/1 var(--f-num)}
.night-cell .n{font:500 11px/1 var(--f-mono);color:var(--text-3)}
.night-cell .mine{color:var(--brass)}.night-cell .theirs{color:var(--danger-2)}
.night-legend{background:none;box-shadow:none;padding-inline:0 2px;justify-items:end}
/* A signed number reads left to right in every language: +3, never 3+ in Arabic. */
.night-cell:not(.night-legend) :is(.mine,.theirs){direction:ltr;unicode-bidi:isolate}
.night-legend .mine,.night-legend .theirs{font:500 11px/14px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.result-actions{display:grid;gap:10px}

/* ------------------------------------------------------------- overlays */
.sheet{width:min(92vw,560px);border:0;padding:0;color:var(--text);background:var(--ink-2);border-radius:6px;box-shadow:0 0 0 1px var(--line-2) inset,0 40px 90px -20px #000}
.sheet::backdrop{background:rgba(5,8,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding-block:16px 0;padding-inline:24px 12px}
.sheet-title{margin:0;font:400 30px/1.1 var(--f-display)}
.sheet ol{margin:0;padding-block:14px 26px;padding-inline:48px 28px;display:grid;gap:12px;color:var(--text-2);font-size:15px}
.lang-list{display:grid;gap:10px;padding-block:16px 24px;padding-inline:24px}
.lang-option[aria-current="true"]{color:var(--mint);box-shadow:0 0 0 1px var(--mint-2) inset}
.sheet li::marker{font:700 15px var(--f-num);color:var(--brass)}
.coach{position:fixed;z-index:35;max-width:250px;padding:10px 12px;border-radius:4px;background:var(--mint);color:var(--ink-0);
  font:600 13px/1.35 var(--f-body);box-shadow:0 14px 30px -10px rgba(0,0,0,.7);animation:rise .35s var(--ease-out) both;pointer-events:none}

/* ------------------------------------------------------------------ phone */
@media (max-width:720px){
  /* The vault row keeps room for a two-line nameplate over the lanes; the table scrolls under the sticky dock instead. */
  .table-screen{gap:6px;padding-inline:8px;grid-template-rows:auto auto minmax(160px,1fr) auto auto}
  .hud .icon-btn{width:40px;height:40px}
  .vaults{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .vault{padding:4px}
  .vault-lane{min-height:42px;gap:3px;flex-wrap:wrap}
  .vault-power{font-size:19px}
  .vault-plate{padding:4px 5px;bottom:3px;white-space:normal;width:94%;text-align:center}
  .vault-name{font-size:12px;line-height:1.05}
  /* A result tag wraps inside its own vault rather than running into the next one. */
  .vault-result{white-space:normal;width:max-content;max-width:100%;justify-content:center;text-align:center;letter-spacing:.04em;padding:5px 6px}
  .token{width:28px;height:36px}.token .crew-art{inset:2px 2px 11px}.token-power{height:12px;font-size:11px;line-height:12px}
  .strip{min-height:42px}
  .pile-coins{width:30px;height:38px}.pile-coins .coin{width:24px;bottom:calc(var(--i) * 3px)}
  .pile-total{font-size:28px}
  .meters{gap:12px}.segs{grid-template-columns:repeat(6,9px)}
  .hand{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 2px 6px;scrollbar-width:none}
  .hand::-webkit-scrollbar{display:none}
  /* Size cards so part of the next one always shows past the edge of the hand. */
  .card{width:min(92px,calc((100vw - 48px) / 3.35));scroll-snap-align:start}.card-line{display:none}.card:hover{transform:none}
  .controls{grid-template-columns:1fr auto;grid-template-areas:"boost clear" "status status" "seal seal"}
  .boost-btn{grid-area:boost}.clear,.skip{grid-area:clear}.skip{min-width:0}.status{grid-area:status}.seal{grid-area:seal;width:100%}
}
@media (max-height:760px) and (min-width:721px){.card{width:104px}.vault-lane{min-height:56px}.token{width:44px;height:54px}.hand{padding-top:12px}}
/* Short screens: a phone on its side, or a laptop at 200% zoom. */
@media (max-height:520px){
  .table-screen{gap:5px;padding-top:max(4px,env(safe-area-inset-top))}
  .dock{gap:6px;background:linear-gradient(180deg,rgba(9,13,19,0),var(--ink-0) 16px)}
  .hud .icon-btn{width:36px;height:36px}
  .strip{min-height:36px}
  .pile-coins{width:28px;height:34px}.pile-coins .coin{width:22px;bottom:calc(var(--i) * 3px)}
  .pile-total{font-size:24px}
  .vault-lane{min-height:34px}
  .token{width:26px;height:32px}.token .crew-art{inset:2px 2px 11px}.token-power{height:11px;font-size:11px;line-height:11px}
  .hand{padding:8px 2px 2px}
  /* The title drops its art and tightens, so the rival picker and the first button are on the first screen. */
  .title-screen{padding-block:12px}.title-stack{gap:10px}.title-art{display:none}.wordmark{font-size:clamp(40px,13vh,104px)}
  .card{width:76px}.card-line{display:none}
  .result-screen{padding:10px}.result-panel{gap:10px;padding:16px 20px}.result-title{font-size:30px}.result-score{font-size:40px}
}
@media (max-height:520px) and (min-width:560px){
  .controls{grid-template-columns:auto 1fr auto auto;grid-template-areas:none}
  .boost-btn,.clear,.skip,.status,.seal{grid-area:auto}
  .seal{width:auto;min-width:170px}
}
/* The narrowest phones: the night label leaves the centre rather than push the page wide. */
@media (max-width:420px){.hud{grid-template-columns:auto minmax(0,1fr) auto}.pip{width:14px}}

/* Arabic joins letter to letter, so it takes no tracking and no synthesized italic. */
:lang(ar){letter-spacing:0!important}
:lang(ar) .card-line{font-style:normal}
/* Arabic letterforms read smaller than Latin at the same size, so small labels step up one size. */
:lang(ar) :is(.label,.level,.meter-head,.heat-next,.pile-total small,.boost-btn small,.card-assigned,.night-legend span,.card-line){font-size:12px}
:lang(ar) :is(.night-label,.who-name,.vault-result,.card-name){font-size:13px}

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