*{box-sizing:border-box}body{color:#f7eedb;background:#101923;margin:0;font:15px/1.5 system-ui,sans-serif}canvas{width:100%;height:100%;position:fixed;inset:0}header{background:linear-gradient(#101923ee,#0000);justify-content:space-between;align-items:center;gap:16px;padding:20px 32px;display:flex;position:relative}a{color:#edc994}header span,.kicker{letter-spacing:.2em;font-size:11px}main{pointer-events:none;justify-content:space-between;gap:24px;padding:15px 32px;display:flex;position:relative}.intro h1{margin:8px 0;font:clamp(36px,5vw,72px)/1.1 Georgia,serif}.intro p{color:#d1c9ba}.roster{pointer-events:auto;background:#13212bee;border:1px solid #a8916844;border-radius:12px;width:285px;padding:18px}.roster h2{margin-bottom:6px;font:26px Georgia,serif}.roster p{font-size:13px}.roster label{margin-bottom:8px;display:block}select,button{font:inherit;color:inherit;cursor:pointer;background:#202e39;border:1px solid #a8916877;border-radius:6px;padding:10px 14px}select{width:100%}button:hover{background:#3b4f5e}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #ffe2a7}.combat{background:#101c29f2;border:1px solid #a8916855;border-radius:14px;width:min(740px,100% - 32px);padding:16px 22px;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 50px #0007}.meters{gap:28px;display:flex}.meters label{letter-spacing:.05em;flex:1;font-size:12px}meter{width:100%;height:12px;margin-top:5px;display:block}#feedback{color:#fd9;min-height:24px;margin:12px 0}.actions{flex-wrap:wrap;gap:8px;display:flex}#challenge{background:#8b5127}#counter{background:#254653}.help,.motion{color:#c1c5cb;font-size:12px}.touch{gap:6px;display:none}.motion{align-items:center;gap:7px;display:flex}#advance{padding:5px 8px;font-size:12px}summary{cursor:pointer}details[open]{max-height:240px;overflow:auto}body.failed canvas{display:none}@media (width<=700px){header{padding:12px 16px}header span{display:none}main{padding:0 16px}.intro{display:none}.roster{width:100%;padding:10px 14px}.roster h2,.roster #metaphor{display:none}.roster p{margin:5px 0}.combat{padding:12px;bottom:8px}.help{margin:7px 0}.touch{display:flex}.actions button{flex:1;padding:9px;font-size:12px}.meters{gap:12px}#feedback{font-size:13px}.motion{margin-top:8px}}@media (width>=701px){.combat{padding:10px 18px;bottom:10px}.help{margin:5px 0}.combat #feedback{margin:7px 0}.intro h1{font-size:52px}.motion{margin-top:4px}}@media (width<=360px){.combat{width:calc(100% - 16px);padding:8px}.help{display:none}.actions button{padding:7px 5px}.combat #feedback{margin:7px 0;font-size:12px}.motion{gap:3px;font-size:10px}.motion #advance{padding:4px;font-size:10px}.touch{margin-top:7px}.touch button{padding:7px 13px}.roster label{margin-bottom:3px;font-size:12px}.roster select{padding:7px}.roster{padding:8px 10px}}@media (height<=550px) and (orientation:landscape){header{padding:8px 12px}header span,.intro{display:none}header button{padding:7px 12px}main{width:clamp(140px,22vw,200px);padding:0;display:block;position:fixed;top:60px;left:12px}.roster{width:100%;padding:8px}.roster h2,.roster #metaphor{display:none}.roster label{margin-bottom:4px;font-size:12px}.roster select{padding:7px;font-size:12px}.roster p,summary{font-size:11px}.roster p{margin:5px 0}details[open]{max-height:calc(100vh - 180px);overflow:auto}.combat{width:clamp(190px,27vw,240px);padding:8px;inset:60px 12px 12px auto;overflow:auto;transform:none}.meters{gap:8px}.meters label{font-size:10px}.combat #feedback{min-height:36px;max-height:60px;margin:4px 0;font-size:11px;line-height:1.35;overflow:auto}.help{display:none}.actions{grid-template-columns:1fr 1fr;gap:6px;display:grid}.actions button{min-height:44px;padding:5px 4px;font-size:11px}.touch{gap:4px;margin-top:4px;display:flex}.touch button{flex:1;padding:7px 3px}.motion{flex-wrap:wrap;gap:2px;margin-top:4px;font-size:10px}.motion #advance{padding:2px 4px;font-size:10px}}[hidden]{display:none!important}#flash-controls{border-left:2px solid #a7dfeb;margin:5px 0 10px;padding-left:10px}#flash-controls p{margin:0 0 4px;font-size:12px}.counter-forms{align-items:center;gap:7px;display:flex}.counter-forms button{min-height:44px;padding:6px 14px;font-size:13px}.counter-forms [aria-pressed=true]{outline-offset:1px;background:#385768;outline:2px solid #e1f9ff}.counter-forms span{color:#c1c5cb;font-size:10px}#flash-debrief{max-height:min(570px,100dvh - 220px);padding:0 3px 4px;overflow:auto}#flash-debrief h2{margin:12px 0;font:25px/1.2 Georgia,serif}#flash-debrief p{margin:9px 0;font-size:13px;line-height:1.4}#transfer-question{color:#ffe1ad;font-weight:650}.transfer-choices{gap:7px;display:grid}.transfer-choices button{text-align:left;min-height:44px;font-size:13px}#lesson-status{font-weight:600}#flash-debrief details{max-height:none;margin:12px 0;font-size:12px}@media (height<=550px) and (orientation:landscape){body.flash-result #arena-roster{visibility:hidden}body.flash-result .combat{width:min(680px,100% - 24px);left:50%;right:auto;transform:translate(-50%)}#flash-side-slot #flash-controls{margin-top:12px;padding-left:6px}}@media (width<=700px) and (height<=700px) and (orientation:portrait){header{padding:6px 12px}header button{min-height:44px;padding:5px 12px}.roster{padding:5px 8px}.roster label{display:none}.roster select{min-height:44px;padding:4px 8px}.roster #tier{margin:2px 0;font-size:10px}.roster summary{font-size:11px}.combat{padding:6px 8px}.combat #feedback{margin:4px 0;line-height:1.25}#flash-controls{align-items:center;gap:6px;margin:4px 0;padding-left:5px;display:flex}#flash-controls p{flex:1;margin:0;font-size:10px;line-height:1.2}.counter-forms{flex:1;gap:4px}.counter-forms span{display:none}.counter-forms button{white-space:nowrap;min-height:44px;padding:4px;font-size:11px}.actions button,.touch button{min-height:44px}.touch,.motion{margin-top:4px}body.flash-result #arena-roster{display:none}#flash-debrief{max-height:calc(100dvh - 125px)}}#flash-debrief button:focus-visible,#lesson-title:focus-visible{outline-offset:2px;outline:3px solid #ffe2a7}@media (width<=700px){#flash-controls{margin:4px 0 8px}#flash-controls p{font-size:11px}.counter-forms button{flex:1;padding:5px 8px}.counter-forms span{max-width:70px}#flash-debrief h2{font-size:22px}}@media (height<=550px) and (orientation:landscape){#flash-controls p{font-size:10px}.counter-forms{flex-wrap:wrap}.counter-forms span{display:none}.counter-forms button{flex:1;padding:4px;font-size:11px}#flash-debrief{max-height:calc(100dvh - 130px)}#flash-debrief h2{font-size:19px}.transfer-choices button{font-size:12px}}
