*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08111b;color:#fff4db;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff0b3;outline-offset:5px}#stage{position:absolute;width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;container-type:size;background:#142638;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 10cqw #07111a55}.screen{position:absolute;inset:0;z-index:3}.hidden{display:none!important}#menu{background:linear-gradient(90deg,#0b192bf5 0%,#0b192bdf 35%,#0d1a2966 70%,#0d1a2940);padding:6.4cqh 5.8cqw}.intro{position:relative;z-index:2;width:51%}.eyebrow{font-size:1.1cqw;letter-spacing:.22em;color:#d8c295;font-weight:700;display:flex;align-items:center;gap:10px}.eyebrow>span{width:.55cqw;height:.55cqw;background:#edbd61;border-radius:50%}h1{font-size:4.9cqw;line-height:.91;letter-spacing:-.06em;margin:3.2cqh 0 0;font-weight:900}h1 strong{display:inline-block;font-size:7.55cqw;letter-spacing:-.065em;color:#f2c26e;text-shadow:0 .4cqw 0 #332a24}h1 strong span{display:inline-block;font-size:2.2cqw;vertical-align:top;margin:.9cqw 0 0 .7cqw;color:#f9dda2}.tagline{font-size:2.25cqw;line-height:1.18;font-weight:700;margin:3cqh 0 3cqh;letter-spacing:-.03em}.tagline em{color:#e8bd70;font-style:normal}.description{font-size:1.25cqw;color:#bcc5c9;line-height:1.6;margin:0 0 3cqh}.primary{display:flex;justify-content:space-between;align-items:center;gap:2cqw;background:#edbd65;color:#172332;padding:1.35cqw 1.7cqw;min-width:22cqw;border-radius:.45cqw;font-size:1.18cqw;font-weight:900;letter-spacing:.08em;box-shadow:0 .35cqw 0 #b17e3a;transition:background .15s,transform .15s}.primary:hover{background:#ffda8d;transform:translateY(-2px)}.primary:active{transform:translateY(2px);box-shadow:none}.primary:disabled{opacity:.6;cursor:wait}.primary span{font-size:1.8cqw;line-height:1}.menu-actions{display:flex;align-items:center;gap:1.8cqw;margin-top:2.8cqh;font-size:.86cqw;letter-spacing:.08em}.menu-actions button{padding:0;background:none;border-bottom:1px solid #d8c29560;padding-bottom:4px;font-size:inherit;letter-spacing:inherit}.menu-actions>span{color:#8e9ba9}.menu-actions b{color:#f4deaf;margin-left:.6cqw}.hero{position:absolute;right:4%;top:19%;width:43%;height:64%}.hero>img{position:absolute;width:94%;left:0;top:0;filter:drop-shadow(0 20px 20px #0008);animation:float 3s ease-in-out infinite}.hero-ring{position:absolute;width:31cqw;height:31cqw;border:1px solid #d6b46535;border-radius:50%;top:2cqh;left:3cqw;box-shadow:0 0 0 3cqw #d6b46508,0 0 0 6cqw #d6b46505}.menu-footer{position:absolute;bottom:3cqh;left:5.8cqw;right:5.8cqw;display:flex;justify-content:space-between;color:#9aa6b1;font-size:.75cqw;letter-spacing:.16em}#utilities{position:absolute;right:2cqw;top:2cqh;display:flex;gap:.5cqw;z-index:8}#utilities button{background:#101f2bd9;border:1px solid #ffffff25;border-radius:.5cqw;padding:.65cqw .8cqw;font-size:.8cqw;letter-spacing:.07em;color:#ded9ca;min-width:2.7cqw}#utilities #full,#utilities #pause{font-size:1.25cqw;padding:.3cqw .7cqw}.modal{display:flex;align-items:center;justify-content:center;background:#081421b8;backdrop-filter:blur(9px)}.card{width:62cqw;background:linear-gradient(135deg,#182b3c,#0d1b2a);border:1px solid #d2b67b60;padding:3.3cqw;border-radius:1.3cqw;box-shadow:0 2cqw 5cqw #0005}.card h2{font-size:3.2cqw;letter-spacing:-.04em;margin:1.3cqw 0 2cqw}.card p{color:#b9c5ce;font-size:1.2cqw;line-height:1.5}.briefing{display:grid;grid-template-columns:1fr 1fr;gap:.6cqw 2.5cqw;margin-bottom:1.5cqw}.briefing b{color:#e8be70;letter-spacing:.1em;font-size:1cqw}.briefing p{margin:.6cqw 0 1.5cqw}.compact{width:48cqw;text-align:center}.compact .eyebrow,.compact .primary{justify-content:center}.compact .primary{width:100%}.quiet{background:none;display:block;margin:1.7cqw auto 0;color:#acbac7;font-size:.9cqw;letter-spacing:.1em;padding:.4cqw}#finalScore{font-size:5cqw;font-weight:900;color:#f0c474;letter-spacing:-.05em;margin:-.8cqw 0 1.5cqw}.result-stats{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:1.3cqw 0;margin-bottom:2cqw;font-size:.75cqw;color:#98a9b7;letter-spacing:.08em}.result-stats b{display:block;color:#f0eadb;font-size:1.6cqw;margin-top:.6cqw}.compact .eyebrow{display:block}#touchControls{position:absolute;inset:0;pointer-events:none;z-index:2}#joystick{pointer-events:auto;position:absolute;bottom:4cqh;left:3cqw;width:9.5cqw;height:9.5cqw;border-radius:50%;border:1px solid #d5d9d55a;background:#15233366;touch-action:none;display:grid;place-items:center}#stick{width:39%;height:39%;background:#e6ddc84a;border:1px solid #f5e5c975;border-radius:50%;pointer-events:none}#fire{position:absolute;bottom:4cqh;right:3cqw;width:8.5cqw;height:8.5cqw;border-radius:50%;background:#162738a8;border:2px solid #e2bc79c0;font-size:1.3cqw;font-weight:900;letter-spacing:.08em;pointer-events:auto;touch-action:none;box-shadow:0 0 0 .55cqw #16273844}#fire span{display:block;font-size:.65cqw;font-weight:400;margin-top:.4cqw;color:#adbac5}#fire:active{background:#bc914bd9}#rotateHint{display:none;position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;padding:8px;background:#122335;z-index:10}#status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(100%)}@keyframes float{50%{transform:translateY(-2cqh) rotate(2deg)}}@media(orientation:portrait) and (pointer:coarse){#rotateHint{display:block}#stage{overflow:visible}.menu-footer{bottom:4cqh}#rotateHint{bottom:-44px}}@media(prefers-reduced-motion:reduce){.hero>img{animation:none}}
.boss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;margin:1.5cqw 0 2cqw}.boss-grid button{background:#304452;border:1px solid #baa37666;border-radius:.6cqw;padding:1.3cqw .5cqw;color:#f1d29a;font-size:.9cqw;font-weight:bold;letter-spacing:.04em}.boss-grid button:hover{background:#486171}.audio-levels{display:grid;grid-template-columns:1fr 1fr;gap:1cqw 2cqw;margin-bottom:2cqw}.audio-levels label{display:flex;align-items:center;justify-content:space-between;font-size:1cqw;color:#c3ccd2;gap:1cqw}.audio-levels input[type=range]{width:62%;accent-color:#edbd65}.audio-levels .flash-option{grid-column:1/-1;justify-content:flex-start}.flash-option input{accent-color:#edbd65}

.menu-actions{flex-wrap:wrap;gap:1cqw 1.5cqw}.menu-actions>span{white-space:nowrap}

#introControls{position:absolute;inset:0;z-index:4;pointer-events:none}#skipIntro{position:absolute;bottom:5cqh;right:3cqw;pointer-events:auto;background:#152c40ed;border:1px solid #dfbc78;border-radius:.6cqw;padding:1.2cqw 1.8cqw;font-size:1cqw;font-weight:bold;letter-spacing:.08em}

.boss-card{width:78cqw;padding:2.5cqw}.boss-card h2{margin:.8cqw 0}.boss-card p{margin:.5cqw 0 1cqw}.boss-grid{grid-template-columns:repeat(5,1fr);gap:.7cqw}.boss-grid button{min-height:4.4cqw;font-size:.85cqw;line-height:1.5}.rush-action{display:flex;align-items:center;justify-content:center;gap:2cqw}.rush-action>span{font-size:.9cqw;color:#d3c49c}.boss-card .quiet{margin:1.2cqw auto 0}

.menu-footer{align-items:center;gap:1.5cqw}#buildVersion{white-space:nowrap;font-size:clamp(10px,1cqw,14px);color:#e2bc79;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* The briefing is a single screen: diagrams and four short rules. */
.help-card{width:90cqw;max-height:94cqh;padding:1.6cqw;display:flex;flex-direction:column;gap:.8cqw}
.help-card h2{font-size:clamp(18px,2.6cqw,36px);margin:0}.help-card>.eyebrow{font-size:clamp(9px,.9cqw,13px)}
.help-content{min-height:0}
.controls-guides{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw;margin-bottom:1cqw}
.controls-guides figure{margin:0;padding:.7cqw;border:1px solid #bba77555;border-radius:.8cqw;background:#0b1b2b}
.controls-guides figcaption{color:#f1cc87;font-size:clamp(10px,1.1cqw,16px);font-weight:700;letter-spacing:.12em;margin-bottom:.4cqw}
.controls-guides svg{display:block;width:100%;height:auto;max-height:26cqh}.controls-guides figure p{margin:.2cqw 0 0;text-align:center;font-size:clamp(9px,.95cqw,14px)}
.help-card .briefing{gap:.5cqw 2cqw;margin:0}.help-card .briefing b{font-size:clamp(9px,1cqw,15px)}
.help-card .briefing p{font-size:clamp(10px,1.05cqw,15px);line-height:1.3;margin:.3cqw 0 .5cqw}
.help-card>.primary{flex-shrink:0;min-height:30px;font-size:clamp(10px,1.1cqw,16px);padding:.8cqw 1.5cqw;letter-spacing:.03em}
@container (max-width:650px){.help-card{width:96cqw;gap:4px;padding:8px}.help-card>.eyebrow{display:none}.controls-guides figure{padding:5px}.controls-guides{gap:8px}.help-card .briefing{gap:4px 12px}}
/* On an upright phone the briefing uses the available screen, rather than
   squeezing text into the letterboxed landscape playfield. */
@media(orientation:portrait){#stage:has(#help:not(.hidden)){width:100vw;height:100dvh}#stage:has(#help:not(.hidden)) #rotateHint{display:none}}
@container (max-aspect-ratio:1/1){.controls-guides{grid-template-columns:1fr}.controls-guides svg{max-height:22cqh}.help-card{gap:12px;padding:14px}.help-card .briefing p{font-size:12px}.help-card .briefing b{font-size:11px}.help-card>.primary{min-height:40px}}
