*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:#f4ead8;color:#35251d}
.app{width:min(900px,94%);margin:auto;padding:25px 0 35px}
header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}
.eyebrow{font-size:11px;letter-spacing:3px;font-weight:bold;color:#b1842e}
h1{margin:4px 0;color:#651f2a;font-size:clamp(32px,7vw,52px)}
header p{margin:0;color:#745f50}
button{border:0;border-radius:12px;padding:13px 18px;background:#651f2a;color:white;font-weight:bold;cursor:pointer}
button:hover{background:#45131b}
.status{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:18px}
.player,.turn{background:#fffaf0;border:1px solid #decaa7;border-radius:14px;padding:13px 16px;box-shadow:0 5px 15px #00000012}
.player span{display:block;font-size:13px;color:#806f61;margin-top:4px}
.blue{text-align:right}.turn{text-align:center;min-width:120px}.turn strong{color:#651f2a}
main{display:flex;flex-direction:column;align-items:center}
#board{width:min(620px,94vw);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:9px solid #651f2a;border-radius:9px;overflow:hidden;box-shadow:0 12px 28px #0004}
.cell{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.light{background:#ead7b4}.dark{background:#956a47}
.cell.selected{box-shadow:inset 0 0 0 5px #d2a33f}
.cell.valid:after{content:"";width:25%;aspect-ratio:1;border-radius:50%;background:#e5bd55;position:absolute}
.piece{width:70%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:clamp(20px,5vw,38px);font-weight:bold;box-shadow:inset 0 4px 5px #ffffff55,0 4px 7px #0005;z-index:2;user-select:none}
.piece.red{background:linear-gradient(#db5860,#761d29);border:3px solid #f3a8ad}
.piece.blue{background:linear-gradient(#5787bb,#244b77);border:3px solid #a7c1dc}
#message{width:min(620px,94vw);margin-top:14px;background:#651f2a;color:white;border-radius:12px;padding:13px;text-align:center;font-weight:bold}
.help{margin-top:22px;background:#fffaf0;border:1px solid #decaa7;border-radius:14px;padding:16px;display:flex;gap:15px;flex-wrap:wrap;line-height:1.5}
.help span{font-size:13px;color:#665348}
footer{text-align:center;color:#806f61;font-size:12px;margin-top:24px}
@media(max-width:600px){header{flex-direction:column;text-align:center}.status{grid-template-columns:1fr 1fr}.turn{grid-column:1/-1;grid-row:1}.player{text-align:center}.blue{text-align:center}.help{flex-direction:column}}