:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#213d39;background:#faf6e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;font-weight:700;border:1.5px solid #213d39;border-radius:12px;padding:12px 18px;min-height:44px;background:#faf6e9;color:#213d39;cursor:pointer}button:hover{background:#e6eddf}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b45840;outline-offset:4px}.primary{background:#245d59;color:#fff5df;box-shadow:0 4px 0 #163d38}.primary:hover{background:#347b70}header{display:flex;align-items:center;justify-content:space-between;padding:24px 5%;border-bottom:1px solid #dcdcc9;gap:20px}.brand{text-decoration:none;color:inherit;font-weight:950;font-size:24px;letter-spacing:-1px}.brand span{color:#4b8d80}.brand small{font-size:10px;display:block;letter-spacing:5px;margin-top:2px}#progress{font-size:12px;letter-spacing:2px;font-weight:bold}main{max-width:1480px;margin:auto;padding:35px 5% 20px;display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#587366}h1{font-size:clamp(24px,2.7vw,40px);margin:9px 0;letter-spacing:-1px}#subtitle{margin:0 0 22px;color:#587366;line-height:1.5}.arena-wrap{position:relative;border:2px solid #294b40;border-radius:25px;overflow:hidden;background:#e4e8d6;box-shadow:0 8px 0 #dce0ca}canvas{width:100%;height:auto;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e8edd342;padding:20px}.overlay:empty{display:none}.panel{max-width:580px;width:100%;background:#fff9eaf2;border:2px solid #294b40;border-radius:20px;padding:25px;text-align:center;box-shadow:0 10px 30px #28453920}.panel h2{font-size:30px;margin:0 0 10px}.panel p{color:#587366;line-height:1.5}.panel .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.choices{display:grid;gap:8px}.choices button{text-align:left;background:#fffdf4}.choices small{display:block;font-size:12px;font-weight:400;line-height:1.4;margin-top:5px}.command-bar{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:10px}#command{font-size:14px;font-weight:bold}.controls{font-size:12px;color:#647369;line-height:1.6}aside{align-self:start;background:#f0eedf;border:1px solid #dcdcc9;border-radius:20px;padding:25px;margin-top:40px}aside h2{font-size:32px;margin:12px 0}.pill{font-size:12px;border:1px solid #b5c5af;border-radius:8px;padding:6px;vertical-align:middle}.personality{font-size:14px;line-height:1.6;color:#637467}dl{display:grid;grid-template-columns:1fr auto;font-size:14px;gap:12px;border-top:1px solid #d4dcc6;padding-top:20px}dd{margin:0;font-weight:bold}h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:25px}ul{padding-left:18px;font-size:14px;line-height:1.8}.aside-note{border-top:1px solid #d4dcc6;padding-top:20px;font-size:13px;line-height:1.6;color:#637467}#retries{font-size:12px;font-weight:bold;margin-top:20px}footer{max-width:1480px;margin:0 auto;padding:20px 5%;color:#778175;font-size:12px;display:flex;justify-content:space-between;gap:10px}@media(max-width:800px){header{padding:16px 5%}.brand{font-size:19px}#progress{font-size:10px;letter-spacing:1px}main{display:block;padding-top:24px}aside{margin-top:20px;padding:20px}aside dl{grid-template-columns:1fr auto 1fr auto}aside .aside-note{display:none}.panel{padding:14px}.panel h2{font-size:23px}.panel p{font-size:13px;margin:8px 0 13px}.overlay{padding:10px}.choices button{padding:8px 12px}.choices small{font-size:11px}.controls{font-size:11px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Portrait world framing leaves enough room for legible decision cards. */
.upgrade-comparison{display:block;margin-top:7px;color:#245d59;font-size:12px;line-height:1.5;font-weight:700}.command-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.command-actions button{padding:10px 12px;font-size:12px}
@media(max-width:600px){.overlay:not(:empty){position:absolute;padding:12px;background:#e8edd342}.panel{max-width:none}.choices button{min-height:58px}.command-bar{align-items:flex-start}#command{padding-top:10px;max-width:55%}.arena-wrap{border-radius:18px}.controls{line-height:1.8}header{gap:10px}header #pause{padding:10px}aside dl{grid-template-columns:1fr auto}}
@media(max-width:600px){header{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:12px 5%}.brand{grid-column:1;grid-row:1}#progress{grid-column:1;grid-row:2;white-space:nowrap;font-size:10px}header #pause{grid-column:2;grid-row:1 / 3}.brand small{display:none}main{padding-top:16px}h1{font-size:25px}#subtitle{font-size:13px;margin-bottom:14px}.eyebrow{font-size:9px}canvas{aspect-ratio:600 / 960}}
/* A compact in-battle readout keeps hull and command ownership beside the action. */
.battle-readout{position:relative;z-index:2;background:#faf6e9;border:1px solid #bdcbb8;border-radius:12px;padding:9px 90px 9px 12px;margin-bottom:12px;font-size:12px}.battle-readout>div{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}.battle-readout #pause{position:absolute;right:9px;top:9px;padding:9px 12px;min-width:72px;min-height:44px;font-size:12px}.battle-readout strong{white-space:nowrap}.battle-readout p{margin:5px 0 0;font-size:11px;line-height:1.4}.battle-readout #battle-feedback{font-weight:700;color:#245d59}.quick-controls{color:#52685a}@media(max-width:800px){.battle-active .battle-readout{position:sticky;top:0;box-shadow:0 3px 8px #213d3915}}