/* Progressive enhancement: readable without JS, animation or WebGL. */
main{display:block}main:focus{outline:none}
[id]{scroll-margin-top:110px}
.skip-link{position:fixed;top:10px;left:10px;z-index:11000;transform:translateY(-160%);padding:12px 18px;background:var(--bone);color:var(--deep);border-radius:4px}
.skip-link:focus{transform:none}
.menu-toggle{display:none;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--deep);color:var(--bone);font:600 12px system-ui;cursor:pointer}
nav.top{background:rgba(3,16,12,.9)}
nav.top ul a{display:inline-flex;align-items:center;min-height:44px;color:#c1d1c8}
:where(a,button,input):focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.say input:focus-visible,.wl input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
button:disabled{cursor:wait;opacity:.65}
.chips button{min-height:44px}
.draft{opacity:1;color:#b8b2a7}
.console .log{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#7a5a2c transparent;overflow-wrap:anywhere}
.console .log .roll{color:#61451f;line-height:1.6;letter-spacing:.15em}
.demo-status{min-height:1.5em;color:var(--amber);font:16px/1.5 system-ui}
.gameplay-guide{margin-top:28px;color:var(--bone);font-size:18px;line-height:1.6}
.gameplay-guide summary{cursor:pointer;min-height:44px;padding-block:10px;color:var(--amber)}
.gameplay-guide ul{padding-left:24px;max-width:70ch}
.gameplay-guide li{padding-block:6px}
.gameplay-guide strong{font:600 12px/1.6 Cinzel,serif;letter-spacing:.08em}

/* Override the logo's intrinsic HTML height as well as its CSS width. */
.brand img{height:auto;flex:none}
/* Reserve the fixed header and progress rail around enhanced chapter copy. */
.journey-enhanced .ch{padding-block:90px 64px}
.journey-enhanced .ch h1{font-size:clamp(46px,min(7.4vw,12svh),124px)}
.journey-enhanced .ch h2{font-size:clamp(40px,min(5.4vw,10svh),88px)}
@media(max-width:860px){
  .journey-enhanced .ch{padding-block:76px 64px}
  /* The native gameplay guide supplies these explanations on small screens. */
  .journey-enhanced .spots{display:none}
}
@media(max-width:480px){
  /* Keep brand/menu on one row; the primary CTA remains in the hero. */
  nav.top>.btn{display:none}
}
.arches{min-width:0;max-width:100%}
/* Perspective projections must not widen the page outside the device showcase. */
.devices{overflow-x:clip}
.arch{height:auto;min-height:390px}
.arch q{padding-top:14px}
.play>*{min-width:0}
.end>div{max-width:100%;padding:70px 20px}
.wl{border-radius:24px;max-width:100%}
.wl input{min-width:0;width:100%}
.wl .ok{display:block;width:100%;padding:0;min-height:1em;line-height:1.4}
.wl .ok:empty{display:none}
noscript{display:block;padding:16px 20px;color:var(--bone);background:#1b2b22}
.reveal,.reveal.in{opacity:1;transform:none}
.reveal-ready .reveal:not(.in){opacity:0;transform:translateY(36px)}
html:not(.journey-enhanced) .journey{height:auto}
html:not(.journey-enhanced) .stage{position:relative;height:auto;padding-top:100px}
html:not(.journey-enhanced) .stage canvas,
html:not(.journey-enhanced) .stage .flash,
html:not(.journey-enhanced) .rail,
html:not(.journey-enhanced) .meter,
html:not(.journey-enhanced) .spots,
html:not(.journey-enhanced) .buildnote{display:none}
html:not(.journey-enhanced) .stage .fb{opacity:.22;background-attachment:scroll}
html:not(.journey-enhanced) .ch{position:relative;inset:auto;min-height:70svh;visibility:visible!important;pointer-events:auto;padding:48px clamp(20px,7vw,120px)}
html:not(.journey-enhanced) .ch>div{opacity:1;transform:none;filter:none}
html:not(.journey-enhanced) .ch .cta{flex-wrap:wrap}
html:not(.journey-enhanced) .seat{color:var(--bone)}
@media(max-width:860px){
 nav.top{gap:12px;padding:12px 16px;flex-wrap:wrap}
 .brand{gap:8px}.brand span{font-size:11px;letter-spacing:.12em}.brand img{width:32px;height:auto}
 nav.top>.btn{margin-left:auto;padding:0 14px;min-height:44px;font-size:10px;letter-spacing:.1em}
 .js .menu-toggle{display:block;order:2}
 nav.top ul{order:3;width:100%;margin:0;gap:6px;justify-content:space-between;display:flex;flex-wrap:wrap}
 .js nav.top ul{display:none}.js nav.top ul.open{display:flex}
 nav.top ul a{font-size:10px;letter-spacing:.1em;padding:10px 4px}
 .ch{padding-inline:22px}.ch.c>div{padding:20px 0}
 .ch .k{letter-spacing:.25em}.ch h1{font-size:clamp(38px,10vw,72px)}.ch h2{font-size:clamp(36px,8vw,66px)}
 .ch p{font-size:18px;line-height:1.5;margin-top:20px}
 .ch .cta{gap:10px;flex-wrap:wrap;margin-top:24px}.ch .cta .btn{padding-inline:16px;letter-spacing:.14em}
 .invite{min-width:0;width:100%;max-width:360px;padding:16px}.invite .code{letter-spacing:.12em}.invite .code b{font-size:22px}
 .devices{height:clamp(320px,82vw,620px)}.dv.tab{width:40%}.dv.ph{width:22%}
 .dv figcaption{font-size:8px;letter-spacing:.08em}
 .end h2{font-size:clamp(36px,10vw,70px)}.end p{font-size:19px}
 .lm-sound{right:10px;bottom:10px;letter-spacing:.1em}
}
@media(max-width:480px){
 .say{flex-direction:column;padding:8px}.say input{width:100%}.say button{width:100%;min-height:48px}
 .wl{flex-direction:column;align-items:stretch}.wl input{flex:auto;min-height:50px}
 .ch h1{font-size:clamp(34px,10vw,48px)}
 .ch .cta{flex-direction:column;align-items:center}
 .ch .cta .btn{width:min(100%,240px)}
 section.blk{padding:80px 20px}.console{padding:20px 16px}.log{height:300px}
 .chips{gap:6px}.chips button{font-size:16px;padding-inline:12px}
 .buildnote{max-width:90%;white-space:normal;text-align:center;bottom:70px}
}
@media(prefers-reduced-motion:reduce){
 .reveal-ready .reveal:not(.in){opacity:1;transform:none}
 .dv{transform:none}.spot i{animation:none}
 .lm-cur,.lm-ring,#ff{display:none}
}