/* Rock-Paper-Scissors Tournament — crimson x gold championship tone */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #dc2626 0%, #ca8a04 100%);
    --shadow-glow: 0 0 25px rgba(220, 38, 38, 0.45);
    --shadow-glow-lg: 0 0 40px rgba(220, 38, 38, 0.55);
    --accent-blue: #dc2626;
}

.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(220, 38, 38, 0.08); }

/* ---------- Stage ---------- */
.rps-stage {
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 28px 20px;
    background: radial-gradient(ellipse at 50% 0%, rgba(202, 138, 4, .14), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(220, 38, 38, .12), transparent 55%);
}

.rps-round-banner {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 35%, transparent);
    padding: 6px 16px;
    border-radius: 20px;
}

.rps-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 560px;
}

.rps-fighter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 2px solid var(--color-border-subtle);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.rps-fighter.winner {
    border-color: var(--accent-emerald);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent-emerald) 45%, transparent);
    transform: translateY(-4px) scale(1.04);
}
.rps-fighter.loser {
    opacity: 0.45;
    transform: scale(0.94);
}

.fighter-hand {
    font-size: 2.6rem;
    line-height: 1;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fighter-hand.pop { animation: fighterHandPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fighterHandPop {
    0% { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
/* Both fighters' hands tumble through rock/paper/scissors together, slot-machine
   style, so no one has to look away — everyone in the room can watch the draw. */
.fighter-hand.spinning { animation: fighterHandSpin 0.17s ease infinite; }
@keyframes fighterHandSpin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.12) rotate(-6deg); }
}

.fighter-avatar { font-size: 1.9rem; }
.fighter-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); text-align: center; }

.rps-vs {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.rps-prompt {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    min-height: 1.4em;
    max-width: 480px;
}

.rps-action-btn.hidden { display: none; }

@media (max-width: 640px) {
    .rps-arena { gap: 10px; }
    .rps-fighter { padding: 14px 8px; }
    .fighter-hand { font-size: 2.1rem; height: 42px; }
    .fighter-avatar { font-size: 1.5rem; }
    .fighter-name { font-size: 0.9rem; }
}
.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}}