:root {
    --bg: #f4f4f2;
    --surface: #ffffff;
    --surface-alt: #fafaf8;
    --border: #e2e2dd;
    --border-strong: #c7c7c0;
    --text: #1a1a1a;
    --text-soft: #5b5b5b;
    --text-mute: #8a8a85;
    --accent: #1f3a5f;
    --accent-hover: #16294a;
    --gold: #b08d3a;
    --red: #a4262c;
    --green: #2d6a4f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

body { animation: pageIn 0.35s ease-out; }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.game-stage {
    position: relative;
    background: linear-gradient(180deg, #d8e8c8 0%, #b6d399 100%);
    border-radius: 18px;
    padding: 24px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
}
.game-stage.shake { animation: shake 0.5s; }

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
}

/* ============ Layout ============ */
.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px 80px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.topbar .brand .mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.topbar nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.topbar nav a {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.topbar nav a:hover { background: var(--surface-alt); color: var(--text); }
.topbar nav a.active { background: var(--accent); color: #fff; }

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.page-head h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-head .desc {
    color: var(--text-soft);
    font-size: 14px;
}

/* ============ Cards ============ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.card h2 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============ Hub grid ============ */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.hub-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.hub-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(31, 58, 95, 0.04));
    pointer-events: none;
}

.hub-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.hub-card .num {
    font-size: 13px;
    color: var(--text-mute);
    letter-spacing: 0.05em;
    font-weight: 600;
}

.hub-card .title {
    font-size: 22px;
    font-weight: 700;
    margin: 8px 0 8px;
    letter-spacing: -0.02em;
}

.hub-card .sub {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.6;
}

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
    user-select: none;
    line-height: 1.2;
}

.btn:hover { background: var(--surface-alt); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border-color: var(--border);
}

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }

.btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============ Form fields ============ */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
}

.field .hint {
    font-size: 12px;
    color: var(--text-mute);
}

.input, .select, textarea.input {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.input:focus, .select:focus, textarea.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}

.row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.row .field { flex: 1; min-width: 140px; }

/* ============ Game stage ============ */
.stage-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .stage-grid { grid-template-columns: 1fr; }
}

.stage {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    min-height: 420px;
    box-shadow: var(--shadow-sm);
}

.side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.admin-panel.locked {
    background: var(--surface-alt);
    border-style: dashed;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    padding: 18px;
}

.admin-panel .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-panel .panel-head h2 {
    margin: 0;
    font-size: 15px;
}

.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ============ Status pill ============ */
.pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-soft);
    border: 1px solid var(--border);
}

.pill.gold { background: #faf3df; color: var(--gold); border-color: #ecdca7; }
.pill.red { background: #fdecec; color: var(--red); border-color: #f4caca; }
.pill.green { background: #e7f1ec; color: var(--green); border-color: #c5dccd; }

/* ============ Modal ============ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 32, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-mute);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.modal-close:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.modal-card h3 {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.modal-card .big {
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 900;
    margin: 12px 0 20px;
    letter-spacing: -0.035em;
    background: linear-gradient(180deg, var(--text) 0%, #444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    /* 긴 닉네임도 박스 안에 들어오게 */
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.modal-card .muted {
    font-size: 16px;
    font-weight: 600;
}
.modal-card h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.modal-card .actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

/* ============ Toast ============ */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 1100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ============ Lottery (뽑기판) ============ */
.lottery-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lottery-board {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 640px;
}

.lottery-tile {
    aspect-ratio: 1;
    background: linear-gradient(160deg, #fff8e6, #f5e8c4);
    border: 1px solid #d9c388;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: #6b4f1d;
    cursor: pointer;
    position: relative;
    perspective: 700px;
    transform-style: preserve-3d;
    transition: transform 0.15s, box-shadow 0.15s;
}

.lottery-tile:hover:not(.opened) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(180, 140, 40, 0.18);
}

.lottery-tile.opened {
    cursor: default;
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.lottery-tile.opened .prize-rank {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.lottery-tile.opened.win-1 { background: #faf3df; border-color: #d9b96a; color: var(--gold); }
.lottery-tile.opened.win-2 { background: #eaeef6; border-color: #b6c2dc; color: var(--accent); }
.lottery-tile.opened.win-3 { background: #e7f1ec; border-color: #b1cdbe; color: var(--green); }
.lottery-tile.opened.win-last { background: #fdecec; border-color: #e1aeae; color: var(--red); }
.lottery-tile.opened.win-blank { color: var(--text-mute); }

.lottery-tile.flash {
    animation: tileFlash 0.5s ease-out;
}

@keyframes tileFlash {
    0% { transform: scale(0.75); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}

/* ============ Crocodile ============ */
.croc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.croc-svg {
    width: 100%;
    max-width: 540px;
    height: auto;
}

.croc-tooth {
    cursor: pointer;
    transition: transform 0.15s;
    transform-origin: bottom center;
}
.croc-tooth:hover { transform: translateY(-3px) scaleY(1.04); }
.croc-tooth.pressed {
    cursor: default;
    pointer-events: none;
}

.croc-status {
    text-align: center;
    color: var(--text-soft);
    font-size: 14px;
}

.croc-shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-6px, 2px) rotate(-1deg); }
    40% { transform: translate(6px, -2px) rotate(1deg); }
    60% { transform: translate(-4px, 1px) rotate(-1deg); }
    80% { transform: translate(4px, -1px) rotate(1deg); }
}

/* ============ Race ============ */
.race-track-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, #f0f0ec, #e8e8e2);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
}

.race-track {
    position: relative;
    height: 46px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 12px 0 6px;
}

.race-track::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 14px;
    width: 4px;
    background: repeating-linear-gradient(0deg, #1a1a1a 0 6px, #fff 6px 12px);
    opacity: 0.65;
}

.race-runner {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 32px;
    min-width: 80px;
    padding: 0 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    will-change: transform;
    transition: transform 0.05s linear;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.race-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.race-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-soft);
    margin-bottom: 10px;
}

.race-leaderboard {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.race-leaderboard .pill {
    background: var(--surface);
}

.runner-control {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.runner-control:last-child { border-bottom: none; }

.runner-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.runner-control .name {
    font-weight: 600;
    font-size: 13px;
}

.runner-control .speed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.runner-control input[type=range] {
    flex: 1;
    accent-color: var(--accent);
}

.runner-control .speed-val {
    font-variant-numeric: tabular-nums;
    width: 44px;
    text-align: right;
    font-size: 12px;
    color: var(--text-soft);
}

/* ============ Roulette ============ */
.roulette-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.roulette-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
}

.roulette-canvas-wrap canvas {
    width: 100%;
    height: 100%;
}

.roulette-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 44px;
    z-index: 3;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44'><path d='M18 4 L30 4 L30 26 L18 40 L6 26 L6 4 Z' fill='%23a4262c' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/><circle cx='18' cy='14' r='4' fill='%23fde680' stroke='%23000' stroke-width='1.5'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.05s;
}
.roulette-pointer.spinning {
    animation: pointerWiggle 0.1s infinite alternate;
}
@keyframes pointerWiggle {
    from { transform: translateX(-50%) rotate(-2deg); }
    to { transform: translateX(-50%) rotate(2deg); }
}

.roulette-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--accent);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sector-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sector-row {
    display: grid;
    grid-template-columns: 28px 1fr 70px 28px;
    gap: 6px;
    align-items: center;
}

.sector-row .swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    margin: 0 auto;
}

/* ============ Pop-up Pirate (통아저씨) ============ */
.popup-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.popup-svg {
    width: 100%;
    max-width: 460px;
    height: auto;
}

.popup-slot {
    cursor: pointer;
    transition: opacity 0.15s;
}
.popup-slot:hover circle { stroke: var(--accent); stroke-width: 3; }
.popup-slot.used { cursor: default; pointer-events: none; }

.popup-status {
    color: var(--text-soft);
    font-size: 14px;
    text-align: center;
}

.bounce {
    animation: bounce 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}

@keyframes bounce {
    0% { transform: translateY(0); }
    40% { transform: translateY(-90px); }
    60% { transform: translateY(-110px); }
    100% { transform: translateY(0); }
}

/* ============ Misc ============ */
.muted { color: var(--text-mute); font-size: 13px; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.center { text-align: center; }
.spacer-md { height: 16px; }

.kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: var(--text-soft);
}

.tag-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.list-reset { list-style: none; padding: 0; margin: 0; }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 14px; }

/* ============ 게임 의도 안내 박스 (홈 + 5종 공통) ============ */
.game-intro {
    background: #fff8e6;
    border: 1px solid #f0d680;
    border-left: 5px solid #d8a821;
    padding: 16px 20px;
    margin-bottom: 18px;
    border-radius: 8px;
    color: #4a3a1a;
    line-height: 1.65;
}
.game-intro-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: #7a5018;
    letter-spacing: -0.01em;
}
.game-intro-list {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 14px;
}
.game-intro-list li { margin-bottom: 4px; }
.game-intro-list li:last-child { margin-bottom: 0; }
.game-intro-list b { color: #a4262c; font-weight: 800; }
.game-intro-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(216, 168, 33, 0.12);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #5a3d1a;
}
.game-intro-note b { color: #a4262c; font-weight: 800; }
@media (max-width: 640px) {
    .game-intro { padding: 12px 14px; }
    .game-intro-title { font-size: 14px; }
    .game-intro-list { font-size: 13px; }
    .game-intro-note { font-size: 12px; }
}

/* ============ SEO content (bottom of pages) ============ */
.seo-content {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.75;
}
.seo-content h2 {
    margin: 28px 0 10px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.seo-content h2:first-child { margin-top: 0; }
.seo-content h3 {
    margin: 18px 0 6px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.4;
}
.seo-content p { margin: 0 0 10px; }
.seo-content ul {
    margin: 8px 0 16px;
    padding-left: 20px;
}
.seo-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}
.seo-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
}
.seo-links a:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
}

/* ============ Article pages + Mini CMS ============ */
.article-shell { max-width: 980px; }
.article-page { color: var(--text); }
.article-hero {
    padding: 18px 0 10px;
    border-bottom: 1px solid var(--border);
}
.article-kicker {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}
.article-hero h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.15;
    letter-spacing: 0;
}
.article-hero p {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.75;
}
.article-meta {
    margin-top: 14px;
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 700;
}
.article-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.article-cover { margin-top: 26px; }
.article-figure { margin: 28px 0; }
.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.article-figure figcaption {
    margin-top: 8px;
    color: var(--text-mute);
    font-size: 13px;
}
.article-toc {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 22px 0 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.article-toc a {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}
.article-content {
    margin-top: 30px;
    padding-top: 0;
    border-top: none;
    color: var(--text-soft);
    font-size: 16px;
}
.article-content a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-content a.btn-primary {
    color: #fff;
    text-decoration: none;
}
.article-content a.btn:not(.btn-primary) {
    text-decoration: none;
}
.article-content ol {
    margin: 8px 0 18px;
    padding-left: 22px;
}
.article-content li { margin-bottom: 6px; }
.article-image {
    margin: 22px 0;
}
.article-image img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}
.article-callout {
    margin: 20px 0;
    padding: 14px 16px;
    border-left: 5px solid var(--gold);
    border-radius: var(--radius-sm);
    background: #fff8e6;
    color: #4a3a1a;
    font-weight: 700;
}
.article-table-wrap {
    overflow-x: auto;
    margin: 18px 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.article-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
}
.article-table th,
.article-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.article-table th {
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 800;
}
.article-table tr:last-child td { border-bottom: none; }
.menu-copy-box {
    display: grid;
    gap: 10px;
    margin: 18px 0 26px;
}
.menu-copy-box textarea {
    width: 100%;
    min-height: 260px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}
.article-cta-bottom {
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.article-cta-bottom div {
    display: grid;
    gap: 3px;
}
.article-cta-actions {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    flex-wrap: wrap;
}
.article-cta-bottom span {
    color: var(--text-soft);
    font-size: 14px;
}
.article-tags {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.article-tags p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}
.article-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
}
.post-admin-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    align-items: start;
}
.post-admin-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface-alt);
}
.post-list-admin {
    display: grid;
    gap: 8px;
    max-height: 620px;
    overflow-y: auto;
}
.post-admin-item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-align: left;
}
.post-admin-item:hover {
    border-color: var(--border-strong);
    background: #fff;
}
.post-admin-item b,
.post-admin-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-admin-item b { font-size: 13px; }
.post-admin-item span {
    color: var(--text-mute);
    font-size: 12px;
}
.post-content-input {
    min-height: 280px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    line-height: 1.55;
}
.image-upload-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}
.post-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.post-form-section + .post-form-section {
    margin-top: 14px;
}
.post-form-section h3 {
    margin: 0;
    font-size: 15px;
}
.post-form-section summary {
    cursor: pointer;
    font-weight: 800;
}
.post-form-section[open] summary {
    margin-bottom: 12px;
}
.faq-admin-list {
    display: grid;
    gap: 8px;
}
.faq-admin-row {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.2fr) auto;
    gap: 8px;
    align-items: start;
}
.post-list {
    display: grid;
    gap: 16px;
}
.post-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.post-card h2 {
    margin: 4px 0 8px;
    font-size: 21px;
    line-height: 1.35;
}
.post-card h2 a { color: var(--text); }
.post-card p {
    margin: 0 0 14px;
    color: var(--text-soft);
    line-height: 1.65;
}
.post-date {
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 700;
}
@media (max-width: 640px) {
    .article-hero h1 { font-size: 30px; }
    .article-hero p { font-size: 15px; }
    .article-content { font-size: 15px; }
    .article-cta-bottom { align-items: stretch; }
    .article-cta-actions { width: 100%; }
    .article-cta-actions .btn { flex: 1 1 150px; }
    .post-admin-grid { grid-template-columns: 1fr; }
    .post-list-admin { max-height: 260px; }
    .faq-admin-row { grid-template-columns: 1fr; }
    .image-upload-row { grid-template-columns: 1fr; }
}

footer.foot {
    text-align: center;
    margin-top: 60px;
    padding: 20px 18px;
    color: var(--text-mute);
    font-size: 12px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%);
    letter-spacing: 0.02em;
}
footer.foot::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: 0 auto 10px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* ============ Admin tabs ============ */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    overflow-x: auto;
}
.tab-btn {
    background: transparent;
    border: none;
    padding: 11px 18px;
    font-weight: 600;
    color: var(--text-soft);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-pane { display: block; }

/* ============ Lottery — Star-based ============ */
.lottery-board.fancy {
    background: linear-gradient(180deg, #fff7e0 0%, #fdedc4 100%);
    border: 6px solid #c9942a;
    border-radius: 10px;
    padding: 18px;
    box-shadow: inset 0 0 0 2px #e1b95e, 0 6px 18px rgba(180, 130, 40, 0.18);
}

.lottery-tile {
    background: linear-gradient(160deg, #fff8e6 0%, #f3df9e 100%);
    border: 1.5px solid #c9942a;
    border-radius: 6px;
    box-shadow: 0 1px 0 #d9b96a, 0 2px 4px rgba(180, 140, 40, 0.15);
    color: #6b4f1d;
    font-size: 22px;
    font-family: 'Georgia', serif;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s, opacity 0.2s;
}
.lottery-tile:hover:not(.opened) {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 4px 12px rgba(180, 140, 40, 0.28), 0 1px 0 #d9b96a;
}

.lottery-tile.opened {
    background: #fdfdfb;
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: inset 0 0 0 1px #ebebe5;
    font-family: inherit;
}

.lottery-tile .prize-stars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    line-height: 0.9;
    gap: 1px;
    font-size: 20px;
}
.lottery-tile .prize-stars.s5 { font-size: 18px; }
.lottery-tile .prize-stars.s3 { font-size: 22px; }
.lottery-tile .prize-stars.s1 { font-size: 28px; }
.lottery-tile .prize-stars .star {
    color: #d9a531;
    text-shadow: 0 1px 0 #b88718;
    display: inline-block;
}
.lottery-tile.win-1 .prize-stars .star {
    color: #e7b22a;
    text-shadow: 0 0 6px rgba(231, 178, 42, 0.7);
    animation: starShine 1.2s ease-out;
}
.lottery-tile.win-2 .prize-stars .star { color: #c69c25; }
.lottery-tile.win-3 .prize-stars .star { color: #b08d3a; }
.lottery-tile.win-blank .prize-stars { display: none; }
.lottery-tile.win-last { background: #fdecec; border-color: #e1aeae; }
.lottery-tile.win-last .prize-rank { color: var(--red); }

@keyframes starShine {
    0% { transform: scale(0.4) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.lottery-tile.opened .prize-rank {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-mute);
    text-transform: none;
}
.lottery-tile.win-1 .prize-rank { color: #b88718; }
.lottery-tile.win-2 .prize-rank { color: var(--accent); }
.lottery-tile.win-3 .prize-rank { color: var(--green); }

/* ============ Race — Snails ============ */
.race-stage-bg {
    background: linear-gradient(180deg, #c8e3a8 0%, #b6d399 100%);
    border-radius: var(--radius);
    padding: 20px 18px;
    border: 1px solid #a3c084;
}

.snail-track-wrap {
    background: rgba(255,255,255,0.6);
    border-radius: 999px;
    padding: 6px 12px 6px 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(120, 90, 50, 0.15);
}
.snail-track-wrap .lane-no {
    flex: 0 0 28px;
    text-align: center;
    font-weight: 700;
    color: #6e8a4f;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.snail-track-wrap .lane-name {
    flex: 0 0 auto;
    min-width: 80px;
    font-weight: 600;
    font-size: 13px;
    color: #3b4a26;
}
.snail-track {
    position: relative;
    flex: 1;
    height: 48px;
    background: linear-gradient(180deg, #f0e8c8, #e3d8a8);
    border-radius: 999px;
    border: 1px solid #c3b070;
    overflow: hidden;
    background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(120, 90, 30, 0.08) 22px 23px);
}
.snail-track::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 6px; width: 6px;
    background: repeating-linear-gradient(0deg, #1a1a1a 0 6px, #fff 6px 12px);
    border-radius: 2px;
}
.snail {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 64px;
    height: 38px;
    will-change: transform;
}
.snail svg { width: 100%; height: 100%; display: block; }
.snail-shell-track .body { animation: snailBob 0.6s ease-in-out infinite; }
@keyframes snailBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

.snail-pos {
    flex: 0 0 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #3b4a26;
    font-size: 12px;
    font-weight: 600;
}

.race-sliders {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.race-sliders .sliders-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.race-sliders .sliders-head h3 { margin: 0; font-size: 13px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.race-sliders .sliders-head .muted { font-size: 12px; }

.slider-row {
    display: grid;
    grid-template-columns: 16px minmax(80px, 110px) 1fr 56px;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.slider-row:last-child { border-bottom: none; }
.slider-row .swatch { width: 14px; height: 14px; border-radius: 4px; }
.slider-row .name { font-weight: 600; font-size: 13px; }
.slider-row input[type=range] { width: 100%; accent-color: var(--accent); }
.slider-row .v { font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; color: var(--text-soft); }

.race-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.race-presets .btn { font-size: 12px; }

/* ============ Crocodile — improved ============ */
.croc-svg .upper-jaw,
.croc-svg .upper-teeth,
.croc-svg .lower-teeth,
.croc-svg .lower-jaw {
    transition: transform 0.18s;
}
.tooth-press {
    transform-origin: center top;
    transition: transform 0.2s ease-in, opacity 0.2s;
}
.tooth-press.gone {
    transform: translateY(20px) scaleY(0.1);
    opacity: 0;
}
.tooth-down {
    transform-origin: center bottom;
}
.tooth-down.gone {
    transform: translateY(-20px) scaleY(0.1);
    opacity: 0;
}
.bite-flash {
    animation: biteFlash 0.45s ease-out;
}
@keyframes biteFlash {
    0% { background: rgba(180, 30, 30, 0); }
    30% { background: rgba(180, 30, 30, 0.18); }
    100% { background: rgba(180, 30, 30, 0); }
}

/* ============ Popup — side view barrel ============ */
.barrel-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.slot-hit { cursor: pointer; }
.slot-hit:hover circle.hole { stroke: var(--accent); stroke-width: 3; }
.slot-hit.used { cursor: default; pointer-events: none; }

/* 슬롯이 마우스 칼에 스냅되었을 때 글로우 강조 */
.slot-hit-area:hover ~ * { transition: filter 0.15s; }
.slot-glow {
    animation: slotPulse 0.5s ease-in-out infinite alternate;
}
@keyframes slotPulse {
    from { filter: brightness(1); }
    to { filter: brightness(1.3) drop-shadow(0 0 6px #ffe680); }
}

/* 마우스 따라가는 cursor 칼에 부드러운 빛 */
#cursorSword {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(255, 230, 128, 0.4));
}

/* ============ Game page top action bar ============ */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============ Misc additions ============ */
body.admin-page { background: #f0eef0; }

/* ============================================================
 * 추억의 뽑기 (ppg = paper pick game) 정통 디자인
 * ============================================================ */
.ppg-board {
    background: #fde680;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 8%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 6%),
        radial-gradient(circle at 50% 50%, rgba(180, 130, 40, 0.05) 0%, transparent 20%);
    border: 6px solid #1a1a1a;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 0 0 0 2px #fde680, inset 0 0 60px rgba(180, 130, 40, 0.08);
    max-width: min(var(--board-max-w, 760px), calc(100vw - 16px));
    width: 100%;
    margin: 0 auto;
    position: relative;
}
/* 인원 많을 땐 보드가 컨테이너보다 넓어지도록 (가운데 정렬 유지) */
#boardWrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* 뽑기판 페이지는 shell을 넓게 — 200명도 가로로 시원하게 펼침 */
.lottery-page .shell {
    max-width: 1600px;
}
.ppg-board::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0,0,0,0.06) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.06) 100%);
    border-radius: 4px;
}
.ppg-board::after {
    /* 좌상단 종이 접힘 */
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #fff5b8 50%, #d8b830 50%);
    border-right: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: rotate(-90deg);
    transform-origin: top left;
    pointer-events: none;
    opacity: 0.6;
}

.ppg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 6px 4px;
}

.ppg-shop {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ppg-shop svg {
    width: 90px;
    height: 70px;
    flex: 0 0 auto;
}
.ppg-title {
    font-family: 'BM HANNA', 'Black Han Sans', 'Pretendard', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #5a1212;
    background: #fde680;
    padding: 6px 14px;
    border: 3px solid #5a1212;
    border-radius: 8px;
    transform: rotate(-3deg);
    text-shadow: 1px 1px 0 #fff;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ppg-rank-table {
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 96px;
    font-size: 12px;
    line-height: 1.3;
}
.ppg-rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #c0c0c0;
    padding: 3px 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}
.ppg-rank-row:last-child { border-bottom: none; }
.ppg-rank-row span { color: #5a1212; }
.ppg-rank-row b { color: #1a1a1a; font-weight: 900; }
.ppg-rank-row:nth-child(1) span { color: #a4262c; font-weight: 900; }
.ppg-rank-row:nth-child(2) span { color: #1a4f9e; }
.ppg-rank-row:nth-child(3) span { color: #2d6a4f; }
.ppg-rank-row:nth-child(4) span { color: #c47a1a; }
.ppg-rank-row:nth-child(5) span { color: #888; }

.ppg-grid {
    display: grid;
    gap: 2px;
    background: #1a1a1a;
    padding: 2px;
    border-radius: 2px;
}

.ppg-tile {
    aspect-ratio: 1;
    background: #fde680;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #1a1a1a;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background 0.12s, transform 0.12s;
}
.ppg-tile:hover:not(.opened) {
    background: #ffe69c;
    transform: scale(0.96);
}

.ppg-star {
    width: 16px;
    height: 16px;
    line-height: 0;
    margin-bottom: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s;
}
.ppg-star svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 0 #143573);
}
.ppg-tile:hover:not(.opened) .ppg-star {
    transform: rotate(15deg) scale(1.15);
}
.ppg-tile-num {
    font-size: 7px;
    color: #5a1212;
    line-height: 1;
    font-weight: 600;
}
.ppg-tile.opened {
    background: #fff;
    cursor: default;
    border: 1px solid #c0c0c0;
}
.ppg-tile.opened .ppg-tile-result {
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
}
.ppg-tile.opened .ppg-tile-num { font-size: 6px; opacity: 0.6; margin-top: 1px; }

.ppg-tile.opened.win-1 { background: #ffd6d6; }
.ppg-tile.opened.win-1 .ppg-tile-result { color: #a4262c; font-size: 13px; }
.ppg-tile.opened.win-2 { background: #d6e2ff; }
.ppg-tile.opened.win-2 .ppg-tile-result { color: #1f3a5f; }
.ppg-tile.opened.win-3 { background: #d6efd6; }
.ppg-tile.opened.win-3 .ppg-tile-result { color: #2d6a4f; }
.ppg-tile.opened.win-last { background: #fdebd6; }
.ppg-tile.opened.win-last .ppg-tile-result { color: #c47a1a; }
.ppg-tile.opened.win-blank { background: #ececec; }
.ppg-tile.opened.win-blank .ppg-tile-result { color: #888; font-size: 9px; }

@media (min-width: 700px) {
    .ppg-tile { font-size: 11px; }
    .ppg-star { font-size: 22px; }
    .ppg-tile-num { font-size: 8px; }
    .ppg-tile.opened .ppg-tile-result { font-size: 13px; }
    .ppg-tile.opened.win-1 .ppg-tile-result { font-size: 16px; }
}

/* ============================================================
 * 통아저씨 (옆모습 나무통)
 * ============================================================ */
.barrel-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.barrel-svg { width: 100%; max-width: 440px; }
.barrel-status { color: var(--text-soft); font-size: 14px; }

.dagger-color-1 { fill: #d8434e; }
.dagger-color-2 { fill: #2d8a55; }
.dagger-color-3 { fill: #3a87c4; }
.dagger-color-4 { fill: #f0c244; }
.dagger-color-5 { fill: #b25fa8; }
.dagger-color-6 { fill: #e08233; }

/* ============================================================
 * Race (snail) 추가
 * ============================================================ */
.race-stage {
    background: linear-gradient(180deg, #87cefa 0%, #b3e0ff 35%);
    border-radius: 14px;
    padding: 16px;
    border: 2px solid #5a8da8;
    box-shadow: 0 8px 22px rgba(60, 100, 130, 0.2);
    overflow: hidden;
    position: relative;
}

.race-sky-deco {
    position: relative;
    height: 60px;
    background: linear-gradient(180deg, #87cefa 0%, #c4e8ff 100%);
    border-bottom: 3px solid #5fa364;
    overflow: hidden;
}
.race-sky-deco::before {
    /* 산 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 40px;
    background:
        radial-gradient(ellipse 80px 30px at 60px 100%, #6a8a73 50%, transparent 51%),
        radial-gradient(ellipse 100px 35px at 200px 100%, #7a9b82 55%, transparent 56%),
        radial-gradient(ellipse 90px 28px at 360px 100%, #6a8a73 50%, transparent 51%),
        radial-gradient(ellipse 110px 32px at 540px 100%, #7a9b82 55%, transparent 56%);
    background-repeat: no-repeat;
}
.race-sky-deco .cloud {
    position: absolute;
    width: 50px;
    height: 16px;
    background: #fff;
    border-radius: 50px;
    opacity: 0.9;
}
.race-sky-deco .cloud::before, .race-sky-deco .cloud::after {
    content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.race-sky-deco .cloud::before { width: 26px; height: 26px; top: -10px; left: 8px; }
.race-sky-deco .cloud::after { width: 22px; height: 22px; top: -8px; right: 8px; }

.race-tracks {
    background: #4f8a4a;
    padding: 10px 8px;
    position: relative;
}

.race-tracks::after {
    /* 결승선 체크무늬 */
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 14px;
    width: 14px;
    background-image:
        linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: -2px 0 0 #1a1a1a;
}

/* 결승선 깃발 (체크무늬 위쪽에) */
.race-tracks::before {
    content: '';
    position: absolute;
    top: -22px;
    right: 6px;
    width: 4px;
    height: 36px;
    background: #1a1a1a;
    z-index: 3;
    box-shadow: 18px 6px 0 -1px #fff, 18px 8px 0 -1px #1a1a1a;
}
.race-flag {
    position: absolute;
    top: -20px;
    right: 12px;
    width: 28px;
    height: 22px;
    z-index: 4;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
    background-size: 11px 11px;
    background-position: 0 0, 0 5.5px, 5.5px -5.5px, -5.5px 0px;
    background-color: #fff;
    border: 1.5px solid #1a1a1a;
    animation: flagWave 1.2s ease-in-out infinite alternate;
    transform-origin: left center;
}
@keyframes flagWave {
    0% { transform: skewY(-4deg); }
    100% { transform: skewY(4deg); }
}

/* 룰렛 결과 박스 강화 */
#rouletteResult {
    display: inline-block;
    font-size: 18px;
    font-weight: 800;
    padding: 0;
}
#rouletteResult:not(:empty) {
    padding: 8px 18px;
    background: #1a1a1a;
    color: #fde680;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes resultPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.snail-lane {
    display: grid;
    grid-template-columns: var(--lane-label-w, 100px) 1fr;
    align-items: center;
    gap: 4px;
    height: var(--lane-h, 56px);
    margin-bottom: 2px;
}
.snail-lane:last-child { margin-bottom: 0; }
.race-tracks.compact .snail-lane { margin-bottom: 1px; gap: 2px; }

/* 레이싱 트랙 영역 — 달팽이 이동 공간 */
.lane-track {
    position: relative;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.1);
    background:
        radial-gradient(ellipse 4px 1.5px at 15% 40%, rgba(74, 110, 50, 0.5) 60%, transparent 61%),
        radial-gradient(ellipse 5px 2px at 30% 70%, rgba(58, 88, 38, 0.4) 60%, transparent 61%),
        radial-gradient(ellipse 4px 1.5px at 50% 25%, rgba(74, 110, 50, 0.5) 60%, transparent 61%),
        radial-gradient(ellipse 5px 2px at 70% 65%, rgba(58, 88, 38, 0.4) 60%, transparent 61%),
        radial-gradient(ellipse 4px 1.5px at 88% 45%, rgba(74, 110, 50, 0.5) 60%, transparent 61%),
        linear-gradient(180deg, #c19560 0%, #b08850 60%, #a07840 100%);
    overflow: visible;
}

/* 라벨 컬럼 — 트랙 옆 별도 공간, 절대 트랙 침범 X */
.snail-lane .lane-label {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    background: rgba(255,255,255,0.94);
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
    font-size: var(--lane-label-size, 12px);
    font-weight: 700;
    color: #3b4a26;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.race-tracks.compact .snail-lane .lane-label {
    padding: 0 4px;
    border: none;
    background: rgba(255,255,255,0.95);
    border-radius: 3px;
}

.snail {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--snail-w, 70px);
    height: var(--snail-h, 60px);
    will-change: transform;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
    /* transform은 JS가 setProperty (translate X,Y) */
}
/* inner bob — animation은 여기에만, outer transform과 충돌 X */
.snail-bob {
    width: 100%;
    height: 100%;
    animation: snailBob 0.55s ease-in-out infinite;
}
.snail svg { width: 100%; height: 100%; display: block; overflow: visible; }

@keyframes snailBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.race-podium {
    background: linear-gradient(180deg, #5a4527 0%, #4a371d 100%);
    border-radius: 8px 8px 4px 4px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 2px solid #2a1c0e;
    box-shadow: 0 4px 0 #2a1c0e, 0 8px 12px rgba(0,0,0,0.2);
}
.race-podium-title {
    text-align: center;
    color: #fde680;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    text-shadow: 1px 1px 0 #2a1c0e;
}
.race-podium-slots {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.race-podium-slot {
    background: #f5e8c4;
    border: 2px solid #5a3d1a;
    border-radius: 4px;
    padding: 6px 10px;
    min-width: 110px;
    text-align: center;
}
.race-podium-rank {
    display: inline-block;
    padding: 2px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 3px;
    margin-bottom: 4px;
}
.race-podium-slot.r1 .race-podium-rank { background: #d8434e; }
.race-podium-slot.r2 .race-podium-rank { background: #3a87c4; }
.race-podium-slot.r3 .race-podium-rank { background: #2d8a55; }
.race-podium-slot .name {
    font-weight: 700;
    font-size: 14px;
    color: #5a3d1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.race-podium-slot .time { font-size: 11px; color: #8a7c5a; font-variant-numeric: tabular-nums; }

.race-control-row {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.race-sliders-card {
    margin-top: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
}
.race-sliders-card h3 {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.race-sliders-card .hint {
    font-size: 12px;
    color: var(--text-mute);
    margin-bottom: 10px;
}

.race-slider-row {
    display: grid;
    grid-template-columns: 14px 110px 1fr 50px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.race-slider-row:last-child { border-bottom: none; }
.race-slider-row .swatch { width: 14px; height: 14px; border-radius: 4px; }
.race-slider-row .name { font-size: 13px; font-weight: 600; }
.race-slider-row input[type=range] { width: 100%; accent-color: var(--accent); }
.race-slider-row .v { font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; color: var(--text-soft); }

.race-presets-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.race-presets-row .btn { font-size: 12px; padding: 5px 10px; }

/* ============================================================
 * Crocodile — uses real toy image as background
 * ============================================================ */
.image-stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    user-select: none;
}
.image-stage img.bg-image {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}
.hot-spot {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    transition: transform 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.85);
    font-weight: 800;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    background: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(0,0,0,0.4);
    backdrop-filter: blur(1px);
    user-select: none;
}
.hot-spot:hover { transform: translate(-50%, -50%) scale(1.15); background: rgba(255, 255, 255, 0.85); }
.hot-spot.used {
    cursor: default;
    pointer-events: none;
    background: rgba(80,80,80,0.7);
    color: #fff;
    text-shadow: none;
    border-color: rgba(0,0,0,0.6);
    transform: translate(-50%, -50%) scale(0.85);
}
.hot-spot.tooth { width: 32px; height: 32px; }
.hot-spot.slot { width: 36px; height: 36px; font-size: 11px; }
.hot-spot .nick {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.hot-spot:hover .nick { opacity: 1; }

.bite-overlay, .pop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(180, 30, 30, 0);
    transition: background 0.2s;
    z-index: 3;
}
.bite-overlay.show {
    background: rgba(180, 30, 30, 0.35);
    animation: biteBlink 0.5s 2;
}
@keyframes biteBlink {
    0%, 100% { background: rgba(180, 30, 30, 0); }
    50% { background: rgba(180, 30, 30, 0.4); }
}

.image-stage.shake { animation: shake 0.55s; }

@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    15% { transform: translate(-8px, 3px) rotate(-1.5deg); }
    30% { transform: translate(8px, -3px) rotate(1.5deg); }
    45% { transform: translate(-6px, 2px) rotate(-1deg); }
    60% { transform: translate(6px, -2px) rotate(1deg); }
    75% { transform: translate(-3px, 1px) rotate(-0.5deg); }
}

.global-speed-row {
    display: grid;
    grid-template-columns: 36px 1fr 60px;
    gap: 14px;
    align-items: center;
    padding: 6px 0;
}
.global-speed-row input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.speed-display {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 700;
    color: var(--accent);
    font-size: 16px;
}

.race-podium-slot.r4 .race-podium-rank { background: #6b6b6b; }

/* ============ Champion modal ============ */
.modal-card.champion-card {
    background: linear-gradient(180deg, #fff8e6 0%, #fde680 100%);
    border: 4px solid #d8a821;
    box-shadow: 0 0 0 6px rgba(216, 168, 33, 0.15), 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: championPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.champion-crown {
    margin-bottom: 8px;
    animation: crownFloat 2s ease-in-out infinite;
}
.modal-card.champion-card h3 {
    color: #a4262c;
    font-weight: 800;
    font-size: 28px;
    margin: 0 0 10px;
}
.modal-card.champion-card .big {
    color: #5a1212;
    font-size: clamp(32px, 7vw, 72px);
    font-weight: 900;
    text-shadow: 0 2px 0 rgba(216, 168, 33, 0.5);
    margin: 10px 0 18px;
    line-height: 1.1;
    background: linear-gradient(180deg, #a4262c 0%, #5a1212 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.modal-card.champion-card .muted { font-size: 18px; font-weight: 700; }
.modal-card.champion-card .muted { color: #8a6818; }

@keyframes championPop {
    0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ============ Sound toggle ============ */
.sound-toggle {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s;
}
.sound-toggle:hover { background: var(--surface-alt); }

@media (max-width: 640px) {
    .sound-toggle { bottom: 10px; right: 10px; padding: 6px 12px; font-size: 11px; }
    .shell { padding: 16px 12px 60px; }
    .topbar { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .topbar nav { gap: 2px; }
    .topbar nav a { padding: 6px 10px; font-size: 13px; }
    .page-head h1, .action-bar h1 { font-size: 20px !important; }
    .btn-lg { padding: 11px 20px; font-size: 14px; }
    .race-podium-title { font-size: 16px; }
    .race-podium-slot { min-width: 90px; padding: 5px 8px; }
    .race-slider-row { grid-template-columns: 12px 80px 1fr 44px; gap: 8px; }
    .ppg-title { font-size: 22px; padding: 4px 10px; }
    .ppg-shop svg { width: 70px; height: 56px; }
    .modal-card { padding: 22px 20px; }
    .modal-card .big { font-size: 30px; }
    .race-countdown { font-size: 100px; }
}

/* ============ Champion highlight in race ============ */
.race-podium-slot.r1 {
    animation: r1Glow 1.6s ease-in-out infinite;
}
@keyframes r1Glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); transform: translateY(0); }
    50% { box-shadow: 0 0 24px 6px rgba(255, 215, 0, 0.5); transform: translateY(-3px); }
}

/* ============ Lottery sparkle ============ */
@keyframes sparkleBurst {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}
.lottery-sparkle {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
    animation: sparkleBurst 0.8s ease-out forwards;
}

/* 1등 발견 시 화면 가운데 큰 별 burst */
.big-star-burst {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 9500;
    animation: bigStarBurst 1.2s ease-out forwards;
    filter: drop-shadow(0 0 30px #fde680) drop-shadow(0 0 60px #e8434a);
}
@keyframes bigStarBurst {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.4) rotate(-20deg); opacity: 1; }
    60% { transform: translate(-50%, -50%) scale(1.1) rotate(10deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5) rotate(40deg); opacity: 0; }
}

/* 버튼 disabled 시각 */
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }

/* ============ Mini shake ============ */
.shake-mini { animation: shakeMini 0.3s; }
@keyframes shakeMini {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 1px); }
}

/* ============ Smooth modal ============ */
.modal-backdrop {
    animation: fadeIn 0.2s ease-out;
}
.modal-backdrop.closing {
    animation: fadeOut2 0.2s ease-in forwards;
}
.modal-backdrop.closing .modal-card {
    animation: modalZoomOut 0.2s ease-in forwards;
}
@keyframes modalZoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.85); opacity: 0; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut2 {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============ Pirate breathing idle ============ */
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ============ Race — 카운트다운 오버레이 ============ */
.race-countdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 140px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 12px 30px rgba(0,0,0,0.5);
    -webkit-text-stroke: 4px #1a1a1a;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    letter-spacing: -0.05em;
}
.race-countdown.show {
    animation: countdownPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes countdownPop {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: drop-shadow(0 0 0 #fde680); }
    30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; filter: drop-shadow(0 0 30px #fde680) drop-shadow(0 0 50px #e8434a); }
    60% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: drop-shadow(0 0 20px #fde680); }
    100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; filter: drop-shadow(0 0 0 #fde680); }
}

/* 진행도 표시 (각 lane 우측) */
.lane-progress {
    position: absolute;
    right: 24px;
    top: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #3b4a26;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 7px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 시작선 표시 (race 트랙 좌측) */
.race-tracks::before {
    /* 결승선 깃대 */
}
.race-startline {
    position: absolute;
    top: 0; bottom: 0;
    /* 라벨 컬럼 다음 트랙 시작점에 정렬 */
    left: calc(var(--lane-label-w, 100px) + 16px);
    width: 3px;
    background: repeating-linear-gradient(0deg, #fff 0 6px, #1a1a1a 6px 12px);
    border-radius: 2px;
    z-index: 1;
    opacity: 0.7;
    pointer-events: none;
}

/* 룰렛 spin 시 progress dot */
.roulette-canvas-wrap.spinning::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #a4262c, transparent);
    border-radius: 2px;
    animation: spinBar 0.6s linear infinite;
}
@keyframes spinBar {
    0% { transform: translateX(-80%); opacity: 0.3; }
    50% { transform: translateX(-50%); opacity: 1; }
    100% { transform: translateX(-20%); opacity: 0.3; }
}

/* 뽑기판 진행률 bar (남은 칸) */
.ppg-progress {
    margin-top: 8px;
    height: 6px;
    background: #fde680;
    border: 1.5px solid #5a1212;
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.ppg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2d6a4f, #5fa845);
    transition: width 0.3s;
    border-radius: 99px;
}

/* 통아저씨 통 위 림 광택 */
#barrel .top-rim-shine {
    pointer-events: none;
}

/* ============ 주사위 게임 ============ */
.dice-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 600px;
    margin: 0 auto 24px;
}
.die {
    aspect-ratio: 1;
    background: transparent;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18));
    transition: transform 0.18s;
}
.die.die-rolling {
    animation: dieShake 0.06s infinite alternate;
}
.die.die-settled {
    animation: dieSettle 0.4s ease-out;
}
@keyframes dieShake {
    from { transform: rotate(-6deg) scale(1.05); }
    to { transform: rotate(6deg) scale(1.05); }
}
@keyframes dieSettle {
    0% { transform: scale(1.2); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.dice-sum {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    background: rgba(255,255,255,0.7);
    padding: 14px 18px;
    border-radius: 14px;
    border: 2px solid #1a1a1a;
    max-width: 460px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dice-sum b { font-variant-numeric: tabular-nums; }

/* 굴리기 전/다음 차례 인디케이터 */
.die.die-next {
    animation: dieNextPulse 1.2s ease-in-out infinite;
}
@keyframes dieNextPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 6px 16px rgba(168, 100, 200, 0.6)) drop-shadow(0 0 16px rgba(168, 100, 200, 0.4)); }
}

/* 상단 상태 박스 (굴린 수 + 현재 합계) */
.dice-status {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.dice-status-row {
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 14px;
    padding: 10px 22px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    min-width: 140px;
}
.dice-status-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.dice-status-val {
    font-size: 22px;
    font-weight: 900;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

/* 최종 합계 박스 */
.dice-final {
    margin-top: 22px;
    background: linear-gradient(180deg, #fff8e6 0%, #fde680 100%);
    border: 4px solid #a4262c;
    border-radius: 18px;
    padding: 18px 26px;
    text-align: center;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 6px 18px rgba(164, 38, 44, 0.25);
    animation: finalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dice-final-label {
    font-size: 12px;
    font-weight: 800;
    color: #a4262c;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.dice-final-sum {
    font-size: 56px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    margin: 4px 0;
    font-variant-numeric: tabular-nums;
}
.dice-final-win {
    font-size: 18px;
    font-weight: 700;
    color: #5a1212;
}
.dice-final-win b {
    font-size: 22px;
    font-weight: 900;
    color: #a4262c;
}
@keyframes finalPop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 640px) {
    .dice-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .dice-status-row { min-width: 110px; padding: 8px 14px; }
    .dice-final-sum { font-size: 44px; }
}

/* 닉네임 매핑 리스트 (주사위 게임) */
.nicklist-box {
    margin-top: 22px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.nicklist-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.nicklist-warn {
    background: #fff4e0;
    border: 2px solid #e89a3a;
    color: #6b3e10;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 14px;
}
.nicklist-warn b { color: #a4262c; }
.nicklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}
.nicklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    font-size: 13px;
    min-width: 0;  /* allow children to shrink */
}
.nicklist-num {
    font-weight: 900;
    color: #a4262c;
    min-width: 26px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.nicklist-nick {
    font-weight: 600;
    color: var(--text);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 룰렛 컨트롤 — 돌리기 + 속도 */
.roulette-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.roulette-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.roulette-speed label { font-weight: 600; color: var(--text-soft); }
.roulette-speed select { padding: 8px 10px; font-size: 14px; }

/* ============ Quick Setup ============ */
.quick-setup-flat {
    background: linear-gradient(180deg, #fff8e6 0%, #fde680 100%);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(31, 58, 95, 0.1);
}
.qs-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.qs-line .qs-label {
    font-weight: 800;
    font-size: 14px;
    color: var(--accent);
    flex: 0 0 auto;
}
.qs-count-input {
    width: 110px;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 10px;
    text-align: center;
}
.qs-summary {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-soft);
}
.qs-nick-line {
    display: block;
}
.qs-label-small {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
    margin-bottom: 4px;
}
.qs-text {
    width: 100%;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 13px;
    padding: 8px 10px;
    min-height: 80px;
}
@media (max-width: 540px) {
    .qs-summary { margin-left: 0; width: 100%; }
}

/* ============ Quick Setup (기존 details panel — 사용 안함, 호환용) ============ */
.quick-setup {
    background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(31, 58, 95, 0.08);
}
.quick-setup > summary {
    padding: 13px 18px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    background: var(--accent);
    color: #fff;
    list-style: none;
}
.quick-setup > summary::-webkit-details-marker { display: none; }
.quick-setup > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s;
    color: #fde680;
}
.quick-setup[open] > summary::before { transform: rotate(90deg); }
.quick-setup > summary:hover { background: var(--accent-hover); }
.quick-body { padding: 16px 18px; }
.qs-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    margin-bottom: 14px;
}
@media (max-width: 720px) { .qs-grid { grid-template-columns: 1fr; } }
.qs-row label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.qs-row .input { width: 100%; font-size: 15px; padding: 10px 12px; }
.qs-row .qs-text { font-family: ui-monospace, monospace; font-size: 13px; min-height: 100px; }
.qs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-summary { font-size: 12px; color: var(--text-mute); }

/* ============ 뽑기판 (자동 조정 — 인원에 따라 글씨/칸 크기) ============ */
.ppg-tile { font-size: var(--ppg-num, 32px) !important; padding: 4px !important; }
.ppg-star { display: none !important; }  /* 별표 숨김 — 숫자에 집중 */
.ppg-tile-num {
    font-size: var(--ppg-num, 32px) !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    line-height: 1 !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.4);
}
.ppg-tile-nick {
    font-size: var(--ppg-nick, 14px) !important;
    font-weight: 800 !important;
    color: #5a1212 !important;
    margin-top: 4px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 2px;
}
.ppg-tile.opened .ppg-tile-result {
    font-size: var(--ppg-result, 26px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.ppg-tile.opened.win-1 .ppg-tile-result { font-size: var(--ppg-result-big, 36px) !important; }
.ppg-tile.opened.win-2 .ppg-tile-result { font-size: var(--ppg-result, 26px) !important; }
.ppg-tile.opened.win-3 .ppg-tile-result { font-size: var(--ppg-result, 26px) !important; }
.ppg-tile.opened.win-blank .ppg-tile-result { font-size: calc(var(--ppg-result, 26px) * 0.85) !important; }
.ppg-tile.opened.win-last .ppg-tile-result { font-size: var(--ppg-result, 26px) !important; }
.ppg-tile.opened .ppg-tile-num {
    font-size: calc(var(--ppg-nick, 14px) * 0.85) !important;
    opacity: 0.7 !important;
    margin-top: 3px !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

/* Participants tab */
.participants-textarea {
    width: 100%;
    min-height: 220px;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    resize: vertical;
}
.parsed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.parsed-list .nick-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    max-width: 180px;
}
.parsed-list .nick-chip > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.parsed-list .idx {
    color: var(--text-mute);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}