:root{color-scheme:dark;font-family:Georgia,serif;color:#dfebe8;background:#08191e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 15%,#123840,transparent 65%),#08191e}main{max-width:1240px;margin:auto;padding:28px}nav{display:flex;justify-content:space-between;gap:15px;font:11px system-ui;letter-spacing:1px;color:#af9874}a{color:#d4b584;text-decoration:none}header{display:flex;justify-content:center;align-items:center;gap:24px;margin:30px 0}header img{width:105px;border-radius:20px}header p{color:#a9c3c8}h1{font-weight:normal;font-size:clamp(30px,4vw,50px);margin:10px 0}h1 em{color:#8dddff}.eyebrow{font:10px system-ui;letter-spacing:2px;color:#c5a774}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px}.chamber,aside{border:1px solid #9a764e;border-radius:15px;background:#0d242b;box-shadow:inset 0 0 0 4px #162e32,0 16px 45px #0004}.chamber{overflow:hidden;align-self:start}.status{display:flex;justify-content:space-between;gap:12px;padding:20px;font:12px system-ui;color:#b9cfd0}.status strong{color:#e2c895}svg{display:block;width:100%;background:radial-gradient(ellipse,#143a46,#091e27)}#message{font:14px/1.6 system-ui;min-height:62px;padding:0 22px;color:#d9c69f}aside{padding:24px}h2{font-size:25px;font-weight:normal;margin-bottom:8px}label{font:12px system-ui;color:#bfcecb;display:block;margin:12px 0}button,select{border:1px solid #75867f66;border-radius:7px;color:#e6e4d4;background:#17383f;padding:10px;font:13px system-ui;cursor:pointer}select{width:100%}button:hover{background:#26515a}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid #f1d39e;outline-offset:3px}small{display:block;font-size:10px;margin-top:6px}.muted,footer{color:#a9c3c5;font:12px/1.7 system-ui}#controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#controls button{font-size:24px;padding:8px 2px}.sequence-heading{display:flex;align-items:center;justify-content:space-between;font:12px system-ui}#sequence{display:flex;flex-wrap:wrap;gap:6px;min-height:72px;max-height:150px;overflow:auto;padding:10px;list-style:none;background:#071a21;border-radius:7px;margin:0 0 10px}#sequence li{background:#284750;border:1px solid #6294a4;padding:6px;font:12px system-ui;border-radius:4px}#sequence li.active{background:#a7844c;color:white}.row{display:flex;gap:8px}.row button{flex:1}.primary{display:block;width:100%;background:#c5a16a;color:#12272c;font-weight:bold;padding:15px;margin:15px 0 10px}.primary:hover{background:#e0c18f}#new,#replay{width:100%;margin:6px 0}footer{padding:24px 5px;max-width:900px}footer strong{color:#c9ae81}footer p{margin:7px 0}@media(max-width:850px){.layout{grid-template-columns:1fr}header img{width:75px}main{padding:16px}nav{font-size:9px}header{gap:14px}.status{font-size:11px}}
/* HeroClass compact board-and-panel layout. */
main{max-width:1500px;height:100dvh;min-height:570px;margin:auto;padding:16px;display:grid;grid-template-rows:38px minmax(0,1fr);gap:10px}nav{align-items:center;font-size:9px}nav a{font:700 13px system-ui;letter-spacing:0;padding:8px 12px;border:1px solid #a48c5c77;border-radius:7px;background:#152b2e;color:#ecd6ad;white-space:nowrap}nav a:hover{background:#29474b}nav a:focus-visible{outline:2px solid #f1d39e;outline-offset:3px}.layout{grid-template-columns:minmax(0,1fr) 300px;gap:14px;min-height:0}.chamber,aside{min-height:0;box-shadow:inset 0 0 0 2px #162e32,0 16px 45px #0003;border-color:#9a764e66}.chamber{align-self:stretch;display:flex;flex-direction:column}.status{padding:14px 18px;font-size:10px}#board-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#board{width:100%;height:100%;min-height:0;background:none}#message{font:12px/1.5 system-ui;margin:0;min-height:60px;padding:12px 18px}aside{padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}header{display:block;margin:0 0 auto;text-align:left}h1{font-size:30px;line-height:1.05;margin:0}.eyebrow{font-size:9px;letter-spacing:3px;margin:0 0 8px}.tagline{font:12px system-ui;margin:9px 0 0}label{font-size:10px;margin:0 0 6px}button,select{font-size:12px;padding:9px;min-height:36px}.mode-control{margin:0}#controls{gap:6px}#controls button{font-size:23px;padding:6px 1px;min-height:50px}small{font-size:9px;margin-top:3px}.sequence-heading{font-size:10px;margin-bottom:6px}.sequence-heading label{margin:0}#sequence{min-height:56px;max-height:80px;margin:0 0 7px;padding:7px;gap:4px;align-content:flex-start}#sequence li{font-size:11px;padding:4px}.row{gap:6px}.row button{min-height:32px;padding:6px}.primary{margin:0;padding:11px;font-size:12px}.submit-panel{margin-top:auto}#new,#replay,#reload{width:100%;margin:6px 0 0;font-size:11px;min-height:32px;padding:7px}#help{width:100%;min-height:32px;padding:7px}dialog{color:#dfebe8;background:#142a2f;border:1px solid #ac8753;border-radius:14px;max-width:530px;width:calc(100% - 32px);max-height:85dvh;padding:24px;font:14px/1.7 system-ui}dialog::backdrop{background:#000b}dialog h2{font:28px Georgia;margin-top:5px}dialog li{margin:8px 0}.close{float:right}@media(min-width:701px) and (max-height:650px){main{min-height:550px;padding:10px}aside{padding:12px;gap:8px}header{margin:0}h1{font-size:25px}.tagline{display:none}.eyebrow{margin-bottom:5px}#controls button{min-height:44px;font-size:20px}#sequence{max-height:56px}.status{padding:10px 16px}}
@media(max-width:700px){main{padding:10px;min-height:700px}.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}aside{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;overflow:visible}header{grid-column:1;grid-row:1;align-self:center}header .eyebrow,.tagline{display:none}h1{font-size:22px}h1 br{display:none}.mode-control{grid-column:2;grid-row:1}.move-panel{grid-column:1;grid-row:2}.plan-panel{grid-column:2;grid-row:2}#controls{gap:4px}#controls button{font-size:20px;min-height:50px}small{font-size:8px}#sequence{min-height:59px;max-height:59px;padding:5px}.submit-panel{grid-column:1/-1;grid-row:3;margin:0;display:flex;gap:6px;flex-wrap:wrap}.submit-panel button{flex:1;min-width:100px;margin:0}#help{grid-column:1/-1;grid-row:4}.status{font-size:9px;padding:9px 13px}#message{font-size:10px;min-height:46px;padding:7px 13px}nav{font-size:8px;letter-spacing:0}nav a{font-size:11px;padding:8px}button,select{font-size:11px}}