@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Mono:wght@300;400;500&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#07100a;--surface:#0d1f10;--board-bg:#0f2115;--grid-line:#1e3d26;--cell-hover:#1a3520;--black-piece:#121212;--white-piece:#f0ece0;--legal-hint:#b4e68238;--legal-dot:#a0dc648c;--gold:#c9a84c;--gold-dim:#7a6328;--text-primary:#e8dfc8;--text-muted:#7a7060;--border:#1e3520;--cell-size:clamp(36px, 11vmin, 64px);--board-size:calc(var(--cell-size) * 8 + 9px)}html,body{background:var(--bg);height:100%;color:var(--text-primary);font-family:DM Mono,monospace;overflow-x:hidden}body{flex-direction:column;align-items:center;min-height:100dvh;display:flex}.app{flex-direction:column;align-items:center;gap:1.6rem;width:100%;max-width:1100px;padding:1.5rem 1rem 3rem;display:flex}.header{text-align:center}.title{letter-spacing:.05em;color:var(--gold);text-shadow:0 0 40px #c9a84c59,0 2px #0009;font-family:Playfair Display,serif;font-size:clamp(2rem,6vw,3.6rem);font-weight:900;line-height:1}.subtitle{letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-top:.3rem;font-size:.7rem}.score-panel{background:var(--surface);border:1px solid var(--border);border-radius:4px;align-items:center;gap:1rem;padding:.8rem 1.4rem;display:flex}.score-side{align-items:center;gap:.55rem;min-width:80px;display:flex}.score-side.right{flex-direction:row-reverse;min-width:80px}.piece-icon{border-radius:50%;flex-shrink:0;width:22px;height:22px;box-shadow:0 2px 6px #000000b3}.piece-icon.black{background:radial-gradient(circle at 35% 30%,#3a3a3a,#0a0a0a);border:1px solid #333}.piece-icon.white{background:radial-gradient(circle at 35% 30%,#fff,#d0caba);border:1px solid #aaa}.score-label{letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);font-size:.65rem;line-height:1}.score-number{color:var(--text-primary);font-size:1.5rem;font-weight:500;line-height:1}.score-divider{background:var(--border);width:1px;height:40px}.turn-indicator{flex-direction:column;align-items:center;padding:0 .5rem;display:flex}.turn-dot{border-radius:50%;width:10px;height:10px;margin-bottom:.3rem}.turn-dot.black{background:var(--text-primary);box-shadow:0 0 8px #c8c8c880}.turn-dot.white{background:#d0caba;box-shadow:0 0 8px #d0caba80}.turn-dot.none{background:var(--gold);box-shadow:0 0 8px #c9a84c80}.turn-text{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:.6rem}.status-banner{color:var(--gold);letter-spacing:.05em;text-align:center;min-height:1.4rem;font-family:Playfair Display,serif;font-size:1rem;transition:opacity .3s}.status-banner.pass{color:#a0b890}.status-banner.winner{text-shadow:0 0 30px #c9a84c80;font-size:1.3rem}.board-wrapper{-webkit-overflow-scrolling:touch;border:1px solid var(--border);background:var(--surface);border-radius:4px;width:100%;padding:8px;overflow:auto;box-shadow:0 0 0 1px #c9a84c14,0 8px 40px #000000b3,inset 0 1px #ffffff08}.board{background:var(--grid-line);border:1px solid var(--grid-line);width:min(var(--board-size), calc(100vw - 40px));cursor:default;grid-template-columns:repeat(8,1fr);gap:1px;margin:0 auto;display:grid}.cell{aspect-ratio:1;background:var(--board-bg);perspective:400px;justify-content:center;align-items:center;min-width:0;transition:background .1s;display:flex;position:relative}.cell.legal{background:var(--legal-hint);cursor:pointer}.cell.legal:hover{background:var(--cell-hover)}.cell.legal:after{content:"";background:var(--legal-dot);border-radius:50%;width:28%;height:28%;position:absolute}.piece{transform-origin:50%;backface-visibility:hidden;border-radius:50%;width:80%;height:80%;position:absolute}.piece.black{background:radial-gradient(circle at 35% 30%,#3d3d3d,#080808);border:1px solid #2a2a2a;box-shadow:0 1px 3px #000c,inset 0 1px #ffffff1f}.piece.white{background:radial-gradient(circle at 35% 30%,#fff,#c8c4b0);border:1px solid #b0ac9c;box-shadow:0 1px 3px #0009,inset 0 -1px #0000001a}@keyframes piece-place{0%{opacity:0;transform:scale(0)translateY(-30%);box-shadow:0 12px 24px #000c}55%{opacity:1;transform:scale(1.18)translateY(0);box-shadow:0 4px 12px #0009}75%{transform:scale(.93)}88%{transform:scale(1.05)}to{transform:scale(1);box-shadow:0 1px 3px #000c}}@keyframes piece-flip{0%{filter:brightness();transform:rotateY(0)scale(1)}35%{filter:brightness(.4);transform:rotateY(75deg)scale(.88)}50%{filter:brightness(.1);transform:rotateY(90deg)scale(.82)}65%{filter:brightness(.55);transform:rotateY(105deg)scale(.88)}82%{filter:brightness(1.15);transform:rotateY(170deg)scale(1.06)}92%{filter:brightness();transform:rotateY(182deg)scale(.97)}to{filter:brightness();transform:rotateY(180deg)scale(1)}}@keyframes flip-glow{0%{box-shadow:0 0 #c9a84c00}50%{box-shadow:0 0 14px #c9a84c8c,0 1px 3px #0009}to{box-shadow:0 1px 3px #000c}}.piece.anim-place{animation:.42s cubic-bezier(.34,1.56,.64,1) both piece-place}.piece.anim-flip{animation-name:piece-flip,flip-glow;animation-duration:.38s,.55s;animation-timing-function:ease-in-out,ease-out;animation-iteration-count:1,1;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:0s,0s;animation-fill-mode:both;animation-timeline:auto,auto}.controls{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.btn-reset{letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);cursor:pointer;background:0 0;border-radius:2px;padding:.6rem 1.4rem;font-family:DM Mono,monospace;font-size:.72rem;transition:all .15s}.btn-reset:hover{border-color:var(--gold);background:#c9a84c14}.btn-reset:active{background:#c9a84c26}.board-wrapper::-webkit-scrollbar{width:6px;height:6px}.board-wrapper::-webkit-scrollbar-track{background:var(--surface)}.board-wrapper::-webkit-scrollbar-thumb{background:var(--grid-line);border-radius:3px}@media (max-width:480px){.app{padding:1rem .5rem 2rem}.score-panel{gap:.6rem;padding:.6rem .8rem}.score-side,.score-side.right{min-width:60px}.score-number{font-size:1.2rem}}