@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{color-scheme:dark;--bg:#181c22;--panel:#20252c;--line:#343940;--ink:#ece6da;--muted:#a2a5a8;--gold:#d5b582}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 28% 35%,#272d35 0,transparent 60%),var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.shell{max-width:1440px;margin:auto;padding:0 60px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:2.8px;color:var(--ink);text-decoration:none;font-weight:700}.brand-mark{font-size:34px;color:var(--gold)}.header-right{display:flex;align-items:center;gap:30px}.edition,.eyebrow,.section-label,.arena-top,.board-note,footer{font-size:10px;letter-spacing:1.7px}.edition{color:var(--muted)}.quiet{border:0;background:transparent;padding:8px 0;font-size:12px}.quiet span{margin-left:9px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:44px 0 34px}.eyebrow{color:var(--gold);font-weight:600;margin:0 0 16px}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(40px,4.6vw,66px);line-height:.99;letter-spacing:-1.3px;font-weight:400;margin:0}.intro-copy{color:var(--muted);line-height:1.9;font-size:13px;margin:0 0 5px}.playground{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:42px;align-items:start}.arena{background:#20262d;border:1px solid #424343;border-radius:9px;overflow:hidden;box-shadow:0 24px 70px #0003}.arena-top,.arena-bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 23px;min-height:48px}.arena-top{color:#c1bcae}.live-dot{display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin:0 9px 2px 0}.arena-bottom{border-top:1px solid #343940;gap:14px;color:var(--muted);font-size:11px;line-height:1.5;min-height:54px}.board-note{white-space:nowrap;color:#757a80}canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:manipulation;image-rendering:pixelated;cursor:pointer}.controls{padding-top:6px}.section-label{display:flex;align-items:center;gap:12px;color:#b5b8bb;margin:0 0 20px;font-size:9px;font-weight:600}.section-label>span{color:#777d84}.character{display:flex;width:100%;align-items:center;gap:12px;text-align:left;background:#242a32;border:1px solid #363d46;border-radius:6px;padding:9px;margin-bottom:9px;min-height:82px}.character[aria-pressed=true]{background:#302b2c;border-color:#a77961;box-shadow:inset 3px 0 #c9a070}.character:is([data-character=rook],[data-character=tower])[aria-pressed=true]{background:#24303a;border-color:#7295b0;box-shadow:inset 3px 0 #85b4d8}.character strong{font-size:13px;font-weight:500;display:block}.character small{display:block;font-size:8px;letter-spacing:1.25px;color:#a5a0a0;margin-top:8px}.portrait{width:66px;height:63px;flex-shrink:0;overflow:hidden;border-radius:3px;position:relative;background:#191f27}.portrait img{position:absolute;max-width:none;width:115px;height:auto;left:-24px;top:-8px;image-rendering:pixelated}.portrait.blue img{left:-10px;top:-9px}.select-dot{width:7px;height:7px;margin-left:auto;margin-right:5px;flex-shrink:0;border:1px solid #757b83;border-radius:50%}[aria-pressed=true] .select-dot{background:var(--gold);border-color:var(--gold)}.selection-info{display:flex;gap:10px;align-items:center;padding:1px 10px;color:#9fa4aa}.selection-info>span{color:var(--gold);font-size:24px}.selection-info p{font-size:11px;line-height:1.7;margin:10px 0}.divider{height:1px;background:var(--line);margin:21px 0 24px}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.actions button{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;border:1px solid #3b424b;background:#262d35;border-radius:5px;padding:13px 0;font-size:10px}.actions button:hover:not(:disabled){border-color:var(--gold);background:#303741}.actions button span{font-size:21px;height:24px;color:#d4c7b2}.control-hint{color:#8d949c;font-size:10px;text-align:center;margin:14px 0 0;line-height:1.7}.duel-copy .eyebrow{font-size:8px;letter-spacing:1.5px;color:#8e969e}.duel-copy h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:31px;margin:11px 0 8px}.duel-copy p{font-size:11px;color:#a0a5aa;line-height:1.7;margin-bottom:19px}.primary{width:100%;background:#d6b784;color:#272721;border:1px solid #e3c797;padding:15px;border-radius:5px;font-weight:700;font-size:12px}.primary:hover:not(:disabled){background:#e5c998}.primary span{font-size:10px;margin-right:10px}.reset{width:100%;border:0;background:transparent;font-size:11px;padding:16px;color:#c0c0ba}.prototype-note{font-size:10px;line-height:1.8;color:#7e858e;text-align:center;margin:13px 0}.arena:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#181c22}.arena:fullscreen canvas{width:min(90vw,calc(100vh - 110px));height:auto}.arena:fullscreen .arena-top,.arena:fullscreen .arena-bottom{width:min(90vw,calc(100vh - 110px))}footer{display:flex;justify-content:space-between;gap:20px;color:#747c85;font-size:8px;margin:34px 0 25px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e8d4b1;color:#24272c;border-radius:5px;padding:12px 20px;opacity:0;pointer-events:none;font-size:12px;transition:opacity .2s}#toast.visible{opacity:1}
@media(min-width:1450px){.playground{grid-template-columns:minmax(0,870px) 294px}}
@media(max-width:1000px){.shell{padding:0 28px}.playground{gap:24px;grid-template-columns:minmax(0,1fr) 265px}.intro-copy{font-size:11px}.edition{display:none}.character{gap:7px}.character strong{font-size:12px}.portrait{width:60px}}
@media(max-width:760px){.shell{padding:0 18px}header{height:74px}.brand{font-size:11px;letter-spacing:2px}.brand-mark{font-size:29px}.intro{padding:28px 0 25px}.intro-copy{display:none}h1{font-size:46px}.eyebrow{font-size:8px}.playground{grid-template-columns:1fr;gap:27px}.arena-top,.arena-bottom{padding:8px 14px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}.section-label,.selection-info,.divider,.actions,.control-hint,.duel-copy,.primary,.reset,.prototype-note{grid-column:1/-1}.section-label{margin:0 0 9px}.character{min-width:0;padding:5px;gap:4px;flex-wrap:wrap;justify-content:center;text-align:center;position:relative;min-height:116px}.character strong{font-size:11px}.character small{font-size:7px;margin-top:5px}.select-dot{position:absolute;top:10px;right:3px}.portrait{width:56px;height:55px}.character>span:nth-child(2){width:100%;padding-bottom:5px}.selection-info{padding:0}.selection-info p{margin:0}.divider{margin:8px 0 12px}.actions button{padding:11px;flex-direction:row;gap:6px}.control-hint{margin:2px 0 6px}.duel-copy h2{font-size:30px}.duel-copy p{margin:8px 0}.duel-copy .eyebrow{margin:0}.prototype-note{margin:0}.reset{padding:9px}footer{font-size:7px;line-height:1.7}footer span:last-child{display:none}}
/* The revised blue character uses the same centred sprite pivot as the rider. */
.portrait.blue img{left:-24px;top:-6px}