.jwrap { display: flex; flex-direction: column; gap: 1rem; }
.jboard-box { max-width: min(600px, 70vh); width: 100%; margin: 0 auto; }
.jboard { width: 100%; height: auto; display: block; border-radius: 50%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .75); }
.jboard .gring { fill: none; stroke: url(#jgoldline); stroke-width: 3; opacity: .85; }
.jboard .scallop { fill: none; stroke: #c99a45; stroke-opacity: .55; stroke-width: 1.6; }
.jboard .band-stars polygon { fill: #d8b06a; opacity: .8; }
.jboard .knot polygon { fill: #c99a45; fill-opacity: .22; stroke: #8f6038; stroke-opacity: .7; stroke-width: 1.8; }
.jboard .knot circle { fill: none; stroke: #8f6038; stroke-opacity: .65; stroke-width: 1.5; }
.jboard .knot .kd { fill: #c99a45; fill-opacity: .55; stroke: none; }
.jboard .halo { fill: none; stroke: #8a5c47; stroke-opacity: .28; stroke-width: 2; }
.jboard .halo-c { fill: none; stroke: #c99a45; stroke-opacity: .45; stroke-width: 1.5; stroke-dasharray: 2 7; }
.jboard .lip { fill: none; stroke: #f3d2bd; stroke-opacity: .45; stroke-width: 1.6; }
.jboard .turn-ring { fill: none; stroke-width: 4; stroke-dasharray: 10 8; animation: jspin 6s linear infinite, jturn 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.jboard .turn-ring.c-red { stroke: #ff6b6b; } .jboard .turn-ring.c-blue { stroke: #6bb0ff; } .jboard .turn-ring.c-yellow { stroke: #ffd84d; } .jboard .turn-ring.c-green { stroke: #6ee07c; }
@keyframes jspin { to { transform: rotate(360deg); } }
.jboard .well-o { fill: #a8775f; stroke: url(#jgoldline); stroke-width: 3; }
.jboard .well { fill: url(#jwell); filter: drop-shadow(0 4px 4px rgb(0 0 0 / .35)); }
.jboard .hole { fill: url(#jhole); stroke: #6d4532; stroke-width: 1; }
.jboard .hole.c-red { fill: url(#jh-red); } .jboard .hole.c-blue { fill: url(#jh-blue); } .jboard .hole.c-yellow { fill: url(#jh-yellow); } .jboard .hole.c-green { fill: url(#jh-green); }
.jboard .hole.start { stroke: #fff; stroke-opacity: .75; stroke-width: 2.5; }
.jboard .plate rect { stroke: rgb(0 0 0 / .25); stroke-width: 2; fill-opacity: .92; }
.jboard .plate rect.c-red { fill: #9f1f22; } .jboard .plate rect.c-blue { fill: #1f4e79; } .jboard .plate rect.c-yellow { fill: #a87b0c; } .jboard .plate rect.c-green { fill: #1f6b2c; }
.jboard .plate text { fill: #fff; font-size: 21px; font-weight: 800; }
.jboard .plate.is-turn rect { stroke: #fff; stroke-width: 4; }
.jboard .marble .mshadow { fill: rgb(0 0 0 / .35); }
.jboard .marble.is-moving .mshadow { opacity: .55; }
.jboard .marble .mb { stroke: rgb(0 0 0 / .25); stroke-width: 1.5; }
.jboard .marble.is-knocked .mb { animation: jknock .3s 3; }
@keyframes jknock { 50% { stroke: #fff; stroke-width: 6; } }
.jboard .pile { animation: jpile .45s cubic-bezier(.2, .9, .3, 1.2); transform-box: fill-box; transform-origin: center; }
@keyframes jpile { from { opacity: 0; transform: translateY(160px) scale(.6) rotate(18deg); } }
.jboard .plate.is-turn rect { animation: jturn 1.4s ease-in-out infinite; }
@keyframes jturn { 50% { stroke-opacity: .25; } }
.jboard .marble .shine { fill: #fff; opacity: .85; }
.jboard .marble text { font-size: 15px; font-weight: 900; fill: #fff; pointer-events: none; font-family: var(--font-en); paint-order: stroke; stroke: rgb(0 0 0 / .35); stroke-width: 2px; }
.jboard .marble.c-yellow text { fill: #4a3400; stroke: rgb(255 255 255 / .4); }
.jboard .marble.safe .mb { stroke: #fff; stroke-width: 4; }
.jboard .marble.is-last .mb { stroke: #fff7c2; stroke-width: 4; }
.jboard .marble.is-hl .mb { stroke: #fff; stroke-width: 5; animation: jpulse 1s infinite; }
.jboard .marble.is-cap .mb { stroke: #fff; stroke-width: 5; stroke-dasharray: 6 4; }
@keyframes jpulse { 50% { stroke-opacity: .2; } }
.jboard .ghost { fill: rgb(255 255 255 / .2); stroke-width: 4; stroke-dasharray: 7 5; }
.jboard .ghost.c-red { stroke: #fff; } .jboard .ghost.c-blue { stroke: #fff; } .jboard .ghost.c-yellow { stroke: #fff; } .jboard .ghost.c-green { stroke: #fff; }
.jboard .pile-card { fill: #fff; stroke: #d9d3c7; stroke-width: 1.5; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
.jboard .pc-i, .jboard .pc-is { direction: ltr; unicode-bidi: isolate; }
.jboard .pc-i { font: 900 36px Georgia, 'Times New Roman', serif; fill: #16181d; letter-spacing: -1px; }
.jboard .pc-is { font-size: 28px; fill: #16181d; }
.jboard .pc-pip { font-size: 34px; fill: #16181d; }
.jboard .pc-pip.sm { font-size: 27px; }
.jboard .pc-ace { font-size: 78px; fill: #16181d; }
.jboard .pc-ring { fill: none; stroke: #16181d; stroke-opacity: .15; stroke-width: 2; }
.jboard .pc-court { fill: #f6efdc; stroke: #cdbf98; stroke-width: 1.5; }
.jboard .pc-court-d { fill: #fff; stroke: #b08d3c; stroke-width: 2.5; }
.jboard .pc-court-l { font: 900 54px Georgia, serif; fill: #16181d; }
.jboard .red { fill: #d0102e; } .jboard .pc-ring.red { fill: none; stroke: #d0102e; }
.jboard .pile-under { opacity: .96; }
.jboard .marble .shine2 { fill: #fff; opacity: .3; }
.jboard .pile-empty { font-size: 40px; font-weight: 900; fill: rgb(255 225 190 / .5); }

.hand-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.jhint { margin: 0; font-weight: 800; }
.jhint.bad { color: var(--danger); }
.hand { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.hand { --cw: 92px; }
.hand .pc { transition: transform .25s var(--ease), box-shadow .25s, filter .2s; }
.hand.dealing .pc { animation: jdeal .45s cubic-bezier(.2, .9, .3, 1.1) both; }
.hand.dealing .pc:nth-child(2) { animation-delay: .08s; } .hand.dealing .pc:nth-child(3) { animation-delay: .16s; } .hand.dealing .pc:nth-child(4) { animation-delay: .24s; } .hand.dealing .pc:nth-child(5) { animation-delay: .32s; }
@keyframes jdeal { from { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(.7); } }
.hand .pc.can { cursor: pointer; }
.hand .pc.can:hover { transform: translateY(-8px); }
.hand .pc.is-sel { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--primary), 0 18px 28px -10px rgb(0 0 0 / .6); }
.hand .pc.is-dead { filter: brightness(.6) saturate(.5); }
@media (max-width: 560px) { .hand { --cw: 60px; } .hand .pc-hint { display: none; } }
.jopts { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; max-width: 720px; }
.jopt { padding: .55rem .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: .88rem; color: var(--text); transition: border-color .2s, background .2s, transform .2s; }
.jopt:hover, .jopt:focus-visible { border-color: var(--primary); background: var(--tint); transform: translateY(-2px); }
.jopt.cap { border-color: rgb(239 68 68 / .5); }
.jopt.burn { border-color: var(--danger); color: var(--danger); }

.jteams { display: flex; flex-direction: column; gap: .7rem; }
.jteam { border-radius: 14px; padding: .65rem .75rem; background: var(--bg-2); border: 2px solid var(--line-soft); display: flex; flex-direction: column; gap: .35rem; }
.jteam.is-turn { border-color: var(--primary); }
.jt-h { display: flex; justify-content: space-between; font-weight: 900; }
.jt-h .num { color: var(--primary-ink); font-size: 1.2rem; }
.jt-p { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; }
.jt-p svg { width: 15px; height: 15px; color: var(--text-mute); }
.jt-p small { color: var(--text-mute); }
.jt-p em { margin-inline-start: auto; font-style: normal; font-size: .8rem; color: var(--text-mute); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.dot.c-red { background: #ef4444; } .dot.c-blue { background: #3b82f6; } .dot.c-yellow { background: #eab308; } .dot.c-green { background: #22c55e; }
.jlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 240px; overflow-y: auto; font-size: .82rem; }
.jlog li { display: flex; align-items: center; gap: .4rem; line-height: 1.5; }
.jlog b { font-family: var(--font-en); min-width: 2.2em; }
.jlog b.red { color: #dc2626; }
@media (max-width: 560px) { .pcard { width: 58px; height: 84px; } .pcard .r { font-size: 1.35rem; } .pcard small { display: none; } .jboard .seat-name { font-size: 22px; } }
.jboard .pc-court-d.red { fill: #fff; stroke: #d0102e; }
/* tap-to-move */
.jboard .marble.can-pick { cursor: pointer; }
.jboard .marble.can-pick .mb { stroke: #fff; stroke-width: 3.5; animation: jpick 1.1s ease-in-out infinite; }
@keyframes jpick { 50% { stroke-opacity: .25; stroke-width: 6; } }
.jboard .marble.can-pick:hover .mb { stroke: #fde68a; stroke-width: 5; }
.jboard .marble.is-picked .mb { stroke: #fde68a; stroke-width: 6; animation: none; }
.jboard .marble.can-target { cursor: pointer; }
.jboard .marble.can-target .mb { stroke: #f97316; stroke-width: 5; stroke-dasharray: 5 4; }
.jboard .dest { cursor: pointer; }
.jboard .ghost.pick { fill: rgb(253 230 138 / .35); stroke: #fde68a; stroke-width: 4; stroke-dasharray: none; animation: jdest 1s ease-in-out infinite; }
.jboard .dest:hover .ghost.pick { fill: rgb(253 230 138 / .6); }
@keyframes jdest { 50% { stroke-opacity: .35; } }
.jboard .dest-t { font: 900 20px var(--font-en); fill: #fff; paint-order: stroke; stroke: rgb(0 0 0 / .6); stroke-width: 4px; pointer-events: none; }
.jopt.ghosty { background: transparent; border-style: dashed; color: var(--text-mute); }