:root{color-scheme:dark;--bg:#101217;--panel:#181b22;--line:#2b2f38;--muted:#9398a5;--text:#f0ede8;--accent:#eab38b;--green:#aec9af}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI',Arial,sans-serif}button,select,input{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#20242d;color:var(--text);border-radius:6px;padding:10px 15px;transition:background .15s,border-color .15s}button:hover{background:#2a303b;border-color:#5b6070}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}.mast{max-width:1600px;margin:auto;height:82px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:1.8px;font-weight:650}.brand .muted{font-weight:400;letter-spacing:0}.brand-mark{font-size:35px;color:var(--accent)}.divider{color:#454954;font-weight:300}.muted{color:var(--muted)}.header-note{color:var(--muted);letter-spacing:1.4px;font-size:10px;display:flex;align-items:center;gap:10px}.header-note i{width:5px;height:5px;border-radius:50%;background:var(--accent)}main{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;max-width:1500px;margin:40px auto;padding:0 42px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:var(--accent);margin:0 0 10px}h1{font-family:Georgia,serif;font-weight:400;font-size:41px;line-height:1.13;letter-spacing:-1.1px;margin:13px 0 18px}h2{font-size:20px;line-height:1.3;letter-spacing:-.3px;font-weight:500;margin:0}.intro{color:var(--muted);font-size:13px;max-width:240px;margin-bottom:32px}.section-label{font-size:10px;letter-spacing:1.5px;color:var(--muted);display:flex;justify-content:space-between;margin:0 0 12px}.section-label span{color:#666c79}nav{display:flex;flex-direction:column;gap:6px}.phase-option{display:flex;gap:13px;align-items:center;text-align:left;width:100%;padding:15px 12px;border-color:transparent;background:transparent;position:relative}.phase-number{color:#747b88;font-size:11px;font-variant-numeric:tabular-nums}.phase-option strong{font-weight:500;display:block;font-size:14px}.phase-option small{font-size:10px;display:block;color:var(--muted);margin-top:3px}.phase-option[aria-pressed=true]{background:#2a2524;border:1px solid #594437}.phase-option[aria-pressed=true] .phase-number,.phase-option[aria-pressed=true] strong{color:#f1c6a5}.phase-option[aria-pressed=true]:after{content:'✦';margin-left:auto;color:var(--accent)}.settings{border-top:1px solid var(--line);padding-top:24px;margin-top:27px}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:12px}.setting small{display:block;font-size:10px;color:var(--muted);margin-top:3px}select{padding:7px;background:#20242c;border:1px solid var(--line);border-radius:5px;color:var(--text);font-size:12px}input[role=switch]{appearance:none;width:32px;height:19px;border-radius:20px;background:#383d48;position:relative;cursor:pointer;flex-shrink:0}input[role=switch]:after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;left:3px;top:3px;background:#b3b8c1;transition:left .15s}input[role=switch]:checked{background:var(--accent)}input[role=switch]:checked:after{left:16px;background:#292320}.practice-note{display:flex;gap:12px;padding-top:22px;margin-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.practice-note>span{color:var(--accent);font-size:18px}.practice-note p{margin:0;line-height:1.7}.play-area{min-width:0}.arena-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:21px}.arena-heading .eyebrow{color:var(--muted);margin:0 0 6px}.state-badge{border:1px solid #394035;color:var(--green);border-radius:4px;padding:5px 9px;font-size:10px;letter-spacing:1.4px}.arena-shell{position:relative;height:min(67vh,720px);min-height:440px;background:#0c0f15;border:1px solid #353a43;border-radius:10px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.game-top,.game-bottom{position:absolute;left:22px;right:22px;pointer-events:none;display:flex;justify-content:space-between;align-items:start;gap:15px}.game-top{top:20px}.health{width:180px}.health>span{font-size:9px;letter-spacing:1.2px;color:#d9dce2;display:flex;justify-content:space-between;gap:14px;text-shadow:0 1px 5px black}.health b{font-size:10px;font-weight:400;letter-spacing:0}.bar{height:4px;background:#383338;border-radius:5px;overflow:hidden;margin-top:7px}.bar i{display:block;height:100%;width:100%;background:#dc8c86}.clock{text-align:right;text-shadow:0 1px 5px black}.clock>span{font-size:21px;font-weight:350;letter-spacing:1px;font-variant-numeric:tabular-nums}.clock small{display:block;font-size:8px;letter-spacing:1.2px;color:#a5a9b1;margin-top:2px}.game-bottom{bottom:20px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:1px}.game-bottom>span:first-child{color:#e5bd90}.game-bottom>span:nth-child(2){color:#c3c6ce}.phase-bar{flex-basis:100%;margin-top:-7px;height:3px}.phase-bar i{width:0;background:var(--accent)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse,#14181bea 0%,#101217b8 58%,#10121755 100%);padding:25px}.overlay[hidden]{display:none}.overlay-icon{font-size:62px;line-height:1.1;color:var(--accent);text-shadow:0 0 40px #eab34c44;margin-bottom:20px}.overlay h3{font-family:Georgia,serif;font-size:36px;line-height:1.2;letter-spacing:-.5px;font-weight:400;margin:3px 0 14px}.overlay>p:not(.eyebrow){font-size:13px;color:#b9bcc4;line-height:1.8;margin:0 0 24px}.primary{background:var(--accent);border-color:var(--accent);color:#241c17;font-size:13px;font-weight:650;padding:12px 25px}.primary:hover{background:#f3c6a4;border-color:#f3c6a4}.overlay>small{font-size:10px;color:#9298a4;margin-top:16px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0}.actions{display:flex;gap:8px}.actions button{padding:8px 12px;font-size:11px;background:#181b22}.actions kbd{margin-left:8px;font-size:9px;color:var(--muted)}kbd{font:10px 'Segoe UI',sans-serif;border:1px solid #383d48;padding:1px 4px;border-radius:3px;color:#aab0bb}.key-hint{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)}.key-hint span{margin:0 3px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:21px 0 10px;border-top:1px solid var(--line)}.metrics>div{padding:0 24px;border-left:1px solid var(--line)}.metrics>div:first-child{padding-left:0;border-left:0}.metrics span{font-size:9px;letter-spacing:1.3px;color:var(--muted);display:block}.metrics strong{font-size:27px;font-weight:350;display:block;margin-top:4px;font-variant-numeric:tabular-nums}.metrics em{font-size:15px;font-weight:400;font-style:normal;color:var(--muted);margin-left:3px}.history{grid-column:2;border-top:1px solid var(--line);padding-top:24px}.history-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.history-title .eyebrow{font-size:9px;color:var(--muted)}.history h2{font-size:17px}.quiet{padding:5px 0;border:0;background:none!important;font-size:11px;color:var(--muted)}.empty{color:#7f8794;font-size:12px;padding:20px 0}.history-row{display:grid;grid-template-columns:minmax(130px,1fr) 80px 70px 90px 100px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #222731;font-size:12px}.history-row span{color:var(--muted);font-size:11px}.history-row .outcome{color:var(--green);text-align:right}.history-row .outcome.fail{color:#db9f98}footer{max-width:1500px;margin:40px auto 0;padding:25px 42px 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;color:#7d8491;font-size:10px;line-height:1.8}footer p:first-child{font-family:Georgia,serif;font-style:italic;font-size:15px;color:#b6b2b0}footer p:last-child{text-align:right;max-width:620px}@media(min-width:1550px){main{gap:50px;grid-template-columns:290px minmax(0,1fr)}}@media(max-width:1100px){main{gap:24px;padding:0 24px;grid-template-columns:235px minmax(0,1fr)}.mast{padding:0 24px}.key-hint{display:none}.metrics>div{padding:0 12px}.metrics span{font-size:8px;letter-spacing:.7px}.arena-heading h2{font-size:18px}h1{font-size:36px}}@media(max-width:760px){.mast{height:64px;padding:0 18px}.brand{font-size:11px;gap:10px;letter-spacing:1px}.header-note{display:none}main{display:flex;flex-direction:column;padding:0 16px;margin:25px auto;gap:24px}.sidebar{display:contents}.sidebar>.eyebrow,.sidebar>h1,.sidebar>.intro,.sidebar>.section-label{display:none}nav{order:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.phase-option{display:block;padding:10px 5px;text-align:center}.phase-number{display:none}.phase-option strong{font-size:11px}.phase-option small{font-size:8px}.phase-option[aria-pressed=true]:after{display:none}.play-area{order:1}.arena-heading{margin-bottom:14px}.arena-heading h2{font-size:17px}.arena-heading .eyebrow{font-size:8px}.state-badge{font-size:8px}.arena-shell{height:64svh;min-height:430px;max-height:700px}.game-top,.game-bottom{left:14px;right:14px}.health{width:145px}.clock>span{font-size:18px}.clock small{font-size:7px}.overlay h3{font-size:30px}.metrics{padding-top:16px}.metrics>div{padding:0 10px}.metrics strong{font-size:24px}.metrics span{font-size:8px;letter-spacing:.2px}.settings{order:2;margin:0;padding:20px 0 0}.setting{padding:9px 0}.practice-note{order:3;margin:0;padding-top:20px}.history{order:4;padding-top:20px}.history-row{grid-template-columns:minmax(100px,1fr) 55px 45px 75px;gap:6px;font-size:11px}.history-row .history-time{display:none}footer{margin-top:24px;padding:20px 18px;display:block}footer p:last-child{text-align:left}.overlay-icon{font-size:50px;margin-bottom:16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
