.setup { display: grid; gap: 10px; margin-bottom: 14px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbl { width: 60px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pbars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.pbar.turn { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent), var(--shadow); }
.pbar .chip { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2)); }
.pbar .nm { font-weight: 700; font-size: 0.9rem; }
.pbar .nm small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.board-wrap { max-width: 560px; margin: 0 auto; }
#mb { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); touch-action: manipulation; }
#mb .hit { fill: transparent; cursor: pointer; }
#mb .pulse { animation: mpulse 1s ease-in-out infinite; }
@keyframes mpulse { 50% { opacity: 0.4; } }
html[data-saver="on"] #mb .pulse { animation: none; }
.tools { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.rules { margin: 18px auto 0; max-width: 560px; }
.rules summary { cursor: pointer; font-weight: 800; }
.rules ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.6; }