:root{--forest:#143e32;--deep:#092a22;--lime:#d9ed86;--cream:#f4f0e5;--paper:#fffdf7;--ink:#17332b;--gold:#e9b94f;--light:#e9dfc7;--dark:#44705b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
.hero{min-height:720px;position:relative;overflow:hidden;color:white;background:radial-gradient(circle at 75% 48%,#32634d 0,#173f33 28%,#0a2b23 68%)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%);background-size:90px 90px;background-position:0 0,45px 45px}
nav{position:relative;z-index:3;max-width:1240px;height:90px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff24}
.brand{text-decoration:none;font-weight:800}
.brand span{display:inline-grid;place-items:center;width:38px;height:38px;margin-right:9px;border-radius:50%;background:var(--lime);color:var(--deep)}
nav div{display:flex;gap:28px}
nav div a{text-decoration:none;font-size:14px}
.hero-copy{position:relative;z-index:2;max-width:1240px;margin:auto;padding:105px 28px}
.eyebrow,.intro>span,.section-head>span{font-size:12px;letter-spacing:.17em;font-weight:900;color:var(--lime)}
h1,h2,h3{font-family:Georgia,serif}
h1{font-size:clamp(68px,9vw,126px);line-height:.83;letter-spacing:-.06em;margin:23px 0 32px}
.lead{max-width:630px;font-size:19px;line-height:1.65;color:#deebe5}
.cta{display:inline-block;margin-top:20px;padding:17px 23px;background:var(--lime);color:var(--deep);font-weight:900;text-decoration:none;border-radius:8px}
.hero-piece{position:absolute;right:5%;bottom:-16%;font-family:Georgia,serif;font-size:min(48vw,650px);line-height:1;color:#d9ed8612;transform:rotate(-8deg)}
.intro,.section-head{max-width:1180px;margin:auto;padding:95px 28px 40px}
.intro>span,.section-head>span{color:#54815f}
.intro h2,.section-head h2{font-size:clamp(42px,6vw,70px);line-height:1;margin:13px 0 22px;letter-spacing:-.035em}
.intro p,.section-head p{max-width:750px;font-size:18px;line-height:1.7;color:#5e716a}
.facts{max-width:1180px;margin:auto;padding:0 28px 110px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.facts article{background:var(--paper);padding:30px 25px;border-radius:18px;box-shadow:0 15px 40px #17332b0b}
.facts b{font:58px Georgia,serif;color:var(--forest)}
.facts h3{font-size:23px;margin:12px 0}
.facts p{font-size:14px;line-height:1.6;color:#66756f}
.chess-stories{overflow:hidden;padding:0 0 100px}
.ticker-title{max-width:1180px;margin:0 auto 20px;padding:0 28px;display:flex;justify-content:space-between;gap:20px;color:#66756f;font-size:12px}
.ticker-title span{font-weight:900;letter-spacing:.16em;color:#54815f}
.story-track{display:flex;gap:16px;overflow-x:auto;padding:8px max(28px,calc((100vw - 1180px)/2)) 28px;scroll-snap-type:x mandatory;scrollbar-width:none}
.story-track::-webkit-scrollbar{display:none}
.story-track article{position:relative;flex:0 0 min(390px,82vw);min-height:270px;padding:30px;border-radius:20px;background:linear-gradient(145deg,#173f33,#0b2c24);color:white;scroll-snap-align:center;box-shadow:0 20px 50px #17332b24;overflow:hidden;transition:.35s}
.story-track article:hover{transform:translateY(-7px)}
.story-track article i{position:absolute;right:-12px;bottom:-42px;font:190px Georgia,serif;font-style:normal;color:#d9ed8610}
.story-track article small{position:relative;color:var(--lime);font-weight:900;letter-spacing:.14em}
.story-track article h3{position:relative;font-size:30px;line-height:1.05;margin:22px 0 14px;max-width:280px}
.story-track article p{position:relative;line-height:1.6;color:#d6e3dd;max-width:300px}
.rules-wrap{background:#e7e1d3;padding-bottom:100px}
.pieces{max-width:1180px;margin:auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pieces article{display:flex;gap:18px;align-items:center;background:var(--paper);border-radius:16px;padding:22px}
.pieces i{font:54px Georgia,serif;font-style:normal;color:var(--forest)}
.pieces h3{font-size:23px;margin:0 0 6px}
.pieces p{font-size:14px;line-height:1.5;color:#68776f;margin:0}
.tip{max-width:1124px;margin:22px auto 0;background:var(--forest);color:white;border-radius:16px;padding:22px 26px;display:flex;gap:28px}
.tip strong{color:var(--lime);white-space:nowrap}
.tip span{line-height:1.55}
.game-section{background:var(--deep);color:white;padding-bottom:110px}
.section-head.light>span{color:var(--lime)}
.section-head.light p{color:#c8d9d2}
.game-card{max-width:1180px;margin:auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:22px}
.game-main,.game-side{background:#11392e;border:1px solid #ffffff16;border-radius:22px;padding:22px}
.turnbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.turnbar small,.game-side small{color:var(--lime);font-weight:bold;letter-spacing:.13em}
.turnbar strong{display:block;font:29px Georgia,serif;margin-top:4px}
.turn-piece{font-size:45px}
.board-wrap{max-width:690px;margin:auto}
.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;border:8px solid #08271f;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px #0005}
.square{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:0;display:grid;place-items:center;padding:0;cursor:pointer;font-family:"Segoe UI Symbol","Arial Unicode MS",serif;font-size:clamp(27px,5vw,66px);line-height:1;text-shadow:0 2px 2px #0003}
.square>span{display:block;line-height:1;max-width:100%;max-height:100%}
.piece-white{color:#fff;-webkit-text-stroke:1.35px #111;text-shadow:0 1px 0 #111,1px 0 0 #111,0 -1px 0 #111,-1px 0 0 #111,0 3px 3px #0004}
.piece-black{color:#111;-webkit-text-stroke:.35px #f6f0df;text-shadow:0 2px 2px #0004}
.square.light{background:var(--light)}
.square.dark{background:var(--dark)}
.square.selected{box-shadow:inset 0 0 0 6px var(--gold)}
.square.move:after{content:"";position:absolute;width:24%;height:24%;border-radius:50%;background:#f2c550d9}
.square.capture:after{content:"";position:absolute;inset:7%;border:6px solid #ef6a52;border-radius:50%}
.square.last{box-shadow:inset 0 0 0 100px #d9ed863d}
.square.check{box-shadow:inset 0 0 0 100px #e856566b}
.coord{position:absolute;font:700 10px Arial;opacity:.55}
.coord.file{right:3px;bottom:2px}
.coord.rank{left:3px;top:2px}
.game-side{display:flex;flex-direction:column;gap:25px}
.game-side h3{font-size:32px;margin:9px 0}
.game-side p{line-height:1.55;color:#c8d9d2}
.captured{padding:20px 0;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}
.captured p{font-size:28px;min-height:35px;margin:10px 0 0;color:white;letter-spacing:3px}
.controls{display:grid;gap:10px;margin-top:auto}
.controls button{border:1px solid #ffffff2b;background:#ffffff0d;color:white;padding:14px;border-radius:10px;font-weight:800;cursor:pointer}
.controls button:hover{background:#ffffff1c}
.controls .accent{background:var(--lime);color:var(--deep);border-color:var(--lime)}
footer{background:#061f19;color:#b9ccc4;padding:35px max(28px,calc((100% - 1124px)/2));display:flex;justify-content:space-between}
footer a{color:var(--lime);font-weight:bold;text-decoration:none}
.result-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#041b16db;backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:.3s}
.result-modal.open{opacity:1;visibility:visible}
.result-card{position:relative;width:min(500px,94vw);overflow:hidden;padding:48px 35px 32px;border:1px solid #ffffff2b;border-radius:28px;background:linear-gradient(145deg,#194c3c,#0b2c24);color:white;text-align:center;box-shadow:0 30px 90px #0008;transform:translateY(25px) scale(.94);transition:.35s}
.result-modal.open .result-card{transform:none}
.result-glow{position:absolute;left:50%;top:-160px;width:360px;height:360px;border-radius:50%;background:#d9ed8630;filter:blur(30px);transform:translateX(-50%)}
.result-piece{position:relative;display:block;font:100px Georgia,serif;color:#fff;-webkit-text-stroke:1.5px #111;filter:drop-shadow(0 10px 15px #0005);animation:winnerFloat 2.6s ease-in-out infinite}
.result-card small{position:relative;color:var(--lime);font-weight:900;letter-spacing:.16em}
.result-card h2{position:relative;font-size:45px;line-height:1;margin:15px 0}
.result-card p{position:relative;color:#d7e4df;line-height:1.6}
.result-card button{position:relative;width:100%;border:0;border-radius:12px;padding:16px;margin-top:12px;font-weight:900;cursor:pointer}
.result-card #playAgain{background:var(--lime);color:var(--deep);font-size:17px}.result-card #playAgain b{margin-left:18px}
.result-card .result-close{background:#ffffff12;color:white;border:1px solid #ffffff25}
@keyframes winnerFloat{50%{transform:translateY(-8px) rotate(3deg)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.result-piece{animation:none}.reveal{opacity:1;transform:none}.story-track{scroll-behavior:auto}}
@media(max-width:900px){.facts{grid-template-columns:1fr 1fr}
.pieces{grid-template-columns:1fr 1fr}
.game-card{grid-template-columns:1fr}
.game-side{min-height:300px}
}
@media(max-width:600px){nav{height:72px;padding:0 16px}
nav div{display:none}
.hero{min-height:680px}
.hero-copy{padding:120px 20px}
h1{font-size:62px}
.intro,.section-head{padding:70px 20px 32px}
.facts{grid-template-columns:1fr;padding:0 14px 75px}
.ticker-title{padding:0 18px}.ticker-title strong{display:none}.story-track{padding-left:18px;padding-right:18px}.story-track article{min-height:255px}
.pieces{grid-template-columns:1fr;padding:0 14px}
.tip{margin:18px 14px 0;display:grid;gap:8px}
.game-card{padding:0 8px}
.game-main{padding:10px}
.board{border-width:5px}
.square{font-size:10vw}
.game-side{margin:0 6px}
.turnbar{padding:4px 8px}
footer{display:grid;gap:12px}
.hero-piece{right:-20%;bottom:2%;font-size:360px}
}