@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Inter+Tight:wght@400;500;600&family=Cormorant+Garamond:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');
:root{color-scheme:dark;--cream:#f2eed6;--lime:#d6ef83}*{box-sizing:border-box}body{margin:0;background:#182d28;color:var(--cream);font-family:'Space Grotesk',sans-serif}header,main,footer{width:min(1240px,92%);margin:auto}header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}.brand{font-size:18px;font-weight:700;letter-spacing:2px;color:inherit;text-decoration:none}.mark{font-size:32px;color:var(--lime);margin-right:10px}.edition{font-size:10px;letter-spacing:2px;color:#a5b3a3}.edition b{margin-left:15px;border:1px solid #607365;padding:7px;color:var(--lime)}main{padding-top:30px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:10px;letter-spacing:2px;color:#bcc6b4}.topline i{display:inline-block;width:6px;height:6px;background:var(--lime);margin-right:10px}button{font:inherit;cursor:pointer}#sound{background:transparent;color:var(--cream);border:0;padding:10px;font-size:11px;letter-spacing:1px}#sound:first-letter{font-size:18px}#arena{position:relative;height:min(62vw,600px);min-height:440px;overflow:hidden;border:6px solid #0f211d;box-shadow:0 0 0 1px #526146;background:#b9d4bd;isolation:isolate;touch-action:none}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.hud{position:absolute;top:26px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:start;pointer-events:none;color:#244032;text-shadow:0 1px #e2efca}.hud small{display:block;font-size:10px;letter-spacing:2px}.hud strong{font-family:'VT323',monospace;font-size:32px;font-weight:400}#score{position:absolute;left:50%;transform:translateX(-50%);font-size:64px;color:#fffbe3;text-shadow:3px 3px #2e4939;display:none}.zone{text-align:right;font-size:9px;letter-spacing:2px;line-height:1.8}.zone span{color:#46694b}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:30px;text-align:center}.eyebrow{font-size:9px;letter-spacing:3px;color:#31593a;margin-bottom:12px}h1{font-family:'VT323',monospace;font-size:100px;line-height:.76;margin:0;color:#fff8d9;font-weight:400;text-shadow:4px 0 #243c2e,-4px 0 #243c2e,0 -4px #243c2e,0 5px #243c2e,5px 8px #243c2e;letter-spacing:5px}h1 span{color:#def29a}p{font-size:12px;color:#254733;margin:19px 0 78px}.primary{background:var(--lime);color:#203a28;border:2px solid #253d28;box-shadow:4px 4px 0 #223c2b;padding:15px 23px;min-width:200px;font-weight:700;font-size:17px}.primary:hover{background:#e8ffa9;transform:translateY(-2px)}.primary:active{transform:translate(2px,2px);box-shadow:2px 2px #223c2b}.primary span{margin-left:24px;font-size:22px}.hint{margin-top:17px;font-size:9px;letter-spacing:2px;color:#e5eacd;text-shadow:1px 1px #284a30}kbd{font:inherit;padding:4px 6px;border:1px solid currentColor;border-radius:3px}.corner{position:absolute;bottom:15px;left:25px;font-size:8px;letter-spacing:2px;color:#d6d6ac;pointer-events:none}.under{display:flex;justify-content:space-between;font-size:11px;color:#aab5a2;padding:24px 0}.under b{color:#d4dfbe;font-weight:500}footer{display:flex;justify-content:space-between;margin-top:36px;border-top:1px solid #ffffff16;padding:25px 0;color:#7f9585;font-size:9px;letter-spacing:1px}.leaf{color:var(--lime);margin-left:12px}.hidden{display:none!important}h2{font-family:'VT323',monospace;font-size:68px;line-height:.9;font-weight:400;margin:4px 0 22px;color:#fff7d8;text-shadow:3px 3px #243d2e}#over{background:#17332365;backdrop-filter:blur(3px)}#over .eyebrow{color:var(--lime)}.results{display:flex;gap:40px;margin:0 0 25px}.results small{display:block;font-size:9px;letter-spacing:2px}.results strong{font:48px 'VT323',monospace}.pause{position:absolute;inset:0;display:grid;place-items:center;background:#203c2eaa;font-size:16px;letter-spacing:2px}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}@media(max-width:650px){header{height:77px}.brand{font-size:14px}.edition{font-size:8px;letter-spacing:1px}main{padding-top:16px}.topline{font-size:8px;letter-spacing:1px}#arena{height:68vh;min-height:490px;max-height:720px;border-width:4px}.hud{left:16px;right:16px;top:20px}.zone{font-size:7px}h1{font-size:86px}.under{font-size:10px}.under>span:nth-child(2){display:none}.under>span:last-child{max-width:120px;text-align:right}footer{margin-top:10px;font-size:8px;gap:25px}footer>span:last-child{max-width:130px;text-align:right}}

/* The Crew arcade: a quiet monochrome frame around a vibrant world. */

:root{--cream:#f2f1ec;--lime:#d7f580}body{background:#0f0f0f;padding-left:76px;font-family:'Courier Prime',monospace}header,main,footer{width:min(1260px,92%)}header{height:96px}.brand{font-family:'Inter Tight',sans-serif;font-size:27px;font-weight:400;letter-spacing:-1px}.brand i{font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:500}.brand-slash{color:#555;margin:0 10px}.arcade{font:11px 'Courier Prime',monospace;letter-spacing:2px}.edition{color:#999}.edition b{color:#eee;border-color:#555}.rail{position:fixed;inset:0 auto 0 0;width:76px;background:#f2f1ec;color:#0f0f0f;display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding:22px 0;z-index:5}.rail img{filter:invert(1)}.rail>span,.rail>a:last-child{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:1px}.rail a{color:inherit;text-decoration:none}.topline{color:#bbb}.topline i{background:#f2f1ec}#arena{border-color:#282828;box-shadow:none;height:min(57vw,570px)}.under{color:#8d8d87}.under b{color:#e2e1db}footer{color:#888;border-color:#303030}.leaf{color:#f2f1ec}.claim{color:#f2f1ec;margin-top:22px;font-size:12px;text-decoration:underline;background:none;border:0}.leaderboard{border-top:1px solid #333;margin-top:48px;padding-top:35px}.board-head{display:flex;justify-content:space-between;align-items:center}.board-head .eyebrow{color:#999;display:block}.board-head h2{font-family:'Inter Tight',sans-serif;font-size:48px;line-height:1.05;text-shadow:none;color:#f2f1ec;letter-spacing:-2px;margin:15px 0 30px}.board-head h2 i{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}.board-label{text-align:right;color:#999;font-size:10px;line-height:1.8}.board-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:40px}.board-copy{color:#ddd;line-height:1.6;font-size:14px;margin:0 0 24px}.board-note{color:#888;font-size:11px;line-height:1.7;margin:0 0 24px}.text-button{color:#ddd;background:none;border:none;padding:0;font-size:11px;text-decoration:underline}table{border-collapse:collapse;width:100%;font-size:13px}th{font-size:9px;color:#999;text-align:left;font-weight:400;padding:0 0 16px;letter-spacing:1px}td{padding:17px 0;border-top:1px solid #333}th:last-child,td:last-child{text-align:right}td:first-child{color:#777;width:40px}td:last-child{font:30px 'VT323',monospace;color:#ffe337}td a{font-size:10px;color:#999;margin-left:12px;text-decoration:none}#boardStatus{color:#aaa;font-size:12px;margin:0 0 16px}dialog{width:min(430px,94vw);background:#171717;color:#f2f1ec;border:1px solid #666;padding:30px}dialog::backdrop{background:#000b}dialog h2{font-family:'Inter Tight',sans-serif;font-size:32px;text-shadow:none;margin:12px 0}dialog .eyebrow{color:var(--lime)}dialog p{color:#bbb;margin:10px 0 22px;line-height:1.5}dialog label{display:block;font-size:12px;margin:20px 0}dialog label span{color:#888}input{display:block;width:100%;background:#242424;color:#fff;border:1px solid #555;padding:13px;margin-top:8px;font:14px 'Courier Prime',monospace}dialog .privacy{font-size:11px;color:#aaa}dialog .primary{width:100%;font-size:14px}dialog .close{float:right;border:0;background:none;color:#fff;font-size:24px}button:disabled{opacity:.45;cursor:default}#over .results{margin-bottom:16px}#over h2{font-size:60px}.hint{pointer-events:none}#submitStatus{color:var(--lime)}
@media(max-width:760px){body{padding-left:0}.rail{display:none}.edition{font-size:7px;max-width:120px;text-align:right;line-height:1.8}.edition b{display:none}.brand{font-size:23px}.brand i{font-size:30px}.arcade{font-size:9px}header{height:78px}#arena{height:65vh;min-height:490px;max-height:620px}.board-grid{grid-template-columns:1fr;gap:28px}.board-head h2{font-size:37px}.board-copy{margin-bottom:12px}.board-note{margin-bottom:12px}.leaderboard{margin-top:24px}.board-head{align-items:start}.board-label{font-size:8px}.board-label{padding-top:24px}td a{display:block;margin:5px 0 0}footer{margin-top:35px}}



#biomeName{color:inherit}.zone{min-width:115px}#arena[data-biome="city"] .hud{color:#27374c;text-shadow:0 1px #dce2ed}#arena[data-biome="city"] .zone span{color:#35465b}#arena[data-biome="mars"] .hud{color:#5c302a;text-shadow:0 1px #f7ccad}#arena[data-biome="mars"] .zone span{color:#713e31}

html,body,button,a{touch-action:manipulation}#arena,#arena canvas,#arena .overlay{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.game-actions{display:flex;align-items:center;gap:12px}#fullscreen{font:10px 'Courier Prime',monospace;letter-spacing:1px;border:1px solid #555;background:none;color:#f2f1ec;padding:10px;min-height:42px}#exitFullscreen{display:none;position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:8;padding:12px;background:#0f0f0fe8;border:1px solid #777;color:#f2f1ec;font:11px 'Courier Prime',monospace;min-height:44px}.game-fullscreen{overflow:hidden!important}.game-fullscreen #arena{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;min-height:0;max-height:none;border:0;margin:0;box-shadow:none}.game-fullscreen #exitFullscreen{display:block}.game-fullscreen .hud{top:max(22px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.game-fullscreen .corner{display:none}.game-fullscreen .rail{visibility:hidden}.game-fullscreen dialog{z-index:1001}.level-tour{border-top:1px solid #333;margin-top:48px;padding-top:32px}.tour-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.tour-heading .eyebrow{color:#999}.tour-heading h2{font:30px 'Inter Tight',sans-serif;color:#f2f1ec;text-shadow:none;margin:12px 0 25px}.tour-heading>span{color:#888;font-size:9px}.level-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.level-card{color:#f2f1ec;text-decoration:none;display:block;border:1px solid #353535;background:#161616;transition:border-color .15s}.level-thumb{width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;display:block}.level-card>div{padding:18px}.level-card span{font-size:9px;color:#999;letter-spacing:1px}.level-card h3{font:24px 'Inter Tight',sans-serif;margin:10px 0}.level-card p{font-size:11px;color:#aaa;line-height:1.5;margin:0 0 16px}@media(max-width:650px){.topline{gap:8px}.topline>span{letter-spacing:0;font-size:8px}.game-actions{gap:3px}#sound{padding:8px;font-size:9px}#fullscreen{padding:8px;font-size:9px}.level-cards{grid-template-columns:1fr;gap:16px}.tour-heading>span{display:none}.tour-heading h2{font-size:27px}.level-tour{margin-top:36px}input,select{font-size:16px!important}}@media(max-height:480px){.game-fullscreen .overlay{padding:15px 0}.game-fullscreen h1{font-size:60px}.game-fullscreen #intro p{margin:12px 0 38px}.game-fullscreen #over h2{font-size:38px;margin:5px 0}.game-fullscreen .results{margin-bottom:8px}.game-fullscreen .results strong{font-size:32px}.game-fullscreen .primary{padding:8px 20px}.game-fullscreen .hint{margin-top:10px}.game-fullscreen .claim{margin-top:10px}}

/* Centre key labels independently of surrounding tracking and line height. */
kbd{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-height:24px;padding:4px 7px;font:10px/1 'Courier Prime',monospace;letter-spacing:0;text-align:center}#game{image-rendering:pixelated}

.hud{z-index:30;isolation:isolate}#score{top:0;line-height:1;min-width:62px;padding:5px 12px;text-align:center;font-size:54px;color:#fff5b4!important;text-shadow:2px 2px #18271e!important}.overlay{z-index:2}.pause{z-index:25}#countdown{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#14271e55;pointer-events:none}#countdown span{font-size:12px;letter-spacing:3px;color:#fff5d9}#countdown strong{font:120px/1 'VT323',monospace;color:#fff5b4;text-shadow:4px 4px #22372b}#fullscreenSound{display:none;position:absolute;z-index:40;bottom:max(10px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));min-height:44px;padding:12px;border:1px solid #777;background:#0f0f0fe8;color:#f2f1ec;font:11px 'Courier Prime',monospace}.game-fullscreen #fullscreenSound{display:block}.game-fullscreen #exitFullscreen{z-index:40}.game-fullscreen .hud{top:max(18px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right))}.game-fullscreen #score{font-size:46px}.landscape-fallback #arena{inset:auto!important;left:50%!important;top:50%!important;width:100vh!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}.landscape-fallback .hud{top:18px;left:max(28px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-bottom))}.landscape-fallback h1{font-size:60px}.landscape-fallback #intro p{margin:12px 0 38px}.landscape-fallback .overlay{padding:15px 0}.landscape-fallback #over h2{font-size:38px;margin:5px 0}.landscape-fallback .results strong{font-size:32px}.landscape-fallback .results{margin-bottom:8px}.landscape-fallback .primary{padding:8px 20px}.landscape-fallback .hint{margin-top:10px}.landscape-fallback .claim{margin-top:10px}
.hud .purse{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10px;letter-spacing:2px;white-space:nowrap}
.hud .purse b{font-family:'VT323',monospace;font-size:20px;font-weight:400;letter-spacing:0}
.coin-icon{width:12px;height:12px;border-radius:50%;background:#b4b8bf;box-shadow:inset 0 0 0 2px #e6e8ec,0 0 0 1px #4a4e55}
