.jump-board { position:relative; width:100%; max-width:570px; aspect-ratio:1000/1160; margin:auto; overflow:hidden; border:1px solid #d2b88d; border-radius:14px; background:radial-gradient(circle at 50% 38%,#f7e2bb,#e8c894 80%,#dfb982); box-shadow:inset 0 3px 18px #80603c23,0 8px 20px #694f2b16; touch-action:manipulation; user-select:none; -webkit-user-select:none; overflow-anchor:none; }
.jump-hole { position:absolute; z-index:2; display:block; width:6.2%; aspect-ratio:1; padding:0; border:1.5px solid #a98a60; border-radius:50%; background:var(--camp-color,#f4dfb8); box-shadow:inset 0 2px 4px #80643a63,0 1px 0 #fff5dc; transform:translate(-50%,-50%); touch-action:manipulation; }
.jump-hole[data-camp-color="red"] { --camp-color:#f2cbc1; }
.jump-hole[data-camp-color="blue"] { --camp-color:#cbdceb; }
.jump-hole[data-camp-color="green"] { --camp-color:#d2e6c7; }
.jump-hole[data-camp-color="gold"] { --camp-color:#f6e3b9; }
.jump-hole[data-camp-color="purple"] { --camp-color:#e5d7e8; }
.jump-hole[data-camp-color="teal"] { --camp-color:#cce6df; }
.jump-hole[data-owner="blue"] { --marble:#1853b8; --marble-light:#78a9ef; --marble-edge:#12356d; }
.jump-hole[data-owner="gold"] { --marble:#d89900; --marble-light:#ffe16b; --marble-edge:#8a5b00; }
.jump-hole[data-owner="red"] { --marble:#c53930; --marble-light:#f48b7f; --marble-edge:#77231f; }
.jump-hole.occupied { z-index:3; border-color:var(--marble); background:radial-gradient(circle at 32% 26%,var(--marble-light),var(--marble) 72%); box-shadow:inset -2px -3px 5px #25352640,0 2px 4px #46351c69; }
.jump-hole.selected { z-index:4; outline:3px solid #527b43; outline-offset:2px; }
.jump-hole.target { z-index:4; border:2px solid #5c884b; background:#eef8de; box-shadow:0 0 0 3px #eff8ddaa,inset 0 1px 3px #5a844744; }
.jump-hole.target::after { content:""; position:absolute; inset:29%; border-radius:50%; background:#76a160; }
.jump-hole.last:not(.selected) { outline:2px solid #c67c52; outline-offset:1px; }
.jump-hole:focus-visible { z-index:5; outline:3px solid #324e2d; outline-offset:2px; }
.jump-count-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.jump-count-options button { min-height:68px; padding:11px 13px; border:1px solid #e4e8de; border-radius:11px; background:#fafbf8; color:#53624e; font-size:15px; font-weight:700; text-align:left; }
.jump-count-options button small { display:block; margin-top:5px; color:#9ba698; font-size:11px; font-weight:400; }
.jump-count-options button.active { border-color:#a6b99c; background:#edf3e8; color:#435a38; box-shadow:inset 3px 0 #6f8a60; }
.jump-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.jump-player { display:flex; align-items:center; gap:9px; min-width:0; padding:10px 8px; border:1px solid #e6e8e1; border-radius:10px; background:#fafbf8; opacity:.68; }
.jump-player:last-child:nth-child(odd) { grid-column:1/-1; justify-content:center; }
.jump-player.active { border-color:#a6b99c; background:#f0f5eb; opacity:1; }
.jump-player-dot { width:25px; height:25px; flex:none; border-radius:50%; background:var(--dot); box-shadow:inset -2px -3px 5px #17211833,0 1px 3px #25352633; }
.jump-player strong,.jump-player small { display:block; white-space:nowrap; }
.jump-player strong { font-size:12px; }
.jump-player small { margin-top:3px; color:#96a18d; font-size:10px; }
.jump-player[data-color="blue"] { --dot:#1853b8; --dot-light:#78a9ef; --dot-edge:#12356d; }
.jump-player[data-color="gold"] { --dot:#d89900; --dot-light:#ffe16b; --dot-edge:#8a5b00; }
.jump-player[data-color="red"] { --dot:#c53930; --dot-light:#f48b7f; --dot-edge:#77231f; }
.jump-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:9px; }
.jump-actions button { min-height:44px; padding:9px; border:1px solid #dfe5d8; border-radius:9px; background:#fff; color:#526447; font-size:12px; font-weight:700; }
.jump-actions .primary-button { border-color:#526447; background:#526447; color:#fff; }
.jump-actions .primary-button:hover { background:#3b4f34; }
.jump-actions button:disabled { opacity:.5; cursor:default; }
@media(max-width:640px) { .jump-board { border-radius:9px; } .jump-hole { width:6.35%; border-width:1px; } .jump-player { padding:8px 6px; } .jump-player-dot { width:21px; height:21px; } .jump-count-options button { min-height:63px; } }