/* A straight, touchable window into the game. */
.game-preview{max-width:320px}
.phone-frame{transform:none;aspect-ratio:9/17.5;border:7px solid #101d18;border-radius:37px;background:#10271e;box-shadow:0 0 0 1px #bda87899,0 2px 0 2px #081812,0 28px 65px #00130dcc;isolation:isolate}
.phone-display{position:absolute;inset:0;overflow:hidden;background:#163f32;border-radius:29px}
.phone-frame .demo-film{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-frame .demo-film[hidden]{display:none}
.phone-speaker{top:8px;left:39%;right:39%;height:6px;z-index:4;background:#0b1711;border-radius:6px;box-shadow:0 1px #e1c59322;pointer-events:none}
.demo-heading{position:absolute;inset:0 0 auto;padding:30px 17px 28px;background:linear-gradient(#061b15d9,#061b1580 70%,transparent);color:#fff0cb;pointer-events:none;text-align:left;z-index:2}
.demo-heading>span{display:block;font:600 9px/1.3 var(--sans);letter-spacing:1.7px;color:#e7d09b}
.demo-heading strong{display:block;margin-top:4px;font:600 23px/1.2 var(--serif);letter-spacing:.1px}
.demo-playback{position:absolute;right:12px;top:32px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #e2d5b375;border-radius:50%;color:#fff0cb;background:#0e2c23d9;z-index:3;box-shadow:0 3px 10px #001a1355;cursor:pointer}
.demo-playback svg{width:14px;height:14px;fill:currentColor}.demo-playback .demo-pause{display:none}.demo-playback[data-playing=true] .demo-start{display:none}.demo-playback[data-playing=true] .demo-pause{display:block}
.demo-hud{position:absolute;bottom:59px;left:0;right:0;z-index:2;padding:38px 16px 14px;color:#fff0cb;text-align:left;background:linear-gradient(transparent,#08251cd9 45%,#08251cf5)}
.demo-step{font:600 8px/1.5 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:#dac494}
.demo-status{font:600 21px/1.25 var(--serif);margin:3px 0 0;min-height:27px}
.demo-description{font:11px/1.5 var(--sans);color:#e5ecdc;margin:4px 0 0;min-height:17px}
.demo-track{height:2px;margin-top:12px;background:#d6c79640;border-radius:1px;overflow:hidden}.demo-track span{display:block;width:100%;height:100%;background:#dfc68f;transform-origin:left;transform:scaleX(0)}
.demo-tabs{position:absolute;inset:auto 0 0;z-index:3;height:59px;display:grid;grid-template-columns:1fr 1fr;gap:1px;border-top:1px solid #e1c59355;background:#09261ef5;padding:4px 9px 5px}
.demo-tab{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid transparent;border-radius:8px;color:#d2ddc8;background:transparent;font:600 12px/1 var(--sans);cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.demo-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.demo-tab[aria-pressed=true]{color:#f0d59c;background:#b39b5522;border-color:#d5b67766}.demo-tab:hover,.demo-playback:hover{background:#8f845047;color:#fff0cb}
.demo-tab:focus-visible,.demo-playback:focus-visible{outline:2px solid #fff1b9;outline-offset:-3px}
.demo-touch-hint{display:block;font:11px/1.6 var(--sans);letter-spacing:.3px;color:#e6dec6;margin:15px 0 0;text-shadow:0 2px 8px #002019}
.game-preview figcaption{font-size:22px;margin-top:12px}.game-preview figcaption small{max-width:280px;margin:7px auto 0;font-size:10px;line-height:1.6}
@media(min-width:901px) and (max-height:760px){.game-preview{max-width:255px}.demo-heading strong{font-size:21px}.demo-status{font-size:19px}.game-preview figcaption{font-size:19px}}
@media(max-width:1100px) and (min-width:901px){.world-layout{grid-template-columns:minmax(0,1fr) 265px;gap:4%}.game-preview{max-width:265px}}
@media(max-width:900px){.game-preview{max-width:300px}.world-layout{gap:40px}}
@media(max-width:600px){.game-preview{max-width:290px}.phone-frame{border-radius:34px}.phone-display{border-radius:26px}.game-preview figcaption{font-size:23px}.game-preview figcaption small{font-size:11px}.demo-touch-hint{font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-tab{transition:none}}