.sugoroku {--sugoroku-sand-1: #fdf6e3;--sugoroku-sand-2: #f2d99b;--sugoroku-reef-1: #b9f0e6;--sugoroku-reef-2: #3fb8b0;--sugoroku-offshore-1: #3a72c4;--sugoroku-offshore-2: #12306b;--sugoroku-offshore-text: #eaf1ff;--sugoroku-outer-1: #1f4d8f;--sugoroku-outer-2: #0a1f45;--sugoroku-outer-text: #eaf1ff;--sugoroku-deep-1: #141a33;--sugoroku-deep-2: #05070f;--sugoroku-deep-text: #dce6ff;--seam-sky: #eaf6ff;--seam-waterline: #eafcfa;--seam-reef-mid: #4fc2c7;--seam-reef-offshore: #2f7fb8;--seam-offshore-outer: #123a73;--seam-outer-deep: #0d1f45;--seam-abyss: #0b1020;--seam-offshore-mid: #215b98;--seam-outer-mid: #10305c;--seam-deep-mid: #0c1836;--sugoroku-glow: #7ef7d1;--sugoroku-glow-2: #c9a8ff;--sugoroku-self-ring: #fbbf24;--sugoroku-self-ring-glow: rgba(251, 191, 36, 0.45);--sugoroku-wake: rgba(6, 182, 212, 0.16);--sugoroku-tide: #0e7490;--board-paper-1: #f6ecd2;--board-paper-2: #efe0b8;--board-frame-ink: #2b3a55;--board-frame-gold: #cda856;--color-aqua-500: #06b6d4;--gradient-aqua: linear-gradient(135deg, #06b6d4, #3b82f6);--tile-size: 32px;--occ-overhang: 13px;display: block;min-width: 0;max-width: 100%;box-sizing: border-box;font-size: 14px;line-height: 1.6}
@media (min-width: 768px) {.sugoroku { --tile-size: 36px; --occ-overhang: 9px; }}
@media (min-width: 1024px) {.sugoroku { --tile-size: 40px; --occ-overhang: 10px; }}
.sugoroku *, .sugoroku *::before, .sugoroku *::after { box-sizing: border-box; }
.sugoroku button { font-family: inherit; cursor: pointer; }
.sugoroku svg { max-width: 100%; }
.sugoroku [hidden] { display: none !important; }
.sugoroku .board-outer svg.road-layer, .sugoroku .band-scenery svg { max-width: none; }
.sugoroku a { color: inherit; text-decoration: none; }
.sugoroku a:hover { text-decoration: underline; }
.sugoroku h2, .sugoroku h3 { margin: 0; }
.sugoroku p, .sugoroku ul { margin: 0; }
.sugoroku .log-tabs [role="tab"]:focus-visible,
.sugoroku .btn-roll:focus-visible,
.sugoroku .occ-close-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sugoroku .btn-roll { text-decoration: none; }
.sugoroku .btn-roll.is-busy { opacity: 0.7; }
.sugoroku .log-tabpanel { min-width: 0; }
.sugoroku .occ-row a { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.sugoroku .self-piece-inner { padding: 2px; }
.sugoroku .self-piece-inner .user-avatar-wrapper,
.sugoroku .tile-occ-avatar .user-avatar-wrapper { display: block; width: 100%; height: 100%; }
.sugoroku .sg-piece-avatar {display: block; width: 100% !important; height: 100% !important;border-radius: 50%; object-fit: cover; background: #fff}
.sugoroku .sg-piece-avatar.user-avatar-default { display: flex; align-items: center; justify-content: center; }
.sugoroku .sg-piece-avatar .user-avatar-icon { width: 70%; height: 70%; }
.sugoroku .tile-occ-btn.tile-occ-avatar { background: #fff; }
.sugoroku .tile-occ-more {position: absolute; top: -5px; right: -7px;min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;border-radius: 999px; border: 1.5px solid #fff;background: var(--color-text-primary); color: #fff;font-size: 9px; font-weight: 800; line-height: 12px; text-align: center}
.sugoroku .icon { width: 18px; height: 18px; flex-shrink: 0; display: block}
.sugoroku .sg-card {background: #fff;border-radius: var(--radius-md);box-shadow: var(--shadow-sm);padding: 14px 10px;margin-bottom: 10px}
.sugoroku .sg-card h2 {font-size: 13px;display: flex;align-items: center;gap: 6px;margin-bottom: 8px;color: var(--color-text-primary)}
.sugoroku .sg-card h2 .icon { width: 16px; height: 16px; color: var(--color-primary)}
.sugoroku .dice-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap}
.sugoroku .dice-face-wrap { width: 52px; height: 52px; flex-shrink: 0}
.sugoroku .dice-face-svg { width: 100%; height: 100%}
.sugoroku .dice-face-wrap.is-rolling .dice-face-svg { animation: dice-tumble 0.35s ease-in-out infinite}
@keyframes dice-tumble {0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.12); }
100% { transform: rotate(360deg) scale(1); }}
.sugoroku .dice-body { flex: 1; min-width: 0}
.sugoroku .dice-status-line { font-size: 12.5px; color: var(--color-text-secondary); overflow-wrap: anywhere}
.sugoroku .dice-status-line strong { color: var(--color-text-primary)}
.sugoroku .btn-roll {display: inline-flex;align-items: center;gap: 6px;background: var(--gradient-aqua);color: #fff;border: none;border-radius: var(--radius-sm);padding: 10px 16px;font-size: 13px;font-weight: 700;min-height: 44px;box-shadow: var(--shadow-sm)}
.sugoroku .btn-roll[disabled] {background: var(--color-border);color: var(--color-text-light);box-shadow: none;cursor: not-allowed}
.sugoroku .log-tabs { display: flex; border-bottom: 1px solid var(--color-border); margin: 0 -10px; padding: 0 10px}
.sugoroku .log-tabs [role="tab"] {flex: 1; min-height: 44px; border: 0; background: none; cursor: pointer;font-size: 13px; font-weight: 700; color: var(--color-text-muted);border-bottom: 3px solid transparent; margin-bottom: -1px}
.sugoroku .log-tabs [role="tab"][aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary)}
.sugoroku .log-list { list-style: none; margin: 0; padding: 0}
.sugoroku .log-item { padding: 12px 2px; border-bottom: 1px solid var(--color-border)}
.sugoroku .log-item:last-child { border-bottom: 0; padding-bottom: 2px}
.sugoroku .log-head { display: flex; align-items: center; gap: 6px; min-width: 0}
.sugoroku .log-name { font-size: 13px; font-weight: 800; min-width: 0; overflow-wrap: anywhere}
.sugoroku .log-head > .log-time:first-child { margin-left: 0}
.sugoroku .log-time { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums}
.sugoroku .log-move { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 13px}
.sugoroku .log-move .icon { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0}
.sugoroku .log-move strong { font-size: 15px; margin: 0 2px}
.sugoroku .log-event { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere}
.sugoroku .log-event > .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--log-kind)}
.sugoroku .log-empty { padding: 16px 0; text-align: center; font-size: 13px; color: var(--color-text-muted)}
.sugoroku .toast-card {display: flex;gap: 8px;align-items: flex-start;background: #fff;border-left: 4px solid var(--color-primary);border-radius: var(--radius-sm);box-shadow: var(--shadow-sm);padding: 10px 12px;font-size: 12.5px;color: var(--color-text-secondary);min-width: 0}
.sugoroku .toast-card .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); margin-top: 1px}
.sugoroku .toast-card.pop-in { animation: toast-pop-in 320ms ease-out}
@keyframes toast-pop-in {from { transform: translateY(18px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }}
.sugoroku .toast-card .t-body { min-width: 0; overflow-wrap: anywhere}
.sugoroku .toast-card .t-title { font-weight: 700; color: var(--color-text-primary); display: block; margin-bottom: 2px}
.sugoroku .board-frame {position: relative;background: linear-gradient(180deg, var(--board-paper-1), var(--board-paper-2));border-radius: var(--radius-lg);padding: 56px 6px 16px;box-shadow: var(--shadow-md);border: 3px solid var(--board-frame-ink);outline: 2px solid var(--board-frame-gold);outline-offset: -8px;overflow: hidden}
.sugoroku .board-frame::before,
.sugoroku .board-frame::after {content: "";position: absolute;width: 40px; height: 40px;border: 2px solid var(--board-frame-gold);opacity: 0.55;pointer-events: none}
.sugoroku .board-frame::before { left: 6px; bottom: 6px; border-right: none; border-top: none; border-radius: 0 0 0 10px}
.sugoroku .board-frame::after { right: 6px; bottom: 6px; border-left: none; border-top: none; border-radius: 0 0 10px 0}
.sugoroku .rope-knot {position: absolute;width: 14px; height: 14px;border-radius: 50%;background: radial-gradient(circle at 35% 30%, #e7cf98, var(--board-frame-gold) 70%, #8a6a2e);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.25);pointer-events: none;z-index: 3}
.sugoroku .rope-knot::before {content: "";position: absolute; inset: 3px;border-radius: 50%;border: 1.5px dashed rgba(43, 58, 85, 0.55)}
.sugoroku .rope-knot.rk-tl { top: 6px; left: 6px}
.sugoroku .rope-knot.rk-tr { top: 6px; right: 6px}
.sugoroku .board-title-plate {position: absolute;top: 10px; left: 50%;transform: translateX(-50%);background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 10px),
linear-gradient(180deg, #9a6a37, #6e4620);color: #f6ecd2;padding: 8px 20px;border-radius: 6px;font-size: 12.5px;font-weight: 800;letter-spacing: 0.03em;box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.15);border: 2px solid #4a2f18;display: flex;align-items: center;gap: 6px;white-space: nowrap;max-width: calc(100% - 24px)}
.sugoroku .board-title-plate::before,
.sugoroku .board-title-plate::after {content: "";position: absolute;top: -10px;width: 2px; height: 12px;background: #8a6a2e;border-radius: 2px}
.sugoroku .board-title-plate::before { left: 14%; transform: rotate(-8deg)}
.sugoroku .board-title-plate::after { right: 14%; transform: rotate(8deg)}
.sugoroku .board-title-plate .icon { width: 15px; height: 15px; flex-shrink: 0}
.sugoroku .board-title-plate span { overflow: hidden; text-overflow: ellipsis}
.sugoroku .board-outer { position: relative; overflow: hidden; border-radius: var(--radius-md)}
.sugoroku .road-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none}
.sugoroku .board-bands { display: flex; flex-direction: column; gap: 0}
.sugoroku .board-bands-end-spacer { flex-shrink: 0; height: max(20px, calc(var(--tile-size) * 0.5))}
.sugoroku .band {position: relative;overflow: visible}
.sugoroku .band-scenery { position: absolute; inset: 0; bottom: -1px; z-index: 0; overflow: visible}
.sugoroku .band-scenery svg { width: 100%; height: 100%; display: block; overflow: visible}
.sugoroku .band-scenery svg .scenery-figure {transform: scaleX(calc(1 / var(--fig-sx, 1)));transform-box: fill-box;transform-origin: 50% 100%}
.sugoroku .band-scenery svg .scenery-fish .scenery-figure {transform-origin: 50% 50%}
.sugoroku .band-scenery.zone-sand {background: linear-gradient(180deg,
var(--seam-sky) 0%,
var(--sugoroku-sand-2) 50%,
var(--seam-waterline) 100%)}
.sugoroku .band-scenery.zone-reef {background: linear-gradient(180deg,
var(--seam-waterline) 0%,
var(--seam-reef-mid) 45%,
var(--seam-reef-offshore) 100%)}
.sugoroku .band-scenery.zone-offshore {background: linear-gradient(180deg,
var(--seam-reef-offshore) 0%,
var(--seam-offshore-mid) 50%,
var(--seam-offshore-outer) 100%)}
.sugoroku .band-scenery.zone-outer {background: linear-gradient(180deg,
var(--seam-offshore-outer) 0%,
var(--seam-outer-mid) 50%,
var(--seam-outer-deep) 100%)}
.sugoroku .band-scenery.zone-deep {background: linear-gradient(180deg,
var(--seam-outer-deep) 0%,
var(--seam-deep-mid) 50%,
var(--seam-abyss) 100%)}
.sugoroku .scenery-surf { animation: scenery-surf-move 5s linear infinite}
@keyframes scenery-surf-move { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.sugoroku .scenery-fish { animation: scenery-fish-swim 16s linear infinite; transform-box: fill-box}
.sugoroku .scenery-fish.f2 { animation-duration: 22s; animation-delay: -9s}
.sugoroku .nf-jelly { animation: nf-jelly-breathe 5.5s ease-in-out infinite}
@keyframes nf-jelly-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes scenery-fish-swim {from { transform: translateX(-30px); }
to { transform: translateX(440px); }}
.sugoroku .scenery-bubble { animation: scenery-bubble-rise 6s ease-in infinite; transform-box: fill-box; transform-origin: center}
.sugoroku .scenery-bubble.b2 { animation-duration: 8s; animation-delay: -3s}
.sugoroku .scenery-bubble.b3 { animation-duration: 5s; animation-delay: -1.5s}
.sugoroku .scenery-snow { animation: scenery-snow-fall 12s ease-in-out infinite; transform-box: fill-box}
.sugoroku .scenery-snow.sn2 { animation-duration: 16s; animation-delay: -6s}
.sugoroku .scenery-snow.sn3 { animation-duration: 9s; animation-delay: -3s}
@keyframes scenery-snow-fall {0% { transform: translateY(0); opacity: 0; }
20% { opacity: 0.75; }
80% { opacity: 0.5; }
100% { transform: translateY(70px); opacity: 0; }}
@keyframes scenery-bubble-rise {0% { transform: translateY(0) scale(0.7); opacity: 0; }
15% { opacity: 0.85; }
100% { transform: translateY(-160px) scale(1.1); opacity: 0; }}
.sugoroku .band-road {position: relative;z-index: 2;height: calc(var(--tile-size) * 3.15);pointer-events: none}
.sugoroku .band-road[data-band-zone="sand"] { height: calc(var(--tile-size) * 4.15)}
.sugoroku .band-road[data-band-zone="deep"] { height: calc(var(--tile-size) * 5.3)}
.sugoroku .tile-content-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none}
.sugoroku path.tile {cursor: pointer;pointer-events: auto;stroke: rgba(15, 23, 42, 0.22);stroke-width: 1;stroke-linejoin: round}
.sugoroku path.tile:focus-visible {outline: none;stroke: #fff;stroke-width: 2.5}
.sugoroku path.tile-self-ring {fill: none;pointer-events: none;stroke: #ffffff;stroke-width: 3.5;stroke-linejoin: round;filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.35)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));animation: tile-self-pulse-ring 3.2s ease-in-out infinite}
@keyframes tile-self-pulse-ring {0%, 100% { stroke: #ffffff; filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.35)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)); }
50% { stroke: #dde3ec; filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.3)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); }}
.sugoroku path.tile-passed-overlay { fill: var(--sugoroku-wake); fill-opacity: 0.4; pointer-events: none}
.sugoroku .tile {position: absolute;flex-shrink: 0;min-width: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 1px;color: var(--color-text-primary);pointer-events: none}
.sugoroku .tile .tile-kind-icon {position: absolute;top: calc(var(--tile-size) * -0.16);right: calc(var(--tile-size) * -0.16);width: calc(var(--tile-size) * 0.5);height: calc(var(--tile-size) * 0.5);min-width: 12px;min-height: 12px;border-radius: 50%;background: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);display: flex; align-items: center; justify-content: center;z-index: 2}
.sugoroku .tile .tile-kind-icon .icon { width: 58%; height: 58%}
.sugoroku .tile.kind-current .tile-kind-icon { animation: kind-icon-spin 3.4s linear infinite}
@keyframes kind-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sugoroku .tile.kind-current .tile-kind-icon { color: #fff; filter: drop-shadow(0 0 1px rgba(8, 51, 68, 0.6))}
.sugoroku .tile.tile-event .tile-kind-icon {position: absolute; inset: auto; margin: 0;left: calc(var(--tile-size) * -0.31); top: calc(var(--tile-size) * -0.31);width: calc(var(--tile-size) * 0.62); height: calc(var(--tile-size) * 0.62);min-width: 0; min-height: 0;background: none; box-shadow: none; border-radius: 0; z-index: 1}
.sugoroku .tile.tile-event .tile-kind-icon .icon { width: 96%; height: 96%; stroke-width: 2.4}
.sugoroku .self-piece {position: absolute;left: 0; top: 0;width: calc(var(--tile-size) * 0.95);height: calc(var(--tile-size) * 0.95);min-width: 28px; min-height: 28px;transform: translate(-50%, -50%);z-index: 5;pointer-events: none;transition: left 240ms ease, top 240ms ease}
.sugoroku .self-piece-inner {width: 100%; height: 100%; box-sizing: border-box;display: flex; align-items: center; justify-content: center;border-radius: 50%;border: 2px solid #fff;background: var(--sugoroku-self-ring);font-weight: 900;font-size: max(12px, calc(var(--tile-size) * 0.42));line-height: 1;color: #3b2a06;box-shadow: 0 2px 6px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.15);animation: piece-float 2.2s ease-in-out infinite}
.sugoroku path.current-flow-overlay {fill: rgba(34, 211, 238, 0.75); pointer-events: none; opacity: 0;animation: current-flow 900ms ease-out both}
@keyframes current-flow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.15; } }
.sugoroku .self-piece.drifting .self-piece-inner { animation: piece-drift 0.7s ease-in-out infinite}
@keyframes piece-drift {0%, 100% { transform: rotate(-10deg) translateY(0); }
50% { transform: rotate(10deg) translateY(-3px); }}
.sugoroku .drift-banner {position: absolute; top: 44px; left: 50%; z-index: 6;display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;background: linear-gradient(90deg, #0891b2, #0ea5e9); color: #fff;font-size: 14px; font-weight: 800; white-space: nowrap;box-shadow: 0 4px 14px rgba(8, 145, 178, 0.45);animation: drift-banner-in 360ms ease-out both}
.sugoroku .drift-banner .icon { width: 18px; height: 18px}
.sugoroku .fishing-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.sugoroku .fishing-fx .fx-rod { position: absolute; left: 0; top: 0; transition: opacity 200ms ease-out; }
.sugoroku .fishing-fx .fx-rod.is-sinking { animation: fx-sink 250ms ease-in-out 2; }
.sugoroku .fishing-fx .fx-rod.is-gone { opacity: 0; }
.sugoroku .fishing-fx .fx-line {position: absolute; left: -0.75px; top: calc(var(--tile-size) * -1.65); width: 1.5px; height: calc(var(--tile-size) * 1.5);background: #fff; box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.35); transform-origin: top;animation: fx-line-drop 350ms ease-in both}
.sugoroku .fishing-fx .fx-float {position: absolute; box-sizing: border-box; width: calc(var(--tile-size) * 0.3); height: calc(var(--tile-size) * 0.3);left: calc(var(--tile-size) * -0.15); top: calc(var(--tile-size) * -0.15); border-radius: 50%;background: linear-gradient(180deg, #ef4444 50%, #fff 50%); border: 1px solid #7f1d1d;animation: fx-float-drop 350ms ease-in both}
.sugoroku .fishing-fx .fx-ripple {position: absolute; box-sizing: border-box; width: calc(var(--tile-size) * 1.8); height: calc(var(--tile-size) * 1.8);left: calc(var(--tile-size) * -0.9); top: calc(var(--tile-size) * -0.9); border-radius: 50%;border: 2px solid #16a34a; opacity: 0; animation: fx-ripple 700ms ease-out 350ms both}
.sugoroku .fishing-fx .fx-ripple--2 { animation-delay: 550ms; }
.sugoroku .fishing-fx .fx-fish {position: absolute; width: calc(var(--tile-size) * 0.9); left: calc(var(--tile-size) * -0.45); top: calc(var(--tile-size) * -0.32);animation: fx-fish-jump 600ms linear both}
.sugoroku .fishing-fx .fx-fish svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; }
.sugoroku .fishing-fx .fx-splash {position: absolute; box-sizing: border-box; width: max(4px, calc(var(--tile-size) * 0.12)); height: max(4px, calc(var(--tile-size) * 0.12));left: calc(max(4px, var(--tile-size) * 0.12) / -2); top: calc(max(4px, var(--tile-size) * 0.12) / -2);border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(14, 116, 144, 0.35);animation: fx-splash 500ms ease-out both}
@keyframes fx-line-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-float-drop { from { transform: translateY(calc(var(--tile-size) * -1.5)); } to { transform: translateY(0); } }
@keyframes fx-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes fx-ripple { from { transform: scale(0); opacity: 0.8; } to { transform: scale(1); opacity: 0; } }
@keyframes fx-fish-jump {0% { transform: translateY(0) rotate(35deg); animation-timing-function: ease-out; }
50% { transform: translateY(calc(var(--tile-size) * -1.2)) rotate(0deg); animation-timing-function: ease-in; }
100% { transform: translateY(0) rotate(-35deg); }}
@keyframes fx-splash { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.sugoroku .drift-banner.fishing-banner {flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 24px);border-radius: 18px; text-align: center; white-space: normal; overflow-wrap: anywhere;background: linear-gradient(90deg, #15803d, #22c55e); box-shadow: 0 4px 14px rgba(21, 128, 61, 0.45)}
.sugoroku .fishing-banner .fb-main { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.sugoroku .fishing-banner .fb-main .icon { flex-shrink: 0; }
.sugoroku .fishing-banner .fb-sub { font-size: 12px; font-weight: 700; opacity: 0.95; }
.sugoroku .fishing-banner.is-swap { animation: fishing-banner-swap 260ms ease-out both; }
@keyframes fishing-banner-swap { from { opacity: 0.6; transform: translate(-50%, 0) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes drift-banner-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sugoroku .self-piece-inner .icon { width: 60%; height: 60%; color: #7a4a06}
.sugoroku .self-piece.hopping .self-piece-inner { animation: piece-hop 240ms ease-out}
@keyframes piece-float {0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }}
@keyframes piece-hop {0% { transform: translateY(0) scale(1); }
40% { transform: translateY(-70%) scale(1.1); }
100% { transform: translateY(0) scale(1); }}
.sugoroku path.tile.landing-glow { animation: tile-landing-glow 900ms ease-out}
@keyframes tile-landing-glow {0% { filter: drop-shadow(0 0 10px var(--sugoroku-self-ring-glow)) drop-shadow(0 0 4px var(--sugoroku-self-ring-glow)); }
100% { filter: none; }}
.sugoroku .tile-occ-btn {position: absolute;left: calc(50% + var(--occ-ox, 0px));top: calc(50% + var(--occ-oy, 0px));transform: translate(-50%, -50%);width: calc(var(--tile-size) * 0.5);height: calc(var(--tile-size) * 0.5);min-width: 20px;min-height: 20px;border-radius: 50%;border: 1.5px solid #fff;display: flex;align-items: center;justify-content: center;font-size: max(11px, calc(var(--tile-size) * 0.28));font-weight: 800;color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);padding: 0;z-index: 3;pointer-events: auto}
.sugoroku .tile-occ-btn.tile-occ-count { background: var(--color-text-primary)}
.sugoroku .tile-occ-btn::before {content: ''; position: absolute; left: 50%; top: 50%;width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%}
.sugoroku .tile-occ-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px}
.sugoroku .tile.tile-start {width: calc(var(--tile-size) * 1.5);color: #2b3a55}
.sugoroku .tile.tile-goal {width: calc(var(--tile-size) * 1.3);height: calc(var(--tile-size) * 1.12);color: var(--board-frame-gold)}
.sugoroku .tile.tile-start .tile-kind-icon,
.sugoroku .tile.tile-goal .tile-kind-icon {position: absolute; left: 50%; bottom: 8%; top: auto; right: auto;transform: translateX(-50%);width: 58%; height: 58%; min-width: 0; min-height: 0;background: none; box-shadow: none; border-radius: 0; z-index: 1}
.sugoroku .tile.tile-start .tile-kind-icon .icon,
.sugoroku .tile.tile-goal .tile-kind-icon .icon { width: 92%; height: 92%}
.sugoroku .tile.tile-start .tile-kind-icon { color: #2b4a63}
.sugoroku .tile.tile-goal .tile-kind-icon { display: none}
.sugoroku .goal-chest-deco .goal-glow-ring { animation: goal-glow-ring 3.6s ease-in-out infinite}
.sugoroku .goal-chest-deco .goal-rays { animation: goal-rays 4.4s ease-in-out infinite}
.sugoroku .goal-chest-deco .goal-sparkle {transform-box: fill-box; transform-origin: center;animation: goal-sparkle 2.8s ease-in-out infinite}
.sugoroku .goal-chest-deco .goal-sparkle.is-late { animation-delay: 1.1s}
@keyframes goal-glow-ring { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes goal-rays { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes goal-sparkle { 0%, 100% { opacity: 0.15; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }
.sugoroku .occ-overlay { position: fixed; inset: 0; z-index: 2000}
.sugoroku .occ-overlay[hidden] { display: none}
.sugoroku .occ-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45)}
.sugoroku .occ-panel {position: fixed;left: 10px; right: 10px; bottom: 0;background: #fff;border-radius: 16px 16px 0 0;box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.28);max-height: 68vh;display: flex;flex-direction: column;overflow: hidden}
@media (min-width: 600px) {.sugoroku .occ-panel {left: auto; right: auto; bottom: auto;width: 300px;max-width: calc(100vw - 24px);border-radius: 12px;max-height: 60vh}}
.sugoroku .occ-panel-head {display: flex;align-items: center;justify-content: space-between;gap: 8px;padding: 4px 4px 4px 14px;border-bottom: 1px solid var(--color-border);flex-shrink: 0}
.sugoroku .occ-panel-head h3 { font-size: 13px; font-weight: 800; min-width: 0; overflow-wrap: anywhere}
.sugoroku .occ-close-btn {background: none;border: none;width: 44px; height: 44px;min-width: 44px;display: flex; align-items: center; justify-content: center;color: var(--color-text-muted);flex-shrink: 0}
.sugoroku .occ-panel-body { overflow-y: auto; padding: 6px 8px}
@media (min-width: 600px) {.sugoroku .occ-panel-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 6px}}
.sugoroku .occ-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; font-size: 12.5px; min-width: 0}
.sugoroku .occ-row.self { background: #fff7e0; box-shadow: inset 0 0 0 1.5px var(--sugoroku-self-ring)}
.sugoroku .occ-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600}
@media (prefers-reduced-motion: reduce) {.sugoroku .scenery-surf,
.sugoroku .scenery-fish,
.sugoroku .scenery-bubble,
.sugoroku .scenery-snow,
.sugoroku .nf-jelly,
.sugoroku .tile.kind-current .tile-kind-icon,
.sugoroku path.tile-self-ring,
.sugoroku .dice-face-wrap.is-rolling .dice-face-svg,
.sugoroku .self-piece-inner,
.sugoroku .self-piece.hopping .self-piece-inner,
.sugoroku path.tile.landing-glow,
.sugoroku .toast-card.pop-in,
.sugoroku .goal-chest-deco .goal-glow-ring,
.sugoroku .goal-chest-deco .goal-rays,
.sugoroku .goal-chest-deco .goal-sparkle {animation: none !important}
.sugoroku .goal-chest-deco .goal-rays { opacity: 0.85}
.sugoroku .goal-chest-deco .goal-sparkle { opacity: 0.9}
.sugoroku .self-piece { transition: none !important}}
.sugoroku .sg-log-user {display: inline-flex; align-items: center; gap: 6px; min-width: 0;color: inherit; text-decoration: none}
.sugoroku .sg-log-avatar { flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.sugoroku .sg-roll-form { margin: 0; }
.sugoroku .tile-sign-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sugoroku .tile-sign {position: absolute; display: block;width: calc(var(--tile-size) * 0.9); height: calc(var(--tile-size) * 0.72);transform: translate(-50%, calc(-50% - var(--tile-size) * 0.55))}
.sugoroku .tile-sign .icon {width: 100%; height: 100%; display: block; overflow: visible;filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.45))}
.sugoroku .sign-twinkle { transform-box: fill-box; transform-origin: center; animation: sign-twinkle 1.8s ease-in-out infinite; }
@keyframes sign-twinkle {0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.55); opacity: 0.55; }}
@media (prefers-reduced-motion: reduce) {.sugoroku .sign-twinkle { animation: none !important; }}
.sugoroku .sg-rock-card { border-left: 4px solid #6b7079; }
.sugoroku .sg-rock-card h2 .icon { color: #57534e; }
.sugoroku .sg-rock-hero {display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px;border-radius: var(--radius-md); background: linear-gradient(135deg, #f1f0ee, #e3e0da)}
.sugoroku .sg-rock-art { width: 88px; height: 66px; flex-shrink: 0; display: block; }
.sugoroku .sg-rock-crack { opacity: 0; transition: opacity 0.4s ease; }
.sugoroku .sg-rock-art.crack-1 .c1,
.sugoroku .sg-rock-art.crack-2 .c1, .sugoroku .sg-rock-art.crack-2 .c2,
.sugoroku .sg-rock-art.crack-3 .sg-rock-crack { opacity: 1; }
.sugoroku .sg-rock-hero-body { min-width: 0; }
.sugoroku .sg-rock-hero-body p { margin: 0; }
.sugoroku .sg-rock-remaining-label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.sugoroku .sg-rock-remaining strong {font-size: 30px; line-height: 1.15; font-weight: 800; color: #1f2937; font-variant-numeric: tabular-nums}
.sugoroku .sg-rock-hardness { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sugoroku .sg-rock-meter { margin-bottom: 8px; }
.sugoroku .sg-rock-meter-bar { height: 12px; border-radius: 999px; background: #e7e5e4; overflow: hidden; }
.sugoroku .sg-rock-meter-bar > span {display: block; height: 100%; border-radius: inherit;background: linear-gradient(90deg, #f59e0b, #dc2626)}
.sugoroku .sg-rock-meter-label {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px;font-size: 12px; color: var(--color-text-secondary); margin-top: 4px}
.sugoroku .sg-rock-meter-label strong { font-size: 14px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.sugoroku .sg-rock-lead { font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 12px; overflow-wrap: anywhere; }
.sugoroku .sg-rock-section { margin-bottom: 12px; }
.sugoroku .sg-rock-section-title {display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding: 0;font-size: 12.5px; font-weight: 800; color: var(--color-text-primary)}
.sugoroku .sg-rock-count { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.sugoroku .sg-rock-empty { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.sugoroku .sg-rock-set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sugoroku .sg-rock-set-item {display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px;border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff}
.sugoroku .sg-rock-set-item.is-mine { border-color: var(--color-aqua-500); background: #f0fbfc; }
.sugoroku .sg-rock-set-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sugoroku .sg-rock-set-name { font-size: 13px; font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere; }
.sugoroku .sg-rock-set-user { font-size: 11.5px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.sugoroku .sg-rock-set-score {flex-shrink: 0; font-size: 15px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums}
.sugoroku .sg-rock-thumb {position: relative; flex-shrink: 0; width: 48px; height: 36px; overflow: hidden;border-radius: 6px; background: linear-gradient(160deg, #dbeafe, #bfdbfe); color: rgba(30, 64, 175, 0.28)}
.sugoroku .sg-rock-thumb-silhouette { position: absolute; inset: 6px 4px; width: calc(100% - 8px); height: calc(100% - 12px); }
.sugoroku .sg-rock-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sugoroku .sg-rock-status {font-size: 13px; line-height: 1.6; margin: 0; padding: 10px 12px; overflow-wrap: anywhere;border-radius: var(--radius-sm); background: #f0fbfc; border: 1px solid var(--color-aqua-500)}
.sugoroku .sg-rock-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sugoroku .sg-rock-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.sugoroku .sg-rock-pick-carousel {display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 10px;padding: 18px 10px 14px; margin: 0 -6px; overscroll-behavior-x: contain; scrollbar-width: thin}
.sugoroku .sg-rock-pick-slot {display: block; position: relative; flex: 0 0 120px; min-width: 0; scroll-snap-align: start;cursor: pointer; border-radius: 16px}
.sugoroku .sg-rock-pick-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sugoroku .sg-rock-pick-slot:has(.sg-rock-pick-input:focus-visible) { outline: 2px solid var(--color-text-primary); outline-offset: 6px; }
.sugoroku .sg-rock-pick-card { display: block; position: relative; border-radius: 14px; }
.sugoroku .sg-rock-pick-slot:has(.sg-rock-pick-input:checked) .sg-rock-pick-card { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.sugoroku .sg-rock-pick-slot:hover .sg-rock-pick-card { filter: brightness(1.06); }
.sugoroku .sg-rock-pick-tag {display: none; position: absolute; top: -9px; left: 8px; z-index: 8;font-size: 0.7rem; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: 999px; white-space: nowrap;background: var(--color-primary); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)}
.sugoroku .sg-rock-pick-slot:has(.sg-rock-pick-input:checked) .sg-rock-pick-tag { display: inline-block; }
.sugoroku .sg-rock-submit { align-self: stretch; justify-content: center; cursor: pointer; }
.sugoroku .sg-rock-note { font-size: 11.5px; color: var(--color-text-muted); margin: 8px 0 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {.sugoroku .sg-rock-crack { transition: none; }}
.sugoroku .sg-rock-hunt { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sugoroku .sg-rock-hunt p { margin: 0; }
.sugoroku .sg-rock-hunt-tag { font-size: 18px; font-weight: 800; color: var(--color-primary); margin: 4px 0 8px !important; }
.sugoroku .sg-rock-hunt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sugoroku .sg-rock-hunt-link {display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;border: 1px solid var(--color-border); border-radius: 999px;color: var(--color-text-primary); font-size: 13px; font-weight: 700; text-decoration: none}
.sugoroku .sg-rock-hunt-link:hover { border-color: var(--color-aqua-500); }
.sugoroku .toast-card .sg-rock-detail-lead,
.sugoroku .toast-card .sg-rock-detail-total,
.sugoroku .toast-card .sg-rock-detail-empty { display: block; }
.sugoroku .toast-card .sg-rock-detail-total { margin-top: 4px; color: var(--color-text-primary); }
.sugoroku .toast-card .sg-rock-detail-total strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.sugoroku .toast-card .sg-rock-detail-empty,
.sugoroku .toast-card .sg-rock-detail-loading { display: block; margin-top: 4px; color: var(--color-text-muted); }
.sugoroku .toast-card .sg-rock-cards-frame { display: block; min-width: 0; }
.sugoroku .toast-card .t-body:has(.sg-rock-cards) { flex: 1 1 auto; }
.sugoroku .toast-card .t-text:has(.sg-rock-cards) { display: block; }
.sugoroku .sg-rock-cards { display: block; margin: 10px 0 0 -26px; min-width: 0; }
.sugoroku .sg-rock-cards-head { display: block; padding-left: 26px; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); }
.sugoroku .sg-rock-carousel {display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 6px;padding: 14px 6px 12px; overscroll-behavior-x: contain; scrollbar-width: thin}
.sugoroku .sg-rock-carousel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.sugoroku .sg-rock-slot { display: block; position: relative; flex: 0 0 120px; min-width: 0; scroll-snap-align: start; }
.sugoroku .sg-rock-slot-card { display: block; position: relative; border-radius: 14px; }
.sugoroku .sg-rock-slot.is-self .sg-rock-slot-card { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.sugoroku .sg-rock-self-tag {position: absolute; top: -9px; left: 8px; z-index: 8;font-size: 0.7rem; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: 999px; white-space: nowrap;background: var(--color-primary); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)}
.sugoroku .sg-rock-slot-score {position: absolute; right: 6px; bottom: -10px; z-index: 8;display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 6px; line-height: 1.5;font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #7dd3fc;background: #0b2238; border: 1px solid rgba(125, 211, 252, 0.4); border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35)}
.sugoroku .sg-rock-slot-score svg { width: 12px; height: 12px; flex: none; }
.sugoroku .sg-rock-slot-user { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 6px; }
.sugoroku .sg-rock-slot.is-self .sg-rock-slot-user { margin-top: 14px; }
.sugoroku .sg-rock-slot-ava { flex: none; }
.sugoroku .sg-rock-slot-name {min-width: 0; flex: 1; font-size: 11px; font-weight: 700; color: var(--color-text-primary);white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.sugoroku .toast-card .t-body:has(.sg-item-stage) { flex: 1 1 auto; }
.sugoroku .toast-card .sg-item-detail-lead { display: block; }
.sugoroku .toast-card .sg-item-detail-next { display: block; margin-top: 6px; font-weight: 700; color: var(--color-text-primary); }
.sugoroku .sg-item-stage { display: block; margin-top: 8px; padding: 12px; min-width: 0;background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--radius-md)}
.sugoroku .toast-card .sg-fishing-share { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; font-weight: 700; color: var(--color-text-primary); }
.sugoroku .sg-fishing-share-text { min-width: 0; overflow-wrap: anywhere; }
.sugoroku .sg-item-stage--center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px;background: #eef5fc; border-color: #d6e4f3}
.sugoroku .sg-item-name { display: block; margin-top: 8px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.4;color: #1e293b; overflow-wrap: anywhere}
.sugoroku .sg-item-stage--center .sg-item-name { margin-top: 0; }
.sugoroku .sg-item-art { display: block; flex-shrink: 0; }
.sugoroku .sg-item-art svg { display: block; width: 100%; height: 100%; max-width: none; }
.sugoroku .sg-item-art--bottle { width: 72px; height: 90px; }
.sugoroku .sg-item-art--ticket { width: 132px; height: 88px; }
.sugoroku .sg-item-profile { display: block; border: 1px solid #e2e8f0; border-radius: var(--radius-md); overflow: hidden; }
.sugoroku .sg-item-profile .cover-banner { display: block; height: 80px; position: relative; overflow: hidden; }
.sugoroku .sg-item-profile .cover-wave,
.sugoroku .sg-item-thumb .cover-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 16px; }
.sugoroku .sg-item-profile-body { display: block; background: #fff; padding: 0 12px 12px; }
.sugoroku .sg-item-profile-row { display: flex; align-items: flex-start; gap: 10px; margin-top: -28px; }
.sugoroku .sg-item-profile-row .user-avatar { position: relative; z-index: 1; width: 56px; height: 56px; flex-shrink: 0;border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18)}
.sugoroku .sg-item-profile-name { display: block; padding-top: 32px; min-width: 0; font-size: 14px; font-weight: 700;color: #1e293b; overflow-wrap: anywhere}
.sugoroku .sg-item-thumb { display: block; position: relative; height: 80px; border-radius: var(--radius-sm); overflow: hidden; }