@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#080e18;--panel:#0c1623;--panel-2:#101e2d;--line:#26384b;--text:#edf5f2;--muted:#9eafbb;--green:#83f4b5;--green-deep:#1f584a;--orange:#f4b66d;--blue:#74b9ff;--pink:#e88aa7;font-family:Manrope,system-ui,sans-serif;font-size:16px;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);min-width:320px}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 76% 5%,#163041 0,transparent 34%),linear-gradient(transparent 95%,rgba(124,178,179,.035) 96%);background-size:auto,100% 48px;pointer-events:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.skip-link{position:absolute;top:-80px;left:12px;padding:10px 16px;background:var(--green);color:var(--bg);z-index:10}.skip-link:focus{top:12px}
.page-shell{max-width:1500px;margin:auto;padding:0 clamp(20px,5vw,82px)}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:inline-flex;align-items:center;white-space:nowrap}
.brand img{display:block;width:205px;height:auto;max-width:100%}
.topbar nav{display:flex;align-items:center;gap:34px;color:#bdcbd0;font-size:.88rem;font-weight:600}
.topbar nav a:hover,.footer a:hover{color:var(--green)}
.nav-github{padding:11px 17px;border:1px solid var(--line);border-radius:6px}.nav-github span{color:var(--green);margin-left:4px}
.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;position:relative;gap:35px;overflow:hidden}
.hero-copy{z-index:1;padding:76px 0 96px}
.eyebrow,.section-index,.board-head,.window-bar,.feed-heading,.event-kicker,.timeline-labels,.hero-note,.coordinate,.demo-badge{font-family:'IBM Plex Mono',monospace;letter-spacing:.075em}
.eyebrow{display:flex;gap:10px;align-items:center;color:var(--green);font-size:.8rem;font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3.5rem,5.5vw,6.15rem);line-height:1.07;letter-spacing:-.067em;max-width:820px;margin:28px 0 28px;font-weight:800}
h1 em,.principle-content em{font-style:normal;color:var(--green)}
.hero-lead{color:#bbc9d1;max-width:640px;line-height:1.8;font-size:1.13rem;margin-bottom:31px}
.game-explanation-title{font-size:1rem;line-height:1.5;color:var(--green);margin:0 0 10px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;padding:0 20px;font-weight:800;font-size:.88rem;border-radius:5px;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}.button-primary{background:var(--green);color:#07131a}.button-primary:hover{background:#b7ffd3}.button-secondary{border:1px solid #49606c;color:var(--text)}.button-secondary:hover{background:#172839}
.hero-note{font-size:.72rem;color:#8097a3;margin:27px 0 0;letter-spacing:.01em}
.hero-decoration{position:relative;height:500px;min-width:0;background:radial-gradient(circle at 50% 50%,#173747 0,transparent 52%)}
.hero-decoration::before{content:"";position:absolute;inset:10%;background-image:linear-gradient(#31536955 1px,transparent 1px),linear-gradient(90deg,#31536955 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000 12%,transparent 70%);transform:perspective(600px) rotateX(45deg) rotateZ(-19deg)}
.ring{position:absolute;left:50%;top:50%;border:1px solid #60959b55;border-radius:50%;transform:translate(-50%,-50%)}.ring-one{width:370px;height:370px}.ring-two{width:240px;height:240px;border-style:dashed}
.coordinate{position:absolute;right:5%;top:13%;color:#7a9caa;font-size:.7rem}.crosshair{position:absolute;color:#5a8793;font:2rem 'IBM Plex Mono';font-weight:400}.crosshair-one{left:12%;top:25%}.crosshair-two{right:12%;bottom:14%}
.hero-pawn{position:absolute;display:grid;place-items:center;width:50px;height:50px;border:1px solid currentColor;border-radius:10px;font:700 1.15rem 'IBM Plex Mono';box-shadow:0 0 28px currentColor}.pawn-a{top:26%;left:25%;color:var(--green);background:#0c3029}.pawn-b{top:30%;right:23%;color:var(--pink);background:#382432}.pawn-c{bottom:27%;left:36%;color:var(--blue);background:#19354b}.pawn-d{bottom:19%;right:21%;color:var(--orange);background:#44331e}
.arena-section,.rules-section{padding:100px 0 112px;border-top:1px solid var(--line);scroll-margin-top:35px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:39px}.section-heading>div{flex:1}.section-index{display:block;color:var(--green);font-size:.78rem;font-weight:600;margin-bottom:23px}.section-heading h2{font-size:clamp(2.5rem,4.3vw,4.8rem);letter-spacing:-.06em;line-height:1.13;margin:0;font-weight:800}.section-heading h2 span{color:#91a7b2}.section-heading p{width:350px;max-width:40%;color:#a9bac4;line-height:1.75;font-size:.97rem;margin-bottom:5px}
.arena-window{border:1px solid #365065;border-radius:10px;overflow:hidden;background:#0a1421;box-shadow:0 30px 100px #0005,0 0 0 1px #91d0c014}
.window-bar{height:48px;background:#132334;border-bottom:1px solid #365065;display:flex;align-items:center;gap:14px;padding:0 20px;color:#a7bcc9;font-size:.72rem}.window-dots{display:flex;gap:6px}.window-dots i{width:7px;height:7px;border:1px solid #86a6af;border-radius:50%}.window-dots i:first-child{background:var(--green);border-color:var(--green)}.demo-badge{margin-left:auto;color:var(--green);font-size:.68rem}
.arena-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(310px,.76fr)}.board-column{padding:25px 30px 24px;border-right:1px solid var(--line)}.board-head{display:flex;justify-content:space-between;color:#92acb9;font-size:.72rem;margin-bottom:19px}.board-head span:last-child{color:var(--green)}
.board-wrap{display:grid;place-items:center;padding:22px;background:radial-gradient(circle at center,#112b35 0%,#0b1724 65%);border:1px solid #1c3343}.board{width:min(100%,510px);aspect-ratio:1;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);border:1px solid #44606a;position:relative;box-shadow:0 0 50px #44cfaa13}
.cell{position:relative;border:1px solid #24435578;background:#10222e;display:grid;place-items:center;min-width:0;min-height:0}.cell:nth-child(even){background:#112633}.cell.wall{background:repeating-linear-gradient(45deg,#1b3441,#1b3441 4px,#213e4a 4px,#213e4a 8px)}.cell.energy::after{content:"";width:27%;height:27%;transform:rotate(45deg);background:#e5d478;box-shadow:0 0 12px #f8d772aa}.cell.trap::after{content:"✕";color:#ff8a96;font-size:1.2rem;font-family:'IBM Plex Mono',monospace}.cell.active{background:#19493f;box-shadow:inset 0 0 20px #65ecb04d}
.unit{position:absolute;inset:10%;z-index:2;display:grid;place-items:center;border:2px solid currentColor;border-radius:4px;background:#142a36;font:700 clamp(.72rem,1.4vw,1.15rem) 'IBM Plex Mono';box-shadow:0 0 19px currentColor}.unit.a{color:var(--green)}.unit.b{color:var(--pink)}.unit.c{color:var(--blue)}.unit.d{color:var(--orange)}.unit.down{opacity:.3;filter:grayscale(1)}
.board-legend{display:flex;gap:23px;margin-top:16px;color:#8ea6b3;font-size:.73rem;font-family:'IBM Plex Mono',monospace}.board-legend span{display:flex;align-items:center;gap:8px}.board-legend i{display:inline-block;width:11px;height:11px}.legend-agent{border:2px solid var(--green)}.legend-energy{background:#e5d478;transform:rotate(45deg)}.legend-wall{background:repeating-linear-gradient(45deg,#315061,#315061 2px,#132a36 2px,#132a36 4px)}
.feed-column{padding:25px;display:flex;flex-direction:column}.feed-heading{font-size:.72rem;color:#9eb4bd;display:flex;justify-content:space-between;gap:8px}.feed-live{color:var(--green)}.agent-list{display:grid;gap:8px;margin:24px 0}.agent{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:10px;background:#122330;border:1px solid #294153;border-radius:4px;padding:10px 12px;color:#bdcbd0;font-size:.75rem}.agent-code{font:700 .85rem 'IBM Plex Mono';color:var(--agent-color)}.agent .health{font-family:'IBM Plex Mono';color:var(--agent-color)}.agent.is-down{opacity:.45}.event-card{border-left:2px solid var(--green);background:#102a2c;padding:19px 20px;margin-top:auto;min-height:156px}.event-kicker{font-size:.69rem;color:var(--green);margin-bottom:10px}.event-card p{line-height:1.5;margin:0 0 11px;font-weight:700;font-size:.97rem}.event-quote{color:#a7c1ba;font-size:.8rem;line-height:1.5}.playback{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}.playback button{height:42px;min-width:45px;background:#1b3342;border:1px solid #3c5c67;color:var(--text);border-radius:5px}.playback button:hover:not(:disabled){background:#2c5061}.playback button:disabled{opacity:.4;cursor:not-allowed}#play-turn{min-width:130px;background:var(--green);color:#0a1a20;border-color:var(--green);font-weight:800}#play-turn:hover{background:#b7ffd3}.turn-range{width:100%;margin:22px 0 8px;accent-color:var(--green);cursor:pointer}.timeline-labels{display:flex;justify-content:space-between;font-size:.65rem;color:#728f9b}.demo-disclaimer{color:#78929e;font-size:.78rem;margin:15px 0 0}
.rules-section{padding-bottom:120px}.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.rule-card{border:1px solid #2a4252;background:linear-gradient(145deg,#132634,#0c1724);padding:30px;min-height:260px;position:relative}.rule-card:hover{border-color:#659b91}.rule-number{position:absolute;right:25px;top:25px;color:#53717d;font:.78rem 'IBM Plex Mono'}.rule-icon{width:50px;height:50px;display:grid;place-items:center;color:var(--green);font:500 1.5rem 'IBM Plex Mono';border:1px solid #426960;background:#143c34;margin-bottom:36px}.rule-card h3{font-size:1.17rem;margin-bottom:12px;letter-spacing:-.02em}.rule-card p{color:#a5b9c3;line-height:1.7;font-size:.9rem;margin:0}
.principle-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:85px 0 100px}.principle-content{display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:end}.principle-content h2{font-size:clamp(2.5rem,4vw,4.8rem);letter-spacing:-.06em;line-height:1.15;margin:0;max-width:900px}.principle-content p{color:#a9bac4;line-height:1.8;margin:0}.footer{min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#8ea6b2;font-size:.8rem}.footer .brand{color:var(--text)}.footer p{margin:0}.footer>a:last-child{color:var(--green);white-space:nowrap}
.references-section{padding:95px 0 105px;scroll-margin-top:35px}.references-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reference-card{display:block;min-height:215px;padding:26px 28px;border:1px solid #2a4252;background:#101e2b;transition:border-color .2s,transform .2s}.reference-card:hover{border-color:var(--green);transform:translateY(-3px)}.reference-type{display:block;color:var(--green);font:600 .69rem 'IBM Plex Mono',monospace;letter-spacing:.06em;margin-bottom:31px}.reference-card h3{font-size:1.18rem;letter-spacing:-.025em;margin-bottom:12px}.reference-card h3 span{color:var(--green);font-size:.9rem}.reference-card p{color:#a5b9c3;line-height:1.65;font-size:.89rem;margin:0}
@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-bottom:40px}.hero-decoration{display:none}.arena-layout{grid-template-columns:1fr}.board-column{border-right:0;border-bottom:1px solid var(--line)}.board{max-width:470px}.section-heading p{max-width:45%}.principle-content{grid-template-columns:1fr}.footer{flex-wrap:wrap;padding:40px 0}}
@media(max-width:700px){.page-shell{padding:0 18px}.topbar{height:75px}.brand img{width:clamp(125px,40vw,170px)}.topbar nav{gap:12px}.topbar nav a:not(.nav-github){display:none}.nav-github{font-size:.73rem;padding:9px 11px}.hero-copy{padding:70px 0 75px}.eyebrow{font-size:.67rem}h1{font-size:clamp(2.75rem,12vw,4.4rem);margin:24px 0}.hero-lead{font-size:1rem}.hero-note{line-height:1.5}.arena-section,.rules-section{padding:72px 0}.section-heading{display:block;margin-bottom:29px}.section-heading p{width:auto;max-width:none;margin:20px 0 0}.section-heading h2{font-size:2.55rem}.board-column{padding:16px}.board-wrap{padding:8px}.board-head{font-size:.58rem}.board-legend{font-size:.58rem;gap:11px;flex-wrap:wrap}.feed-column{padding:19px}.rules-grid,.references-grid{grid-template-columns:1fr}.rule-card{min-height:210px}.rule-icon{margin-bottom:20px}.principle-section{padding:70px 0}.principle-content{gap:22px}.principle-content h2{font-size:2.5rem}.references-section{padding:70px 0}.reference-card{min-height:auto}.reference-type{margin-bottom:20px}.footer{display:block;min-height:auto}.footer p{margin:22px 0}.footer>a:last-child{display:inline-block}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.button{transition:none}}

/* Real gameplay recording replaces the staged demo. */
.video-window video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#09120e}
.demo-disclaimer{max-width:840px;line-height:1.7;font-size:.85rem}
.pawn-a{color:#61d6ee;background:#132f39;top:30%;left:22%}
.pawn-b{color:#b89aff;background:#28203b;top:53%;right:21%}
.start-section{padding:95px 0 105px;border-bottom:1px solid var(--line);scroll-margin-top:35px}
.start-command{background:#0a1421;border:1px solid var(--line);padding:24px 28px;color:#c7ebdd;font:clamp(.76rem,1.6vw,1rem)/1.9 'IBM Plex Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:8px;max-width:900px}
.start-note{max-width:850px;color:var(--muted);font-size:.92rem;line-height:1.8;margin:24px 0}
@media(max-width:700px){.start-section{padding:72px 0}.window-bar{padding:0 12px;font-size:.56rem;gap:8px}.demo-badge{font-size:.56rem}.start-command{padding:18px}.window-dots{display:none}}