/* Milestone 1 front door: landing, creator, journeys, profile and their dialogs. Everything is scoped under .fd (plus the
   :root-free token block on .fd itself), so no legacy screen can be touched. The tokens are the SceneRuntime ones
   (web/scene-runtime.css) so the front door and the origin rooms read as one game. */
main:has(.fd){position:fixed;inset:0;z-index:20;width:100%;max-width:none;height:100dvh;margin:0;padding:0;overflow:hidden;background:#0d0f0c}
body:has(.fd){overflow:hidden;background:#0d0f0c}
body:has(.fd)>footer{display:none}

.fd{--fd-night:#0d0f0c;--fd-ink:#171a16;--fd-panel:#171a16;--fd-raise:#22261f;--fd-paper:var(--sr-paper,#f5f0e4);--fd-line:#ffffff26;--fd-line2:#ffffff40;--fd-gold:var(--sr-gold,#e4bd68);--fd-gold-ink:#241b06;--fd-green:var(--sr-green,#3f7658);--fd-focus:var(--sr-focus,#80c8ec);--fd-text:#f4eee2;--fd-mut:#c3bcae;--fd-red:#e0342b;--fd-danger:#ff9b78;
  --fd-font:'Japa Body',system-ui,-apple-system,'Segoe UI',sans-serif;--fd-display:'Japa Display',ui-monospace,monospace;--fd-r:10px;
  position:relative;width:100%;height:100dvh;overflow:hidden;color:var(--fd-text);font:15px/1.45 var(--fd-font);background:var(--fd-night);-webkit-font-smoothing:antialiased}
.fd *,.fd *::before,.fd *::after{box-sizing:border-box}
.fd h1,.fd h2,.fd h3,.fd p,.fd ol,.fd ul{margin:0;padding:0;font:inherit;text-transform:none;letter-spacing:normal;text-shadow:none;list-style:none}
.fd a{color:inherit}
.fd footer,.fd header{max-width:none;margin:0;padding:0;text-align:left;font-size:inherit;color:inherit;position:static;z-index:auto}
.fd button{all:unset;box-sizing:border-box;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fd button[disabled]{cursor:default;opacity:.45}
.fd :focus-visible{outline:3px solid var(--fd-focus);outline-offset:3px;border-radius:4px}
.fd [data-focus]:focus{outline:none}
.fd .fd-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- buttons ---- */
.fd .fd-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:12px 22px;border-radius:var(--fd-r);border:1px solid var(--fd-line2);background:#ffffff0f;color:var(--fd-text);font:600 15px/1.2 var(--fd-font);text-align:center;transition:background .15s,border-color .15s,transform .1s}
.fd .fd-btn:hover:not([disabled]){background:#ffffff1c;border-color:#ffffff70}
.fd .fd-btn:active:not([disabled]){transform:translateY(1px)}
.fd .fd-btn small{font:400 12px/1.3 var(--fd-font);color:var(--fd-mut)}
.fd .fd-btn-primary{background:var(--fd-gold);border-color:var(--fd-gold);color:var(--fd-gold-ink);box-shadow:0 6px 24px #e4bd6840}
.fd .fd-btn-primary:hover:not([disabled]){background:#f0cc7e;border-color:#f0cc7e}
.fd .fd-btn-primary small{color:#4b3a12}
.fd .fd-btn-big{min-height:56px;font-size:17px;padding:14px 28px}
.fd .fd-btn-danger{border-color:#ff9b7860;color:var(--fd-danger)}
.fd .fd-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--fd-text);font:600 14px/1 var(--fd-font);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffffff55}
.fd .fd-link:hover{text-decoration-color:var(--fd-gold);color:#fff}

/* ---- the logo ---- */
.fd .fd-logo{display:inline-flex;align-items:baseline;gap:8px;line-height:1}
.fd .fd-logo-j{font:400 clamp(26px,3.2vw,38px)/1 var(--fd-display);color:#ffd23f;letter-spacing:.04em;text-shadow:0 3px 0 #8a2b1d,0 0 24px #ffb35a66}
.fd .fd-logo-t{font:400 clamp(14px,1.5vw,19px)/1 var(--fd-display);color:#f4eee2;letter-spacing:.06em}
.fd .fd-logo-t b{font-weight:400;color:#ff5a4d;font-size:1.95em;letter-spacing:.05em;text-shadow:0 2px 0 #5a1710,0 0 18px #ff5a4d55}

/* ---- landing ---- */
.fd-landing{background:#0a1226}
.fd .fd-hero{position:absolute;inset:0;overflow:hidden;background:#0a1226}
.fd .fd-hero-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.fd .fd-hero-tall{display:none}
.fd .fd-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,#0a1226ee 0%,#0a1226c0 26%,#0a122640 52%,transparent 66%),linear-gradient(0deg,#0a1226d0 0%,transparent 34%),linear-gradient(180deg,#0a122699 0%,transparent 16%)}
.fd .fd-top{position:absolute;z-index:3;left:clamp(18px,4vw,56px);top:clamp(16px,3.4vh,36px)}
.fd .fd-panel{position:absolute;z-index:3;right:clamp(22px,5vw,76px);bottom:clamp(40px,9vh,96px);width:min(560px,44vw);display:grid;gap:14px}
.fd .fd-eyebrow{font:600 12px/1.2 var(--fd-font);letter-spacing:.16em;text-transform:uppercase;color:var(--fd-gold)}
.fd .fd-panel h1{font:700 clamp(32px,3.9vw,54px)/1.06 var(--fd-font);letter-spacing:-.01em;color:#fff;text-shadow:0 2px 24px #000a}
.fd .fd-lede{font:400 clamp(15px,1.25vw,18px)/1.5 var(--fd-font);color:#e9e2d3;max-width:46ch;text-shadow:0 1px 12px #000c}
.fd .fd-notice{padding:8px 12px;border-left:3px solid var(--fd-gold);background:#0008;border-radius:6px;font-size:13px;color:var(--fd-mut)}
.fd .fd-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.fd .fd-actions .fd-btn{flex:1 1 200px}
.fd .fd-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:-6px}
.fd .fd-fine{font-size:12px;color:#d6cfbf;text-shadow:0 1px 8px #000c}
.fd .fd-legal{position:absolute;z-index:3;left:clamp(18px,4vw,56px);bottom:clamp(10px,2vh,18px);font-size:12px;color:#c9c2b2;text-shadow:0 1px 6px #000}
.fd .fd-legal a{color:inherit}
.fd .fd-resume{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:12px 16px 12px 12px;border-radius:14px;background:#171a16e6;border:1px solid var(--fd-gold);box-shadow:0 10px 36px #0009;transition:transform .12s,background .15s}
.fd .fd-resume:hover{background:#22261f}
.fd .fd-resume:active{transform:translateY(1px)}
.fd .fd-resume-face{display:block;width:56px;height:60px;border-radius:9px;overflow:hidden;background:#2b2f26;border:1px solid var(--fd-line2)}
.fd .fd-resume-face svg{display:block;width:100%;height:100%}
.fd .fd-resume-text{display:grid;gap:1px;min-width:0}
.fd .fd-resume-text small{font:600 11px/1.2 var(--fd-font);letter-spacing:.14em;text-transform:uppercase;color:var(--fd-gold)}
.fd .fd-resume-text strong{font:700 20px/1.2 var(--fd-font);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd .fd-resume-text em{font:400 13px/1.3 var(--fd-font);font-style:normal;color:var(--fd-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd .fd-resume-go{color:var(--fd-gold);font-size:18px;padding-right:4px}

/* the art moves only when it is allowed to */
.fd .fd-plane{animation:fd-fly 70s linear infinite}
.fd .fd-cloud{animation:fd-drift 90s linear infinite}.fd .fd-cloud2{animation-duration:130s;animation-direction:reverse}
.fd .fd-tw{animation:fd-twinkle 3.2s steps(2,end) infinite}
.fd .fd-aurora{animation:fd-glow 9s ease-in-out infinite alternate}
.fd .fd-mom-wave{animation:fd-wave 1.4s steps(1,end) infinite}.fd .fd-mom-idle{animation:fd-wave-off 1.4s steps(1,end) infinite}
.fd .fd-you{animation:fd-bob 2.2s steps(2,end) infinite}
@keyframes fd-fly{from{transform:translate(-30px,18px)}to{transform:translate(230px,2px)}}
@keyframes fd-drift{from{margin-left:-40px}to{margin-left:60px}}
@keyframes fd-twinkle{0%,60%{opacity:1}61%,100%{opacity:.25}}
@keyframes fd-glow{from{opacity:.55}to{opacity:1}}
@keyframes fd-wave{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes fd-wave-off{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fd-bob{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.fd *{animation:none!important;transition:none!important}.fd .fd-mom-wave{opacity:1}.fd .fd-mom-idle{opacity:0}.fd .fd-plane{transform:translate(70px,12px)}}
body.no-fx .fd *{animation:none!important;transition:none!important}
body.no-fx .fd .fd-mom-wave{opacity:1}body.no-fx .fd .fd-mom-idle{opacity:0}

/* ---- phone portrait: the picture on top, the actions underneath ---- */
@media (max-aspect-ratio:4/5),(max-width:700px) and (orientation:portrait){
  .fd .fd-hero{bottom:auto;height:62dvh}
  .fd .fd-hero-wide{display:none}.fd .fd-hero-tall{display:block}
  .fd .fd-scrim{background:linear-gradient(0deg,#0a1226 0%,#0a1226 30%,#0a122600 62%),linear-gradient(180deg,#0a122699 0%,transparent 14%)}
  .fd .fd-panel{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));width:auto;gap:10px}
  .fd .fd-panel h1{font-size:clamp(28px,8.2vw,40px)}
  .fd .fd-lede{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .fd .fd-eyebrow{display:none}
  .fd .fd-legal{left:max(18px,env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));font-size:11px}
  .fd .fd-fine{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .fd .fd-panel{width:min(440px,50vw);bottom:30px;gap:8px}
  .fd .fd-panel h1{font-size:clamp(22px,5vw,30px)}.fd .fd-lede,.fd .fd-eyebrow,.fd .fd-fine{display:none}
  .fd .fd-btn-big{min-height:48px;padding:10px 20px}.fd .fd-resume-face{width:44px;height:48px}.fd .fd-resume-text strong{font-size:17px}
}

/* ---- dialogs ---- */
.fd .fd-sheet-backdrop{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:18px;background:#05070aaa;backdrop-filter:blur(6px);animation:fd-in .16s ease-out both}
.fd .fd-sheet{width:min(460px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;display:grid;gap:14px;padding:22px;border-radius:16px;background:var(--fd-panel);border:1px solid var(--fd-line2);border-top:3px solid var(--fd-gold);box-shadow:0 24px 80px #000c}
.fd .fd-sheet h2{font:700 22px/1.2 var(--fd-font);color:#fff}
.fd .fd-sheet p{color:var(--fd-mut);font-size:15px}
.fd .fd-sheet p strong{color:var(--fd-text)}
.fd .fd-sheet-actions{display:grid;gap:10px;margin-top:4px}
.fd .fd-sheet-actions .fd-btn{width:100%}
.fd .fd-sheet-danger{border-top-color:#ff9b78}
.fd .fd-toast{position:absolute;z-index:50;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(440px,calc(100% - 32px));padding:12px 18px;border-radius:12px;background:#22261f;border:1px solid var(--fd-gold);color:var(--fd-text);box-shadow:0 12px 40px #000a;font-weight:600;animation:fd-in .2s ease-out both}
@keyframes fd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fd .fd-toast{animation-name:fd-toast}@keyframes fd-toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.fd .fd-flag{animation:fd-flag 2.6s steps(2,end) infinite}
@keyframes fd-flag{0%{transform:translateX(0)}50%{transform:translateX(.5px)}}
@media (max-height:520px) and (orientation:landscape){.fd .fd-panel{width:min(360px,42vw)}}
.fd .agree-over{overflow:auto;align-items:start}.fd .agree-over .agree{width:min(560px,100%);margin:auto;max-height:none;gap:8px}
.fd .agree-over .agree p.mut{margin:0;color:var(--fd-mut);font:400 14px/1.45 var(--fd-font)}.fd .agree-over .agree-row label{font:600 15px/1.35 var(--fd-font);color:var(--fd-text)}.fd .agree-over .agree a{color:var(--fd-gold)}
.fd .agree-over .agree fieldset{margin:6px 0;border-color:var(--fd-line2);border-radius:12px}.fd .agree-over .agree legend{color:var(--fd-gold)}.fd .agree-over .agree-err{margin:0;min-height:1.2em}.fd .agree-over .fd-btn[disabled]{opacity:.5}
/* wide screens: the logo sits above the text, in the open sky on the right, so it never covers the flags and the street on the left */
@media (min-width:900px) and (min-aspect-ratio:5/4){.fd .fd-top{left:auto;right:clamp(140px,12vw,210px)}}
/* the logo: as wide as the screen allows, but no taller than the sky above the text, and small enough on a portrait tablet to leave the flags showing */
.fd .fd-logo-art{display:block;height:auto;width:clamp(190px,min(60vw,45vh),420px)}
@media (min-width:600px) and (max-aspect-ratio:5/4){.fd .fd-logo-art{width:clamp(190px,min(36vw,45vh),300px)}}

/* the play-counts card: a small corner card like a cookie notice, never a wall; on a phone it spans the bottom edge, and one tap clears it */
.fd .fd-cookie{position:absolute;z-index:6;left:clamp(14px,2vw,28px);bottom:clamp(40px,6vh,64px);width:min(360px,calc(100% - 28px));display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:#171a16f2;border:1px solid var(--fd-line2);box-shadow:0 14px 48px #000a}
.fd .fd-cookie p{font-size:13px;line-height:1.45;color:var(--fd-text)}
.fd .fd-cookie a{color:var(--fd-gold)}
.fd .fd-cookie-actions{display:flex;gap:8px}
.fd .fd-cookie-actions .fd-btn{flex:1;min-height:44px;padding:8px 12px;font-size:14px}
@media (max-width:640px){.fd .fd-cookie{bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto}}