:root{color-scheme:dark;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;color:#fcfcfc;background:#101018}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f8f878;outline-offset:3px}button{background:#203888;color:#fcfcfc;border:2px solid #181828;padding:10px 12px;font-size:12px;font-weight:700}button:hover{background:#3048a8}button:active{transform:translateY(1px)}button[aria-pressed="false"]{color:#a4a4b8;background:#181828}.viewport{position:relative;width:min(100vw,133.3333dvh);height:min(100dvh,75vw);aspect-ratio:4/3;background:#181828;isolation:isolate;container-type:inline-size}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;outline:none!important}.viewport:fullscreen{width:min(100vw,133.3333dvh);height:min(100dvh,75vw);display:grid;place-items:center}.viewport:fullscreen canvas{width:min(100vw,133.3333dvh);height:min(100dvh,75vw)}.title-menu{position:absolute;inset:12.5% 0;pointer-events:none}.title-menu button{position:absolute;left:35.4167%;width:29.1667%;height:7.4074%;border:0;padding:0;background:transparent;color:transparent;pointer-events:auto;font-size:0;transform:none}.title-play{top:34.8148%}.title-options{top:44.0741%}.title-menu button:focus-visible{outline:2px dashed #fcfcfc;outline-offset:5px}.pause-button{position:absolute;right:1.3%;top:1.8%;width:3.8%;min-width:26px;aspect-ratio:1;display:grid;place-items:center;padding:0;background:#181828d9;border:1px solid #fcfcfc60;font-size:clamp(14px,2.2cqw,24px);line-height:1;opacity:.6;z-index:5}.pause-button:hover,.pause-button:focus-visible{opacity:1}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#toast{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);max-width:85%;padding:9px 13px;background:#181828ed;color:#f8f878;border:2px solid #fcfcfc;font-size:clamp(9px,1.3cqw,15px);text-align:center;opacity:0;pointer-events:none;transition:opacity .15s;z-index:6}#toast.visible{opacity:1}#touch{position:absolute;left:2%;right:2%;bottom:11%;display:flex;justify-content:space-between;gap:clamp(4px,1.6cqw,16px);pointer-events:none;z-index:4}#touch>div{display:flex;gap:clamp(3px,.7cqw,7px)}#touch button{pointer-events:auto;width:clamp(18px,10cqw,60px);height:clamp(18px,10cqw,60px);padding:0;border:2px solid #fcfcfc99;border-radius:50%;background:#18182899;color:#fcfcfc;font-size:17px;user-select:none;touch-action:none;box-shadow:none}#touch .actions button:last-child{background:#b80028b3}.ending-menu{position:absolute;left:30%;right:30%;top:63.5%;display:flex;justify-content:center;gap:12px}dialog{background:#181828;color:#fcfcfc;border:3px solid #f8b800;padding:22px;width:min(92vw,590px);max-height:92dvh;overflow:auto;box-shadow:0 12px 60px #0009}dialog::backdrop{background:#0009}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.dialog-heading h2{font-size:20px;letter-spacing:3px;color:#f8b800;margin:0}.dialog-heading button{font-size:24px;padding:0 8px;background:transparent;border:0}fieldset{border:1px solid #585868;margin:18px 0;padding:13px}legend{font-size:11px;color:#f8b800;letter-spacing:2px;padding:0 7px}label{font-size:12px;color:#a4a4b8}.menu-actions{display:flex;flex-wrap:wrap;gap:8px}.player-options{display:flex;gap:8px;align-items:center;margin-top:8px}.player-options input{width:100%;min-width:0;color:#fcfcfc;background:#101018;border:1px solid #585868;padding:9px}.avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:36px;background:#f83800;color:#fcfcfc;border:2px solid #fcfcfc;font-weight:700}.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.world-card{padding:9px 4px;font-size:10px;background:#203888;border:1px solid #585868;text-align:center}.world-card.selected{border:2px solid #f8b800;color:#f8f878}.world-card.locked{background:#101018;color:#686878}.world-card span,.world-card b,.world-card small{display:block}.world-icon{font-size:20px;margin-bottom:5px}.world-card b{font-size:10px}.world-card small{font-size:9px;margin-top:5px}#completion,#location,#saveStatus{font-size:11px;color:#a4a4b8}#completion{margin:10px 0 0}.connection{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12px}.connection i{width:7px;height:7px;background:#f8b800;border-radius:50%}.connection i.online{background:#00a800}#population{margin-left:auto;color:#a4a4b8}.save-options{display:flex;gap:8px;flex-wrap:wrap}.save-options span{flex:1 1 100%;margin-top:5px}dialog p{font-size:12px;line-height:1.7;color:#b8b8c8}dl{display:grid;grid-template-columns:1fr 1.25fr;gap:11px;font-size:12px}dt{color:#f8f878}dd{margin:0}.qa-panel{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#181828ed;padding:7px;display:flex;align-items:center;gap:8px;font-size:10px}.qa-panel button{font-size:10px;padding:6px}.qa-panel output{margin-left:8px;white-space:pre-wrap}.qa-panel .failed{color:#ff7878}@media(pointer:coarse){#touch{display:flex}.pause-button{opacity:.9;min-width:30px}dialog{padding:15px}.worlds{gap:5px}}@media(max-width:600px){dialog button{font-size:10px;padding:9px}.world-card b{font-size:8px}.menu-actions{gap:5px}dl{font-size:10px;gap:9px}}@media(orientation:portrait) and (pointer:coarse){#touch{bottom:-115px;left:4%;right:4%}#touch button{width:45px;height:45px;background:#203888}.pause-button{top:4%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* The canvas is sized in JS to a whole-number multiple of its 320x240 buffer; title menu and toasts draw on the canvas. */
body{display:grid;place-items:center}
.viewport{flex:none}
.title-menu{display:none!important}
#toast{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
/* Mouse and touch share the same held-button controls during stages. */
#touch.level-controls{display:flex;left:calc(50% - var(--display-w)*.48);right:calc(50% - var(--display-w)*.48);bottom:calc(50% - var(--display-h)*.28);opacity:.35;transition:opacity .12s}
#touch.level-controls:hover,#touch.level-controls:focus-within{opacity:1}
@media(pointer:coarse){#touch.level-controls{opacity:.85}}
#touch button{font-size:clamp(6px,1.5cqw,14px)}
#touch.level-controls button{width:clamp(18px,calc(var(--display-w)*.10),60px);height:clamp(18px,calc(var(--display-w)*.10),60px)}
@container (max-width:220px){#touch>.actions{display:grid;grid-template-columns:repeat(2,max-content);grid-auto-rows:max-content;gap:3px;align-content:start}}
@media(orientation:portrait) and (pointer:coarse){@container (max-width:360px){#touch>.actions{display:grid;grid-template-columns:repeat(2,max-content);grid-auto-rows:max-content;gap:3px;align-content:start}}}
@media(orientation:portrait) and (pointer:coarse){#touch.level-controls>.actions{display:grid;grid-template-columns:repeat(2,max-content);grid-auto-rows:max-content;gap:3px;align-content:start}#touch.level-controls button{width:45px;height:45px}}
.viewport:fullscreen canvas{width:min(100vw,133.3333dvh);height:min(100dvh,75vw);max-width:none;max-height:none}
.viewport:fullscreen .pause-button{right:calc(50% - var(--display-w)*.48);top:calc(50% - var(--display-h)*.48);width:clamp(26px,calc(var(--display-w)*.038),36px)}

.world-nav-button{position:absolute;right:calc(2% + 34px);top:1.8%;min-height:24px;padding:3px 7px;background:#181828df;border:1px solid #e9b752;color:#fff3cf;font-size:clamp(8px,1.3cqw,11px);z-index:5;opacity:.85}
.world-nav-button:hover,.world-nav-button:focus-visible{opacity:1;outline:2px solid #fff3cf;outline-offset:2px}
@media(pointer:coarse){.world-nav-button{min-height:30px}}
.item-shop{width:min(720px,94vw);max-height:92dvh;overflow:auto;padding:22px;border:4px solid #d8b078;background:#203444;color:#fff0c0;box-shadow:0 0 0 4px #17131b,0 16px 60px #0008}
.item-shop::backdrop{background:#101824b8}.item-shop header{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:2px solid #687b84;padding-bottom:12px}.item-shop h2{margin:4px 0;font-size:24px;color:#fff0c0}.item-shop .shop-eyebrow{margin:0;color:#ffd878;font-size:11px;letter-spacing:3px}.shop-close{font-size:24px;line-height:1;background:#365768;border-color:#799c9c}.shop-wallet{margin-top:14px;color:#fff078;font-size:15px;font-weight:bold}.item-shop .shop-intro{margin:8px 0 16px;font-size:12px;color:#c8dfd8}.shop-stock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.shop-offer{display:flex;min-width:0;flex-direction:column;align-items:center;gap:7px;padding:12px 5px;background:#304b54;border:2px solid #7c9c94;color:#fff0c0}.shop-offer:hover,.shop-offer:focus-visible{background:#426064;border-color:#fff078;outline:2px solid #fff078;outline-offset:1px}.shop-offer canvas{width:48px;height:48px;image-rendering:pixelated}.shop-offer strong{font-size:11px}.shop-price{font-size:10px;color:#fff078}.shop-unaffordable .shop-price{color:#bdc5c8}.shop-unaffordable{background:#293d48}.item-shop .shop-message{min-height:36px;font-size:12px;line-height:1.5;color:#fff0c0;margin-bottom:8px}.item-shop footer{font-size:10px;color:#b0d0c8;border-top:1px solid #687b84;padding-top:12px}@media(max-width:520px){.item-shop{padding:14px}.shop-stock{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.shop-offer{padding:9px 3px}.shop-offer canvas{width:36px;height:36px}.item-shop h2{font-size:20px}}