:root{color-scheme:dark;--gold:#d7b978;--ink:#0a1424;--muted:#9baac1;--teal:#61dfd3}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#1e3048,#090f1b 70%);color:#edf1f7;font:15px/1.55 system-ui,sans-serif}button,select{font:inherit;color:inherit;background:#18263b;border:1px solid #39465b;border-radius:7px;padding:10px;cursor:pointer}button:hover{border-color:var(--gold);background:#263a51}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--teal)}button:disabled{opacity:.4;cursor:default}header{padding:20px 5%;border-bottom:1px solid #344050;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{text-decoration:none;color:var(--gold);font:bold 32px Georgia;display:flex;align-items:center;gap:14px}.brand span{font:700 13px system-ui;letter-spacing:3px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}main{max-width:1400px;margin:auto;padding:28px 4%}h1{font:clamp(28px,4vw,46px) Georgia;margin:6px 0}h2{font:28px Georgia;margin:10px 0}h3{font-size:14px;margin-top:24px}p{color:var(--muted)}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.layout{display:grid;grid-template-columns:minmax(190px,1fr) minmax(320px,1.9fr) minmax(220px,1fr);gap:26px}aside{background:#101b2bc9;border:1px solid #2a384c;border-radius:12px;padding:22px;height:fit-content}.arena{min-width:0}.boardtop,.coordinates{display:flex;justify-content:space-between;color:var(--gold);font-size:11px;letter-spacing:1.5px;padding:10px 4px}#board{display:grid;grid-template-columns:repeat(5,1fr);aspect-ratio:1;border:4px solid #a68b56;border-radius:8px;padding:5px;background:#0b1423;box-shadow:0 20px 60px #0008;gap:4px}.tile{padding:0;position:relative;min-width:0;border-radius:4px;border:1px solid #465064;background:linear-gradient(135deg,#344156,#202c3e);overflow:hidden;aspect-ratio:1}.tile.deploy{background:linear-gradient(135deg,#213f50,#172e40);border-color:#3a6877}.tile.preview{box-shadow:inset 0 0 0 2px #d7b978}.tile.move:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#6de2e0;left:45%;top:45%}.tile.selected{outline:2px solid #80ffeb;z-index:1}.tile.fire{background:#a05e33}.tile .coord{position:absolute;top:2px;left:4px;font-size:9px;color:#9aa9bb}.unit{position:absolute;inset:6% 9% 15%;color:#66e0dc;filter:drop-shadow(0 2px 3px #000);transition:transform .3s}.enemy .unit{color:#f37e84}.unit svg{width:100%;height:100%}.hp{position:absolute;bottom:4%;left:8%;right:8%;height:5px;background:#080e18;border-radius:4px}.hp i{display:block;height:100%;background:#6be2cd;border-radius:4px}.enemy .hp i{background:#ef8189}.hptext{position:absolute;bottom:12%;right:5%;font-size:10px;background:#0c1427da;border-radius:3px;padding:0 3px}.status{position:absolute;top:1%;right:3%;color:#fff;font-size:10px}.hit{animation:hit .7s}.moving{animation:move .65s}.effect{position:absolute;top:30%;left:25%;color:#fff1ad;font-size:20px;font-weight:bold;text-shadow:0 2px 4px #000;pointer-events:none;animation:float 1s both}@keyframes hit{30%{box-shadow:inset 0 0 30px #ff6666;transform:scale(.94)}}@keyframes move{50%{transform:translateY(-6px);filter:brightness(1.5)}}@keyframes float{to{transform:translateY(-20px);opacity:0}}.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.toolbar button,.toolbar select{flex:1;font-size:12px;padding:9px 6px}.primary{width:100%;padding:16px;background:linear-gradient(110deg,#d8bc7e,#ac8745);color:#132030;font-weight:800;letter-spacing:3px;border:1px solid #edd599}.primary span{float:right}#notice{min-height:48px;font-size:13px;padding:8px 0;color:#cad9e9}.economy{padding-bottom:18px;border-bottom:1px solid #334257}.economy span,.economy small{display:block;color:var(--muted);font-size:11px;letter-spacing:1px}.economy strong{font:35px Georgia;color:var(--gold)}.recruit{display:flex;width:100%;align-items:center;text-align:left;margin:7px 0;gap:10px}.recruit svg{width:38px;height:38px;color:var(--teal)}.recruit small{display:block;font-size:10px;color:var(--muted)}.recruit b{margin-left:auto;color:var(--gold)}.active{border-color:var(--teal)!important;background:#224450!important}.inspect{font-size:12px;background:#0a1525;padding:12px;border-radius:7px;margin-top:12px}.inspect strong{color:var(--teal)}#spells{display:grid;gap:6px}#spells button{font-size:12px;text-align:left}.muted,.rules{font-size:12px}.badge{font-size:10px;color:var(--teal);border:1px solid #316363;border-radius:5px;padding:6px}ol{padding-left:22px;font-size:13px}li{padding:8px 0;border-bottom:1px solid #253348}li.done{color:var(--teal)}#result{border-top:1px solid var(--gold);margin-top:22px}#result h2{color:var(--gold)}#result button{margin:5px}#log{max-height:220px;overflow:auto;font:11px monospace;color:var(--muted)}#log button{width:100%;text-align:left;font-size:11px}#explanation{font-size:12px}#scrub{width:100%;accent-color:var(--gold)}footer{text-align:center;font-size:10px;letter-spacing:3px;color:#72819a;margin:32px}details{font-size:12px} [hidden]{display:none!important}@media(max-width:1000px){.layout{grid-template-columns:minmax(320px,1.5fr) minmax(220px,1fr)}.layout>aside:first-child{grid-column:1/-1}.rules{display:none}ol{display:flex;flex-wrap:wrap;gap:8px 30px}li{max-width:180px}.heading{align-items:flex-start}}@media(max-width:620px){header{padding:14px}.brand{font-size:24px}.brand span{font-size:10px}header>.eyebrow{display:none}main{padding:20px 12px}.heading{display:block}.heading select{width:100%}.layout{display:flex;flex-direction:column;gap:16px}.arena{order:0}aside{width:100%;padding:16px}.layout>aside:first-child{order:2}.layout>aside:last-child{order:1}#roster{display:grid;grid-template-columns:1fr 1fr;gap:6px}.recruit{margin:0;font-size:12px;padding:7px}.coordinates{font-size:9px}.tile .coord{font-size:8px}h1{font-size:30px}}

/* Phase 1: compact, accessible inspection and replay */
#inspect{max-height:260px;overflow:auto;margin:8px 0}#inspect summary{cursor:pointer;font-weight:700;min-height:32px}#inspect p{margin:6px 0}.toolbar button,.toolbar select{min-height:44px;min-width:70px}.tile.acting{border:3px solid white}.tile.targeted:before{content:'TARGET';position:absolute;top:16%;left:3px;font-size:9px;z-index:6;color:#fff;background:#182030}.tile.blocked{border-style:dashed}.tile.move:after{background:#76acff}.mastery{color:var(--gold)}#hints small{display:block;color:var(--muted)}#hints button{min-height:44px}.tile.obstacle{background:repeating-linear-gradient(45deg,#101722,#101722 5px,#68717b 6px,#68717b 8px)}
@media(max-width:620px){#inspect{max-height:180px;font-size:12px}.toolbar{gap:5px}.toolbar button,.toolbar select{flex:1 1 28%}.effect{font-size:12px;left:8%}#explanation{max-height:180px;overflow:auto}header button{font-size:12px}}

.tile.legal-target{border-style:double;border-width:3px}.tile.legal-target:after{content:"ATTACK";position:absolute;bottom:2px;left:2px;font-size:8px;color:#ffcf9a}

.tile.cover{background-image:repeating-linear-gradient(135deg,#324f4688,#324f4688 5px,#20354488 5px,#20354488 10px)}.tile.cover:before{content:'COVER';position:absolute;left:2px;top:12px;font-size:8px;z-index:5;color:#c5ffdc}.tile.control-point{border:3px dashed #f6d780}.tile.control-point:after{content:'POINT';position:absolute;bottom:2px;left:3px;font-size:8px;color:#f6d780}.tile.obstacle:before{content:'WALL';position:absolute;inset:35% 0;font-size:9px;color:white}

.mission-summary{font-size:12px;color:#e2e9f5;background:#142439;border-left:3px solid var(--gold);padding:8px 10px;margin:0 0 8px}

#journey-nav{display:flex;flex-wrap:wrap;gap:8px;max-width:1400px;margin:auto;padding:14px 4% 0}#journey-nav button{min-height:44px;font-size:13px}#journey-nav .skip-tutorial{margin-left:auto;color:#f0cb8b}
#home-screen{max-width:900px;margin:32px auto 80px;text-align:center}#home-screen h1{font-size:clamp(34px,6vw,64px);line-height:1.12}#home-screen>p{max-width:600px;margin:20px auto}.entry-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0}.entry-choice{min-height:160px;padding:28px;background:linear-gradient(145deg,#234348,#162b3e);border:1px solid #6eaaa4;font:28px Georgia;color:#f3dfb2;text-align:left}.entry-choice:nth-child(2){background:linear-gradient(145deg,#3f3944,#222c43);border-color:#b19c73}.entry-choice span{display:block;margin-top:16px;font:14px/1.5 system-ui;color:#d0dbe7}.entry-choice:hover{border-color:#e8d0a0;transform:translateY(-2px)}
.character-dialogue{display:flex;align-items:center;gap:18px;border:1px solid #657478;background:linear-gradient(120deg,#1c3440,#182337);border-radius:12px;padding:16px 20px;margin:12px 0 22px;box-shadow:0 8px 24px #0003}.character-portrait{flex:0 0 66px;height:76px;border-radius:12px;background:#11202c;border:1px solid #456c70;display:grid;place-items:center;color:var(--teal)}.character-portrait svg{width:56px;height:66px}.character-portrait.knight{color:#efc275}.character-portrait.archer{color:#8bc7df}.character-portrait.rogue{color:#b4a2e6}.character-portrait.mage{color:#e4a5cb}.dialogue-copy{flex:1;min-width:0}.dialogue-copy strong{color:var(--gold);letter-spacing:1px}.dialogue-copy p{margin:6px 0;color:#e1e8f0}.dialogue-copy small{color:var(--muted)}.dialogue-controls{display:grid;gap:8px}.dialogue-controls button{min-height:44px;font-size:12px}
.tutorial-instruction{padding:14px 18px;border-left:3px solid var(--teal);background:#112936;border-radius:6px;margin:14px 0}.tutorial-instruction p{margin:8px 0;color:#cfdee8}.tutorial-instruction button{min-height:44px}.guided-action{outline:3px solid #f6d483;outline-offset:2px;box-shadow:0 0 12px #e0c07566}.daily-notice{background:#1c2c40;padding:10px;border-radius:6px;font-size:12px}
#campaign-screen,#help-screen,#access-screen{max-width:1000px;margin:12px auto 48px}.chapter-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.chapter-card{border:1px solid #45606b;border-radius:12px;padding:22px;background:#142437}.chapter-card h2{font-size:28px}.chapter-card button{width:100%;margin-top:8px;text-align:left;min-height:48px;font-size:13px}.recommended-next{padding:16px;border-color:var(--teal)}#help-screen label{display:block;padding:18px 0}#help-screen input{width:20px;height:20px;vertical-align:middle;margin-right:8px}#help-screen h2{font-size:24px;margin-top:28px}#help-screen>button{margin:5px}#journey-outcome{border:1px solid #7c9d88;border-radius:10px;background:#19352f;padding:22px;margin:24px 0}#journey-outcome button{margin:6px;min-height:48px}
@media(max-width:620px){#journey-nav{padding:12px;gap:6px}#journey-nav button{flex:1 1 40%;font-size:12px}#journey-nav .skip-tutorial{margin:0;flex-basis:100%}.entry-choices{gap:12px}.entry-choice{font-size:23px;padding:18px;min-height:180px}.entry-choice span{font-size:12px}.character-dialogue{gap:12px;padding:12px;flex-wrap:wrap}.character-portrait{flex-basis:48px;height:58px}.character-portrait svg{width:40px;height:50px}.dialogue-copy p{font-size:13px}.dialogue-controls{width:100%;display:flex}.dialogue-controls button{flex:1}.chapter-cards{grid-template-columns:1fr}.tutorial-instruction{padding:12px}.tutorial-instruction p{font-size:13px}#journey-outcome{padding:16px}#journey-outcome button{display:block;width:100%;margin:10px 0}}
@media(prefers-reduced-motion:reduce){.entry-choice:hover{transform:none}.guided-action{animation:none}}
#journey-outcome{padding:14px}#journey-outcome h2{font-size:24px}#journey-outcome button{display:block;width:100%;margin:10px 0;font-size:13px}
.restart-tutorial{min-height:44px}