/* Game On Arena: beams sweep, the RGB bars breathe, light sticks wave and the LED floor pulses.
   The opening is a film (film.css); ".op-arena" is the classic fallback. Transform and opacity only. */
[data-theme="esports"] .title { font-family: "Chakra Petch", sans-serif; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-shadow: .04em .04em 0 rgba(255, 63, 209, .55), -.04em -.02em 0 rgba(53, 240, 255, .45); }
[data-theme="esports"] .eyebrow { color: #35f0ff; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; font-weight: 800; }
[data-theme="esports"] .card { border-radius: 10px; box-shadow: var(--shadow), inset 0 0 0 1px #e3e1f5; }
[data-theme="esports"] .card h2 { font-family: "Chakra Petch", sans-serif; font-weight: 700; letter-spacing: .03em; }
[data-theme="esports"] .btn { border-radius: 8px; letter-spacing: .04em; }

[data-theme="esports"] .hero-art .es-bm { transform-box: fill-box; transform-origin: 50% 0; animation: es-sweep 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2s); }
[data-theme="esports"] .hero-art .es-bar { animation: es-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
[data-theme="esports"] .hero-art .es-stick { animation: es-tw 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.21s); }
[data-theme="esports"] .hero-art .es-row { animation: es-tw 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes es-sweep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes es-breathe { 50% { opacity: .55; } }
@keyframes es-tw { 50% { opacity: .25; } }

/* the pass: a dark player card with an RGB edge */
[data-theme="esports"] .ticket { background: linear-gradient(135deg, #14112b, #2a1660); color: #f2f4ff; border-radius: 10px; box-shadow: 0 10px 26px rgba(11, 10, 26, .35), inset 0 0 0 1.5px #35f0ff; }
[data-theme="esports"] .ticket small { color: #35f0ff; letter-spacing: .2em; }
[data-theme="esports"] .ticket b { font-family: "Chakra Petch", sans-serif; font-weight: 700; color: #fff; }
[data-theme="esports"] .ticket .t-main { border-right: 1.5px dashed rgba(53, 240, 255, .5); }

/* the classic opening (fallback): the screen powers on */
[data-theme="esports"] .op-card { background: rgba(11, 10, 26, .82); color: #f2f4ff; box-shadow: 0 0 0 1px #35f0ff, 0 18px 50px rgba(0, 0, 0, .5); border-radius: 12px; }
[data-theme="esports"] .op-eyebrow { color: #35f0ff; letter-spacing: .16em; text-transform: uppercase; }
[data-theme="esports"] .op-arena .op-line { font-family: "Chakra Petch", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #f2f4ff; }
[data-theme="esports"] .op-arena.op-run .es-screen-art { transform-box: fill-box; transform-origin: center; animation: es-boot .7s .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes es-boot { 0% { opacity: 0; transform: scaleY(.02); } 60% { opacity: 1; transform: scaleY(.02); } 100% { opacity: 1; transform: scaleY(1); } }

[data-theme="esports"] .btn, [data-theme="esports"] .card h2, [data-theme="esports"] .title, [data-theme="esports"] .eyebrow { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="esports"] .hero-art *, [data-theme="esports"] .op-art * { animation: none !important; }
}