:root{--ink:#ecf2ff;--muted:#aab8d4;--navy:#111a2e;--blue:#73a6ff;--cream:#e9d8bb;--wood:#956e52;--accent:#f6bd60}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#263e69 0,#111a2e 48%,#0a1020 100%);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100svh}.app{width:min(100%,540px);margin:auto;padding:max(22px,env(safe-area-inset-top)) 18px 26px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h1,h2,p{margin:0}h1{font-size:29px;letter-spacing:-1px}.eyebrow{font-size:10px;color:#9fb4dc;letter-spacing:1.6px;font-weight:800}header button{border:0;background:#293a5e;color:white;width:42px;height:42px;border-radius:50%;font-size:26px}.header-actions{display:flex;gap:8px}.score{display:grid;grid-template-columns:1fr 1fr 1fr;background:#1e2d4a;border-radius:18px;padding:12px 8px;margin-bottom:17px;text-align:center}.score div+div{border-left:1px solid #435574}.score span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.score strong{font-size:18px}.game-card{background:#1c2943;padding:13px;border-radius:22px;box-shadow:0 16px 40px #0005}.status{height:30px;display:flex;align-items:center;gap:8px;padding:0 3px;font-weight:700;font-size:14px}.status span{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 9px var(--blue)}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border-radius:10px;overflow:hidden;aspect-ratio:1/1;touch-action:manipulation}.square{min-width:0;min-height:0;aspect-ratio:1/1;border:0;padding:0;position:relative;font-size:clamp(27px,10vw,49px);line-height:1;display:grid;place-items:center}.light{background:var(--cream)}.dark{background:var(--wood)}.square.selected:after,.square.move:after{content:"";position:absolute;border-radius:50%}.square.selected:after{inset:5%;border:4px solid #f9dd70;background:#f9dd7030}.square.move:after{width:20%;aspect-ratio:1;background:#223a50a8}.square.capture:after{inset:8%;border:3px solid #7b2632;border-radius:50%}.square.last{box-shadow:inset 0 0 0 4px #f4d85f99}.piece{font-family:"Arial Unicode MS","Segoe UI Symbol",serif;-webkit-text-stroke:1.2px #090e18;paint-order:stroke fill;filter:drop-shadow(0 2px 1px #0007)}.piece.white{color:#fff;text-shadow:0 0 1px #4d3a28}.piece.black{color:#101621;text-shadow:0 1px 0 #ffffff44}.result-overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border-radius:10px;background:#071020a8;color:#fff;font-size:clamp(45px,16vw,82px);font-weight:950;letter-spacing:3px;text-shadow:0 3px 0 #000}.result-overlay.win{color:#8cf0a8}.result-overlay.lose{color:#ff8b8b}.result-overlay.draw{color:#f6d47c}.result-overlay[hidden]{display:none}.legend{display:flex;justify-content:space-between;padding:11px 2px 0;color:var(--muted);font-size:12px}.coach{margin-top:18px;background:linear-gradient(135deg,#2b3d64,#202d4d);border-radius:18px;padding:18px}.coach h2{font-size:17px;margin:5px 0 6px}.coach>p:not(.eyebrow){font-size:13px;color:#c5d1e6;line-height:1.5}.meter{height:7px;background:#111a2e;border-radius:8px;margin-top:14px;overflow:hidden}.meter i{display:block;width:20%;height:100%;background:linear-gradient(90deg,#78a9ff,#f6bd60);border-radius:inherit;transition:width .4s}.footer{text-align:center;color:#6f80a2;font-size:12px;margin:18px}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:22px}.modal[hidden]{display:none}.modal-box{background:#253758;border-radius:20px;padding:22px;text-align:center}.modal-box p{font-weight:700;margin-bottom:14px}.modal button{font-size:42px;width:64px;height:64px;border:0;background:#e9d8bb;border-radius:10px;margin:3px}.rules-box{position:relative;width:min(100%,430px);max-height:82svh;overflow:auto;text-align:left}.rules-box h2{margin:5px 0 16px}.rules-content{display:grid;gap:13px;color:#d8e2f6;font-size:14px;line-height:1.55}.rules-content p{margin:0}.rules-content b{color:#fff}.modal .close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;font-size:23px;background:#34496f}.modal .rules-ok{display:block;width:100%;height:42px;margin:20px 0 0;border-radius:10px;background:#f6bd60;color:#19233a;font-size:15px;font-weight:800}@media(min-width:600px){.app{padding-top:34px}}