:root{--bg: #0f172a;--bg-elev: #1e293b;--board: #1d4ed8;--board-2: #1e40af;--hole: #0b1224;--red: #ef4444;--red-glow: #fca5a5;--yellow: #facc15;--yellow-glow: #fde68a;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--border: #334155;--win: #22c55e}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 50% -10%,#1e293b 0%,var(--bg) 60%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent)}.app{max-width:720px;margin:0 auto;padding:28px 20px 60px}.header h1{margin:0 0 4px;font-size:28px;letter-spacing:-.01em}.header .muted{color:var(--muted);font-weight:500}.tagline{margin:0;color:var(--muted);font-size:14px}.controls{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin:22px 0 14px;padding:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px}@media (max-width: 640px){.controls{grid-template-columns:1fr}}.control-group{display:flex;flex-direction:column;gap:6px}.control-group.actions{flex-direction:row;align-items:end;gap:8px}.control-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.seg{display:inline-flex;background:#0b1224;border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}.seg-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:var(--text);border:0;padding:7px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:background .15s ease,color .15s ease}.seg-btn:hover{background:#ffffff0d}.seg-btn.active{background:var(--accent);color:#06121f;font-weight:600}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-elev);color:var(--text);border:1px solid var(--border);padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.status{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;margin-bottom:14px}.status-text{font-weight:600}.muted{color:var(--muted)}.small{font-size:12px}.status .small{margin-left:auto}.turn-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #ffffff0d}.turn-dot.red{background:var(--red)}.turn-dot.yellow{background:var(--yellow)}.board-wrap{position:relative;background:linear-gradient(180deg,var(--board) 0%,var(--board-2) 100%);padding:14px;border-radius:14px;box-shadow:0 12px 30px #0006,inset 0 0 0 2px #ffffff0f}.col-targets{position:absolute;top:14px;right:14px;bottom:14px;left:14px;display:grid;grid-template-columns:repeat(7,1fr);z-index:2}.col-target{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer}.col-target:disabled{cursor:not-allowed}.col-target:hover:not(:disabled){background:linear-gradient(180deg,#ffffff0f,#fff0)}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.cell{aspect-ratio:1 / 1;background:var(--hole);border-radius:50%;box-shadow:inset 0 4px 8px #00000080;display:flex;align-items:center;justify-content:center}.disk{width:86%;height:86%;border-radius:50%;transition:transform .18s ease}.disk.empty{background:transparent}.disk.red{background:radial-gradient(circle at 35% 30%,var(--red-glow),var(--red) 55%,#b91c1c 100%);box-shadow:inset 0 -4px 8px #00000059,0 2px 6px #0000004d;animation:drop .32s cubic-bezier(.55,1.6,.45,.95)}.disk.yellow{background:radial-gradient(circle at 35% 30%,var(--yellow-glow),var(--yellow) 55%,#a16207 100%);box-shadow:inset 0 -4px 8px #00000059,0 2px 6px #0000004d;animation:drop .32s cubic-bezier(.55,1.6,.45,.95)}.disk.preview{opacity:.45;animation:none;transform:scale(.92)}.disk.win{outline:3px solid var(--win);outline-offset:-3px;animation:pulse 1.1s ease-in-out infinite}@keyframes drop{0%{transform:translateY(-180%)}70%{transform:translateY(8%)}to{transform:translateY(0)}}@keyframes pulse{0%,to{box-shadow:inset 0 -4px 8px #00000059,0 0 #22c55e99}50%{box-shadow:inset 0 -4px 8px #00000059,0 0 0 8px #22c55e00}}.col-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:10px;position:relative;z-index:3}.col-label-cell{display:flex;justify-content:center;align-items:center;min-height:22px}.lbl{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:5px;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.25)}.lbl.win{background:#15803d;color:#ecfdf5}.lbl.loss{background:#b91c1c;color:#fef2f2}.lbl.draw{background:#475569;color:#f1f5f9}.lbl.unknown{background:#1e293b;color:#94a3b8;border:1px dashed #475569}.lbl.spacer{background:transparent;color:transparent}.hint-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:7px 10px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.hint-toggle input{accent-color:var(--accent)}