.app{font-family:system-ui,sans-serif;max-width:1200px;margin:0 auto;padding:1rem}.app h1{text-align:center;margin-bottom:1rem}.dev-page{display:flex;gap:1rem;height:calc(100vh - 120px);min-height:500px}.dev-sidebar{flex:0 0 320px;display:flex;flex-direction:column;gap:.5rem}.dev-sidebar h2{margin:0;font-size:1.1rem}.dev-textarea{flex:1;font-family:monospace;font-size:.85rem;padding:.5rem;border:1px solid #ccc;border-radius:4px;resize:none;white-space:pre;overflow:auto}.dev-error{color:#c00;font-size:.85rem;margin:0}.dev-presets{display:flex;flex-wrap:wrap;gap:.5rem}.dev-presets button{padding:.4rem .8rem;border:1px solid #ccc;border-radius:4px;background:#f5f5f5;cursor:pointer;font-size:.85rem}.dev-presets button:hover{background:#e0e0e0}.dev-board{flex:1;border:1px solid #ddd;border-radius:4px;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden}.dev-board svg{max-width:100%;max-height:100%}.game-page{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.game-board-container{width:600px;height:600px;border:2px solid #c8a2c8;border-radius:8px;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden}.game-board-container svg{max-width:100%;max-height:100%}.coin-selected circle{stroke:gold!important;stroke-width:4!important}.coin-highlighted circle{stroke-width:3!important;filter:brightness(1.15)}.coin-flipping circle{transition:fill .5s ease,stroke .5s ease}.coin-illegal circle{animation:coin-shake .3s ease-in-out}@keyframes coin-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.grid-dot{cursor:pointer;transition:r .15s ease,fill .15s ease}.grid-dot:hover{fill:#9932cc}.grid-dot-legal{fill:#90ee90;stroke:#90ee90;stroke-width:2}.grid-dot-legal:hover{r:6}.preview-line{stroke:gold;stroke-width:3;stroke-dasharray:8 4;opacity:.7;pointer-events:none}.face-selector{position:absolute;display:flex;gap:.5rem;background:#fff;border:2px solid #9932cc;border-radius:8px;padding:.5rem;box-shadow:0 4px 12px #00000026;z-index:10}.face-selector-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;background:transparent}.face-selector button{width:40px;height:40px;border:2px solid #c8a2c8;border-radius:50%;background:#fff;cursor:pointer;font-weight:700;font-size:1rem;transition:background .15s ease,border-color .15s ease}.face-selector button:hover{border-color:#9932cc;background:#f5e6f5}.face-selector-heads{color:#ff1493}.face-selector-tails{color:#00bfff}.turn-indicator{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#fff;border:2px solid #c8a2c8;border-radius:8px;font-size:1rem;min-height:3rem}.turn-indicator-player{font-weight:700}.turn-indicator-heads{color:#ff1493}.turn-indicator-tails{color:#00bfff}.turn-indicator-notice{color:#666;font-style:italic}.game-over-panel{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#fff;border:3px solid #9932cc;border-radius:12px;box-shadow:0 8px 24px #00000026;text-align:center}.game-over-panel h2{margin:0;color:#4a0e4a}.game-over-score{display:flex;gap:2rem;font-size:1.25rem}.game-over-score-heads{color:#ff1493}.game-over-score-tails{color:#00bfff}.game-over-winner{font-size:1.5rem;font-weight:700;color:#9932cc}.game-over-panel button{padding:.75rem 2rem;border:none;border-radius:8px;background:#9932cc;color:#fff;font-size:1rem;cursor:pointer;transition:background .15s ease}.game-over-panel button:hover{background:#7a28a3}.menu-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#fff;border:2px solid #c8a2c8;border-radius:8px;margin-bottom:.5rem}.menu-title{font-size:1.5rem;font-weight:700;color:#4a0e4a;letter-spacing:.05em}.menu-bar-right{display:flex;gap:.5rem}.menu-btn{width:36px;height:36px;border:2px solid #c8a2c8;border-radius:50%;background:#fff;color:#4a0e4a;font-size:1.1rem;cursor:pointer;transition:background .15s ease,border-color .15s ease;display:flex;align-items:center;justify-content:center}.menu-btn:hover{border-color:#9932cc;background:#f5e6f5}.modal-dialog{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh;margin:auto}.modal-dialog::backdrop{background:#00000080}.modal-content{background:#fff;border:3px solid #9932cc;border-radius:12px;width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 32px #00000040}.modal-tabs{display:flex;border-bottom:2px solid #c8a2c8;flex-shrink:0}.modal-tab{flex:1;padding:.75rem;border:none;background:#fafafa;color:#4a0e4a;font-size:.95rem;cursor:pointer;transition:background .15s ease;border-right:1px solid #c8a2c8}.modal-tab:last-of-type{border-right:none}.modal-tab.active{background:#fff;font-weight:700;border-bottom:2px solid #9932cc;margin-bottom:-2px}.modal-tab:hover{background:#f5e6f5}.modal-close{width:44px;border:none;background:#fafafa;color:#4a0e4a;font-size:1.4rem;cursor:pointer;transition:background .15s ease;border-left:1px solid #c8a2c8}.modal-close:hover{background:#ffe6e6;color:#c00}.modal-body{overflow-y:auto;padding:1.25rem;flex:1}.modal-panel h3{margin:0 0 1rem;color:#4a0e4a;font-size:1.2rem;border-bottom:2px solid #c8a2c8;padding-bottom:.5rem}.modal-panel h4{margin:1.25rem 0 .5rem;color:#9932cc;font-size:1rem}.modal-panel h5{margin:1rem 0 .25rem;color:#4a0e4a;font-size:.95rem}.modal-panel p{margin:.5rem 0;line-height:1.5;color:#333}.modal-panel ul{margin:.5rem 0;padding-left:1.25rem;color:#333}.modal-panel li{margin:.25rem 0}.rule-block{background:#fafafa;border:1px solid #c8a2c8;border-radius:6px;padding:.75rem;margin:.75rem 0}.controls-table{width:100%;border-collapse:collapse;margin:.75rem 0}.controls-table td{padding:.5rem;border-bottom:1px solid #eee;vertical-align:top}.controls-table td:first-child{white-space:nowrap;color:#4a0e4a;font-weight:500;width:40%}.heads-text{color:#ff1493;font-weight:700}.tails-text{color:#00bfff;font-weight:700}.about-content{line-height:1.6}.about-shout{font-size:1.3rem;font-weight:700;color:#9932cc;text-align:center;margin:1rem 0;letter-spacing:.03em}.setting-row{margin:.75rem 0;padding:.5rem 0;border-bottom:1px solid #eee}.setting-row label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#333}.setting-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#9932cc}.settings-note{font-size:.85rem;color:#666;font-style:italic;margin-top:1rem}