/* ═══════════════════════════════════════════════════════════════════════
   THE FRONT DOOR (#3120, FPRD tasks/prd-front-door.md). A game's title
   screen, not a document: one dark world, painted on its own ground.

   Tokens are kit B's (world-hud-v2.css): the slate and gold ruled for the
   world's UI on 2026-09-24. Type is the locked bitmap pair (Press Start 2P,
   VT323) with the NotJam blackletter for display only. The chrome is nine-
   sliced from public/assets/ui/kitb at the chrome pixel.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'New Rocker'; src: url('/assets/fonts/NewRocker-Regular.ttf?v=2026-10-04a') format('truetype'); font-display: block; }
:root {
  color-scheme: dark;
  --black:#06080c; --well:#0d1219; --slate:#19212b; --slate-2:#222c38;
  --line:#2e3a49; --gold:#a28155; --gold-2:#caa982; --gold-hi:#e3c79a; --ink:#f0e2c6;
  --ink-slate:#d9cdb2; --dim:#9d8a6d; --mute:#8a98aa; --red:#a3343b;
  --f-px:'Press Start 2P',ui-monospace,monospace; --f-vt:'VT323',ui-monospace,monospace;
  --f-tome:'New Rocker','Press Start 2P',serif;
  --kw:1; --kb:2;
}
@media (min-width:1440px) and (min-height:810px){ :root{ --kw:2; } }
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--black);color:var(--ink);font-family:var(--f-vt);font-size:20px;line-height:1.25;-webkit-font-smoothing:none}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
[hidden]{display:none !important}

/* ── the engine's canvas and the DOM it insists on ───────────────────── */
#view{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
#ar-ui,#title,#notes,#hover,#bubbles,#grade,#loading,.hud{display:none !important}
#table{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
#still{position:fixed;inset:0;z-index:1;background:#0b1119 center/cover no-repeat url('/assets/onboarding/backdrop-1-wide.jpg');transition:opacity 1.2s ease}
@media (max-aspect-ratio:3/4){ #still{background-image:url('/assets/onboarding/backdrop-1-tall.jpg')} }
#still.gone{opacity:0;pointer-events:none}
#boot{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:11;display:flex;justify-content:center;align-items:center;gap:10px;font-family:var(--f-px);font-size:8px;letter-spacing:1px;color:var(--mute);pointer-events:none;transition:opacity .6s}
#boot i{display:block;width:120px;height:4px;background:var(--well);border:1px solid var(--line);position:relative}
#boot i b{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;transition:width .4s ease}
body.fd-live #boot{opacity:0}
body.fd-blur #view{filter:blur(5px) brightness(.5) saturate(.8)}
#view{transition:filter .9s ease}
.fd-preview-tag{display:none}
body.fd-preview .fd-preview-tag{display:block;position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));z-index:50;font-family:var(--f-px);font-size:8px;letter-spacing:1px;color:#1b1206;background:var(--gold-hi);padding:5px 7px 4px;pointer-events:none}
.fd-sound{position:fixed;right:12px;top:calc(8px + env(safe-area-inset-top,0px));z-index:30;min-height:36px;font-size:8px;padding:0 12px}
.fd-legal{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.fd-legal a{font-family:var(--f-vt);font-size:17px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.fd-cover{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .7s ease;pointer-events:none}
.fd-cover.on{opacity:1}
.fd-cover .px{font-size:10px;color:var(--gold-hi);letter-spacing:2px}

/* ── kit B, nine-sliced at the chrome pixel ──────────────────────────── */
.k-win,.k-btn,.k-ribbon,.k-well,.k-plate,.k-card{border:0;border-style:solid;image-rendering:pixelated}
.k-win{border-image:url(/assets/ui/kitb/slate-window.png) 18 fill / calc(18px * var(--kw)) stretch;padding:calc(18px * var(--kw))}
.k-well{border-image:url(/assets/ui/kitb/well.png) 10 fill / calc(10px * var(--kw)) stretch;padding:calc(10px * var(--kw))}
.k-plate{border-image:url(/assets/ui/kitb/plate.png) 6 10 6 10 fill / calc(6px * var(--kb)) calc(10px * var(--kb)) stretch;padding:calc(6px * var(--kb)) calc(10px * var(--kb))}
.k-card{border-image:url(/assets/ui/kitb/card.png) 5 fill / calc(5px * var(--kb)) stretch;padding:calc(5px * var(--kb));color:#3b2a18}
.k-btn{border-image:url(/assets/ui/kitb/btn.png) 3 3 5 3 fill / calc(3px * var(--kb)) calc(3px * var(--kb)) calc(5px * var(--kb)) calc(3px * var(--kb)) stretch;
  padding:calc(3px * var(--kb) + 8px) calc(3px * var(--kb) + 14px) calc(5px * var(--kb) + 8px);
  font-family:var(--f-px);font-size:10px;letter-spacing:1px;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-shadow:0 2px 0 rgba(0,0,0,.45);transition:transform .08s ease,filter .12s ease}
.k-btn.gold{border-image-source:url(/assets/ui/kitb/btngold.png);color:#3a2208;text-shadow:0 1px 0 rgba(255,236,190,.5)}
.k-btn:hover{filter:brightness(1.12)}
.k-btn:active{transform:translateY(2px)}
.k-btn[disabled]{filter:grayscale(.8) brightness(.65);cursor:default}
.k-btn.big{font-size:13px;padding-top:calc(3px * var(--kb) + 12px);padding-bottom:calc(5px * var(--kb) + 12px);min-height:56px}
.k-ribbon{border-image:url(/assets/ui/kitb/title.png) 2 24 9 24 fill / calc(2px * var(--kb)) calc(24px * var(--kb)) calc(9px * var(--kb)) calc(24px * var(--kb)) stretch;
  padding:calc(2px * var(--kb) + 5px) calc(24px * var(--kb)) calc(9px * var(--kb) + 3px);font-family:var(--f-tome);font-size:16px;color:#fbe9c4;text-shadow:0 2px 0 #5a1618;display:inline-block;white-space:nowrap}
.px{font-family:var(--f-px);letter-spacing:1px}
.tome{font-family:var(--f-tome);font-weight:normal}

/* ── the doors sheet, the key, Nerm, toasts ──────────────────────────── */
.fd-sheet-veil{position:fixed;inset:0;background:rgba(4,6,10,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20;pointer-events:auto;animation:fdIn .25s ease both}
@media (min-width:700px){ .fd-sheet-veil{align-items:center} }
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.fd-sheet{width:min(460px,100%);margin:0 0 max(10px,env(safe-area-inset-bottom,0px));position:relative;display:flex;flex-direction:column;gap:10px;animation:fdUp .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes fdUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.fd-sheet .head{display:flex;justify-content:center;margin:-4px 0 4px}
.fd-sheet .sub{font-size:20px;color:var(--ink-slate);text-align:center;margin:0 6px 4px;text-wrap:balance}
.fd-sheet .x{position:absolute;right:calc(10px * var(--kw));top:calc(10px * var(--kw));width:34px;height:36px;background:url(/assets/ui/kitb/close.png) center/contain no-repeat;image-rendering:pixelated}
.prov{display:flex;align-items:center;gap:12px;width:100%;justify-content:flex-start;text-align:left}
.prov .ic,.later .ic{width:27px;height:27px;flex:none;image-rendering:pixelated;background-size:contain;display:inline-block}
.prov .t{display:flex;flex-direction:column;gap:5px;flex:1}
.prov .t small{font-family:var(--f-vt);font-size:17px;letter-spacing:0;color:var(--mute);text-shadow:none}
.k-btn.gold .t small{color:#6b4a1a}
.later{display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:.55}
.later .k-btn{font-size:8px;min-height:40px;justify-content:flex-start;padding-left:14px}
.later .k-btn .ic{width:18px;height:18px}
.fd-div{display:flex;align-items:center;gap:10px;color:var(--dim);font-family:var(--f-px);font-size:8px;letter-spacing:1px}
.fd-div::before,.fd-div::after{content:"";flex:1;height:2px;background:var(--line)}
.fd-note{font-size:18px;color:var(--mute);text-align:center;margin:0 4px;text-wrap:balance}
.fd-field{width:100%;background:var(--well);border:2px solid var(--line);color:var(--ink);font:22px var(--f-vt);padding:10px 12px;min-height:46px}
.keybox{font-family:var(--f-px);font-size:13px;letter-spacing:2px;color:var(--gold-hi);text-align:center;padding:14px 8px;word-break:break-all;user-select:all}
.fd-nerm{position:absolute;display:flex;gap:10px;align-items:flex-start;max-width:min(520px,calc(100vw - 32px));pointer-events:none;animation:fdIn .3s ease both;z-index:5}
.fd-nerm img{width:44px;height:44px;flex:none;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(120,190,255,.6))}
.fd-nerm .k-card{font-size:20px;color:#2e2112;line-height:1.15;padding:8px 12px}
.fd-nerm .k-card b{font-family:var(--f-px);font-size:8px;display:block;margin-bottom:4px;color:#6d4f24;font-weight:normal;letter-spacing:1px}
.fd-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;font-size:20px;pointer-events:none;animation:fdUp .25s ease both;white-space:nowrap}

/* ── the title ───────────────────────────────────────────────────────── */
.fd-title{position:absolute;left:0;right:0;top:17%;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;text-align:center;padding:0 16px}
.fd-title .name{margin:0;font-family:var(--f-tome);font-weight:normal;font-size:min(88px,7.4vw);line-height:1;color:#f4ead2;letter-spacing:1px;text-wrap:balance;animation:fdRise 1s ease both;
  text-shadow:3px 0 0 #070a10,-3px 0 0 #070a10,0 3px 0 #070a10,0 -3px 0 #070a10,3px 3px 0 #070a10,-3px 3px 0 #070a10,3px -3px 0 #070a10,-3px -3px 0 #070a10,0 7px 0 #070a10,0 0 40px rgba(0,0,0,.9)}
.fd-title .sigils{display:flex;gap:10px;align-items:flex-end;animation:fdRise 1s .15s ease both}
.fd-title .sigils img{width:38px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(0,0,0,.9))}
.fd-title .line{margin:0;font-size:25px;color:#f2eee4;animation:fdRise 1s .3s ease both;max-width:44ch;text-wrap:balance;
  text-shadow:2px 0 0 #070a10,-2px 0 0 #070a10,0 2px 0 #070a10,0 -2px 0 #070a10,2px 2px 0 #070a10,-2px 2px 0 #070a10,2px -2px 0 #070a10,-2px -2px 0 #070a10,0 0 14px #000}
.fd-title .chip{display:flex;gap:12px;align-items:center;justify-content:center;animation:fdRise 1s .45s ease both;background:rgba(6,9,14,.72);padding:7px 12px 6px;border:1px solid rgba(227,199,154,.25)}
.fd-title .chip span{font-family:var(--f-px);font-size:8px;letter-spacing:2px;color:var(--gold-hi)}
.fd-title .chip .sep{color:var(--dim)}
.fd-title .live{color:#e8eef8 !important}
.fd-title .live i{display:inline-block;width:7px;height:7px;background:#e04848;box-shadow:0 0 8px #e04848;margin-right:8px;vertical-align:1px}
.fd-title .live b{font-weight:normal}
@keyframes fdRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fd-shade{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,rgba(4,6,10,0),rgba(4,6,10,.7) 60%,rgba(4,6,10,.88));pointer-events:none}
.fd-shade.top{top:0;bottom:auto;height:62%;background:radial-gradient(ellipse 64% 62% at 50% 36%,rgba(4,6,10,.84),rgba(4,6,10,.55) 55%,rgba(4,6,10,0) 82%),linear-gradient(to bottom,rgba(4,6,10,.55),rgba(4,6,10,0))}
.fd-doors{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(26px + env(safe-area-inset-bottom,0px));width:min(520px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.fd-doors .row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.fd-doors .more{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.fd-doors .more button{font-family:var(--f-px);font-size:8px;letter-spacing:1px;color:var(--mute);padding:10px 4px;text-decoration:underline;text-underline-offset:4px}
.fd-back{display:flex;align-items:center;gap:14px}
.fd-back .who{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fd-back .who .tome{font-size:32px;line-height:1;color:var(--gold-hi);overflow:hidden;text-overflow:ellipsis}
.fd-back .who span{font-size:19px;color:var(--ink-slate)}
.fd-back .sig{width:54px;height:66px;object-fit:contain;flex:none;filter:drop-shadow(0 0 10px rgba(255,210,90,.35))}

/* ── the pack and the card ───────────────────────────────────────────── */
.fd-hit{position:absolute;left:calc(var(--cx) - var(--hw) / 2);top:calc(var(--cy) - var(--hh) / 2);width:var(--hw);height:var(--hh);pointer-events:auto;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.fd-top{position:absolute;left:0;right:0;margin:0 auto;top:var(--labelY);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:min(600px,calc(100vw - 32px));text-align:center}
.fd-top .hint{font-family:var(--f-px);font-size:10px;letter-spacing:2px;color:var(--gold-hi);text-shadow:0 2px 0 #000}
.fd-top .hint.pulse{animation:fdPulse 1.6s ease-in-out infinite}
@keyframes fdPulse{50%{opacity:.45}}
.fd-top .big{font-family:var(--f-px);font-size:12px;letter-spacing:2px;color:var(--fc,#e3c79a);text-shadow:0 2px 0 #000,0 0 14px var(--fc,#e3c79a)}
.fd-under{position:absolute;left:0;right:0;margin:0 auto;top:var(--underY);width:min(460px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;pointer-events:auto;text-align:center}
.fd-under .note{font-size:18px;color:var(--mute)}
.fd-corner{position:absolute;left:16px;top:calc(14px + env(safe-area-inset-top,0px));pointer-events:auto;min-height:40px;padding:0 16px}

/* ── the last touches (the editor, where the cat lands) ──────────────── */
.fd-edit{position:absolute;inset:0;pointer-events:none}
.fd-drag{position:absolute;left:30%;right:26%;top:10%;bottom:24%;pointer-events:auto;cursor:grab;touch-action:none}
.fd-panel{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:9px;pointer-events:auto;animation:fdUp .45s ease both}
.fd-panel.l{left:16px;width:392px}.fd-panel.r{right:16px;width:300px}
.fd-panel .rib{display:flex;justify-content:center;margin-bottom:2px}
.fd-hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fd-house{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:5px 2px;border:2px solid transparent;background:rgba(6,9,14,.4);color:var(--ink)}
.fd-house img{width:30px;height:36px;object-fit:contain}
.fd-house b{font-family:var(--f-px);font-size:7px;letter-spacing:0;font-weight:normal}
.fd-house[aria-pressed="true"]{border-color:var(--hc);background:rgba(20,16,10,.72);box-shadow:inset 0 0 18px -6px var(--hc)}
.fd-det{display:flex;gap:12px;align-items:flex-start}
.fd-det img{width:168px;height:auto;flex:none;border:1px solid rgba(0,0,0,.5);box-shadow:0 0 18px -6px var(--hc,#000);animation:fdCard .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fdCard{from{transform:rotate(-4deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.fd-det p{margin:0;font-size:18px;line-height:1.1;color:var(--ink-slate)}
.fd-det p b{font-family:var(--f-px);font-size:8px;font-weight:normal;color:var(--hc,#e3c79a);display:block;margin-bottom:6px;letter-spacing:1px;line-height:1.5}
.fd-lab{font-family:var(--f-px);font-size:8px;letter-spacing:1px;color:var(--gold-2);display:flex;justify-content:space-between}
.fd-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.fd-sw.e{grid-template-columns:repeat(4,1fr)}
.fd-sw button{height:36px;border:2px solid rgba(0,0,0,.5);padding:0}
.fd-sw button[aria-pressed="true"]{outline:2px solid var(--gold-hi);outline-offset:2px}
.fd-sw button canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.fd-panel .fur{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.fd-rgb{display:grid;grid-template-columns:12px 1fr 28px;gap:0 8px;align-items:center;font-family:var(--f-px);font-size:7px;color:var(--mute)}
.fd-rgb input{width:100%;height:18px;margin:0;accent-color:var(--gold-hi)}
.fd-rgb output{font-family:var(--f-vt);font-size:16px;color:var(--ink-slate);text-align:right}
.fd-lab output{font-family:var(--f-vt);font-size:16px;letter-spacing:0;color:var(--ink-slate)}
.fd-masks{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fd-masks button{font-family:var(--f-px);font-size:7px;letter-spacing:1px;height:28px;border:2px solid var(--line);color:var(--mute);background:var(--well)}
.fd-masks button[aria-pressed="true"]{border-color:var(--gold-hi);color:var(--gold-hi)}
.fd-chip{position:absolute;left:0;right:0;margin:0 auto;top:calc(52px + env(safe-area-inset-top,0px));width:max-content;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:10px;pointer-events:none;animation:fdUp .4s ease both}
.fd-chip img{width:18px;height:22px;object-fit:contain;flex:none}
.fd-chip span{font-family:var(--f-px);font-size:8px;letter-spacing:1px;color:var(--ink)}
.fd-go{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;pointer-events:auto;text-align:center}
.fd-go .warn{font-size:18px;color:var(--gold-hi);background:rgba(6,9,14,.72);padding:4px 10px;border:1px solid rgba(227,199,154,.3);text-wrap:balance}
.fd-go .msg{font-size:18px;color:#ffb3a8;text-shadow:0 1px 0 #000;min-height:0}
.fd-go .msg:empty{display:none}
.fd-tabs{display:none}

/* ── the flight ──────────────────────────────────────────────────────── */
.fd-skip{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:auto}
.fd-zone{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;text-align:center}
.fd-zone .tome{font-size:64px;line-height:1;color:var(--ink);text-shadow:0 3px 0 #000,0 0 24px rgba(120,160,255,.4);animation:fdZone 4.6s ease both}
.fd-zone .px{font-size:10px;color:var(--gold-hi);text-shadow:0 2px 0 #000;animation:fdZone 4.6s .2s ease both}
@keyframes fdZone{0%{opacity:0;letter-spacing:6px}18%{opacity:1;letter-spacing:1px}78%{opacity:1}100%{opacity:0}}

/* ── phone ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .fd-title{top:12%;gap:12px}.fd-title .name{font-size:clamp(40px,13vw,64px)}
  .fd-top .big{font-size:10px;letter-spacing:1px}.fd-top .hint{letter-spacing:1px}
  .fd-title .sigils{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.fd-title .sigils img{width:30px;height:36px}
  .fd-title .line{font-size:21px}
  .fd-title .chip{gap:8px;padding:6px 10px 5px}.fd-title .chip span{letter-spacing:1px}
  .fd-doors .row{grid-template-columns:1fr}
  .fd-panel{left:0 !important;right:0 !important;top:auto;bottom:0;width:auto !important;height:48%;padding-bottom:calc(128px + env(safe-area-inset-bottom,0px));display:none}
  .fd-edit[data-tab="house"] .fd-panel.l{display:flex}
  .fd-edit[data-tab="look"] .fd-panel.r{display:flex}.fd-edit[data-tab="look"] .fd-panel.r .fur{display:none}
  .fd-edit[data-tab="fur"] .fd-panel.r{display:flex}
  .fd-edit[data-tab="fur"] .fd-panel.r > .fd-lab,.fd-edit[data-tab="fur"] .fd-panel.r > .fd-sw{display:none}
  .fd-panel .rib{display:none}
  .fd-house{min-height:50px;padding:3px 2px}.fd-house img{width:24px;height:28px}
  .fd-det img{width:52px}.fd-det p{font-size:15px}
  .fd-tabs{display:flex;position:absolute;left:0;right:0;bottom:48%;justify-content:center;gap:4px;pointer-events:auto}
  .fd-tabs button{font-family:var(--f-px);font-size:9px;padding:10px 14px;background:#141a24;color:var(--mute);border:2px solid var(--line);border-bottom:0;min-height:40px}
  .fd-tabs button[aria-pressed="true"]{background:#2a2016;color:var(--gold-hi);border-color:var(--gold)}
  .fd-go{bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3}
  .fd-go .warn{font-size:16px}
  .fd-drag{left:8%;right:8%;top:8%;bottom:56%}
  .fd-zone .tome{font-size:48px}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }