:root {
    --ink: #fff9e6;
    --muted: #e0fff2;
    --line: #ffe9a84d;
    --green: #158775;
    --yellow: #ffda69;
    --coral: #ef5376;
}
body { background: #147a6d; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
button:focus-visible { outline-color: #fff; }
.arcade-arena { background: #147a6d; }
.arcade-arena::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; border: 4px solid #f9d274; box-shadow: inset 0 0 0 2px #784e20, inset 0 0 0 5px #fff0b05c; }
.arcade-backdrop { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.arcade-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.arcade-backdrop::after { content: ""; position: absolute; inset: 0; background: #064a431c; }
.arena-hud { position: relative; background: #651c36f2; border: 2px solid #ffdb8e; border-bottom-width: 4px; border-radius: 6px; padding: 10px 14px; box-shadow: 0 4px 0 #571629, inset 0 2px 0 #ffa5bd66; }
.score-strip { width: 240px; }
.score-strip > div > span, .event-timer > span { color: #ffe8ae; font-size: 9px; }
.score-strip strong { color: #ffdc76; text-shadow: 0 2px 0 #4b1427; }
.score-strip small { color: #ffefd0; }
.arcade-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 900; white-space: nowrap; color: #ffdd76; text-shadow: 0 2px 0 #8b3821; }
.arcade-title b { color: #fff; }
.event-timer strong { color: #fffbe9; text-shadow: 0 2px 0 #481426; }
.event-timer.ending strong { color: #ffc2c5; }
.icon-button { background: #ffda69; border: 2px solid #fff0bd; box-shadow: 0 3px 0 #823328, inset 0 2px 0 #fff6d8; }
.icon-button:hover { background: #fff0ad; }
.rank-badge { background: #0e695e; border: 1px solid #ffe9a8; color: #fff; }
[data-tooltip]::after { color: #fff; background: #4b142a; }
.arena-badge { background: #6c1c37d9; border: 1px solid #ffdc85; border-radius: 4px; color: #ffeebf; padding: 5px 16px; box-shadow: 0 2px 0 #3c303b66; }
.duel { max-height: 390px; }
.fighter-label { background: #075748e6; padding: 5px 14px; border: 1px solid #ffd479; border-bottom: 3px solid #ff6987; border-radius: 4px; }
.fighter:last-child .fighter-label { border-bottom-color: #41eee0; }
.fighter-label > span { color: #d7ffeb; }
.fighter-label strong { font-weight: 900; color: #fff; }
.hand { filter: drop-shadow(0 10px 3px #053c475c); }
.bot-hand { filter: drop-shadow(0 10px 3px #053c475c); }
.move-name { background: #06493cd9; color: #fff9de; height: 24px; padding: 3px 12px; border-radius: 4px; border-bottom: 2px solid #e9c95f; }
.versus { font-size: 36px; color: #ffe78f; -webkit-text-stroke: 1px #9b402e; text-shadow: 0 3px 0 #7b272c; }
.result h1 { color: #fff6d4; font-weight: 900; -webkit-text-stroke: 1px #42552d; text-shadow: 0 3px 0 #075e52, 0 5px 10px #053e4f66; }
.result p { display: inline-block; background: #074f42d9; color: #fffce8; padding: 4px 12px; border-radius: 4px; }
.result[data-outcome=win] h1 { color: #ffeb84; -webkit-text-stroke-color: #98632b; text-shadow: 0 3px 0 #815728, 0 6px 15px #ffe68b66; }
.result[data-outcome=loss] h1 { color: #ffe6ec; -webkit-text-stroke-color: #8a233d; text-shadow: 0 3px 0 #8a233d; }
.join-button, .retry-button { background: #ffda69; border: 2px solid #fff2be; color: #5a2b2b; font-size: 13px; font-weight: 900; padding: 8px 22px; box-shadow: 0 4px 0 #97503b, inset 0 2px 0 #fff4ce; }
.join-button:hover, .retry-button:hover { background: #ffe99d; }
.connection-error { color: #fff; background: #842b3bd9; padding: 3px 6px; border-radius: 4px; }
.choice-grid { gap: 14px; }
.choice { position: relative; border: 2px solid #ffe99c; color: #fff; box-shadow: 0 6px 0 #722743, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #00000026; }
.choice-rock { background: #db4163; }
.choice-paper { background: #e3a02f; }
.choice-scissors { background: #139890; }
.choice img { filter: drop-shadow(0 3px 1px #3b142554); }
.choice span { font-weight: 900; text-shadow: 0 2px 0 #00000059; }
.choice:not(:disabled):hover { box-shadow: 0 9px 0 #722743, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #00000026; }
.choice:not(:disabled):active, .choice.selected { box-shadow: 0 2px 0 #722743, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #00000026; }
.choice:disabled { opacity: .7; }
.choice.selected { border-color: #fff; opacity: 1; }
.session-record { color: #fffceb; text-shadow: 0 1px 3px #084f41; font-weight: 700; }
.ranking-panel { background: #642037; color: #fff8e6; border: 3px solid #ffe18c; box-shadow: -12px 0 45px #173c3859, inset 0 0 0 2px #a73b58; }
.ranking-panel::backdrop { background: #062f3766; }
.panel-heading { background: #501b32; border-color: #f3d0834d; }
.panel-heading h2 { color: #ffe28a; }
.eyebrow { color: #ffdc9e; }
.event-info > span, .prize-band p, .leaderboard-labels, .player-name small, .empty-state, .end-date, .points-strip { color: #ffe8db; }
.prize-number, .position.top, .player-score, .points-strip strong { color: #ffe18c; }
.leaderboard li.mine { background: #125d54; }
.position { color: #f4ceb8; }
.round-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.fx-piece { position: absolute; left: var(--x); top: 32%; width: 7px; height: 13px; background: var(--color); animation: confetti-fall 1s ease-out both; animation-delay: var(--delay); }
@keyframes confetti-fall { from { transform: translateY(-30px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--drift), 230px) rotate(var(--rotation)); opacity: 0; } }
@media (max-width: 900px) { .arcade-title { display: none; } }
@media (max-width: 480px) {
    .arena-hud { padding: 7px 8px; gap: 8px; }
    .score-strip { gap: 12px; }
    .arena-tools { gap: 10px; }
    .fighter-label { padding: 5px 8px; }
    .versus { font-size: 27px; }
    .choice-grid { gap: 10px; }
    .result h1 { -webkit-text-stroke-width: .6px; }
}
@media (max-height: 620px) { .duel { max-height: 240px; } }
@media (max-height: 420px) {
    .arena-hud { padding: 3px 10px; }
    .arena-badge { padding: 1px 8px; }
    .fighter-label { padding: 2px 8px; border-bottom-width: 1px; }
    .duel { max-height: 180px; }
    .move-name { font-size: 9px; height: 15px; padding: 0 7px; }
    .versus { font-size: 22px; }
    .result p { padding: 2px 8px; }
    .join-button, .retry-button { font-size: 11px; padding: 4px 16px; }
    .session-record { padding-top: 8px; }
    .arcade-title { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-piece { display: none; } }