/* Roulette — carnival wheel game accent overrides */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --shadow-glow: 0 0 25px rgba(245, 158, 11, 0.45);
    --shadow-glow-lg: 0 0 40px rgba(245, 158, 11, 0.55);
    --accent-blue: #f59e0b;
}

.emoji-icon { font-size: 20px; }

.btn-add-item {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px; padding: 9px; border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border); background: transparent;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition-fast); width: 100%;
}
.btn-add-item:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(245, 158, 11, 0.08); }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.empty-hint { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 20px 0; }
.history-row {
    display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
    background: rgba(15, 23, 42, 0.55); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
    font-size: 0.82rem; animation: rowIn 0.3s ease;
}
.history-row .h-idx { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; }
.history-row .h-name { font-weight: 700; color: var(--text-primary); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Wheel stage ---------- */
.wheel-stage { flex-direction: column; gap: 0; }
.wheel-stage { background: radial-gradient(circle at 50% 50%, rgba(245,158,11,.14), transparent 37%), repeating-radial-gradient(circle at 50% 50%, transparent 0 20px, rgba(255,255,255,.025) 21px 22px); }

.marquee-ring {
    position: absolute;
    width: min(72vh, 92%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 0 92%, #74421e 92% 96%, #f4cb6d 96% 98%, #3b2217 98% 100%);
    filter: drop-shadow(0 18px 20px rgba(45,23,9,.26));
}
.marquee-ring::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background-image: repeating-conic-gradient(var(--accent-amber) 0deg 4deg, transparent 4deg 18deg);
    mask: radial-gradient(circle, transparent 0 97%, black 97.4% 98.6%, transparent 99%);
    -webkit-mask: radial-gradient(circle, transparent 0 97%, black 97.4% 98.6%, transparent 99%);
    animation: marqueeChase 1.4s linear infinite;
    opacity: 0.85;
}
@keyframes marqueeChase { to { transform: rotate(-30deg); } }

.wheel-pointer {
    position: absolute;
    top: calc(50% - min(38vh, 48%) - 14px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 38px;
    color: #ef4444;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    z-index: 6;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}
.wheel-pointer::after { content: ''; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: #ffe4a3; box-shadow: 0 2px 0 #8d3728; }

#wheel-canvas {
    position: relative;
    z-index: 2;
    width: min(64vh, 84%);
    aspect-ratio: 1;
    max-width: 480px;
    border-radius: 50%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 6px var(--color-surface), 0 0 0 8px var(--color-border);
    will-change: transform;
}

.wheel-hub {
    position: absolute;
    z-index: 7;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--color-primary-gradient);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
    box-shadow: var(--shadow-glow-lg), inset 0 0 0 4px rgba(255, 255, 255, 0.25), inset 0 -10px 13px rgba(110,37,15,.20), 0 8px 0 rgba(68,33,15,.32);
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease;
    letter-spacing: 0.05em;
}
.wheel-hub:hover { transform: translate(-50%, -50%) scale(1.05); }
.wheel-hub:active { transform: translate(-50%, -46%) scale(0.96); }
.wheel-hub.disabled { pointer-events: none; opacity: 0.75; }
.wheel-hub .material-symbols-outlined { font-size: 26px; }

/* Fairground spinner: painted wood surround, marquee bulbs, and a warm tabletop glow. */
.wheel-stage { background: radial-gradient(ellipse at 50% 88%, rgba(189,105,31,.2), transparent 43%), radial-gradient(circle at 15% 18%, rgba(255,249,202,.82) 0 3px, transparent 4px) 0 0 / 34px 34px, linear-gradient(180deg, #f8e5b9, #e8c690); }
.canvas-container.wheel-stage::after { content: ''; position: absolute; width: min(77vw, 500px); aspect-ratio: 1; border: 7px dotted rgba(167,87,24,.52); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 9px rgba(255,249,219,.64); }
#wheel-canvas { position: relative; z-index: 1; box-shadow: 0 16px 0 rgba(117,55,23,.17), 0 25px 30px rgba(103,54,24,.2), 0 0 0 7px #7c3f1d, 0 0 0 12px #f3c36a, 0 0 0 16px #964725; }
.wheel-hub { z-index: 2; box-shadow: inset 0 4px 0 rgba(255,255,255,.42), 0 5px 0 rgba(116,47,24,.3), 0 0 0 4px #f7da84; }

/* ---------- Result modal ---------- */
.result-modal-card { max-width: 420px; text-align: center; }
.result-modal-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 4px; }
.winner-badge { font-size: 64px; animation: badgeBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes badgeBounce { 0% { transform: scale(0.3) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.winner-label { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-amber); font-weight: 700; }
.winner-name { font-family: var(--font-display); font-size: 2rem; font-weight: 800; background: var(--color-primary-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; word-break: keep-all; }

@media (max-width: 640px) {
    .wheel-pointer { top: calc(50% - min(30vh, 46%) - 10px); font-size: 26px; }
    .wheel-hub { width: 72px; height: 72px; font-size: 0.68rem; }
}
/* Editorial help section: game-specific text lives with the page, while this
   restrained layout keeps it readable across every existing color theme. */
.game-help { margin: 0 0 28px; padding: 26px; }
.game-help h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 16px; }
.game-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.game-help article { padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-hover); }
.game-help h3 { color: var(--accent-blue); font-family: var(--font-display); font-size: 1rem; margin-bottom: 7px; }.game-help p { color: var(--text-secondary); font-size: .88rem; line-height: 1.75; }
@media (max-width: 720px) { .game-help { padding: 20px 16px; }.game-help-grid { grid-template-columns: 1fr; } }