/* ═══════════════════════════════════════════════════════════════════════
   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}
/* the still is Stone at noon (#5134), the picture the live town fades in over */
#still{position:fixed;inset:0;z-index:1;background:#6f7378 center/cover no-repeat url('/assets/onboarding/stone-noon-wide.jpg');transition:opacity 1.2s ease}
@media (max-aspect-ratio:3/4){ #still{background-image:url('/assets/onboarding/stone-noon-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}
/* Wray, 2026-11-09: no red ribbon on the sign-in and log-in sheets; the title stands as plain lettering.
   Scoped to the sheets, so the door's own ribbons (Your Look, Your House) are untouched. */
.fd-sheet .head .k-ribbon{border-image:none;padding:2px 0 0;font-size:24px;color:#f6e6c4;text-shadow:0 2px 0 #1b140c}
.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))}
/* STONE BY DAY (#5134, GF8): over the town at noon the wash is lighter, so noon reads as noon; it stays dark enough behind the title to read */
body.fd-day .fd-shade{background:linear-gradient(to bottom,rgba(4,6,10,0),rgba(4,6,10,.42) 60%,rgba(4,6,10,.62))}
body.fd-day .fd-shade.top{background:radial-gradient(ellipse 52% 46% at 50% 32%,rgba(4,6,10,.62),rgba(4,6,10,.3) 58%,rgba(4,6,10,0) 86%),linear-gradient(to bottom,rgba(4,6,10,.22),rgba(4,6,10,0))}
body.fd-day .fd-legal a{color:#e9e1cf;text-shadow:1px 0 0 #070a10,-1px 0 0 #070a10,0 1px 0 #070a10,0 -1px 0 #070a10,0 0 8px #000}
/* a landscape phone has no room for the chip between the line and the doors (it sat under PLAY) */
@media (max-height:430px){ .fd-title .chip{display:none} }
.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}
}
/* LANDSCAPE PHONE (#4479, the house step in the dressing room): the house panel on the left, short, and PLAY on
   the right, so neither covers the other or the cat in the middle. 844x390 to 932x430 is the target. */
@media (min-width:761px) and (max-height:520px){
  .fd-panel{top:calc(52px + env(safe-area-inset-top,0px));gap:6px;padding-bottom:8px}
  .fd-panel.l{width:300px;max-height:calc(100vh - 62px);overflow:auto}
  /* THE LOOK STEP (phone-scale.js lays a phone out 500 tall, and about 430 under a browser's bar): the
     panel keeps to the screen, tighter, and scrolls inside if it must. PATTERN ran off the foot with no way to it. */
  .fd-panel.r{max-height:calc(100vh - 62px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;gap:5px}
  .fd-panel.r .fur{gap:4px;margin-top:2px}
  .fd-sw button{height:30px}
  .fd-rgb input{height:15px}
  .fd-masks button{height:32px}
  .fd-panel .rib{display:none}
  .fd-house{min-height:44px;padding:3px 2px}.fd-house img{width:22px;height:26px}
  .fd-det img{width:84px}.fd-det p{font-size:14px}
  .fd-go{left:auto;right:16px;margin:0;width:min(360px,calc(100vw - 340px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  /* PLAY stands in the room the panel leaves, in the middle of what is left of the screen */
  .fd-edit:has(> .fd-panel.r) > .fd-go{left:16px;right:332px;margin:0 auto}
  .fd-go .warn{font-size:14px}
}
/* A KNOWN DEVICE'S WAY IN (2026-10-30): a title card on black, then straight to the world's Home */
.fd-intro{position:fixed;inset:0;z-index:80;background:#05070b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:fdIntro 1.7s ease both}
.fd-intro-title{font-family:'New Rocker',Georgia,serif;font-size:clamp(34px,6vw,64px);color:#f2d38f;text-shadow:0 3px 0 #000}
.fd-intro-who{font-family:var(--f-px);font-size:10px;letter-spacing:2px;color:#c9b88f;text-transform:uppercase}
.fd-intro-other{margin-top:18px;font:16px VT323,monospace;color:#8f8574;background:none;border:0;text-decoration:underline;cursor:pointer}
@keyframes fdIntro{0%{opacity:0}18%{opacity:1}100%{opacity:1}}
/* ── a landscape phone (#4638): a sheet fits the screen. The sign-in sheet
   stood 496px tall on a 390px screen, its title above the top and its last
   line below the bottom with no way to reach them. Wider, so the lines run
   one each and COMING LATER is one row; tighter; and never taller than the
   screen (it scrolls inside if a longer sheet ever needs it). ───────────── */
@media (max-height:520px){
  .fd-sheet-veil{align-items:center;padding:6px 0}
  .fd-sheet{width:min(640px,calc(100% - 24px));max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0;gap:6px}
  .fd-sheet .head{margin:-8px 0 0}
  .fd-sheet .sub{font-size:18px;margin:0 6px}
  .fd-sheet .k-btn{padding-top:calc(3px * var(--kb) + 4px);padding-bottom:calc(5px * var(--kb) + 4px)}
  .fd-sheet .prov .t{gap:3px}
  .fd-sheet .prov .t small{font-size:16px}
  .fd-sheet .later{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fd-sheet .later .k-btn{min-height:36px;padding-left:10px;padding-right:6px;gap:8px}
  .fd-sheet .fd-note{font-size:16px}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }