/* ARES instrument language: recessed chassis, emissive cores, smoked glass. */
:root{--ink:#faf2e7;--mint:#ff965d;--muted:#b1a8a3;--line:#ffffff18;background:#121216}
body{background:radial-gradient(ellipse at 45% 5%,#35323877,transparent 60%),#111115;color:#faf2e7}
body:before{z-index:-1;background:linear-gradient(#111115 3%,#111115e8 35%,#11111520 90%),url('assets/mars-canyon.webp') center 76%/cover;opacity:.48}
#atmosphere{opacity:.055}.grain{opacity:.025}
header{height:76px;max-width:570px;padding:0 24px}.brand{font-size:17px;letter-spacing:4px}.brand svg{stroke:#ffb382!important;filter:drop-shadow(0 0 7px #ff742544)}
.header-tools{gap:10px}.header-tools .iconbutton{width:46px;height:46px;border:1px solid #ffffff14;border-radius:16px;background:linear-gradient(145deg,#ffffff0a,#0004);box-shadow:inset 0 1px 1px #ffffff1c,3px 6px 12px #0005;color:#d7d0c8;font-size:19px}
.header-tools #sound[aria-pressed=true]{background:radial-gradient(ellipse at 20% 70%,#fc77274a,transparent 80%),linear-gradient(145deg,#ffffff18,#0004);color:#ffd3b5;box-shadow:inset 0 1px 1px #ffffff30,0 0 24px #ff702018,3px 6px 12px #0005}
main{max-width:550px;padding:4px 20px 25px}.mission-title{margin:8px 0 25px}.mission-title>span{font:700 10px Oxanium,sans-serif;letter-spacing:3px;color:#b4a9a2}.mission-title h1{font:700 82px/.95 Oxanium,sans-serif;letter-spacing:-5px;margin:12px 0;color:#eee9e2;text-shadow:0 1px 0 #fff9,0 12px 30px #0008}.mission-title p{font-size:13px;letter-spacing:.6px;color:#aca5a0}
.puzzle-heading{height:62px;margin-bottom:20px;gap:12px;padding:0 2px}
.session-switch{isolation:isolate;position:relative;padding:5px;gap:0;height:58px;width:246px;border-radius:40px;border:1px solid #ffffff08;background:linear-gradient(145deg,#07070a,#242428);box-shadow:inset 4px 6px 12px #000a,inset -1px -1px 0 #ffffff13,0 1px 0 #ffffff15;overflow:visible;backdrop-filter:none}
.session-switch:before{content:'';position:absolute;z-index:-1;inset:4px auto 4px 4px;width:calc(50% - 4px);border-radius:30px;background:radial-gradient(ellipse at 13% 50%,#ff9c65aa,transparent 80%),linear-gradient(145deg,#ffe8dc45,#ef9d7650 48%,#d5d2d064);border:1px solid #ffe7df42;box-shadow:inset 0 2px 3px #fff8,inset 0 -2px 5px #ff793d66,0 2px 10px #0006,-8px 0 32px #ff6c2240;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.session-switch:has(#daily.active):before{transform:translateX(100%)}
.session-switch .nav{width:50%;min-width:0;height:46px;line-height:46px;padding:0 11px;text-align:left;font-size:12px;font-weight:600;color:#8e8885;display:flex;align-items:center;gap:8px;background:none!important;position:relative;border:0}
.session-switch .nav.active{color:#fff2e7;text-shadow:0 1px 3px #0005}.grip{display:block;width:17px;height:23px;margin-left:auto;background:radial-gradient(circle,#f8d3bd90 1.3px,#08070644 1.6px,transparent 2.4px) 0 0/6px 7px;filter:drop-shadow(0 1px 0 #ffffff3b);opacity:.3}.active .grip{opacity:1}
.level-button{background:linear-gradient(145deg,#ece8e917,#ffffff04);border:1px solid #ffffff14;border-radius:19px;height:52px;min-width:66px;font:700 15px Oxanium,sans-serif;color:#d9d0c7;box-shadow:inset 0 1px 0 #fff3,0 6px 15px #0004}
.board-shell{padding:12px;border:1px solid #ffffff1b;border-radius:28px;background:linear-gradient(145deg,#7671743d,#242126c9 45%,#4942465c);box-shadow:inset 0 1px 2px #ffffff50,inset 0 -1px 2px #000,0 24px 50px #0009,0 0 0 4px #0c0b0e66}
.board{gap:6px;background:#111013;border-radius:18px;padding:3px;box-shadow:inset 0 3px 8px #000b}
.cell{border:1px solid #ffffff1a;border-radius:12px;background:linear-gradient(145deg,#ffffff16,#00000024),var(--region-bg);box-shadow:inset 0 2px 2px #ffffff40,inset 0 -3px 6px #0007,0 3px 4px #0008;transition:filter .2s,box-shadow .2s,transform .15s}
.cell:before{inset:0;border-radius:inherit;background:linear-gradient(140deg,#fff8 0%,#ffffff12 18%,transparent 35%,#fff1 78%,#ffffff35 100%),url('assets/regolith.webp') center/200px;mix-blend-mode:soft-light;opacity:.65;pointer-events:none}
.cell:after{font:700 9px Oxanium,sans-serif!important;right:7px;bottom:5px;opacity:.65;color:#ffeadb}
.cell:active{transform:scale(.97);filter:brightness(1.2)}
.cell[data-state=marked]{filter:brightness(.6);box-shadow:inset 0 4px 10px #000a,inset 0 1px 0 #ffffff12}.cell .xmark{color:#b5a79e;font-weight:200;font-size:27px}
.cell.occupied{background:radial-gradient(ellipse at center,#9ce9b247,transparent 72%),linear-gradient(140deg,#ffffff16,#0002),var(--region-bg);box-shadow:inset 0 1px 2px #e2ffbf66,inset 0 0 18px #99f3b82b,0 0 12px #94fcb713,0 3px 5px #0008}
.cell svg{filter:drop-shadow(0 0 9px #bbffc680)}.board-halo{background:radial-gradient(ellipse,#ff7b2917,transparent 72%)}
.puzzle-status{font:700 12px Oxanium,sans-serif;color:#bcb0a6;padding:20px 8px 17px}.heart{display:block;width:23px;height:10px;padding:2px;border-radius:7px;background:#09090b;border:1px solid #fff1;box-shadow:inset 0 2px 3px #0009}.heart i{display:block;height:100%;border-radius:6px;background:linear-gradient(#ffc9a5,#ff7c38);box-shadow:0 0 9px #ff6f3377}.heart.spent{opacity:.4;transform:none}.heart.spent i{background:#5b4740;box-shadow:none}
.controls{padding-top:0}.assist{width:100%;max-width:346px;display:grid;grid-template-columns:56px 1fr 56px 48px;gap:13px;border:0;border-radius:0;padding:0;background:none;box-shadow:none;backdrop-filter:none;position:relative}.assist .tool,.assist .tool:last-child{width:100%;height:56px;border-radius:20px;background:linear-gradient(145deg,#e4d7d51b,#19181c 70%);border:1px solid #ffffff18;box-shadow:inset 0 2px 1px #ffffff2b,inset 0 -1px 2px #000a,0 8px 16px #0006;color:#c5b8b0;font-size:23px;transition:transform .2s,box-shadow .2s}.assist .tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.assist #hint{height:58px;border-radius:32px;color:#ffe4cf;background:radial-gradient(ellipse at 15% 60%,#ff7d2e8a,transparent 80%),linear-gradient(145deg,#eed1c340,#ca927653 50%,#bcb9be60);border:1px solid #ffd9c640;box-shadow:inset 0 2px 2px #fff8,inset 0 -3px 8px #ff7b2855,0 0 35px #ff6d2429,0 8px 20px #0006;display:flex;padding:0 23px;justify-content:flex-start;gap:18px}
.assist #hint:after{content:'';position:absolute;right:20px;width:28px;height:24px;background:radial-gradient(circle,#ffdcca90 1.5px,#0005 1.8px,transparent 2.5px) 0 0/8px 8px;filter:drop-shadow(0 1px 0 #fff4)}
.assist .tool:active{transform:translateY(2px)}.assist .tool:hover{filter:brightness(1.15)}.assist #how{background:none;border:0;box-shadow:none;color:#827a77;font-size:18px}.tool-divider{display:none}#hintCount{position:absolute;left:calc(56px + 13px + 45px);top:12px;margin:0;width:16px;height:16px;font-size:10px;background:#fff1e2;color:#7c3c1d;box-shadow:0 0 12px #ff986433}.assist .tool:disabled{opacity:.35;filter:saturate(.5);box-shadow:inset 0 1px 0 #fff1}
dialog{border-radius:30px;background:radial-gradient(ellipse at 0 0,#fc945926,transparent 65%),linear-gradient(145deg,#363139ee,#16151afa);border:1px solid #ffffff26;box-shadow:inset 0 1px 1px #fff3,0 30px 100px #000b;backdrop-filter:blur(20px)}dialog::backdrop{background:#08080bbf;backdrop-filter:blur(12px)}.modal-top h2,.victory h2{color:#f4eae1}.modal-copy,.rule-example p,.victory p{color:#c6bab2}.primary{border-radius:40px;background:radial-gradient(ellipse at 10% 60%,#ff842ab5,transparent 80%),linear-gradient(145deg,#ffd9bf66,#d9987680,#dbd4d480);border:1px solid #ffdece66;box-shadow:inset 0 2px 2px #fff9,inset 0 -2px 4px #b47a54,0 0 28px #ff78352b,0 8px 18px #0005;color:#fff4eb;min-height:56px;font-size:15px}.secondary{border-radius:30px;border-color:#ffffff25;background:#ffffff04;color:#c4b9b0}
.setting-row{padding:15px 0;min-height:76px;border-color:#ffffff0c;color:#d3c5bb}.setting-row>button:not(.mars-switch){padding:9px 17px;border-radius:16px;border:1px solid #fff2;background:linear-gradient(145deg,#fff1,#0001);box-shadow:inset 0 1px 0 #fff2;color:#dbc9ba}
.setting-row .mars-switch{position:relative;width:126px;height:48px;border-radius:40px;padding:0 16px;text-align:left;font:700 12px Oxanium,sans-serif;border:1px solid #ffffff09;background:linear-gradient(145deg,#060608,#272529);box-shadow:inset 3px 4px 7px #0008,0 1px 0 #ffffff15;color:#bcb1ab;overflow:visible}
.switch-thumb{position:absolute;top:-2px;left:-2px;width:70px;height:50px;border-radius:32px;background:linear-gradient(135deg,#e0d6d840,#77717780,#aeaaad7d);border:1px solid #dfd8d54d;box-shadow:inset 0 2px 2px #fff6,inset 0 -1px 2px #fff2,0 3px 10px #0008;transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none}
.switch-thumb:after{content:'';position:absolute;inset:7px;right:9px;left:30px;border-radius:50%;background:linear-gradient(145deg,#d5c9c844,#8a808144);border:1px solid #fff1}.switch-thumb i{position:absolute;left:13px;top:13px;width:14px;height:24px;background:radial-gradient(circle,#ecdcce88 1.5px,#0005 2px,transparent 2.8px) 0 0/7px 8px;filter:drop-shadow(0 1px 0 #fff3)}
.mars-switch[aria-checked=false]{text-align:right}.mars-switch[aria-checked=true]{color:#fff1e4}.mars-switch[aria-checked=true] .switch-thumb{transform:translateX(58px);background:radial-gradient(ellipse at 0 55%,#ff8639cc,transparent 90%),linear-gradient(145deg,#eee5e359,#e59b7880,#bab4b591);border-color:#ffd3bd55;box-shadow:inset 0 2px 2px #fffa,inset 0 -2px 4px #fc7c4755,-14px 0 24px #ff781f60,0 4px 10px #0007}
.haptics-switch{padding:0 14px;border-radius:30px;background:#09090c;box-shadow:inset 0 2px 5px #000,0 1px 0 #fff2}.haptics-switch input{accent-color:#ff864a}
.welcome{background:linear-gradient(#16151a30,#171318ef),url('assets/mars-canyon.webp') center/cover}.welcome h2{font-size:44px}.welcome small{color:#eccbb2}.level-tile{border-radius:17px;border:1px solid #fff2;background:linear-gradient(145deg,#fff1,#0002);box-shadow:inset 0 1px 0 #fff2}.level-tile.current{background:linear-gradient(135deg,#ff82335a,#c8a08825);border-color:#ffad715c;box-shadow:inset 0 1px 0 #fff4,0 0 24px #ff70251a}.phone-link{background:linear-gradient(145deg,#ffac6720,#ffffff08);border-color:#ffffff24;box-shadow:inset 0 1px 0 #ffffff30,0 15px 30px #0007;border-radius:25px}#trainingPanel{background:linear-gradient(140deg,#ff813a15,#232027e8);border-color:#ffffff1c;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff1a}#toast{background:#29232dec;border-color:#ffffff28;color:#f8dcc5}#announcement{font-size:13px;color:#f3caae}
@media(min-width:1050px){header{max-width:none;padding:0 44px}main{max-width:min(550px,calc(100svh - 235px));margin-right:17vw;padding-top:8px}.mission-title{left:6vw;top:31%;max-width:30vw}.mission-title h1{font-size:clamp(90px,11.5vw,155px);letter-spacing:-7px}.mission-title p{font-size:17px}.mission-title>span{font-size:11px}.puzzle-heading{margin-bottom:16px}}
@media(max-width:480px){header{height:65px;padding:0 21px}.mission-title{margin:5px 0 21px}.mission-title h1{font-size:66px;margin:10px 0 7px}.mission-title>span{font-size:9px;letter-spacing:2.5px}.mission-title p{font-size:12px;margin:8px 0}main{padding:0 18px 24px}.puzzle-heading{height:55px;margin-bottom:16px}.session-switch{height:52px;width:230px}.session-switch .nav{height:40px;line-height:40px;font-size:12px}.level-button{height:48px;min-width:58px;padding:7px 10px}.board-shell{padding:10px;border-radius:25px}.board{gap:5px;padding:2px;border-radius:15px}.cell{border-radius:10px}.cell:before{background-size:auto,160px}.puzzle-status{padding:18px 5px}.assist{gap:10px;grid-template-columns:50px 1fr 50px 38px}.assist .tool,.assist .tool:last-child{height:52px;border-radius:17px}.assist #hint{height:54px}.assist #hint:after{right:18px;width:24px}#hintCount{left:103px;top:11px}.modal-inner{padding:26px}.mars-switch{flex-shrink:0}}
@media(max-height:740px) and (max-width:850px){header{height:56px}.mission-title{margin:0 0 15px}.mission-title h1{font-size:48px;margin:7px 0}.mission-title p{display:none}.mission-title>span{font-size:8px}.puzzle-heading{height:46px;margin-bottom:13px}.session-switch{height:46px;width:220px}.session-switch .nav{height:34px;line-height:34px}.board-shell{padding:8px}.puzzle-status{padding:14px 5px}.controls{padding-top:0}}
@media(prefers-reduced-motion:reduce){.session-switch:before,.switch-thumb,.cell,.assist .tool{transition:none!important}}body.reduced .session-switch:before,body.reduced .switch-thumb{transition:none}

.header-tools .iconbutton svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.session-switch:before{background:radial-gradient(ellipse at 0 50%,#ff8b35dd,transparent 85%),linear-gradient(145deg,#ffe8dc45,#ef9d7650 48%,#d5d2d064);box-shadow:inset 0 2px 3px #fff8,inset 0 -2px 5px #ff793d66,0 2px 10px #0006,-8px 0 32px #ff6c2266}
.native-switch{display:block;padding:0!important}.native-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:pointer}.native-switch .native-on,.native-switch .native-off{position:absolute;top:17px;font:700 12px Oxanium,sans-serif}.native-on{left:16px}.native-off{right:16px}.native-switch input:checked~.native-off,.native-switch input:not(:checked)~.native-on{display:none}.native-switch input:checked~.switch-thumb{transform:translateX(58px);background:radial-gradient(ellipse at 0 55%,#ff8639cc,transparent 90%),linear-gradient(145deg,#eee5e359,#e59b7880,#bab4b591);border-color:#ffd3bd55;box-shadow:inset 0 2px 2px #fffa,inset 0 -2px 4px #fc7c4755,-14px 0 24px #ff781f60,0 4px 10px #0007}.native-switch:focus-within{outline:2px solid #ffd2ae;outline-offset:4px}
body{background:linear-gradient(0deg,#111115ad,#111115f2 62%),url('assets/mars-canyon.webp') center 65%/cover fixed}
@media(min-width:1050px){main{max-width:min(550px,calc(100svh - 260px))}}
