/*
 * Battle Arena: players' phones (arena.php) and the watch gallery (arena-watch.php).
 * Its own look, dark with neon edges, so battles feel different from office quizzes.
 */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700 900; font-display: swap; src: url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700 900; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700 900; font-display: swap; src: url(fonts/chakra-petch-latin-700-normal.woff2) format('woff2'); }

:root {
  --bg: #0B0820; --bg2: #160F38; --card: rgba(255, 255, 255, .06); --card2: rgba(255, 255, 255, .1); --line: rgba(255, 255, 255, .14);
  --text: #F4F2FF; --muted: #A9A3C9; --me: #29D3FF; --opp: #FF4FA3; --gold: #FFC93C; --ok: #2EE59D; --no: #FF5468; --help: #FF3B3B;
  --a0: #7C5CFF; --a1: #FF8A3D; --a2: #12C2A8; --a3: #E9478F; --a4: #3D9BFF; --a5: #E5B800;
  --font-d: 'Chakra Petch', 'Bricolage Grotesque', system-ui, sans-serif; --font-b: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body.arena { background: var(--bg); color: var(--text); font: 16px/1.45 var(--font-b); -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
a { color: var(--me); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mark { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* Moving backdrop: a perspective grid and two drifting glows. */
.ar-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #2A1A6E 0%, var(--bg) 60%); }
.ar-grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; transform: perspective(500px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(124, 92, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 92, 255, .35) 1px, transparent 1px);
  background-size: 48px 48px; animation: ar-grid 3s linear infinite; mask-image: linear-gradient(to top, #000 10%, transparent 90%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); }
@keyframes ar-grid { to { background-position: 0 48px, 0 0; } }
.ar-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; }
.ar-glow.g1 { background: var(--me); top: -30vmax; left: -25vmax; animation: ar-drift 14s ease-in-out infinite alternate; }
.ar-glow.g2 { background: var(--opp); bottom: -35vmax; right: -25vmax; animation: ar-drift 17s ease-in-out infinite alternate-reverse; }
@keyframes ar-drift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

/* Header */
.ar-app { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.ar-top { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.ar-brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 800 18px var(--font-d); letter-spacing: .02em; text-transform: uppercase; }
.ar-tabs { display: flex; gap: 4px; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.ar-tab { border: 0; background: none; color: var(--muted); font: 700 14px var(--font-b); padding: 7px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.ar-tab.is-on { background: var(--text); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ar-lang { display: inline-flex; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.ar-lang a { padding: 4px 10px; border-radius: 999px; font: 800 12px var(--font-b); text-decoration: none; color: var(--muted); }
.ar-lang a[aria-current] { background: var(--text); color: var(--bg); }
body.in-battle .ar-tabs, body.in-battle .ar-lang { display: none; }
.ar-main { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.ar-wait { text-align: center; color: var(--muted); margin-top: 30vh; }

/* Shared bits */
.ar-h1 { font: 900 clamp(34px, 9vw, 56px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .02em; margin: 0;
  background: linear-gradient(90deg, var(--me), #fff 45%, var(--opp)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-h2 { font: 800 20px var(--font-d); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.ar-lead { color: var(--muted); margin: 6px 0 0; }
.ar-note { color: var(--muted); font-size: 13.5px; text-align: center; margin: 8px 0 0; }
.ar-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.ar-btn { appearance: none; border: 1px solid var(--line); background: var(--card2); color: var(--text); font: 800 16px var(--font-b); padding: 13px 20px; border-radius: 14px; cursor: pointer; min-height: 48px; }
.ar-btn:hover { background: rgba(255, 255, 255, .16); }
.ar-btn:disabled { opacity: .55; cursor: default; }
.ar-btn-go { background: linear-gradient(135deg, var(--me), var(--a0)); border: 0; color: #fff; box-shadow: 0 8px 24px rgba(41, 211, 255, .3); }
.ar-btn-go.glow { animation: ar-glowpulse 1s ease-in-out infinite; }
@keyframes ar-glowpulse { 50% { box-shadow: 0 0 0 6px rgba(255, 201, 60, .5), 0 8px 30px rgba(255, 201, 60, .5); } }
.ar-btn-quiet { background: transparent; }
.ar-link { background: none; border: 0; color: var(--me); font: 600 14px var(--font-b); cursor: pointer; padding: 8px 0; text-align: left; }
.ar-link.small { font-size: 13px; }
.ar-input { width: 100%; font: 700 20px var(--font-b); padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--text); }
.ar-input:focus { border-color: var(--me); outline: none; }
.ar-form { display: grid; gap: 10px; margin-top: 16px; }
.ar-err { color: var(--no); margin: 0; font-weight: 700; }
.ar-flag { width: 20px; height: 15px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; object-fit: cover; }
.ar-av { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 900 18px var(--font-d); color: #fff; background: linear-gradient(135deg, var(--me), var(--a0)); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.ar-av.big { width: 64px; height: 64px; font-size: 28px; }
.ar-av.huge { width: 92px; height: 92px; font-size: 42px; }
.opp .ar-av, .ar-vs-card.opp .ar-av { background: linear-gradient(135deg, var(--opp), var(--a1)); }

/* Nickname */
.ar-name { margin-top: 8vh; text-align: center; }
.ar-name .ar-link { text-align: center; }

/* Lobby */
.ar-hero { text-align: center; padding: 10px 0 0; }
.ar-live { color: var(--muted); margin: 8px 0 0; font-weight: 600; }
.ar-live::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 8px; box-shadow: 0 0 0 0 rgba(46, 229, 157, .7); animation: ar-ping 1.6s infinite; }
@keyframes ar-ping { 70% { box-shadow: 0 0 0 10px rgba(46, 229, 157, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 229, 157, 0); } }
.ar-me { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-me-who { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.ar-me-name { font: 800 20px var(--font-b); }
.ar-me-rec { color: var(--muted); font-size: 14px; }
.ar-modes { display: grid; gap: 12px; }
.ar-mode { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border-radius: 18px; border: 1px solid var(--line); cursor: pointer; color: var(--text); font: inherit; overflow: hidden;
  background: linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); animation: ar-rise .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(min(var(--i, 0), 8) * 50ms); transition: transform .15s, border-color .15s; }
.ar-mode:hover { transform: translateY(-2px) scale(1.01); border-color: rgba(255, 255, 255, .4); }
.ar-mode:active { transform: scale(.98); }
@keyframes ar-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.ar-mode-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; }
.ar-mode-ico svg { width: 30px; height: 30px; }
.m-classic .ar-mode-ico { background: linear-gradient(135deg, var(--a0), var(--me)); }
.m-lightning .ar-mode-ico { background: linear-gradient(135deg, var(--gold), var(--a1)); color: #2A1D00; }
.m-race .ar-mode-ico { background: linear-gradient(135deg, var(--opp), var(--a3)); }
.ar-mode-txt { display: grid; gap: 3px; }
.ar-mode-txt b { font: 800 20px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.ar-mode-txt span { color: var(--muted); font-size: 14px; }
.ar-mode-wait { position: absolute; top: 10px; right: 12px; font: 800 11px var(--font-b); color: var(--ok); text-transform: uppercase; letter-spacing: .06em; }
.ar-mode-wait.hot::before { content: "\25CF "; animation: ar-blink 1s infinite; }
@keyframes ar-blink { 50% { opacity: .2; } }
.ar-watch-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-watch-link.gold { color: var(--gold); border-color: rgba(255, 201, 60, .45); }
.ar-lb-big { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; text-decoration: none; font: 800 15px var(--font-d); text-transform: uppercase; letter-spacing: .06em; color: var(--bg); background: linear-gradient(135deg, var(--gold), #FFE08A); box-shadow: 0 6px 22px rgba(255, 201, 60, .3); }
.ar-lb-big::after { content: "\2197"; }
.ar-watch-link { display: block; text-align: center; font-weight: 700; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; text-decoration: none; }
.ar-soon { text-align: center; color: var(--muted); font-size: 13px; margin: 0; }

/* Searching */
.ar-search { text-align: center; display: grid; justify-items: center; gap: 10px; margin-top: 4vh; }
.ar-radar { position: relative; width: 230px; height: 230px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(41, 211, 255, .12), transparent 70%); border: 1px solid rgba(41, 211, 255, .35); }
.ar-radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(41, 211, 255, .45), transparent 25%); animation: ar-spin 1.8s linear infinite; }
@keyframes ar-spin { to { transform: rotate(360deg); } }
.ar-radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(41, 211, 255, .5); animation: ar-ring 2.4s ease-out infinite; }
.ar-radar-ring.r1 { animation-delay: .8s; } .ar-radar-ring.r2 { animation-delay: 1.6s; }
@keyframes ar-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.ar-radar .ar-av { position: relative; z-index: 1; }
.ar-mode-chip { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--card2); font: 800 13px var(--font-d); text-transform: uppercase; letter-spacing: .06em; }
.ar-search-t { margin: 0; font: 800 28px var(--font-d); }

/* Battle */
.ar-battle { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ar-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); position: sticky; top: 6px; z-index: 5; backdrop-filter: blur(10px); }
.ar-side { display: flex; align-items: center; gap: 8px; min-width: 0; position: relative; }
.ar-side.opp { flex-direction: row-reverse; text-align: right; }
.ar-side-info { display: grid; min-width: 0; }
.ar-side-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-side-score { font: 900 24px/1.1 var(--font-d); }
.ar-side.me .ar-side-score { color: var(--me); } .ar-side.opp .ar-side-score { color: var(--opp); }
.ar-side-score.bump { animation: ar-bump .6s ease; }
@keyframes ar-bump { 30% { transform: scale(1.35); text-shadow: 0 0 18px currentColor; } }
.ar-locked { position: absolute; bottom: -18px; left: 0; font: 800 10px var(--font-b); text-transform: uppercase; letter-spacing: .06em; color: var(--ok); animation: ar-blink .9s infinite; white-space: nowrap; }
.ar-side.opp .ar-locked { left: auto; right: 0; }
.ar-bar-mid { display: grid; justify-items: center; }
.ar-bar-mode { font: 800 11px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.ar-bar-count { font: 800 14px var(--font-d); white-space: nowrap; }
.ar-quit { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 6px; padding: 11px 22px; min-height: 46px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 84, 104, .55); background: rgba(255, 84, 104, .1); color: #FFB3BD; font: 800 15px var(--font-b); letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); transition: background .15s, transform .12s, border-color .15s; }
.ar-quit svg { width: 18px; height: 18px; }
.ar-quit:hover { background: rgba(255, 84, 104, .2); border-color: var(--no); color: #fff; }
.ar-quit:active { transform: scale(.96); }
.ar-quit:disabled { opacity: .5; }
.ar-btn-danger { background: linear-gradient(135deg, #FF5468, #C22D45); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(255, 84, 104, .35); }
.ar-confirm { border-color: var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ar-confirm .ar-acts { margin-top: 0; animation: none; }
.ar-stage { flex: 1; display: flex; flex-direction: column; gap: 14px; position: relative; }

/* VS intro */
.st-intro { justify-content: center; align-items: center; text-align: center; min-height: 60vh; }
.ar-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; width: 100%; }
.ar-vs-card { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.ar-vs-card.me { animation: ar-slam-l .7s cubic-bezier(.2, 1.3, .4, 1) both; border-color: var(--me); box-shadow: 0 0 30px rgba(41, 211, 255, .3); }
.ar-vs-card.opp { animation: ar-slam-r .7s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: .25s; border-color: var(--opp); box-shadow: 0 0 30px rgba(255, 79, 163, .3); }
@keyframes ar-slam-l { from { transform: translateX(-120%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ar-slam-r { from { transform: translateX(120%) rotate(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-vs-name { font: 800 17px var(--font-b); word-break: break-word; }
.ar-vs-mid { position: relative; display: grid; place-items: center; width: 70px; height: 70px; }
.ar-vs-word { position: relative; z-index: 1; font: 900 44px var(--font-d); color: var(--gold); text-shadow: 0 0 20px rgba(255, 201, 60, .8); animation: ar-vs-in .6s cubic-bezier(.2, 1.6, .4, 1) .55s both; }
@keyframes ar-vs-in { from { transform: scale(4) rotate(-20deg); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } }
.ar-vs-bolt { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 60, .5), transparent 65%); animation: ar-flash .6s ease-out .55s both; }
@keyframes ar-flash { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.ar-vs-mode { font: 800 15px var(--font-d); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 18px 0 0; }
.ar-cd { font: 900 clamp(80px, 30vw, 150px)/1 var(--font-d); height: 1.1em; color: #fff; text-shadow: 0 0 30px var(--me); }
.ar-cd.pop { animation: ar-cd .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ar-cd { 0% { transform: scale(2.6); opacity: 0; } 25% { transform: scale(.9); opacity: 1; } 40% { transform: scale(1); } 85% { opacity: 1; } 100% { transform: scale(.7); opacity: .2; } }

/* Questions */
.ar-qno { margin: 6px 0 0; font: 800 13px var(--font-d); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); text-align: center; }
.ar-prompt { font: 800 clamp(26px, 7.2vw, 40px)/1.2 var(--font-b); margin: 4px 0; text-align: center; }
.ar-prompt.small { font-size: clamp(20px, 5.4vw, 27px); color: var(--muted); }
.ar-prompt.zoom { animation: ar-zoom .5s cubic-bezier(.2, 1.3, .4, 1) both; padding: 8vh 0; }
@keyframes ar-zoom { from { transform: scale(.6); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
.ar-timer { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ar-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--me)); transform-origin: left; }
.ar-timer.read i { background: linear-gradient(90deg, var(--gold), var(--a1)); }
.ar-timer.low i { background: linear-gradient(90deg, var(--no), var(--a1)); animation: ar-blink .5s infinite; }
.ar-opts { display: grid; gap: 10px; }
.ar-opts.n4, .ar-opts.n3 { grid-template-columns: 1fr; }
.ar-opts.tf { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .ar-opts.n4 { grid-template-columns: 1fr 1fr; } }
.ar-opt { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 12px 14px; border-radius: 16px; border: 2px solid transparent; color: #fff; font: 700 17px/1.25 var(--font-b); cursor: pointer;
  background: color-mix(in srgb, var(--c) 82%, #000); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #000); animation: ar-opt-in .3s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .12s, opacity .25s, filter .25s; }
.ar-opt.o0 { --c: var(--a0); } .ar-opt.o1 { --c: var(--a1); } .ar-opt.o2 { --c: var(--a2); } .ar-opt.o3 { --c: var(--a3); } .ar-opt.o4 { --c: var(--a4); } .ar-opt.o5 { --c: var(--a5); }
@keyframes ar-opt-in { from { transform: translateY(20px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-opt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 55%, #000); }
.ar-opt:disabled { cursor: default; }
.ar-ltr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .22); font: 900 15px var(--font-d); flex-shrink: 0; }
.ar-opt-t { flex: 1; }
.ar-opts.locked .ar-opt:not(.picked) { opacity: .35; filter: saturate(.4); }
.ar-opt.picked { border-color: #fff; transform: scale(1.03); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 6px 0 color-mix(in srgb, var(--c) 55%, #000); }
.ar-opt.picked::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 2px solid #fff; animation: ar-lockring .6s ease-out both; }
@keyframes ar-lockring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
.ar-opts.wait .ar-opt { visibility: hidden; }

/* HELP! and what it does to the options */
.ar-help { position: relative; display: grid; justify-items: center; align-self: center; gap: 2px; padding: 10px 26px; border-radius: 999px; border: 3px solid #fff; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 50% 30%, #FF7A7A, var(--help) 55%, #A30F1F); box-shadow: 0 6px 0 #7A0A16, 0 0 24px rgba(255, 59, 59, .55); animation: ar-panic 2.2s ease-in-out infinite; }
.ar-help-word { font: 900 24px/1 var(--font-d); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.ar-help-sub { font: 700 11px var(--font-b); opacity: .9; }
@keyframes ar-panic { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-4deg) scale(1.04); } 92% { transform: rotate(4deg) scale(1.04); } 96% { transform: rotate(-2deg); } }
.ar-help:disabled { animation: none; cursor: default; }
.ar-help:disabled:not(.used) { opacity: .4; filter: grayscale(.6); }
.ar-help.pressed { animation: ar-press .45s ease both; }
@keyframes ar-press { 30% { transform: scale(.85); } 60% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(255, 59, 59, .25), 0 0 40px rgba(255, 59, 59, .8); } 100% { transform: none; } }
.ar-help.used { background: #3A2030; border-color: var(--help); box-shadow: none; animation: none; }
.ar-help.demo { animation: ar-panic 1.2s ease-in-out infinite; pointer-events: none; margin: 0 auto 12px; }
.ar-opt.gone { animation: ar-gone .55s cubic-bezier(.5, 0, .7, .4) both; pointer-events: none; }
@keyframes ar-gone { 0% { transform: none; opacity: 1; filter: none; } 30% { transform: scale(1.05) rotate(-2deg); filter: brightness(2); } 100% { transform: translateX(60px) scale(.4) rotate(14deg); opacity: 0; filter: blur(6px); visibility: hidden; } }
.ar-opts.helped .ar-opt.gone { height: 0; min-height: 0; padding: 0; margin: -5px 0; border: 0; transition: height .3s .45s, min-height .3s .45s, padding .3s .45s, margin .3s .45s; }
.ar-opt.kept { animation: ar-kept .6s ease both; }
@keyframes ar-kept { 40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255, 201, 60, .5); } }

/* Reveal */
.ar-opts.reveal .ar-opt { cursor: default; animation: none; }
.ar-opts.reveal .ar-opt.wrong { opacity: .35; filter: saturate(.3); }
.ar-opts.reveal .ar-opt.mine-wrong { opacity: 1; filter: none; background: #4A1420; border-color: var(--no); box-shadow: none; animation: ar-shake .5s ease both; }
.ar-opt.right { background: linear-gradient(135deg, #12B981, var(--ok)); border-color: #fff; box-shadow: 0 0 0 4px rgba(46, 229, 157, .3), 0 0 30px rgba(46, 229, 157, .6); animation: ar-right .7s cubic-bezier(.2, 1.4, .4, 1) both; color: #04301E; }
.ar-opt.right .ar-ltr { background: rgba(255, 255, 255, .5); }
@keyframes ar-right { 0% { transform: scale(.94); } 40% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes ar-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.ar-picks { display: flex; gap: 4px; }
.ar-pick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 900 12px var(--font-d); color: #fff; border: 2px solid #fff; animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
.ar-pick.me { background: var(--me); } .ar-pick.opp { background: var(--opp); animation-delay: .35s; }
@keyframes ar-pop { from { transform: scale(0); } to { transform: none; } }
.ar-outcome { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ar-verdict { font: 900 30px var(--font-d); text-transform: uppercase; animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-verdict.ok { color: var(--ok); text-shadow: 0 0 20px rgba(46, 229, 157, .6); } .ar-verdict.no { color: var(--no); }
.ar-plus { font: 900 26px var(--font-d); color: var(--gold); animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.ar-streak { font: 800 13px var(--font-b); text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--a1), var(--no)); animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.ar-streak::before { content: "\1F525  "; }
.ar-streak.big { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; padding: 10px 20px; animation: ar-streakbig 1.4s ease both; z-index: 3; }
@keyframes ar-streakbig { 0% { transform: translate(-50%, -50%) scale(0); } 20% { transform: translate(-50%, -50%) scale(1.2); } 30%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -60%); opacity: 0; } }
.ar-opp-res { text-align: center; color: var(--muted); margin: 0; }
/* "Did you know?" card after each answer */
.ar-fact { position: relative; display: flex; align-items: flex-start; gap: 16px; margin: 10px 0 0; padding: 20px 22px; border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, #241A4D, #15102E) padding-box, linear-gradient(120deg, var(--gold), #FF2E88 50%, var(--me)) border-box; border: 2px solid transparent;
  box-shadow: 0 0 34px rgba(255, 201, 60, .18), 0 14px 34px rgba(0, 0, 0, .35); animation: ar-fact-in .6s cubic-bezier(.2, 1.3, .4, 1) .45s both; }
.ar-fact-bulb { flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 201, 60, .35), rgba(255, 201, 60, 0) 70%); animation: ar-bulb-glow 2.4s ease-in-out 1.4s infinite; }
.ar-fact-bulb svg { width: 42px; height: 42px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ar-fact-bulb .glass { fill: var(--gold); stroke: #FFE9A0; stroke-width: 1.2; animation: ar-bulb-on 1s steps(1) .7s both; }
.ar-fact-bulb .base { stroke: #CFC6E8; stroke-width: 1.8; }
.ar-fact-body { min-width: 0; }
.ar-fact-label { display: inline-block; font: 900 16px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 14px rgba(255, 201, 60, .55); animation: ar-fact-tilt .5s cubic-bezier(.2, 1.6, .4, 1) .75s both; }
.ar-fact-text { margin: 6px 0 0; font: 700 clamp(19px, 4.8vw, 28px)/1.4 var(--font-b); color: #fff; animation: ar-fact-text .5s ease-out .95s both; }
@keyframes ar-fact-in { from { opacity: 0; transform: translateY(28px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ar-fact-tilt { from { opacity: 0; transform: rotate(-8deg) scale(1.4); } to { opacity: 1; transform: none; } }
@keyframes ar-fact-text { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ar-bulb-on { 0% { fill: #3A3354; } 20% { fill: var(--gold); } 35% { fill: #3A3354; } 50%, 100% { fill: var(--gold); } }
@keyframes ar-bulb-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 201, 60, .5)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(255, 201, 60, .9)); } }
@media (max-width: 420px) { .ar-fact { padding: 16px; gap: 12px; } .ar-fact-bulb { width: 44px; height: 44px; } .ar-fact-bulb svg { width: 30px; height: 30px; } }
.ar-float { position: fixed; z-index: 50; transform: translate(-50%, 0); font: 900 26px var(--font-d); color: var(--gold); text-shadow: 0 0 14px rgba(255, 201, 60, .8); pointer-events: none; animation: ar-float 1.3s ease-out both; }
@keyframes ar-float { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.5); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50px) scale(1); } }

/* Race to 100 */
.ar-track { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.ar-lane { position: relative; height: 26px; border-radius: 13px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 10%, rgba(255, 255, 255, .02) 10% 20%); }
.ar-runner { position: absolute; top: 1px; left: calc(var(--p, 0) * (100% - 24px)); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--font-d); color: #fff; transition: left .5s cubic-bezier(.2, 1.2, .4, 1); }
.ar-lane.me .ar-runner { background: var(--me); box-shadow: 0 0 12px var(--me); } .ar-lane.opp .ar-runner { background: var(--opp); box-shadow: 0 0 12px var(--opp); }
.ar-finish { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; border-radius: 0 13px 13px 0; background: repeating-linear-gradient(0deg, #fff 0 4px, #000 4px 8px); opacity: .6; }
.ar-race-q { display: flex; flex-direction: column; gap: 12px; animation: ar-slide .35s cubic-bezier(.2, 1, .4, 1) both; }
@keyframes ar-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.st-race.flash-ok::before, .st-race.flash-no::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; animation: ar-screenflash .5s ease-out both; }
.st-race.flash-ok::before { background: radial-gradient(circle, rgba(46, 229, 157, .35), transparent 70%); }
.st-race.flash-no::before { background: radial-gradient(circle, rgba(255, 84, 104, .35), transparent 70%); }
@keyframes ar-screenflash { from { opacity: 1; } to { opacity: 0; } }
.st-race-done { align-items: center; text-align: center; justify-content: center; min-height: 40vh; }
.ar-big { font: 900 44px var(--font-d); text-transform: uppercase; margin: 0; color: var(--gold); animation: ar-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-race-wait { font-weight: 700; }

/* Results */
.st-result { align-items: center; text-align: center; padding-top: 10px; overflow: hidden; }
.ar-burst { position: absolute; inset: -40% -40% auto; height: 140%; display: grid; place-items: center; pointer-events: none; z-index: -1; }
.ar-rays { width: 140vmax; height: 140vmax; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, .35) 0 8deg, transparent 8deg 22deg); animation: ar-rays 12s linear infinite, ar-raysin 1s ease-out both;
  mask-image: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); }
.out-lose .ar-rays, .out-void .ar-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 79, 163, .2) 0 8deg, transparent 8deg 22deg); }
@keyframes ar-rays { to { transform: rotate(360deg); } }
@keyframes ar-raysin { from { opacity: 0; transform: scale(.3); } }
.ar-result-word { display: flex; justify-content: center; flex-wrap: wrap; margin: 10px 0 0; font: 900 clamp(46px, 15vw, 88px)/1 var(--font-d); text-transform: uppercase; }
.ar-result-word span { display: inline-block; animation: ar-drop .7s cubic-bezier(.25, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 55ms + 150ms); }
.ar-result-word .sp { width: .3em; }
@keyframes ar-drop { 0% { opacity: 0; transform: translateY(-1.4em) rotate(-18deg) scale(.5); } 60% { opacity: 1; transform: translateY(.06em) rotate(4deg) scale(1.08); } 100% { opacity: 1; transform: none; } }
.out-win .ar-result-word { color: var(--gold); text-shadow: 0 0 30px rgba(255, 201, 60, .6); }
.out-lose .ar-result-word { color: var(--opp); }
.out-draw .ar-result-word { color: var(--me); }
.out-void .ar-result-word { color: var(--muted); font-size: clamp(30px, 9vw, 52px); }
.ar-trophy { width: 120px; animation: ar-trophy 1s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
.ar-trophy svg { width: 100%; height: auto; filter: drop-shadow(0 0 20px rgba(255, 201, 60, .7)); }
@keyframes ar-trophy { from { transform: translateY(60px) scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-compare { width: 100%; max-width: 440px; display: grid; gap: 6px; margin-top: 10px; animation: ar-rise .5s ease .8s both; }
.ar-cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card); }
.ar-cmp-row.head { background: none; padding-bottom: 0; }
.ar-cmp-row .a { text-align: left; color: var(--me); } .ar-cmp-row .b { text-align: right; color: var(--opp); }
.ar-cmp-row .l { color: var(--muted); font-size: 13px; }
.ar-cmp-row b { font: 900 20px var(--font-d); }
.ar-cmp-row.head b { font: 700 14px var(--font-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-cmp-row b.best::after { content: " \2605"; color: var(--gold); }
.ar-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; animation: ar-rise .5s ease 1s both; }
.ar-rematch-status { min-height: 1.4em; font-weight: 700; color: var(--gold); margin: 0; }

/* Confetti (trophy.js) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 10px; border-radius: 2px; animation: ar-fall linear forwards; }
@keyframes ar-fall { to { transform: translateY(110vh) rotate(720deg); } }

/* HELP! first-time tip */
.ar-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 18, .75); backdrop-filter: blur(4px); animation: ar-fade .25s ease both; }
@keyframes ar-fade { from { opacity: 0; } }
.ar-modal-box { max-width: 340px; text-align: center; background: var(--bg2); border: 2px solid var(--help); border-radius: 22px; padding: 22px; box-shadow: 0 0 50px rgba(255, 59, 59, .4); animation: ar-pop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.ar-modal-t { font: 800 19px/1.35 var(--font-b); margin: 0 0 16px; }

/* Leaderboards */
.ar-boards { display: grid; gap: 12px; }
.ar-seg { display: flex; gap: 4px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.ar-seg-b { flex: 1; border: 0; background: none; color: var(--muted); font: 700 14px var(--font-b); padding: 9px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.ar-seg.small .ar-seg-b { font-size: 12.5px; padding: 7px 8px; }
.ar-seg-b.is-on { background: var(--text); color: var(--bg); }
.ar-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ar-row { display: grid; grid-template-columns: 40px 1fr auto auto auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--card); animation: ar-rise .4s ease both; animation-delay: calc(var(--i) * 30ms); }
.ar-row.me { outline: 2px solid var(--me); }
.ar-rank { font: 900 18px var(--font-d); text-align: center; }
.ar-row.top .ar-rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #2A1D00; }
.ar-row.t0 .ar-rank { background: var(--gold); box-shadow: 0 0 14px rgba(255, 201, 60, .7); } .ar-row.t1 .ar-rank { background: #D9DEE6; } .ar-row.t2 .ar-rank { background: #E39A5B; }
.ar-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-row-w { font: 900 16px var(--font-d); color: var(--ok); }
.ar-row-b { color: var(--muted); font-size: 13px; }
.ar-row-p { font: 800 15px var(--font-d); color: var(--gold); min-width: 56px; text-align: right; }
@media (max-width: 460px) { .ar-row { grid-template-columns: 34px 1fr auto auto; } .ar-row-b { display: none; } }
.ar-empty { text-align: center; color: var(--muted); padding: 30px; background: var(--card); border-radius: 14px; }

/* ---------- Watch gallery (arena-watch.php) ---------- */
body.arena-watch { overflow: hidden; }
.aw { display: flex; flex-direction: column; height: 100vh; padding: 14px 18px; gap: 12px; }
.aw-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aw-top .ar-h1 { font-size: clamp(26px, 3.4vw, 46px); }
.aw-live { color: var(--muted); font-weight: 700; }
.aw-join { margin-left: auto; display: flex; align-items: center; gap: 12px; font-weight: 700; }
.aw-join b { color: var(--gold); }
.aw-qr { width: 84px; height: 84px; background: #fff; border-radius: 10px; padding: 5px; }
.aw-qr svg, .aw-qr canvas, .aw-qr img { width: 100%; height: 100%; display: block; }
.aw-grid { flex: 1; display: grid; gap: 14px; min-height: 0; }
.aw-grid.n1 { grid-template-columns: 1fr; }
.aw-grid.n2 { grid-template-columns: 1fr 1fr; }
.aw-grid.n3, .aw-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
@media (max-width: 800px) { body.arena-watch { overflow: auto; } .aw { height: auto; } .aw-grid.n2, .aw-grid.n3, .aw-grid.n4 { grid-template-columns: 1fr; grid-template-rows: none; } }
.aw-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); overflow: hidden; min-height: 0; animation: ar-rise .5s ease both; }
.aw-tile.focus { border-color: var(--gold); }
.aw-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.aw-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aw-p.p2 { flex-direction: row-reverse; text-align: right; }
.aw-p > div { min-width: 0; }
.aw-tops { justify-content: center; }
.aw-tops h2 { font: 900 clamp(18px, 2vw, 30px) var(--font-d); text-transform: uppercase; margin: 0; color: var(--gold); text-align: center; }
.aw-tops ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aw-tops li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--card); font-weight: 700; }
.aw-tops li b { font: 900 18px var(--font-d); text-align: center; }
.aw-tops li span:last-child { font: 800 15px var(--font-d); color: var(--ok); }
.aw-p .ar-av { width: 44px; height: 44px; }
.aw-p.p2 .ar-av { background: linear-gradient(135deg, var(--opp), var(--a1)); }
.aw-pn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(13px, 1.3vw, 18px); }
.aw-ps { font: 900 clamp(22px, 2.6vw, 38px)/1 var(--font-d); }
.aw-p.p1 .aw-ps { color: var(--me); } .aw-p.p2 .aw-ps { color: var(--opp); }
.aw-p.lock .ar-av { box-shadow: 0 0 0 3px var(--ok), 0 0 16px var(--ok); }
.aw-p.helped .ar-av::after { content: "HELP!"; position: absolute; transform: translateY(26px); font: 900 9px var(--font-d); color: #fff; background: var(--help); padding: 1px 4px; border-radius: 4px; }
.aw-mid { text-align: center; }
.aw-vs { font: 900 clamp(18px, 2vw, 28px) var(--font-d); color: var(--gold); }
.aw-meta { font: 800 11px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.aw-q { font: 800 clamp(16px, 1.7vw, 26px)/1.25 var(--font-b); text-align: center; margin: 0; }
.aw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aw-opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 75%, #000); font: 700 clamp(12px, 1.2vw, 17px)/1.2 var(--font-b); min-height: 44px; }
.aw-opt.o0 { --c: var(--a0); } .aw-opt.o1 { --c: var(--a1); } .aw-opt.o2 { --c: var(--a2); } .aw-opt.o3 { --c: var(--a3); }
.aw-opt .ar-ltr { width: 24px; height: 24px; font-size: 12px; }
.aw-opts.reveal .aw-opt.wrong { opacity: .3; }
.aw-opts.reveal .aw-opt.right { background: linear-gradient(135deg, #12B981, var(--ok)); color: #04301E; animation: ar-right .7s both; }
.aw-opt .ar-picks { margin-left: auto; }
.aw-race { display: grid; gap: 10px; align-content: center; flex: 1; }
.aw-race .ar-lane { height: 36px; border-radius: 18px; }
.aw-race .ar-runner { width: 34px; height: 34px; font-size: 15px; left: calc(var(--p, 0) * (100% - 34px)); }
.aw-race-n { display: flex; justify-content: space-between; font: 800 14px var(--font-d); color: var(--muted); }
.aw-result { flex: 1; display: grid; place-items: center; text-align: center; }
.aw-empty { grid-column: 1 / -1; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 20px; }
.aw-empty b { display: block; font: 900 34px var(--font-d); color: var(--text); text-transform: uppercase; margin-bottom: 8px; }
.aw-intro { flex: 1; display: grid; place-items: center; }
.aw-intro .aw-vs { font-size: clamp(40px, 6vw, 90px); animation: ar-vs-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.aw-tile .ar-timer { height: 6px; }
.aw-grid.n1 .aw-tile { justify-content: center; padding: 3vh 4vw; gap: 3vh; }
.aw-grid.n1 .aw-q { font-size: clamp(22px, 3vw, 46px); }
.aw-grid.n1 .aw-opt { font-size: clamp(16px, 1.8vw, 28px); min-height: 8vh; padding: 12px 18px; }
.aw-grid.n1 .aw-ps { font-size: clamp(30px, 4vw, 64px); }
.aw-grid.n1 .aw-pn { font-size: clamp(16px, 1.8vw, 28px); }
.aw-grid.n1 .aw-p .ar-av { width: 72px; height: 72px; font-size: 30px; }
.aw-grid.n1 .ar-timer { height: 10px; }
.aw-grid.n2 .aw-tile { justify-content: center; }

/* ---------- More modes ---------- */
.center { text-align: center; }
.m-buzzer .ar-mode-ico { background: linear-gradient(135deg, #FF5468, #FF8A3D); }
.m-tug .ar-mode-ico { background: linear-gradient(135deg, #12C2A8, #3D9BFF); }
.m-strikes .ar-mode-ico { background: linear-gradient(135deg, #1E5F3A, #C8102E); box-shadow: inset 0 0 0 2px rgba(255, 201, 60, .5); }
.m-sudden .ar-mode-ico { background: linear-gradient(135deg, #3A3150, #8E1B3A); box-shadow: inset 0 0 0 2px rgba(255, 84, 104, .6); }
.m-wager .ar-mode-ico { background: linear-gradient(135deg, #E5B800, #12B981); color: #1E1500; }
.m-draft .ar-mode-ico { background: linear-gradient(135deg, #7C5CFF, #E9478F); }
.ar-rules { margin: 6px 0 0; color: var(--text); font-weight: 600; max-width: 26em; }
.ar-side-score.drop { animation: ar-dropscore .6s ease; }
@keyframes ar-dropscore { 30% { transform: scale(.8); color: var(--no); } }
.ar-locked.miss { color: var(--no); }
.ar-status { text-align: center; font-weight: 800; min-height: 1.4em; margin: 0; color: var(--muted); }
.ar-status.good { color: var(--ok); animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-status.bad { color: var(--no); animation: ar-shake .5s ease both; }
.ar-mode-line { text-align: center; font: 800 18px var(--font-b); margin: 0; color: var(--gold); }
.ar-plus.minus, .ar-float.minus { color: var(--no); text-shadow: 0 0 14px rgba(255, 84, 104, .7); }
.ar-battle.solo .ar-bar { grid-template-columns: 1fr auto 1fr; }

/* Daily Duel card in the lobby */
.ar-daily { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 18px; border-radius: 20px; border: 1px solid rgba(255, 201, 60, .5);
  background: linear-gradient(135deg, rgba(255, 201, 60, .18), rgba(124, 92, 255, .14)); animation: ar-rise .5s ease both; }
.ar-daily::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 60, .35), transparent 70%); }
.ar-daily-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ar-daily-tag { font: 900 13px var(--font-d); text-transform: uppercase; letter-spacing: .12em; color: #2A1D00; background: var(--gold); padding: 4px 10px; border-radius: 8px; }
.ar-daily-n { color: var(--muted); font-size: 13px; font-weight: 700; }
.ar-daily-big { font: 900 22px/1.2 var(--font-b); margin: 0; }
.ar-daily-sub { margin: 0; color: var(--muted); }
.ar-daily-sub.small { font-size: 13px; }
.ar-daily .ar-btn { justify-self: start; position: relative; z-index: 1; }
.ar-daily-score { font: 900 clamp(64px, 20vw, 110px)/1 var(--font-d); margin: 0; color: var(--gold); text-shadow: 0 0 30px rgba(255, 201, 60, .6); animation: ar-pop .7s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
.ar-board.small { width: 100%; max-width: 480px; }
.ar-board.small .ar-row { grid-template-columns: 34px 1fr auto auto; padding: 8px 10px; }

/* Tug of War rope */
.ar-rope { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.ar-rope-end { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--font-d); color: #fff; }
.ar-rope-end.me { background: var(--me); } .ar-rope-end.opp { background: var(--opp); }
.ar-rope-line { position: relative; height: 12px; border-radius: 6px; background: repeating-linear-gradient(115deg, #C99A5B 0 6px, #8F6534 6px 12px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.ar-rope-line i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: rgba(255, 255, 255, .25); }
.ar-rope-line::before { content: ""; position: absolute; left: 50%; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--gold); border-radius: 2px; }
.ar-knot { position: absolute; top: 50%; left: calc(var(--p, .5) * 100%); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 4px solid var(--no);
  box-shadow: 0 0 14px rgba(255, 255, 255, .6); transition: left .8s cubic-bezier(.3, 1.6, .4, 1); }
.ar-rope.lead-me .ar-knot { border-color: var(--me); } .ar-rope.lead-opp .ar-knot { border-color: var(--opp); }

/* Category Draft */
.ar-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-cat { position: relative; display: grid; gap: 4px; min-height: 74px; padding: 14px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--card2); color: var(--text); font: 800 16px/1.2 var(--font-b);
  text-align: left; cursor: pointer; animation: ar-opt-in .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .15s, background .2s, border-color .2s; }
.ar-cat:active:not(:disabled) { transform: scale(.97); }
.ar-cat:disabled { cursor: default; }
.ar-cat-tag { font: 900 11px var(--font-d); text-transform: uppercase; letter-spacing: .1em; }
.ar-cat.pick { border-color: var(--ok); background: rgba(46, 229, 157, .18); box-shadow: 0 0 20px rgba(46, 229, 157, .35); }
.ar-cat.pick .ar-cat-tag { color: var(--ok); }
.ar-cat.ban { border-color: var(--no); background: rgba(255, 84, 104, .15); }
.ar-cat.ban .ar-cat-tag { color: var(--no); }
.ar-cat.ban .ar-cat-t { text-decoration: line-through; opacity: .8; }
.ar-cats.show .ar-cat { cursor: default; }
.ar-cats.show .ar-cat.banned { opacity: .4; }
.ar-cats.show .ar-cat.banned .ar-cat-t { text-decoration: line-through; }
.ar-cats.show .ar-cat.chosen { border-color: var(--gold); background: rgba(255, 201, 60, .18); animation: ar-kept .8s ease .5s both; }
.ar-draft-lines { display: grid; gap: 8px; }
.ar-draft-line { display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--card); border-left: 5px solid var(--me); }
.ar-draft-line.opp { border-left-color: var(--opp); }
.ar-draft-line span { color: var(--muted); font-size: 13px; }
.ar-draft-line b { font: 800 19px var(--font-b); }
.ar-draft-line small { color: var(--muted); }

/* Wager */
.ar-wager-cat { display: grid; justify-items: center; gap: 4px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(229, 184, 0, .2), rgba(18, 185, 129, .15)); border: 1px solid rgba(229, 184, 0, .5); animation: ar-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-wager-cat span { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.ar-wager-cat b { font: 900 clamp(24px, 7vw, 34px) var(--font-d); text-align: center; }
.ar-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-bet { display: grid; justify-items: center; gap: 2px; padding: 14px 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer;
  animation: ar-opt-in .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ar-bet b { font: 900 26px var(--font-d); }
.ar-bet span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ar-bet.allin { border-color: rgba(255, 84, 104, .6); background: linear-gradient(135deg, rgba(255, 84, 104, .25), rgba(255, 138, 61, .2)); }
.ar-bet.on { border-color: var(--gold); background: rgba(255, 201, 60, .25); transform: scale(1.04); box-shadow: 0 0 22px rgba(255, 201, 60, .45); }
.ar-betchip { align-self: center; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(255, 201, 60, .18); color: var(--gold); font: 800 14px var(--font-d); }
.ar-betchip.warn { background: rgba(255, 84, 104, .18); color: var(--no); }

/* Watch gallery: phases and the rope */
.aw-phase { flex: 1; display: grid; place-items: center; text-align: center; font: 800 clamp(16px, 1.8vw, 26px) var(--font-b); color: var(--muted); }
.aw-phase b { display: block; color: var(--gold); font: 900 clamp(20px, 2.4vw, 36px) var(--font-d); margin-top: 6px; }
.aw-tile .ar-rope { padding: 6px 8px; }

/* HELP! tip on the waiting screens, in the bottom half */
.ar-tip { margin-top: auto; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 18px; border-radius: 22px;
  border: 2px solid rgba(255, 59, 59, .55); background: linear-gradient(180deg, rgba(255, 59, 59, .12), rgba(255, 59, 59, .04)); animation: ar-rise .6s ease .3s both; }
.ar-tip .ar-help.demo { margin: 0 0 4px; }
.ar-tip-t { margin: 0; font: 800 19px/1.35 var(--font-b); }
.ar-tip-sub { margin: 0; color: var(--muted); font-size: 14px; }
.ar-search + .ar-tip { margin-top: 3vh; }
.ar-search .ar-radar { width: min(200px, 26vh); height: min(200px, 26vh); }
.ar-search { margin-top: 2vh; }

/* Reading time: the question, lots of room, then a number in a circle counting down */
.st-read { align-items: center; }
.st-read .ar-prompt.zoom { padding: 5vh 0 0; }
.ar-cdring { position: relative; width: min(232px, 58vw); aspect-ratio: 1; margin-top: 7vh; display: grid; place-items: center; }
.ar-cdring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-cdring circle { fill: none; stroke-width: 6; }
.ar-cdring .bg { stroke: rgba(255, 255, 255, .12); }
.ar-cdring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; }
.ar-cdring b { position: relative; font: 900 clamp(64px, 26vw, 104px)/1 var(--font-d); color: #fff; text-shadow: 0 0 26px rgba(255, 201, 60, .6); }
.ar-cdring b.tick { animation: ar-cdtick .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ar-cdtick { from { transform: scale(1.5); opacity: .3; } to { transform: none; opacity: 1; } }

/* Room between the score bar and the question */
.st-read, .st-answer, .st-reveal, .st-race, .st-wager, .st-draft { padding-top: max(40px, 7vh); }
.st-read .ar-prompt.zoom { padding-top: 2vh; }

/* Room between the answers and the CORRECT / WRONG verdict */
.st-reveal .ar-outcome { margin-top: max(56px, 9vh); }

/* Room between the answers and HELP! */
.st-answer .ar-help, .ar-race-q .ar-help { margin-top: 7vh; }

/* Category Battle: the category picker, and the chosen category wherever the battle shows. */
.m-category .ar-mode-ico { background: linear-gradient(135deg, #12C2A8, #7C5CFF); }
.ar-catpick { display: grid; gap: 12px; }
.ar-catpick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ar-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 800 14px var(--font-b); cursor: pointer; }
.ar-back svg { width: 20px; height: 20px; }
.ar-back:hover { background: var(--card2); }
.ar-catpick-h { font-size: clamp(28px, 8vw, 44px); }
.ar-catpick .ar-wait.small, .ar-catgrid .ar-wait.small { margin: 24px 0; grid-column: 1 / -1; }
.ar-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 4px; }
@media (max-width: 420px) { .ar-catgrid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.ar-catbtn { --c1: var(--a0); --c2: var(--me); position: relative; display: grid; align-content: end; gap: 4px; min-height: 92px; padding: 26px 12px 12px; border-radius: 16px; text-align: left; cursor: pointer; overflow: hidden;
  color: var(--text); font: inherit; border: 1.5px solid color-mix(in srgb, var(--c2) 45%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c1) 30%, transparent), rgba(255, 255, 255, .03) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); animation: ar-rise .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(min(var(--i, 0), 20) * 25ms);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ar-catbtn::before { content: ""; position: absolute; top: 12px; left: 12px; width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px var(--c2); }
.ar-catbtn.c1 { --c1: var(--a1); --c2: var(--gold); }
.ar-catbtn.c2 { --c1: var(--a2); --c2: var(--ok); }
.ar-catbtn.c3 { --c1: var(--a3); --c2: var(--opp); }
.ar-catbtn.c4 { --c1: var(--a4); --c2: var(--me); }
.ar-catbtn.c5 { --c1: var(--a5); --c2: var(--a1); }
.ar-catbtn:hover { transform: translateY(-2px); border-color: var(--c2); box-shadow: 0 0 22px color-mix(in srgb, var(--c2) 40%, transparent); }
.ar-catbtn:active { transform: scale(.97); }
.ar-catbtn.go { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 60, .5), 0 0 30px rgba(255, 201, 60, .45); }
.ar-catbtn.last { border-color: var(--gold); }
.ar-catbtn-t { font: 800 17px/1.15 var(--font-d); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 420px) { .ar-catbtn-t { font-size: 15px; letter-spacing: 0; } }
.ar-catbtn-n { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ar-catbtn-last { position: absolute; top: 8px; left: 42px; font: 800 10px var(--font-b); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.ar-catbtn-wait { position: absolute; top: 8px; right: 10px; font: 800 10px var(--font-b); text-transform: uppercase; letter-spacing: .06em; color: var(--ok); background: rgba(11, 8, 32, .85); padding: 2px 6px; border-radius: 6px; }
.ar-catbtn-wait:empty { display: none; }
.ar-catbtn.hot { border-color: var(--ok); }
.ar-catbtn.hot .ar-catbtn-wait::before { content: "\25CF "; animation: ar-blink 1s infinite; }
.ar-topic { margin: 6px 0 0; font: 900 20px/1.1 var(--font-d); text-transform: uppercase; letter-spacing: .04em; color: var(--gold); text-shadow: 0 0 18px rgba(255, 201, 60, .45); text-align: center; overflow-wrap: anywhere; }
.ar-topic.big { font-size: clamp(28px, 8vw, 40px); }
.ar-search .ar-topic.big { margin: 4px 0 2px; }
.ar-bar-mode.topic { font-size: 13px; letter-spacing: .06em; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 12px rgba(255, 201, 60, .45); }
.aw-topic { font: 900 13px var(--font-d); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-top: 2px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-catbtn-t { font-size: clamp(13px, 4vw, 17px); overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 0; }
@media (max-width: 420px) { .ar-catbtn-t { letter-spacing: 0; } }

/* 3 Strikes: the count, like a ballpark scoreboard. Dark panel, an S, and three lamps that light up red. */
.ar-strikes { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 7px; border-radius: 7px; background: #07150E; border: 1px solid rgba(255, 255, 255, .12); width: max-content; }
.ar-side.opp .ar-strikes { justify-self: end; flex-direction: row-reverse; }
.ar-strk-s { font: 900 11px/1 var(--font-d); color: var(--gold); font-style: normal; margin-right: 2px; }
.ar-side.opp .ar-strk-s { margin: 0 0 0 2px; }
.ar-strk-dot { width: 11px; height: 11px; border-radius: 50%; background: #23302A; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }
.ar-strk-dot.on { background: radial-gradient(circle at 35% 35%, #FF8A8A, #E8112D 60%, #8E0B1C); box-shadow: 0 0 8px rgba(255, 40, 60, .9), 0 0 2px #fff inset; }
.ar-strk-dot.pop { animation: ar-strk-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ar-strk-pop { 0% { transform: scale(.3); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
.ar-strikes.is-out { border-color: var(--no); animation: ar-blink .8s 3; }
@media (prefers-reduced-motion: reduce) { .ar-strk-dot.pop, .ar-strikes.is-out { animation: none; } }
/* Watch page */
.aw-p .ar-strikes { margin-top: 4px; }

/* Challenge a friend */
.ar-friend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(41, 211, 255, .1), rgba(124, 92, 255, .12)); }
.ar-friend-t { display: grid; gap: 3px; flex: 1 1 220px; min-width: 0; }
.ar-friend-t > b { font: 800 18px var(--font-d); text-transform: uppercase; letter-spacing: .04em; }
.ar-friend-code { font-size: 15px; color: var(--muted); }
.ar-friend-code b { color: var(--gold); font: 800 18px var(--font-d); letter-spacing: .1em; }
.ar-friend-sub { font-size: 13px; color: var(--muted); }
.ar-friend .ar-btn { flex: 0 0 auto; }
.ar-friend-note { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--a1); }
.ar-chsetup { display: grid; gap: 12px; }
.ar-chsetup .ar-h2 { margin: 8px 0 0; }
.ar-chmodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ar-chmode { appearance: none; text-align: left; padding: 12px 14px; min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 800 15px var(--font-b); cursor: pointer; }
.ar-chmode:hover { border-color: rgba(255, 255, 255, .35); }
.ar-chmode.is-on { border-color: var(--me); background: rgba(41, 211, 255, .14); box-shadow: 0 0 0 3px rgba(41, 211, 255, .2); }
.ar-chcat { display: grid; gap: 6px; font-weight: 700; color: var(--muted); }
.ar-chcat select { font-size: 17px; }
.ar-chform { display: flex; gap: 8px; }
.ar-chform .ar-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-d); }
.ar-chrecent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.ar-chip { appearance: none; border: 1px solid var(--line); background: var(--card2); color: var(--text); font: 700 14px var(--font-b); padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.ar-chor { margin: 0; text-align: center; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.ar-chsetup > .ar-btn { justify-self: center; }
.ar-chsetup .ar-err { margin: 0; }
.ar-chlink { display: flex; gap: 8px; width: min(520px, 100%); flex-wrap: wrap; }
.ar-chlink .ar-input { flex: 1 1 240px; min-width: 0; font-size: 14px; }
.ar-chbox { border-color: var(--gold); box-shadow: 0 0 50px rgba(255, 201, 60, .35); display: grid; justify-items: center; gap: 6px; }
.ar-chbox .ar-modal-t { margin: 0; }
.ar-chwho { margin: 4px 0 0; font: 800 22px var(--font-d); display: flex; align-items: center; gap: 6px; }
.ar-chrating { margin: 0; color: var(--muted); font-size: 14px; }
.ar-chbox .ar-acts { margin-top: 8px; }
@media (max-width: 480px) {
  .ar-chform { flex-direction: column; }
  .ar-friend .ar-btn { width: 100%; }
}

/* Desktop: the battle modes in two columns. */
@media (min-width: 720px) {
  .ar-mode-pages, .ar-picks2 { grid-template-columns: 1fr 1fr; }
  .ar-mode { align-items: flex-start; padding: 16px; }
  .ar-mode-txt b { font-size: 18px; padding-right: 64px; }
}

/* Tug of War: the extra pull for the faster right answer, shown next to the usual +2. */
.ar-plus.speed { font-size: 17px; padding: 4px 10px; border-radius: 999px; background: rgba(41, 211, 255, .14); border: 1px solid rgba(41, 211, 255, .5); color: var(--me); animation-delay: .45s; }

/* Final Bet: the last question's betting screen gets a bigger moment. */
.st-final .ar-final-tag { margin: 0 auto; padding: 6px 18px; border-radius: 999px; font: 900 clamp(22px, 6vw, 30px) var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: #2A1A00;
  background: linear-gradient(135deg, #FFE27A, var(--gold) 45%, #E89B00); box-shadow: 0 0 30px rgba(255, 201, 60, .55); animation: ar-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; width: max-content; }
.st-final .ar-final-score { margin: 0; text-align: center; font-weight: 700; color: var(--muted); }
.st-final .ar-bet.allin { grid-column: 1 / -1; }
.m-final .ar-mode-ico { background: linear-gradient(135deg, #E89B00, #7C5CFF); }

/* ---------- Kill Shot ---------- */
.m-killshot .ar-mode-ico { background: linear-gradient(135deg, #8E1B3A, #FF5468); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
/* The arsenal under each score: a crosshair with 3 lights, and the Nuke count. */
.ar-arms { display: inline-flex; gap: 6px; margin-top: 3px; width: max-content; }
.ar-side.opp .ar-arms { justify-self: end; flex-direction: row-reverse; }
.ar-arm { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 7px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); color: var(--muted); }
.ar-arm svg { width: 13px; height: 13px; }
.ar-arm-pip { width: 7px; height: 7px; border-radius: 50%; background: #2A2340; }
.ar-arm-pip.on { background: var(--no); box-shadow: 0 0 6px var(--no); }
.ar-arm.ks.ready { color: #fff; border-color: var(--no); background: rgba(255, 84, 104, .25); animation: ar-armglow 1.2s ease-in-out infinite; }
.ar-arm-n { font: 800 11px var(--font-d); min-width: 18px; }
.ar-arm.nk.ready { color: #2A1A00; background: linear-gradient(135deg, #FFE27A, var(--gold)); border-color: #fff; animation: ar-armglow 1s ease-in-out infinite; }
.ar-arm.nk.spent { opacity: .35; }
@keyframes ar-armglow { 50% { box-shadow: 0 0 12px currentColor; } }
/* Fire buttons, under the question. */
.ar-ksbar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ar-ksbtn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; min-height: 50px; border-radius: 999px; cursor: pointer; border: 2px solid #fff;
  font: 900 17px var(--font-d); text-transform: uppercase; letter-spacing: .05em; color: #fff; background: linear-gradient(135deg, #C8102E, var(--no)); box-shadow: 0 0 24px rgba(255, 84, 104, .6); animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-ksbtn svg { width: 22px; height: 22px; }
.ar-ksbtn.nuke { color: #2A1A00; background: linear-gradient(135deg, #FFE27A, var(--gold) 50%, #E89B00); box-shadow: 0 0 30px rgba(255, 201, 60, .7); }
.ar-ksbtn:disabled { opacity: .45; cursor: default; }
.ar-ksbtn[hidden] { display: none; }
/* Sitting a question out. */
.ar-hit { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 20px; text-align: center; background: rgba(200, 16, 46, .18); border: 2px solid var(--no); animation: ar-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-hit-ico svg { width: 54px; height: 54px; color: var(--no); animation: ar-spin 6s linear infinite; }
.ar-hit b { font: 900 28px var(--font-d); text-transform: uppercase; color: var(--no); }
.ar-hit span { color: var(--text); font-weight: 600; }
/* The full-screen moment when one is fired. */
.ar-blast { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 16, 46, .55), rgba(5, 3, 18, .85) 70%); animation: ar-fade .2s ease both; }
.ar-blast.out { opacity: 0; transition: opacity .5s ease; }
.ar-blast-ico svg { width: 120px; height: 120px; color: #fff; filter: drop-shadow(0 0 20px var(--no)); animation: ar-zoomin .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-blast-t { font: 900 clamp(46px, 14vw, 96px)/1 var(--font-d); color: #fff; text-shadow: 0 0 30px var(--no); letter-spacing: .04em; animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.ar-blast-sub { font: 800 18px var(--font-b); color: #fff; max-width: 420px; }
.ar-blast.nuke { background: radial-gradient(circle, rgba(255, 226, 122, .95), rgba(255, 140, 0, .7) 35%, rgba(5, 3, 18, .9) 75%); animation: ar-nukeflash .7s ease both; }
.ar-blast.nuke .ar-blast-ico svg { color: #2A1A00; filter: none; animation: ar-zoomin .5s cubic-bezier(.2, 1.4, .4, 1) both, ar-spin 3s linear infinite; }
.ar-blast.nuke .ar-blast-t { color: #2A1A00; text-shadow: 0 0 30px #fff; }
.ar-blast.nuke .ar-blast-sub { color: #2A1A00; }
@keyframes ar-zoomin { from { transform: scale(3); opacity: 0; } }
@keyframes ar-nukeflash { 0% { background: #fff; } }
.ar-battle.shake { animation: ar-shake .6s ease 2; }
@media (prefers-reduced-motion: reduce) { .ar-blast, .ar-blast *, .ar-arm, .ar-hit-ico svg { animation: none !important; } }
.ar-ksbar { position: sticky; bottom: 12px; z-index: 6; }
.ar-blast { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ar-blast.nuke { background: radial-gradient(circle, rgba(255, 236, 160, .98), rgba(255, 170, 30, .92) 40%, rgba(40, 14, 0, .92) 80%); }
/* Four-digit scores fit beside the avatar on narrow phones. */
@media (max-width: 420px) { .ar-side-score { font-size: clamp(17px, 5.2vw, 24px); } }

/* Phones: the scoreboard drops the round avatars (the names are right there) so each side's score,
   strikes and Kill Shot arsenal get the full width and nothing sits on top of them. */
@media (max-width: 520px) {
  .ar-bar { gap: 6px; padding: 8px 10px; }
  .ar-bar .ar-side > .ar-av { display: none; }
  .ar-side-info { width: 100%; }
  .ar-side.opp .ar-side-info { justify-items: end; }
  .ar-arms { gap: 4px; }
  .ar-arm { padding: 2px 4px; gap: 2px; }
  .ar-arm-pip { width: 6px; height: 6px; }
  .ar-strikes { gap: 3px; padding: 3px 5px; }
  .ar-strk-dot { width: 9px; height: 9px; }
}
/* The banner version, used while a question is up or about to be. */
.ar-blast.mini { inset: auto 12px auto 12px; top: 12px; margin: 0 auto; max-width: 520px; place-content: initial; justify-items: start; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px;
  padding: 10px 16px; border-radius: 18px; text-align: left; background: rgba(60, 6, 16, .94); border: 2px solid var(--no); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 84, 104, .5); backdrop-filter: none; -webkit-backdrop-filter: none; animation: ar-dropin .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-blast.mini .ar-blast-ico { grid-row: span 2; }
.ar-blast.mini .ar-blast-ico svg { width: 40px; height: 40px; animation: none; }
.ar-blast.mini .ar-blast-t { font-size: 24px; animation: none; }
.ar-blast.mini .ar-blast-sub { font-size: 14px; }
.ar-blast.mini.nuke { background: linear-gradient(135deg, #FFE27A, var(--gold) 50%, #E89B00); border-color: #fff; }
.ar-blast.mini.nuke .ar-blast-ico svg { animation: none; }
@keyframes ar-dropin { from { transform: translateY(-120%); opacity: 0; } }
/* While a full-screen Kill Shot or Nuke plays the battle is paused, so taps wait too. */
.ar-blast:not(.mini) { pointer-events: auto; }

/* ---------- Double Down ---------- */
.m-double .ar-mode-ico { background: linear-gradient(135deg, #12B981, #E5B800); }
.ar-dbls { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; width: max-content; }
.ar-side.opp .ar-dbls { justify-self: end; flex-direction: row-reverse; }
.ar-dbl-chip { font: 900 10px/1 var(--font-d); font-style: normal; padding: 3px 5px; border-radius: 6px; color: #04301E; background: linear-gradient(135deg, var(--ok), var(--gold)); }
.ar-dbl-chip.used { color: var(--muted); background: rgba(255, 255, 255, .08); text-decoration: line-through; }
.ar-dbl-now { font: 900 11px var(--font-d); text-transform: uppercase; letter-spacing: .05em; color: var(--gold); animation: ar-blink .8s infinite; }
.ar-dbls.on .ar-dbl-chip:not(.used) { box-shadow: 0 0 10px var(--gold); }
.ar-dblbtn { display: grid; justify-items: center; gap: 2px; align-self: center; margin-top: 14px; padding: 10px 26px; border-radius: 999px; cursor: pointer; border: 3px solid #fff; color: #04301E;
  background: linear-gradient(135deg, var(--ok), var(--gold)); box-shadow: 0 6px 22px rgba(46, 229, 157, .4); animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
.ar-dbl-word { font: 900 20px var(--font-d); text-transform: uppercase; letter-spacing: .06em; }
.ar-dbl-sub { font: 700 12px var(--font-b); }
.ar-dblbtn.on { background: linear-gradient(135deg, #FFE27A, var(--gold) 50%, #E89B00); color: #2A1A00; box-shadow: 0 0 30px rgba(255, 201, 60, .8); animation: ar-armglow 1s ease-in-out infinite; }
.ar-dblbtn:disabled:not(.on) { opacity: .45; cursor: default; }
.ar-dblbtn[hidden] { display: none; }
.st-answer .ar-help + .ar-dblbtn { margin-top: 10px; }

/* ---------- Bigger battles (1v3 to 1v23) ---------- */
.ar-sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-sizes-l { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 4px; }
.ar-size { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 900 15px var(--font-d); padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.ar-size.is-on { border-color: var(--gold); background: rgba(255, 201, 60, .16); color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 60, .15); }
.ar-sizes-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; }
.ar-sizes-note:empty { display: none; }
.ar-mode-chip.big { font-size: 18px; padding: 6px 18px; color: var(--gold); }
.ar-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.ar-seat { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .25); }
.ar-seat.on { border: 0; background: linear-gradient(135deg, var(--me), var(--a0)); box-shadow: 0 0 10px rgba(41, 211, 255, .6); animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
/* Live ranking under the scoreboard. */
.ar-field { display: grid; gap: 6px; padding: 8px 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.ar-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ar-field-head b { font: 900 18px var(--font-d); color: var(--gold); }
.ar-field-head span { font-size: 13px; color: var(--ok); font-weight: 700; }
.ar-field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ar-field-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; font-size: 14px; padding: 2px 6px; border-radius: 8px; }
.ar-field-list li.me { background: rgba(41, 211, 255, .14); font-weight: 800; }
.ar-field-list li.gap { display: block; text-align: center; color: var(--muted); padding: 0; line-height: 1; }
.ar-field-list li.gone { opacity: .45; }
.ar-field-list .rk { font: 900 13px var(--font-d); color: var(--muted); text-align: right; }
.ar-field-list .nm { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-field-list .sc { font: 900 15px var(--font-d); }
/* Intro: everyone in the battle. */
.ar-group-vs { display: grid; justify-items: center; gap: 12px; }
.ar-group-vs .ar-big { margin: 0; }
.ar-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; width: 100%; }
.ar-group-p { display: grid; justify-items: center; gap: 4px; animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 40ms); }
.ar-group-p .nm { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-group-p.me .nm { color: var(--me); font-weight: 800; }
.ar-av.opp { background: linear-gradient(135deg, var(--opp), var(--a1)); }
/* Result: the full standings. */
.ar-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.ar-standings li { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  animation: ar-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 50ms); }
.ar-standings .rk { font: 900 20px var(--font-d); color: var(--muted); text-align: center; }
.ar-standings .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-standings .nm small { color: var(--muted); font-weight: 600; }
.ar-standings .cr { color: var(--muted); font-size: 13px; }
.ar-standings .sc { font: 900 20px var(--font-d); }
.ar-standings li.me { border-color: var(--me); background: rgba(41, 211, 255, .12); }
.ar-standings li.t1 .rk { color: var(--gold); } .ar-standings li.t2 .rk { color: #C9D3E0; } .ar-standings li.t3 .rk { color: #E0A070; }
.ar-standings li.t1 { border-color: rgba(255, 201, 60, .6); }
.ar-standings li.gone { opacity: .5; }
@media (max-width: 480px) { .ar-standings .cr { display: none; } .ar-standings li { grid-template-columns: 30px 1fr auto; } }
.ar-field[hidden] { display: none; }
.ar-result-word .wd { display: inline-block; white-space: nowrap; }
.ar-result-word .wd { animation: none; }

/* ---------- Friends and hosted games ---------- */
.ar-friend-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.ar-btn-host { background: linear-gradient(135deg, var(--gold), #E89B00); color: #2A1A00; border: 0; box-shadow: 0 8px 24px rgba(255, 201, 60, .3); }
.ar-joinroom { display: flex; gap: 8px; flex-basis: 100%; }
.ar-joinroom .ar-input { flex: 1; min-width: 0; font-size: 17px; padding: 10px 14px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-d); }
.ar-joinroom .ar-btn { min-height: 46px; padding: 10px 16px; }
.ar-flist { flex-basis: 100%; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ar-flist .ar-err { margin: 0; }
.ar-flist-head b { font: 800 14px var(--font-d); text-transform: uppercase; letter-spacing: .06em; }
.ar-flist-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.ar-flist-ul li { display: grid; grid-template-columns: 10px 1fr auto auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-size: 14px; }
.ar-flist-ul li.empty { display: block; color: var(--muted); background: none; padding: 0; }
.ar-flist-ul .dot, .ar-invrow .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ar-flist-ul li.online .dot, .ar-invrow.online .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.ar-flist-ul .nm { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ar-flist-ul .st { font-size: 12px; color: var(--ok); }
.ar-x { appearance: none; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.ar-x:hover { color: var(--no); }
.ar-chip.online { border-color: rgba(46, 229, 157, .6); }
.ar-opengames { display: grid; gap: 8px; }
.ar-opengames .ar-h2 { margin: 0; }
.ar-og { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ar-og-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ar-og-t b { display: flex; align-items: center; gap: 6px; }
.ar-og-t span { font-size: 13px; color: var(--muted); }
.ar-og .ar-btn { min-height: 44px; padding: 8px 18px; }
/* Host a game */
.ar-host-body { display: grid; gap: 10px; }
.ar-host-body .ar-h2 { margin: 10px 0 0; }
.ar-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-pickchip { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 800 14px var(--font-b); padding: 9px 14px; border-radius: 999px; cursor: pointer; min-height: 42px; }
.ar-pickchip.is-on { border-color: var(--me); background: rgba(41, 211, 255, .16); box-shadow: 0 0 0 3px rgba(41, 211, 255, .15); }
.ar-chiprow.small .ar-pickchip { padding: 6px 12px; min-height: 36px; font-size: 13px; }
.ar-chiprow.cats { max-height: 260px; overflow: auto; padding: 2px; }
.ar-stepper { display: flex; align-items: center; gap: 12px; }
.ar-step { appearance: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: var(--card2); color: var(--text); font: 900 24px var(--font-d); cursor: pointer; }
.ar-step-n { font: 900 24px var(--font-d); min-width: 140px; text-align: center; }
.ar-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-whobtn { appearance: none; text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.ar-whobtn b { font: 900 18px var(--font-d); text-transform: uppercase; }
.ar-whobtn span { font-size: 13px; color: var(--muted); }
.ar-whobtn.is-on { border-color: var(--gold); background: rgba(255, 201, 60, .12); }
.ar-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; }
.ar-switch input { position: absolute; opacity: 0; }
.ar-switch i { flex: 0 0 auto; width: 50px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .15); position: relative; transition: background .2s; }
.ar-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ar-switch input:checked + i { background: var(--ok); }
.ar-switch input:checked + i::after { transform: translateX(22px); }
.ar-switch input:focus-visible + i { outline: 2px solid var(--me); outline-offset: 2px; }
.ar-switch span { display: grid; gap: 2px; }
.ar-switch small { color: var(--muted); font-size: 13px; }
.ar-invlist { display: grid; gap: 4px; max-height: 280px; overflow: auto; text-align: left; }
.ar-invrow { display: grid; grid-template-columns: auto 10px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); cursor: pointer; }
.ar-invrow input { width: 20px; height: 20px; accent-color: var(--me); }
.ar-invrow .nm { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.ar-invrow small { color: var(--ok); font-size: 12px; }
.ar-note.left { text-align: left; }
.ar-btn.big { min-height: 56px; font-size: 18px; margin-top: 8px; }
/* The room */
.ar-room { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ar-room .ar-h1 { margin: 0; }
.ar-room-sum { margin: 0; color: var(--muted); }
.ar-roomcode { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; width: 100%; padding: 18px; border-radius: 20px; background: rgba(0, 0, 0, .35); border: 2px solid var(--gold); }
.ar-roomcode-l { display: grid; justify-items: center; gap: 6px; }
.ar-roomcode .lbl { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.ar-roomcode .code { font: 900 clamp(44px, 13vw, 72px)/1 var(--font-d); letter-spacing: .12em; color: var(--gold); text-shadow: 0 0 24px rgba(255, 201, 60, .45); }
.ar-roomcode-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ar-qr { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; }
.ar-qr svg { width: 150px; height: 150px; }
.ar-qr[hidden] { display: none; }
.ar-room-how { margin: 0; color: var(--muted); font-size: 14px; }
.ar-room-players { width: 100%; }
.ar-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ar-room-p { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: var(--card); animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-room-p .nm { font-size: 13px; font-weight: 700; display: flex; gap: 4px; align-items: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-room-p .tag { font: 800 10px var(--font-d); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.ar-room-p.me { outline: 2px solid var(--me); }
.ar-room-p.invited, .ar-room-p.empty { background: transparent; border: 2px dashed var(--line); animation: none; }
.ar-room-p.invited .tag { color: var(--muted); }
.ar-room-p.empty .nm { color: var(--muted); font-weight: 600; font-size: 12px; white-space: normal; text-align: center; }
.ar-av.ghost { background: rgba(255, 255, 255, .08); color: var(--muted); box-shadow: none; }
.ar-room-wait { margin: 0; color: var(--muted); font-weight: 700; }
@media (max-width: 480px) { .ar-who { grid-template-columns: 1fr; } .ar-friend-btns .ar-btn { flex: 1; } }
.ar-friend .ar-joinroom .ar-btn { width: auto; flex: 0 0 auto; }
@media (max-width: 480px) { .ar-flist-ul .st { display: none; } .ar-flist-ul li { grid-template-columns: 10px 1fr auto auto; } }
.ar-pick.more { background: rgba(0, 0, 0, .55); width: auto; padding: 0 6px; border-radius: 999px; font-size: 11px; }
.ar-picks { flex-wrap: wrap; justify-content: flex-end; }
.st-board { display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 4vh; }
.st-board .ar-big { margin: 0; }
.st-board .ar-lead { margin: 0; }
.st-board .ar-timer { width: 100%; }

/* No letter circles in any game: names, flags and scores only. A player's picture does show. (The lobby keeps your own.) */
.ar-battle .ar-av:not(.has-img), .ar-vs-card .ar-av:not(.has-img), .ar-group-p .ar-av:not(.has-img), .ar-room-p .ar-av:not(.has-img), .ar-radar .ar-av:not(.has-img), .aw-p .ar-av:not(.has-img), .ar-chbox > .ar-av:not(.has-img) { display: none; }
.ar-room-p, .ar-group-p { padding: 12px 6px; }
/* The friend card buttons share the width on phones so neither runs off the screen. */
@media (max-width: 520px) {
  .ar-friend-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ar-friend-btns .ar-btn { width: 100%; min-width: 0; padding: 12px 10px; font-size: 15px; white-space: normal; }
}
.ar-room .ar-acts, .ar-host .ar-acts { animation: none; }
.ar-size { font-size: 14px; }
/* Double Down: the choice before the question. */
.ar-dblrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.ar-dblrow[hidden] { display: none; }
.ar-dblrow .ar-dblbtn { margin-top: 0; }
.ar-dblrow .ar-btn[hidden] { display: none; }
.ar-betchip.dbl { background: linear-gradient(135deg, #FFE27A, var(--gold)); color: #2A1A00; }
.m-lms .ar-mode-ico { background: linear-gradient(135deg, #7C5CFF, #FFC93C); }
.ar-hit.out { border-color: var(--muted); background: rgba(255, 255, 255, .06); }
.ar-hit.out b { color: var(--text); }

/* ---------- My stats ---------- */
.ar-stats { display: grid; gap: 10px; }
.ar-stats .ar-h1 { margin: 0; }
.ar-stats-body { display: grid; gap: 10px; }
.ar-stats-body .ar-h2 { margin: 14px 0 0; }
.ar-stats-body .ar-lead { margin: 0; color: var(--muted); }
.ar-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ar-tile { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); animation: ar-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 30ms); }
.ar-tile b { font: 900 26px/1.1 var(--font-d); }
.ar-tile span { font-size: 13px; color: var(--muted); }
.ar-tile.big b { color: var(--me); }
.ar-tile.good b { color: var(--ok); }
.ar-tile.bad b { color: var(--no); }
.ar-tile.gold b { color: var(--gold); }
.ar-stat-rows { display: grid; gap: 6px; }
.ar-stat-row { display: grid; grid-template-columns: 1.4fr repeat(3, auto); gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--card); font-size: 14px; }
.ar-stat-row b { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ar-stat-row span { color: var(--muted); text-align: right; }
.ar-stat-row.res-W .res { color: var(--ok); font-weight: 800; }
.ar-stat-row.res-L .res { color: var(--no); font-weight: 800; }
.ar-stat-row.res-D .res { color: var(--gold); font-weight: 800; }
.ar-stat-bars { display: grid; gap: 8px; }
.ar-stat-bar { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: 14px; }
.ar-stat-bar .b { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ar-stat-bar .b i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ok), var(--me)); }
.ar-stat-bar .v { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 480px) {
  .ar-tiles { grid-template-columns: 1fr 1fr; }
  .ar-stat-row { grid-template-columns: 1fr auto auto; font-size: 13px; }
  .ar-stat-row span:last-child { display: none; }
  .ar-stat-bar { grid-template-columns: 1fr; gap: 4px; }
}
.ar-tabs { flex-wrap: wrap; }
@media (max-width: 480px) { .ar-tabs .ar-tab { padding-left: 10px; padding-right: 10px; font-size: 14px; } }

/* ---------- 3 Strike Brawl ---------- */
.m-brawl .ar-mode-ico { background: linear-gradient(135deg, #1E5F3A, #C8102E 60%, #FFC93C); }
.ar-powers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.ar-betchip.power { background: linear-gradient(135deg, #C8102E, #FF5468); color: #fff; }
.ar-betchip.power, .ar-betchip.dbl { justify-self: center; width: fit-content; max-width: 100%; margin: 10px auto; padding: 8px 16px; border-radius: 999px; text-align: center; font-weight: 800; }
.ar-powers { gap: 14px; }
/* 3 Strike Brawl: the power plays before each question. */
.st-plays { display: grid; gap: 10px; }
.st-plays .ar-final-tag { margin: 0 auto; padding: 6px 18px; border-radius: 999px; font: 900 clamp(20px, 5.5vw, 28px) var(--font-d); text-transform: uppercase; letter-spacing: .08em;
  color: #2A1A00; background: linear-gradient(135deg, #FFE27A, var(--gold) 50%, #E89B00); width: max-content; max-width: 100%; text-align: center; animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.st-plays .ar-final-tag.b9 { background: linear-gradient(135deg, #1E5F3A, #2EE59D); color: #04301E; }
.ar-plays { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ar-play { appearance: none; display: grid; gap: 3px; text-align: left; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; animation: ar-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-play b { font: 900 16px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.ar-play span { font-size: 12px; color: var(--muted); }
.ar-play.p-gs b { color: var(--gold); } .ar-play.p-hr b { color: var(--no); } .ar-play.p-sf b { color: var(--me); } .ar-play.p-dh b { color: var(--ok); } .ar-play.p-cd b { color: var(--opp); } .ar-play.p-b9 b { color: var(--ok); }
.ar-play.on { border-color: var(--gold); background: rgba(255, 201, 60, .16); box-shadow: 0 0 20px rgba(255, 201, 60, .4); }
.ar-play.used { opacity: .35; text-decoration: line-through; }
.ar-play:disabled { cursor: default; }
.st-plays #ar-pb { justify-self: center; }
.ar-blast.mini.cd { border-color: var(--opp); background: rgba(60, 6, 40, .95); display: grid; grid-template-columns: 1fr; }
@media (max-width: 480px) { .ar-plays { grid-template-columns: 1fr 1fr; } .ar-play { padding: 10px; } .ar-play span { font-size: 11px; } }
.ar-targets { display: grid; gap: 8px; margin: 6px 0 10px; width: 100%; }
.ar-target { appearance: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.ar-target:hover { border-color: var(--no); }
.ar-target b { font-weight: 800; }
.ar-target span { color: var(--muted); font-size: 13px; }
/* Watch page: a bigger battle shows as a mini leaderboard. */
.aw-group { display: grid; gap: 8px; }
.aw-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aw-board li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); font-size: clamp(14px, 1.4vw, 20px); }
.aw-board li .rk { font: 900 1em var(--font-d); color: var(--muted); text-align: right; }
.aw-board li .nm { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.aw-board li b { font: 900 1.1em var(--font-d); color: var(--gold); }
.aw-board li:first-child { background: rgba(255, 201, 60, .14); }
.aw-board li.out { opacity: .45; }
.aw-board li.more { display: block; text-align: center; color: var(--muted); background: none; }
.aw-split[hidden] { display: none; }

/* 3 Strike Brawl: a cleaner Power Plays badge (centred text, even padding, the same glow as Final Bet), and power play cards in tidy, even rows. */
.st-plays .ar-final-tag { display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.1; font-size: clamp(18px, 5vw, 24px);
  letter-spacing: .08em; padding: 9px 22px 9px calc(22px + .08em); border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 26px rgba(255, 201, 60, .55), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.st-plays .ar-final-tag::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 35%, #fff, #E8E2D0 70%); box-shadow: inset 0 0 0 1.5px rgba(200, 16, 46, .8); }
.st-plays .ar-final-tag.b9 { border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 26px rgba(46, 229, 157, .5), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.ar-plays { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ar-play { flex: 0 1 calc(33.333% - 6px); min-height: 88px; align-content: start; }
@media (max-width: 560px) { .ar-play { flex-basis: calc(50% - 4px); min-height: 84px; } }

/* Hidden player and friend codes (secret.js): dots and a Show button. */
.mct-secret { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.mct-secret-v { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; }
.mct-secret-btn { appearance: none; border: 1px solid currentColor; background: transparent; color: inherit; opacity: .85; font: 700 12px/1 system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.mct-secret-btn:hover, .mct-secret-btn:focus-visible { opacity: 1; }

/* Party modes: Heist, Hot Potato, King of the Hill, Bounty Hunter, Mystery Box, Speed Chess, Pick Your Poison, Survivor Vote, Ladder Climb, Blackout */
.m-heist .ar-mode-ico { background: linear-gradient(135deg, #1B7F5B, #FFC93C); }
.m-potato .ar-mode-ico { background: linear-gradient(135deg, #FF3B3B, #FF8A3D 60%, #FFC93C); }
.m-king .ar-mode-ico { background: linear-gradient(135deg, #7C5CFF, #E5B800); }
.m-bounty .ar-mode-ico { background: linear-gradient(135deg, #8A4B1F, #E39A5B); }
.m-mystery .ar-mode-ico { background: linear-gradient(135deg, #E9478F, #7C5CFF 60%, #29D3FF); }
.m-chess .ar-mode-ico { background: linear-gradient(135deg, #2A2F45, #A9A3C9); }
.m-poison .ar-mode-ico { background: linear-gradient(135deg, #12C2A8, #6BDB3A); }
.m-survivor .ar-mode-ico { background: linear-gradient(135deg, #FF8A3D, #C8102E); }
.m-ladder .ar-mode-ico { background: linear-gradient(135deg, #3D9BFF, #2EE59D); }
.m-blackout .ar-mode-ico { background: linear-gradient(135deg, #000, #3A3354); border: 1px solid var(--line); }
.ar-pstrip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 0; }
.ar-pstrip[hidden] { display: none; }
.ar-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 800 13px var(--font-d); color: var(--text); }
.ar-pchip.hot { border-color: var(--gold); background: rgba(255, 201, 60, .18); color: var(--gold); }
.ar-pchip.bomb.hot, .ar-pchip.dark.hot, .ar-pchip.bounty.hot { border-color: var(--no); background: rgba(255, 84, 104, .18); color: #FFB3BD; animation: ar-pulse-hot 1.1s ease-in-out infinite; }
.ar-pchip.vault { color: var(--gold); }
.ar-pchip.clock { font-variant-numeric: tabular-nums; }
.ar-pchip.clock.me { border-color: var(--me); color: var(--me); }
.ar-pchip.clock.low { border-color: var(--no); color: var(--no); }
@keyframes ar-pulse-hot { 50% { box-shadow: 0 0 16px rgba(255, 84, 104, .55); } }
.ar-hearts { display: inline-flex; gap: 3px; }
.ar-hearts i { width: 12px; height: 11px; background: rgba(255, 255, 255, .18); clip-path: path('M6 11 1 6A3 3 0 0 1 6 2a3 3 0 0 1 5 4z'); }
.ar-hearts i.on { background: var(--no); }
.ar-ladder { display: inline-flex; gap: 3px; align-items: flex-end; }
.ar-ladder i { width: 10px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.ar-ladder i.safe { box-shadow: inset 0 -3px 0 var(--gold); }
.ar-ladder i.on { background: var(--ok); }
.ar-opt.dark { background: #000 !important; border-color: #2A2440 !important; }
.ar-opt.dark .ar-opt-t { visibility: hidden; }
.ar-opt.dark::after { content: "?"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 26px var(--font-d); color: #3A3354; }
.ar-play.p-pe b { color: var(--ok); } .ar-play.p-pm b { color: var(--gold); } .ar-play.p-ph b { color: var(--no); }
.ar-target.on { border-color: var(--no); background: rgba(255, 84, 104, .18); }
.ar-blast.mini.party { display: grid; grid-template-columns: 1fr; border-color: var(--gold); background: rgba(30, 20, 70, .96); }
.ar-blast.mini.party.k-boom { border-color: var(--no); background: rgba(80, 8, 20, .96); }
.ar-blast.mini.party.k-voted { border-color: var(--opp); }
.ar-bigclock { font-size: 20px; font-variant-numeric: tabular-nums; }

/* After the player count changes, the cards show at once (no rise animation to wait for). */
.ar-modes.settled .ar-mode { animation: none; }

/* Hangman: a gallows for you (and your opponent), one body part per wrong answer. */
.m-hangman .ar-mode-ico { background: linear-gradient(135deg, #5A3A1E, #A9A3C9); }
.ar-hangrow { display: flex; justify-content: center; gap: 14px; margin: 10px 0 0; }
.ar-hangrow[hidden] { display: none; }
.ar-gallows { position: relative; display: grid; justify-items: center; gap: 2px; width: 120px; padding: 8px 8px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ar-gallows.me { border-color: rgba(41, 211, 255, .45); }
.ar-gallows svg { width: 84px; height: 92px; overflow: visible; }
.ar-gallows .gw { fill: none; stroke: #C9A26B; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ar-gallows .hp { fill: none; stroke: var(--text); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ar-gallows .hp.on { stroke-dashoffset: 0; opacity: 1; }
.ar-gallows .hp.draw { animation: ar-hang-draw .7s ease-out both; }
@keyframes ar-hang-draw { from { stroke-dashoffset: 1; opacity: 1; stroke: var(--no); } to { stroke-dashoffset: 0; opacity: 1; } }
.ar-gallows.dead .hp { stroke: var(--no); }
.ar-gallows.dead svg { animation: ar-hang-sway 2.4s ease-in-out infinite; transform-origin: 70% 8%; }
@keyframes ar-hang-sway { 50% { transform: rotate(3deg); } }
.ar-gallows-n { font: 800 12px var(--font-d); color: var(--muted); }
.ar-gallows.dead .ar-gallows-n { color: var(--no); text-transform: uppercase; }
.ar-gallows-name { font: 800 13px var(--font-d); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ar-gallows { width: 112px; padding: 6px 6px 4px; } .ar-gallows svg { width: 76px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .ar-gallows .hp.draw, .ar-gallows.dead svg { animation: none; } }
/* Watch: Hangman gallows under the players. */
.aw-hang { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aw-hang .ar-gallows { width: clamp(78px, 7vw, 120px); padding: 6px 6px 4px; }
.aw-hang .ar-gallows svg { width: 100%; height: auto; max-height: 13vh; }
.aw-grid.n1 .aw-hang .ar-gallows { width: clamp(100px, 10vw, 170px); }
.aw-grid.n1 .aw-hang .ar-gallows svg { max-height: 20vh; }

/* Locked in: full screen. Mine is a burst with the lock snapping shut; theirs is a glow around the screen edge. Neither blocks taps. */
.ar-lockfx { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 8px; pointer-events: none; text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(41, 211, 255, .28), rgba(11, 8, 32, .78) 62%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ar-fade .18s ease both; }
.ar-lockfx.out { opacity: 0; transition: opacity .45s ease; }
.ar-lockfx-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid var(--me); opacity: 0; animation: ar-lock-ring .9s cubic-bezier(.2, .7, .3, 1) .05s both; }
.ar-lockfx-ring.r2 { border-color: #fff; animation-delay: .2s; }
@keyframes ar-lock-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
.ar-lockfx-ico { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 30px; color: #fff;
  background: linear-gradient(145deg, var(--me), #7C5CFF); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 60px rgba(41, 211, 255, .7); animation: ar-lock-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-lockfx-ico svg { width: 64px; height: 64px; }
.ar-lockfx-ico .sh { transform-origin: 33px 22px; animation: ar-lock-snap .35s cubic-bezier(.5, 1.8, .5, 1) .3s both; }
@keyframes ar-lock-snap { from { transform: translateY(-7px) rotate(-28deg); } to { transform: none; } }
@keyframes ar-lock-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ar-lockfx-ltr { position: absolute; right: -12px; bottom: -12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #2A1D00;
  font: 900 22px var(--font-d); box-shadow: 0 4px 18px rgba(0, 0, 0, .4); animation: ar-lock-pop .45s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
.ar-lockfx-t { font: 900 clamp(40px, 12vw, 84px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .06em; color: #fff; text-shadow: 0 0 28px rgba(41, 211, 255, .9); margin-top: 10px;
  animation: ar-lock-word .5s cubic-bezier(.2, .9, .3, 1) .15s both; }
@keyframes ar-lock-word { from { letter-spacing: .5em; opacity: 0; filter: blur(6px); } to { letter-spacing: .06em; opacity: 1; filter: none; } }
.ar-lockfx-sub { font: 700 16px var(--font-b); color: var(--muted); animation: ar-fade .3s ease .45s both; }
.ar-lockedge { position: fixed; inset: 0; z-index: 79; pointer-events: none; box-shadow: inset 0 0 0 4px var(--opp), inset 0 0 70px rgba(255, 79, 163, .55); animation: ar-lock-edge 2.2s ease both; }
.ar-lockedge.out { opacity: 0; transition: opacity .45s ease; }
@keyframes ar-lock-edge { 0% { opacity: 0; } 15% { opacity: 1; } 40% { box-shadow: inset 0 0 0 6px var(--opp), inset 0 0 110px rgba(255, 79, 163, .7); } 100% { opacity: 1; } }
.ar-lockedge-pill { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: rgba(60, 6, 40, .92); border: 2px solid var(--opp); color: #fff; font: 800 15px var(--font-d); white-space: nowrap; transform: translateX(-50%); animation: ar-lock-pill .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-lockedge-pill svg { width: 22px; height: 22px; color: var(--opp); }
@keyframes ar-lock-pill { from { transform: translate(-50%, -140%); } to { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .ar-lockfx, .ar-lockfx *, .ar-lockedge, .ar-lockedge-pill { animation: none !important; } .ar-lockfx-ring { display: none; } }

/* Watch: what each mode tracks, as badges under each player, plus banners for the big moments. */
.aw-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.aw-p.p2 .aw-badges { justify-content: flex-end; }
.aw-badges.row { display: inline-flex; margin: 0 0 0 8px; flex-wrap: nowrap; }
.aw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font: 800 clamp(10px, .9vw, 13px) var(--font-d); color: var(--text); white-space: nowrap; animation: ar-pop .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.aw-chip i { display: inline-grid; width: 1.2em; height: 1.2em; }
.aw-chip i svg { width: 100%; height: 100%; }
.aw-chip.lock { border-color: var(--ok); color: var(--ok); background: rgba(46, 229, 157, .14); }
.aw-chip.help { border-color: var(--help); color: #fff; background: var(--help); }
.aw-chip.bomb, .aw-chip.blocked, .aw-chip.dark { border-color: var(--no); color: #FFB3BD; background: rgba(255, 84, 104, .16); }
.aw-chip.bomb { animation: ar-pulse-hot 1.1s ease-in-out infinite; }
.aw-chip.crown, .aw-chip.bounty, .aw-chip.vault, .aw-chip.power { border-color: var(--gold); color: var(--gold); background: rgba(255, 201, 60, .14); }
.aw-chip.shield { border-color: var(--me); color: var(--me); }
.aw-chip.clock { font-variant-numeric: tabular-nums; }
.aw-chip.clock.low { border-color: var(--no); color: var(--no); }
.aw-chip.clock.out { opacity: .5; }
.aw-chip.ks.ready, .aw-chip.nk.ready { border-color: var(--no); color: #fff; background: var(--no); }
.aw-chip.nk.spent { opacity: .45; text-decoration: line-through; }
.aw-chip.power.p-hr, .aw-chip.power.p-ph { border-color: var(--no); color: #FFB3BD; background: rgba(255, 84, 104, .16); }
.aw-chip.power.p-pe, .aw-chip.power.p-dh { border-color: var(--ok); color: var(--ok); background: rgba(46, 229, 157, .14); }
.aw-midfx { display: flex; justify-content: center; margin-top: 4px; }
.aw-midfx:empty { display: none; }
.aw-picked { display: block; margin-top: 6px; font: 700 .7em var(--font-b); color: var(--muted); }
.aw-board li .nm { overflow: hidden; }
.aw-toast { position: absolute; left: 50%; top: 12px; z-index: 6; display: grid; justify-items: center; gap: 2px; max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 16px; text-align: center;
  background: rgba(30, 20, 70, .96); border: 2px solid var(--gold); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transform: translateX(-50%); animation: aw-toast-in .45s cubic-bezier(.2, 1.4, .4, 1) both; pointer-events: none; }
.aw-toast b { font: 900 clamp(18px, 2vw, 30px) var(--font-d); text-transform: uppercase; letter-spacing: .04em; color: var(--gold); }
.aw-toast span { font: 700 clamp(12px, 1.1vw, 17px) var(--font-b); color: var(--text); }
.aw-toast.k-ks, .aw-toast.k-boom, .aw-toast.k-nuke { border-color: var(--no); background: rgba(80, 8, 20, .96); }
.aw-toast.k-ks b, .aw-toast.k-boom b { color: #FF8A99; }
.aw-toast.k-nuke { background: linear-gradient(135deg, #FFE27A, var(--gold) 50%, #E89B00); border-color: #fff; }
.aw-toast.k-nuke b, .aw-toast.k-nuke span { color: #2A1D00; }
.aw-toast.k-cd, .aw-toast.k-box { border-color: var(--opp); background: rgba(60, 6, 40, .96); }
.aw-toast.k-stolen { border-color: #fff; background: linear-gradient(135deg, #FF3D7F, #7A2BFF); animation: aw-toast-in .45s cubic-bezier(.2, 1.4, .4, 1) both, aw-stolen-glitch .5s steps(2) .45s 2; }
.aw-toast.k-stolen b { color: #fff; font-style: italic; text-shadow: 3px 0 0 #00E5FF, -3px 0 0 #FFD400; }
.aw-toast.k-stolen span { color: #fff; }
@keyframes aw-stolen-glitch { 50% { transform: translateX(calc(-50% + 4px)) skewX(-6deg); } }
.aw-emote { position: absolute; right: var(--x, 12%); bottom: 14px; z-index: 7; display: grid; justify-items: center; gap: 2px; pointer-events: none; animation: aw-emote-up 3.2s ease-out forwards; }
.aw-emote-e { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; line-height: 1; background: rgba(22, 15, 56, .9); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.aw-emote-e.txt { font: 900 18px var(--font-d); color: var(--gold); }
.aw-emote small { font: 800 12px var(--font-b); color: var(--text); background: rgba(0, 0, 0, .45); padding: 1px 8px; border-radius: 999px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes aw-emote-up { 0% { opacity: 0; transform: translateY(20px) scale(.5); } 12% { opacity: 1; transform: translateY(0) scale(1.15); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-140px); } }
@media (prefers-reduced-motion: reduce) { .aw-emote { animation: none; } .aw-toast.k-stolen { animation: none; } }
.aw-toast.out { opacity: 0; transform: translate(-50%, -12px); transition: opacity .45s, transform .45s; }
@keyframes aw-toast-in { from { opacity: 0; transform: translate(-50%, -30px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
.aw-tile.jolt { animation: aw-jolt .5s ease both; }
@keyframes aw-jolt { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.aw-p.lock .aw-pn { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .aw-toast, .aw-tile.jolt, .aw-chip { animation: none; } }

/* Invite by email or text: opens the device's own mail or messages app. */
.ar-invite { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.ar-invite { flex-wrap: nowrap; }
.ar-invite-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 280px; padding-left: 12px; padding-right: 12px; white-space: nowrap; font-size: 15px; text-decoration: none; }
.ar-invite-b span { overflow: hidden; text-overflow: ellipsis; }
.ar-invite-b svg { width: 20px; height: 20px; flex: none; }
.ar-invite.lobby { margin-top: 12px; }
.ar-friend .ar-invite { width: 100%; } .ar-friend .ar-invite .ar-invite-b { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }

/* The Daily Duels side by side: the everyday one and the themed ones. */
.ar-dailies { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ar-dailies[hidden] { display: none; }
.ar-daily.t-music { border-color: rgba(255, 79, 163, .55); }
.ar-daily.t-music .ar-daily-tag { background: var(--opp); color: #fff; }
.ar-daily.t-music::after { background: radial-gradient(circle, rgba(255, 79, 163, .35), transparent 70%); }
.ar-daily.t-decades { border-color: rgba(41, 211, 255, .55); }
.ar-daily.t-decades .ar-daily-tag { background: var(--me); color: #032A36; }
.ar-daily.t-decades::after { background: radial-gradient(circle, rgba(41, 211, 255, .35), transparent 70%); }
/* "70s" must not turn into "70S". */
.ar-big.keep-case, .ar-daily.t-music .ar-daily-tag, .ar-daily.t-decades .ar-daily-tag { text-transform: none; }
.ar-daily.t-music .ar-daily-tag, .ar-daily.t-decades .ar-daily-tag { letter-spacing: .02em; }

/* Watch: the result of a battle. */
.aw-result { flex: 1; display: grid; align-content: center; justify-items: center; gap: clamp(10px, 2vh, 22px); text-align: center; padding: 8px 0; }
.aw-res-head { display: flex; align-items: center; gap: 12px; animation: ar-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.aw-res-head b { font: 900 clamp(24px, 3.2vw, 52px)/1.05 var(--font-d); color: var(--gold); text-transform: uppercase; text-shadow: 0 0 26px rgba(255, 201, 60, .55); }
.aw-res-cup { display: grid; width: clamp(34px, 3.6vw, 58px); height: clamp(34px, 3.6vw, 58px); color: var(--gold); filter: drop-shadow(0 0 14px rgba(255, 201, 60, .7)); animation: aw-cup 2.4s ease-in-out infinite; }
.aw-res-cup svg { width: 100%; height: 100%; }
.aw-res-head.draw b { color: var(--text); text-shadow: none; }
.aw-res-head.draw .aw-res-cup { color: var(--muted); filter: none; }
@keyframes aw-cup { 50% { transform: translateY(-4px) rotate(-4deg); } }
.aw-res-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 1.6vw, 26px); width: 100%; }
.aw-res-p { position: relative; display: grid; justify-items: center; gap: 4px; padding: clamp(12px, 2vh, 24px) 12px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 2px solid var(--line);
  animation: ar-rise .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 120ms + .15s); min-width: 0; }
.aw-res-p.p1 { border-color: rgba(41, 211, 255, .5); }
.aw-res-p.p2 { border-color: rgba(255, 79, 163, .5); }
.aw-res-p.win { background: linear-gradient(160deg, rgba(255, 201, 60, .22), rgba(255, 201, 60, .05)); border-color: var(--gold); box-shadow: 0 0 34px rgba(255, 201, 60, .35); }
.aw-res-p.lose { opacity: .72; }
.aw-res-tag { position: absolute; top: -12px; padding: 3px 12px; border-radius: 999px; background: var(--gold); color: #2A1D00; font: 900 clamp(10px, .9vw, 13px) var(--font-d); letter-spacing: .08em; text-transform: uppercase; }
.aw-res-name { display: flex; align-items: center; gap: 6px; max-width: 100%; font: 800 clamp(14px, 1.4vw, 22px) var(--font-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-res-score { font: 900 clamp(38px, 5.2vw, 92px)/1 var(--font-d); font-variant-numeric: tabular-nums; }
.aw-res-p.p1 .aw-res-score { color: var(--me); text-shadow: 0 0 22px rgba(41, 211, 255, .45); }
.aw-res-p.p2 .aw-res-score { color: var(--opp); text-shadow: 0 0 22px rgba(255, 79, 163, .45); }
.aw-res-p.win .aw-res-score { color: var(--gold); text-shadow: 0 0 26px rgba(255, 201, 60, .6); }
.aw-res-sub { color: var(--muted); font: 700 clamp(11px, 1vw, 15px) var(--font-b); }
.aw-res-vs { font: 900 clamp(16px, 1.8vw, 28px) var(--font-d); color: var(--muted); }
.aw-res-podium { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1vw, 16px); width: 100%; }
.aw-res-step { display: grid; justify-items: center; gap: 4px; flex: 1 1 0; max-width: 220px; min-width: 0; animation: ar-rise .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc((2 - var(--i)) * 140ms + .2s); }
.aw-res-rank { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 900 18px var(--font-d); background: #D9DEE6; color: #1A1530; }
.aw-res-step.s1 .aw-res-rank { background: var(--gold); box-shadow: 0 0 18px rgba(255, 201, 60, .7); }
.aw-res-step.s3 .aw-res-rank { background: #E39A5B; }
.aw-res-step .aw-res-score { font-size: clamp(24px, 2.8vw, 48px); color: var(--text); }
.aw-res-step.s1 .aw-res-score { color: var(--gold); }
.aw-block { display: block; width: 100%; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid var(--line); }
.aw-res-step.s1 .aw-block { height: clamp(46px, 8vh, 96px); background: linear-gradient(180deg, rgba(255, 201, 60, .45), rgba(255, 201, 60, .08)); border-color: var(--gold); }
.aw-res-step.s2 .aw-block { height: clamp(32px, 5.5vh, 66px); }
.aw-res-step.s3 .aw-block { height: clamp(22px, 4vh, 46px); }
@media (prefers-reduced-motion: reduce) { .aw-res-head, .aw-res-cup, .aw-res-p, .aw-res-step { animation: none; } }

/* Extra Time Mode: a big, easy switch in the lobby. */
.ar-pace { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 12px; padding: 14px 16px; border-radius: 18px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.ar-pace.on { border-color: var(--ok); background: rgba(46, 229, 157, .12); box-shadow: 0 0 22px rgba(46, 229, 157, .25); }
.ar-pace-sw { position: relative; flex: none; width: 58px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: background .2s; }
.ar-pace-sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ar-pace.on .ar-pace-sw { background: var(--ok); }
.ar-pace.on .ar-pace-sw::after { transform: translateX(26px); }
.ar-pace-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ar-pace-txt b { font: 900 18px var(--font-d); text-transform: uppercase; letter-spacing: .04em; }
.ar-pace-txt small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.ar-pace-st { font: 900 16px var(--font-d); text-transform: uppercase; color: var(--muted); }
.ar-pace.on .ar-pace-st { color: var(--ok); }
.ar-mode-chip.pace { background: rgba(46, 229, 157, .16); color: var(--ok); border-color: rgba(46, 229, 157, .5); }

/* Leaderboards screen (arena-boards.php) */
body.arena-lb { overflow: hidden; }
.lb { display: flex; flex-direction: column; height: 100vh; padding: 14px 18px; gap: 12px; }
.lb-top .ar-h1 { font-size: clamp(26px, 3.4vw, 46px); }
.lb-nav { display: flex; gap: 6px; }
.lb-link { color: var(--text); text-decoration: none; font: 800 13px var(--font-d); text-transform: uppercase; letter-spacing: .08em; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.lb-link:hover { background: var(--card2); }
.lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-per { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.lb-per-b { position: relative; overflow: hidden; border: 0; background: none; color: var(--muted); font: 800 14px var(--font-d); text-transform: uppercase; letter-spacing: .06em; padding: 9px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.lb-per-b span { position: relative; z-index: 1; }
.lb-per-b.is-on { background: var(--text); color: var(--bg); }
.lb-per-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.lb-mode select { appearance: none; -webkit-appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9A3C9' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; font: 700 14px var(--font-b); padding: 10px 36px 10px 14px; max-width: 260px; }
.lb-mode select option, .lb-mode select optgroup { background: var(--bg2); color: var(--text); }
.lb-tool { border: 1px solid var(--line); background: var(--card); color: var(--text); font: 700 13px var(--font-b); padding: 9px 14px; border-radius: 12px; cursor: pointer; }
.lb-tool[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
#lb-auto { margin-left: auto; }

.lb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lb-stat { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.lb-stat b { font: 900 clamp(22px, 2.4vw, 36px)/1 var(--font-d); }
.lb-stat span { color: var(--muted); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stat.s-battles b { color: var(--me); } .lb-stat.s-players b { color: var(--opp); } .lb-stat.s-correct b { color: var(--ok); } .lb-stat.s-live b { color: var(--gold); }
.lb-stat.s-live b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--no); margin-right: 8px; vertical-align: middle; animation: lb-pulse 1.4s ease-in-out infinite; }
@keyframes lb-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 84, 104, 0); opacity: .5; } }

.lb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(250px, .6fr); gap: 14px; }
.lb-hero, .lb-listwrap, .lb-side { min-height: 0; border-radius: 22px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.lb-hero { position: relative; display: flex; flex-direction: column; padding: 18px; overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, rgba(255, 201, 60, .16), transparent 70%), rgba(0, 0, 0, .35); }
.lb-hero-head { text-align: center; }
.lb-kicker { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.lb-hero-head h2 { margin: 2px 0 0; font: 900 clamp(24px, 3vw, 44px)/1 var(--font-d); text-transform: uppercase; background: linear-gradient(90deg, var(--gold), #FFF2C2, var(--gold)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lb-shine 4s linear infinite; }
@keyframes lb-shine { to { background-position: -200% 0; } }
.lb-podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.2vw, 20px); padding-top: clamp(40px, 6vh, 70px); min-height: 0; }
.lb-card.daily h3 { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.lb-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; max-width: 240px; min-width: 0; text-align: center; }
.lb-podium.fresh .lb-step { animation: ar-rise .6s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc((2 - var(--i)) * 160ms + .1s); }
.lb-step.none { visibility: hidden; }
.lb-avw { position: relative; margin-bottom: 4px; }
.lb-step .ar-av { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.lb-step.s1 .ar-av { box-shadow: 0 0 0 5px var(--gold), 0 0 36px rgba(255, 201, 60, .6); }
.lb-step.s2 .ar-av { box-shadow: 0 0 0 4px #C9D3E6, 0 0 22px rgba(201, 211, 230, .4); }
.lb-step.s3 .ar-av { box-shadow: 0 0 0 4px #E39A5B, 0 0 22px rgba(227, 154, 91, .4); }
.lb-step .ar-av.huge { width: clamp(76px, 8vw, 120px); height: clamp(76px, 8vw, 120px); font-size: clamp(34px, 3.6vw, 54px); }
.lb-step .ar-av.big { width: clamp(56px, 5.6vw, 84px); height: clamp(56px, 5.6vw, 84px); font-size: clamp(24px, 2.4vw, 38px); }
.lb-crown { position: absolute; left: 50%; top: 0; width: clamp(34px, 3.4vw, 52px); color: var(--gold); transform: translate(-50%, -78%) rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(255, 201, 60, .6)); animation: lb-crown 2.6s ease-in-out infinite; }
.lb-crown svg { width: 100%; display: block; }
@keyframes lb-crown { 50% { transform: translate(-50%, -88%) rotate(6deg); } }
.lb-step-name { font-weight: 800; font-size: clamp(14px, 1.4vw, 22px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-step-big { font: 900 clamp(34px, 4.4vw, 72px)/1 var(--font-d); }
.lb-step.s1 .lb-step-big { color: var(--gold); text-shadow: 0 0 24px rgba(255, 201, 60, .45); }
.lb-step.s2 .lb-step-big { color: #DDE5F4; } .lb-step.s3 .lb-step-big { color: #F0B27E; }
.lb-step-lbl { font: 800 11px var(--font-d); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.lb-step-sub { font-size: clamp(12px, 1vw, 15px); color: var(--muted); font-weight: 600; }
.lb-block { width: 100%; margin-top: 8px; display: grid; place-items: center; border-radius: 14px 14px 4px 4px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); font: 900 clamp(26px, 3vw, 50px) var(--font-d); color: rgba(255, 255, 255, .55); }
.lb-step.s1 .lb-block { height: clamp(70px, 14vh, 170px); background: linear-gradient(180deg, rgba(255, 201, 60, .5), rgba(255, 201, 60, .06)); border-color: var(--gold); color: #FFF2C2; }
.lb-step.s2 .lb-block { height: clamp(50px, 10vh, 120px); background: linear-gradient(180deg, rgba(201, 211, 230, .35), rgba(201, 211, 230, .04)); }
.lb-step.s3 .lb-block { height: clamp(36px, 7vh, 86px); background: linear-gradient(180deg, rgba(227, 154, 91, .38), rgba(227, 154, 91, .04)); }
.lb-step.me .lb-step-name { color: var(--me); }
.lb-you { display: inline-block; font: 900 10px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--bg); background: var(--me); padding: 2px 7px; border-radius: 999px; }
.lb-hot { position: absolute; right: -6px; bottom: -4px; display: inline-flex; align-items: center; gap: 1px; padding: 2px 7px 2px 4px; border-radius: 999px; background: linear-gradient(135deg, #FF8A3D, #FF3B3B); color: #fff; font: 900 13px var(--font-d); box-shadow: 0 0 14px rgba(255, 90, 50, .6); }
.lb-hot svg { width: 14px; height: 14px; animation: lb-flick .5s ease-in-out infinite alternate; }
.lb-hot.sm { position: static; font-size: 11px; padding: 1px 6px 1px 3px; box-shadow: none; }
.lb-hot.sm svg { width: 11px; height: 11px; }
@keyframes lb-flick { to { transform: scale(1.18) rotate(-6deg); } }
.lb-form { display: inline-flex; gap: 3px; }
.lb-form i { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font: 900 10px/1 var(--font-d); font-style: normal; color: #062014; background: var(--ok); }
.lb-form i.f-l { background: rgba(255, 84, 104, .85); color: #fff; }
.lb-form i.f-d { background: var(--muted); color: var(--bg); }
.lb-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: var(--muted); padding: 20px; }
.lb-empty b { font: 900 clamp(20px, 2.2vw, 32px) var(--font-d); color: var(--text); text-transform: uppercase; }
.lb-empty-ic { width: 72px; color: var(--gold); opacity: .8; animation: lb-crown 2.6s ease-in-out infinite; }
.lb-empty-ic svg { width: 100%; display: block; }

.lb-listwrap { overflow: auto; padding: 10px; scrollbar-width: thin; mask-image: linear-gradient(to bottom, #000 92%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent); }
.lb-list { list-style: none; margin: 0; padding: 0 0 20px; display: grid; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 34px 30px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid transparent; position: relative; }
.lb-row.enter { animation: ar-rise .45s ease both; animation-delay: calc(var(--i) * 35ms); }
.lb-row.me { border-color: var(--me); background: linear-gradient(90deg, rgba(41, 211, 255, .16), var(--card)); }
.lb-row.flash { animation: lb-flash 1.2s ease; }
@keyframes lb-flash { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255, 201, 60, .5); } 100% { box-shadow: none; } }
.lb-rank { font: 900 clamp(18px, 1.6vw, 24px) var(--font-d); text-align: center; color: var(--muted); }
.lb-mvw { text-align: center; }
.lb-mv { font: 900 11px var(--font-d); }
.lb-mv.up { color: var(--ok); } .lb-mv.down { color: var(--no); }
.lb-mv.new { color: var(--bg); background: var(--gold); padding: 1px 5px; border-radius: 6px; text-transform: uppercase; font-size: 9px; letter-spacing: .06em; }
.lb-row .ar-av { width: 38px; height: 38px; font-size: 17px; }
.lb-who { min-width: 0; }
.lb-name { display: block; font-weight: 800; font-size: clamp(14px, 1.2vw, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; flex-wrap: wrap; margin-top: 2px; }
.lb-meta .lb-form i { width: 14px; height: 14px; font-size: 8px; border-radius: 4px; }
.lb-rate { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lb-rate i { display: block; height: 100%; background: linear-gradient(90deg, var(--a2), var(--ok)); border-radius: 3px; transition: width .8s ease; }
.lb-nums { display: flex; gap: 14px; align-items: center; }
.lb-numc { display: grid; justify-items: end; line-height: 1; }
.lb-big { font: 900 clamp(20px, 1.8vw, 28px)/1 var(--font-d); color: var(--text); }
.lb-numc.pts b { font: 800 clamp(14px, 1.2vw, 18px)/1 var(--font-d); color: var(--ok); }
.lb-lbl { font: 800 9px var(--font-d); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.lb-row-empty { text-align: center; color: var(--muted); padding: 24px 12px; font-weight: 600; border: 1px dashed var(--line); border-radius: 14px; }

.lb-side { display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow: auto; scrollbar-width: thin; }
.lb-card { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); animation: ar-rise .5s ease both; }
.lb-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 900 13px var(--font-d); text-transform: uppercase; letter-spacing: .1em; }
.lb-card-ic { width: 18px; height: 18px; display: inline-grid; color: var(--gold); }
.lb-card.hot .lb-card-ic { color: #FF8A3D; }
.lb-card.rated .lb-card-ic { color: var(--me); }
.lb-card-ic svg { width: 100%; height: 100%; }
.lb-card.hot { background: linear-gradient(135deg, rgba(255, 138, 61, .22), rgba(255, 59, 59, .08)); border-color: rgba(255, 138, 61, .5); }
.lb-spot { display: flex; align-items: center; gap: 12px; }
.lb-spot .ar-av.big { width: 52px; height: 52px; font-size: 24px; }
.lb-spot > div { min-width: 0; }
.lb-spot-n { display: block; font-weight: 800; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-spot-v { font: 800 14px var(--font-d); color: #FFB37A; }
.lb-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-mini li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; padding: 4px 6px; border-radius: 8px; }
.lb-mini li:first-child { background: rgba(255, 201, 60, .12); }
.lb-mini li.me { outline: 1px solid var(--me); }
.lb-mini-r { font: 900 14px var(--font-d); color: var(--muted); text-align: center; }
.lb-mini li:first-child .lb-mini-r { color: var(--gold); }
.lb-mini-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mini-v { font: 800 14px var(--font-d); color: var(--ok); }
.lb-card.rated .lb-mini-v { color: var(--me); }
.lb-card-empty { margin: 0; color: var(--muted); font-size: 13px; }
.lb-card-go { margin-top: 8px; border: 0; background: none; color: var(--me); font: 700 13px var(--font-b); padding: 0; cursor: pointer; }
.lb-card-go:hover { text-decoration: underline; }

.lb.fs .lb-bar .lb-tool:not(#lb-full), .lb.fs .lb-nav { display: none; }
@media (max-width: 1280px) { .lb-join span { display: none; } }
@media (max-width: 1100px) {
  body.arena-lb { overflow: auto; }
  .lb { height: auto; min-height: 100vh; }
  .lb-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lb-hero { grid-column: 1 / -1; min-height: 420px; }
  .lb-listwrap { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 760px) {
  .lb { padding: 10px 12px; }
  .lb-join { display: none; }
  .lb-nav { margin-left: auto; }
  .lb-main { grid-template-columns: minmax(0, 1fr); }
  .lb-hero { min-height: 380px; padding: 14px 10px; }
  .lb-stats { grid-template-columns: 1fr 1fr; }
  .lb-stat { flex-direction: column; gap: 2px; padding: 10px 12px; }
  .lb-per { width: 100%; }
  .lb-per-b { flex: 1; padding: 9px 4px; font-size: 12px; letter-spacing: .02em; }
  .lb-mode { flex: 1; } .lb-mode select { max-width: none; width: 100%; }
  #lb-auto { margin-left: 0; }
  #lb-full { display: none; }
  .lb-row { grid-template-columns: 26px 24px auto minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .lb-row .ar-av { width: 32px; height: 32px; font-size: 15px; }
  .lb-numc.pts, .lb-rate, .lb-rate-n { display: none; }
  .lb-step-sub { display: none; }
}
.aw-empty-lb { margin: 18px auto 0; max-width: 320px; }
@media (min-width: 761px) and (max-width: 1500px) { .lb-rate { display: none; } .lb-row .lb-meta .lb-form { display: none; } }

/* Mode picker: search, kind chips, pages, Featured Game and You Might Like This. */
.ar-picks2 { display: grid; gap: 12px; }
.ar-mode.ar-spot { padding-top: 40px; border-width: 2px; align-items: center; }
@media (max-width: 480px) { .ar-spot .ar-mode-txt > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ar-spot .ar-mode-ico { width: 52px; height: 52px; } }
.ar-spot-badge { position: absolute; top: 10px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font: 900 11px var(--font-d); text-transform: uppercase; letter-spacing: .12em; padding: 3px 10px; border-radius: 999px; }
.ar-spot.feat { border-color: var(--gold); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 201, 60, .22), transparent 60%), linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: 0 10px 34px rgba(255, 201, 60, .16); }
.ar-spot.feat .ar-spot-badge { background: var(--gold); color: #2A1D00; }
.ar-spot.feat .ar-spot-badge::before { content: "\2605"; }
.ar-spot.like { border-color: var(--me); background: radial-gradient(120% 140% at 0% 0%, rgba(41, 211, 255, .2), transparent 60%), linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: 0 10px 34px rgba(41, 211, 255, .14); }
.ar-spot.like .ar-spot-badge { background: var(--me); color: #04202A; }
.ar-spot.like .ar-spot-badge::before { content: "\2665"; }
.ar-spot .ar-mode-ico { width: 64px; height: 64px; }
.ar-spot-why { font-style: normal; font: 700 13px var(--font-b); color: var(--gold); }
.ar-spot.like .ar-spot-why { color: var(--me); }
.ar-mfilter { display: grid; gap: 8px; }
.ar-msearch { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ar-msearch:focus-within { border-color: var(--me); }
.ar-msearch svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.ar-msearch input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 600 16px var(--font-b); padding: 12px 0; outline: none; }
.ar-msearch input::placeholder { color: var(--muted); }
.ar-mtags { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ar-mtags::-webkit-scrollbar { display: none; }
.ar-mtag { flex-shrink: 0; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .08em; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.ar-mtag.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ar-mode-pages { display: grid; gap: 12px; touch-action: pan-y; }
.ar-mode-pages.go-r .ar-mode:not([hidden]) { animation: ar-page-r .35s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }
.ar-mode-pages.go-l .ar-mode:not([hidden]) { animation: ar-page-l .35s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes ar-page-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ar-page-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.ar-mode-none { margin: 0; text-align: center; color: var(--muted); padding: 18px; border: 1px dashed var(--line); border-radius: 14px; }
.ar-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ar-pg { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; transition: transform .15s, background .15s; }
.ar-pg svg { width: 22px; height: 22px; }
.ar-pg:hover:not(:disabled) { background: var(--card2); transform: scale(1.06); }
.ar-pg:disabled { opacity: .3; cursor: default; }
.ar-pg-dots { display: flex; align-items: center; gap: 6px; }
.ar-pg-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; transition: width .25s, background .25s; }
.ar-pg-dot.is-on { width: 26px; background: var(--gold); }
.ar-pg-n { margin-left: 6px; font: 800 12px var(--font-d); color: var(--muted); letter-spacing: .06em; }

/* Board games and number modes */
.m-connect .ar-mode-ico { background: linear-gradient(135deg, #3D9BFF, #FFC93C); color: #0B0820; }
.m-battleship .ar-mode-ico { background: linear-gradient(135deg, #0F4C81, #12C2A8); }
.m-bingo .ar-mode-ico { background: linear-gradient(135deg, #E9478F, #FFC93C); }
.m-closest .ar-mode-ico { background: linear-gradient(135deg, #12B981, #3D9BFF); }
.m-hilo .ar-mode-ico { background: linear-gradient(135deg, #FF8A3D, #7C5CFF); }
.m-tictactoe .ar-mode-ico { background: linear-gradient(135deg, #29D3FF, #FF4FA3); }
.m-jackpot .ar-mode-ico { background: linear-gradient(135deg, #1E2A8C, #E5B800); }
.m-snakes .ar-mode-ico { background: linear-gradient(135deg, #1E7F4F, #E5B800); }
.m-steal .ar-mode-ico { background: linear-gradient(135deg, #3A3150, #FF5468); }
.m-relay .ar-mode-ico { background: linear-gradient(135deg, #3D9BFF, #FF4FA3); }

.ar-gboard { margin: 10px 0 0; display: grid; justify-items: center; gap: 8px; }
.ar-gboard[hidden] { display: none; }
.ar-gnote { margin: 0; text-align: center; color: var(--muted); font: 700 13px var(--font-b); }
.ar-gnote.hot { color: var(--gold); font-size: 15px; }
.ar-pk { cursor: pointer; }
.ar-pk:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Connect Four */
.ar-c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, #2152C9, #163A93); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 10px 30px rgba(33, 82, 201, .35); width: min(100%, 380px); }
.ar-c4col { display: grid; gap: 4px; padding: 3px; border: 0; border-radius: 10px; background: none; }
button.ar-c4col { animation: c4-hint 1.6s ease-in-out infinite; }
button.ar-c4col:hover, .ar-c4col.chosen { background: rgba(255, 255, 255, .18); }
.ar-c4col.chosen { box-shadow: 0 0 0 2px var(--gold); }
@keyframes c4-hint { 50% { background: rgba(255, 255, 255, .08); } }
.ar-c4cell { aspect-ratio: 1; border-radius: 50%; background: #0B0820; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.ar-c4cell .disc { position: absolute; inset: 2px; border-radius: 50%; }
.disc.me { background: radial-gradient(circle at 35% 30%, #FFF2A8, var(--gold) 45%, #C98A00); }
.disc.opp { background: radial-gradient(circle at 35% 30%, #FFC2DE, var(--opp) 45%, #A3195A); }
.disc.drop { animation: c4-drop .55s cubic-bezier(.4, 0, .6, 1.35) both; }
@keyframes c4-drop { from { transform: translateY(calc(var(--r, 1) * -110%)); } to { transform: none; } }

/* Tic Tac Toe */
.ar-ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 260px); }
.ar-tttc { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 14px; background: var(--card2); color: var(--text); padding: 0; }
button.ar-tttc { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 201, 60, .35); }
button.ar-tttc:hover, .ar-tttc.chosen { box-shadow: inset 0 0 0 3px var(--gold); }
.ar-tttc .mk { font: 900 clamp(34px, 10vw, 54px)/1 var(--font-d); animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.mk.me { color: var(--me); text-shadow: 0 0 16px rgba(41, 211, 255, .6); }
.mk.opp { color: var(--opp); text-shadow: 0 0 16px rgba(255, 79, 163, .6); }
.ar-ttt-wins { display: flex; gap: 12px; justify-content: center; font: 800 13px var(--font-d); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ar-ttt-wins .me { color: var(--me); } .ar-ttt-wins .opp { color: var(--opp); }

/* Battleship */
.ar-ships { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; width: 100%; align-items: end; }
.ar-sea { display: grid; gap: 4px; }
.ar-sea-t { font: 800 11px var(--font-d); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
.ar-seagrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 6px; border-radius: 12px; background: linear-gradient(180deg, #0F3D6E, #0A2547); }
.ar-seac { aspect-ratio: 1; border: 0; border-radius: 5px; background: rgba(61, 155, 255, .18); padding: 0; position: relative; }
button.ar-seac { background: rgba(61, 155, 255, .32); }
button.ar-seac:hover, .ar-seac.chosen { background: rgba(255, 201, 60, .55); box-shadow: 0 0 0 2px var(--gold); }
.ar-seac.ship { background: #8B93A8; }
.ar-seac.miss::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.ar-seac.hit { background: #FF5468; animation: sea-hit .5s ease both; }
.ar-seac.hit::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #FFC93C; box-shadow: 0 0 8px #FF8A3D; }
.ar-seac.sunk { background: #5A1020; }
.ar-seac.sunk::after { content: ""; position: absolute; inset: 30%; border-radius: 2px; background: #FF5468; transform: rotate(45deg); }
@keyframes sea-hit { from { transform: scale(1.5); } }
.ar-sea.own .ar-seagrid { gap: 2px; padding: 4px; }

/* Bingo */
.ar-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: min(100%, 420px); padding: 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(233, 71, 143, .25), rgba(255, 201, 60, .12)); border: 1px solid rgba(233, 71, 143, .5); }
.ar-bingo-h { text-align: center; font: 900 18px var(--font-d); color: var(--gold); }
.ar-bsq { aspect-ratio: 1; display: grid; place-items: center; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #1A1440; text-align: center; overflow: hidden; position: relative; }
.ar-bsq span { font: 700 clamp(8px, 2.2vw, 11px)/1.1 var(--font-b); word-break: break-word; hyphens: auto; }
.ar-bsq.on::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: rgba(233, 71, 143, .72); animation: ar-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-bsq.free { background: var(--gold); }
.ar-bsq.free::after { background: rgba(233, 71, 143, .45); }
.ar-bsq.free span { position: relative; z-index: 1; font: 900 12px var(--font-d); }
.ar-bsq.now { box-shadow: 0 0 0 3px var(--me), 0 0 14px rgba(41, 211, 255, .7); animation: bsq-glow 1.2s ease-in-out infinite; }
.ar-bsq.line { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255, 201, 60, .8); }
@keyframes bsq-glow { 50% { box-shadow: 0 0 0 3px var(--me), 0 0 2px rgba(41, 211, 255, .2); } }

/* Jackpot Board */
.ar-jack { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; gap: 4px; width: 100%; }
.ar-jack-cat { display: grid; place-items: center; min-height: 40px; padding: 4px; border-radius: 8px; background: #1E2A8C; font: 800 clamp(9px, 2.4vw, 12px)/1.15 var(--font-b); text-align: center; text-transform: uppercase; }
.ar-jc { display: grid; place-items: center; min-height: 40px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #2B3AB5, #1E2A8C); color: var(--gold); font: 900 clamp(14px, 4vw, 20px) var(--font-d); padding: 0; }
button.ar-jc:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.ar-jc.taken { background: rgba(255, 255, 255, .05); }
.ar-jc.chosen { background: linear-gradient(180deg, #FFE27A, var(--gold)); color: #1E2A8C; animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }

/* Snakes and Ladders */
.ar-snk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; width: min(100%, 420px); padding: 6px; border-radius: 14px; background: linear-gradient(135deg, #1E7F4F, #0F4C3A); }
.ar-snq { position: relative; min-height: 40px; border-radius: 6px; background: rgba(255, 255, 255, .1); padding: 2px 4px; display: flex; flex-direction: column; }
.ar-snq:nth-child(odd) { background: rgba(255, 255, 255, .16); }
.ar-snq small { font: 700 10px var(--font-d); color: rgba(255, 255, 255, .7); }
.ar-snq em { font-style: normal; font: 800 10px var(--font-d); }
.ar-snq.lad { background: rgba(255, 201, 60, .3); } .ar-snq.lad em { color: var(--gold); }
.ar-snq.snk { background: rgba(255, 84, 104, .32); } .ar-snq.snk em { color: #FFB0BA; }
.ar-snq.goal { background: linear-gradient(135deg, #FFE27A, var(--gold)); } .ar-snq.goal small { color: #2A1D00; }
.ar-tokens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.ar-tok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 10px var(--font-d); color: #fff; background: var(--opp); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); animation: ar-pop .4s both; }
.ar-tok.me { background: var(--me); color: #04202A; z-index: 1; }
.ar-tok.more { background: rgba(0, 0, 0, .5); font-size: 8px; }

/* Team Relay */
.ar-relay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.ar-team { padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); }
.ar-team.t1 { background: linear-gradient(135deg, rgba(61, 155, 255, .3), rgba(61, 155, 255, .08)); }
.ar-team.t2 { background: linear-gradient(135deg, rgba(255, 79, 163, .3), rgba(255, 79, 163, .08)); }
.ar-team.mine { border-color: var(--gold); }
.ar-team-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ar-team-h b { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .08em; }
.ar-team-sc { font: 900 22px var(--font-d); }
.ar-team-m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ar-runner-chip { font: 700 11px var(--font-b); padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .25); color: var(--muted); }
.ar-runner-chip.me { color: var(--text); }
.ar-runner-chip.up { background: var(--gold); color: #2A1D00; }
.ar-runner-chip.up::before { content: "\25B6 "; font-size: 9px; }
.ar-runner-chip.gone { opacity: .4; text-decoration: line-through; }

/* Steal, waiting your turn */
.st-steal .ar-final-tag.hot { flex: none; align-self: center; height: auto; line-height: 1.15; margin: 0 auto; padding: 6px 22px; border-radius: 999px; font: 900 clamp(24px, 7vw, 34px) var(--font-d); letter-spacing: .1em; color: #fff; background: linear-gradient(135deg, #FF3B3B, #FF8A3D); width: max-content; animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both, steal-pulse 1s ease-in-out infinite .5s; }
@keyframes steal-pulse { 50% { transform: scale(1.06); } }
.st-steal { display: grid; gap: 10px; }
.ar-hit.wait { border-color: var(--me); background: rgba(41, 211, 255, .1); }
.ar-hit.wait b { color: var(--me); }
.ar-opts.watching { opacity: .55; }

/* Higher or Lower */
.ar-hiline { display: grid; justify-items: center; gap: 2px; margin: 4px auto; padding: 10px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 138, 61, .25), rgba(124, 92, 255, .25)); border: 1px solid rgba(255, 138, 61, .55); width: max-content; max-width: 100%; animation: ar-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-hiline span { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ar-hiline b { font: 900 clamp(30px, 9vw, 46px)/1 var(--font-d); color: var(--text); }
.ar-hiline.small b { font-size: 26px; }
.mode-hilo .ar-opts .ar-opt { min-height: 72px; }

/* Closest Wins */
.ar-guess { display: flex; gap: 8px; }
.ar-guess-in { flex: 1; min-width: 0; font: 900 clamp(26px, 8vw, 36px) var(--font-d); text-align: center; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--me); background: rgba(0, 0, 0, .35); color: var(--text); }
.ar-guess-in:focus { outline: none; box-shadow: 0 0 0 4px rgba(41, 211, 255, .3); }
.ar-guess.locked .ar-guess-in { border-color: var(--ok); }
.ar-guess.shake { animation: ar-shake .4s ease; }
.ar-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ar-padk { min-height: 52px; border: 0; border-radius: 14px; background: var(--card2); color: var(--text); font: 800 22px var(--font-d); cursor: pointer; }
.ar-padk:active { transform: scale(.96); background: rgba(255, 255, 255, .2); }
.ar-padk:disabled { opacity: .35; }
@media (pointer: fine) { .ar-pad { display: none; } }
.ar-closest { display: grid; justify-items: center; gap: 6px; }
.ar-closest-l { font: 800 12px var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ar-closest-a { font: 900 clamp(40px, 12vw, 64px)/1 var(--font-d); color: var(--ok); animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-closest-list { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.ar-closest-list li { display: grid; grid-template-columns: 1fr auto auto 48px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--card); animation: ar-rise .4s ease both; animation-delay: calc(var(--i) * 80ms + .3s); }
.ar-closest-list li.me { outline: 2px solid var(--me); }
.ar-closest-list li.best { background: rgba(46, 229, 157, .14); }
.ar-closest-list li.exact { background: rgba(255, 201, 60, .2); }
.ar-closest-list .gv { font: 900 18px var(--font-d); }
.ar-closest-list .dv { color: var(--muted); font-size: 13px; }
.ar-closest-list .pv { font: 800 14px var(--font-d); color: var(--ok); text-align: right; }

@media (max-width: 420px) {
  .ar-ships { grid-template-columns: 1fr; }
  .ar-sea.own { width: 60%; justify-self: center; }
  .ar-snq { min-height: 38px; }
}
/* Outside the pick, the board shrinks so the question has room. */
.ar-gboard:not(.picking) .ar-c4 { width: min(56%, 210px); padding: 5px; gap: 2px; }
.ar-gboard:not(.picking) .ar-c4col { gap: 2px; padding: 1px; }
.ar-gboard:not(.picking) .ar-ttt { width: min(42%, 150px); gap: 4px; }
.ar-gboard:not(.picking) .ar-tttc .mk { font-size: 28px; }
.ar-gboard:not(.picking) .ar-ships { width: min(100%, 330px); }
.ar-gboard:not(.picking).g-jackpot .ar-jack { width: min(100%, 320px); }
.ar-gboard:not(.picking).g-jackpot .ar-jc, .ar-gboard:not(.picking).g-jackpot .ar-jack-cat { min-height: 26px; font-size: 10px; }
.ar-gboard.g-bingo .ar-bingo { width: min(100%, 330px); }
.ar-gboard.g-snakes .ar-snk { width: min(100%, 360px); }
.ar-gboard:not(.picking) .ar-ships { grid-template-columns: 1fr 1fr; width: min(100%, 300px); align-items: end; }
.ar-gboard:not(.picking) .ar-sea.own { width: 100%; }
.ar-gboard:not(.picking) .ar-seagrid { gap: 2px; padding: 3px; }
.ar-gboard:not(.picking) .ar-sea-t { font-size: 9px; }

/* Host a game: the studio. Numbered steps on the left, a live ticket on the right (a bar at the bottom on phones). */
.ar-app:has(.hs) { max-width: 1120px; }
.hs { display: grid; gap: 18px; padding-bottom: 8px; }
.hs-head { display: grid; gap: 6px; }
.hs-head .ar-catpick-head { margin-bottom: 4px; }
.hs-kicker { margin: 0; font: 800 12px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hs-h1 { margin: 0; }
.hs-lead { margin: 0; color: var(--muted); max-width: 52ch; }
.hs-grid { display: grid; gap: 18px; align-items: start; }
.hs-form { display: grid; gap: 14px; min-width: 0; }
.hs-step { position: relative; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: ar-rise .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.hs-step:nth-child(2) { animation-delay: .05s; } .hs-step:nth-child(3) { animation-delay: .1s; } .hs-step:nth-child(4) { animation-delay: .15s; } .hs-step:nth-child(5) { animation-delay: .2s; } .hs-step:nth-child(6) { animation-delay: .25s; }
.hs-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hs-step-h h2 { margin: 0; font: 800 19px var(--font-d); text-transform: uppercase; letter-spacing: .04em; }
.hs-num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 900 15px var(--font-d); color: #0B0820; background: linear-gradient(135deg, var(--me), var(--a0)); box-shadow: 0 4px 14px rgba(41, 211, 255, .35); flex: none; }
.hs-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(255, 201, 60, .14); color: var(--gold); font: 800 12px var(--font-b); text-transform: uppercase; letter-spacing: .06em; }
.hs-pill:empty { display: none; }
.hs-label { margin: 14px 0 8px; font: 800 12px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.hs-step > .hs-label:first-of-type { margin-top: 0; }
.hs-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--me); color: #0B0820; display: grid; place-items: center; transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.hs-check svg { width: 13px; height: 13px; }
.is-on > .hs-check, .is-on .hs-av .hs-check { transform: scale(1); }
.hs-pop { animation: hs-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hs-pop { 40% { transform: scale(1.08); } }

/* Game tiles */
.hs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hs-tile { appearance: none; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 60px; text-align: left; border-radius: 16px; border: 2px solid transparent; background: var(--card); color: var(--text); cursor: pointer; font: inherit;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s; animation: ar-rise .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 25ms); }
.hs-tile:hover { background: var(--card2); transform: translateY(-2px); }
.hs-tile:active { transform: scale(.97); }
.hs-tile b { font: 800 14px/1.15 var(--font-d); text-transform: uppercase; letter-spacing: .02em; padding-right: 18px; }
.hs-tile.is-on { border-color: var(--me); background: rgba(41, 211, 255, .12); box-shadow: 0 0 0 4px rgba(41, 211, 255, .12), 0 10px 30px rgba(41, 211, 255, .18); }
.hs-ico { display: block; flex: none; }
.hs-ico .ar-mode-ico { width: 40px; height: 40px; border-radius: 12px; }
.hs-ico .ar-mode-ico svg { width: 22px; height: 22px; }
.m-random .ar-mode-ico { background: conic-gradient(from 200deg, var(--a0), var(--me), var(--ok), var(--gold), var(--opp), var(--a0)); }
.hs-about { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); color: var(--muted); font-size: 14px; }
.hs-about b { color: var(--text); font-family: var(--font-d); text-transform: uppercase; letter-spacing: .03em; }

/* Players */
.hs-players { display: flex; align-items: center; justify-content: center; gap: 22px; }
.hs-round { appearance: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: var(--text); font: 800 26px/1 var(--font-b); cursor: pointer; transition: transform .12s, background .2s; }
.hs-round:hover:not(:disabled) { background: rgba(41, 211, 255, .2); }
.hs-round:active:not(:disabled) { transform: scale(.9); }
.hs-round:disabled { opacity: .35; cursor: default; }
.hs-big { display: grid; justify-items: center; min-width: 110px; }
.hs-big b { display: block; font: 900 64px/1 var(--font-d); background: linear-gradient(180deg, #fff, var(--me)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hs-big span { font: 800 12px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.hs-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 18px 0 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--me), var(--a0)) 0 / var(--p, 0%) 100% no-repeat, rgba(255, 255, 255, .12); }
.hs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--me); box-shadow: 0 0 0 6px rgba(41, 211, 255, .2), 0 4px 12px rgba(0, 0, 0, .4); }
.hs-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--me); box-shadow: 0 0 0 6px rgba(41, 211, 255, .2); }
.hs-seats { display: grid; grid-template-columns: repeat(12, minmax(0, 26px)); justify-content: center; gap: 7px; }
.hs-seats i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background .25s, transform .25s, box-shadow .25s; }
.hs-seats i.on { background: linear-gradient(135deg, var(--me), var(--a0)); box-shadow: 0 0 10px rgba(41, 211, 255, .45); }
.hs-seats i.on:first-child { background: linear-gradient(135deg, var(--gold), var(--a1)); box-shadow: 0 0 10px rgba(255, 201, 60, .5); }

/* Questions: a segmented bar with a sliding thumb */
.hs-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.hs-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 6)); border-radius: 12px; background: linear-gradient(135deg, var(--me), var(--a0)); box-shadow: 0 6px 18px rgba(41, 211, 255, .35);
  transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.hs-seg-b { appearance: none; position: relative; z-index: 1; border: 0; background: none; color: var(--muted); font: 900 18px var(--font-d); padding: 12px 0; cursor: pointer; transition: color .2s; }
.hs-seg-b.is-on { color: #fff; }

/* Option cards: pace and who can join */
.hs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hs-opt { appearance: none; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; text-align: left; border-radius: 16px; border: 2px solid transparent; background: var(--card); color: var(--text); cursor: pointer; font: inherit; transition: background .2s, border-color .2s, box-shadow .2s; }
.hs-opt:hover { background: var(--card2); }
.hs-opt.is-on { border-color: var(--gold); background: rgba(255, 201, 60, .1); box-shadow: 0 0 0 4px rgba(255, 201, 60, .1); }
.hs-opt.is-on .hs-check { background: var(--gold); }
.hs-opt-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--muted); transition: background .2s, color .2s; }
.hs-opt-ico svg { width: 22px; height: 22px; }
.hs-opt.is-on .hs-opt-ico { background: linear-gradient(135deg, var(--gold), var(--a1)); color: #2A1D00; }
.hs-opt-txt { display: grid; gap: 3px; padding-right: 14px; }
.hs-opt-txt b { font: 800 16px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.hs-opt-txt span { font-size: 13px; color: var(--muted); }
.hs-switch { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--card); }

/* Categories */
.hs-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-cats.is-short { max-height: 142px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.hs-cat { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 700 14px var(--font-b); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.hs-cat:hover { background: var(--card2); }
.hs-cat.is-on { border-color: transparent; background: linear-gradient(135deg, var(--me), var(--a0)); color: #fff; box-shadow: 0 4px 14px rgba(41, 211, 255, .3); }
.hs-cat.is-on:not(.all)::before { content: "\2713  "; }
.hs-more { appearance: none; display: block; margin: 10px auto 0; border: 0; background: none; color: var(--me); font: 800 14px var(--font-b); cursor: pointer; padding: 6px 10px; }

/* Friends */
.hs-note { margin: 0; color: var(--muted); font-size: 14px; }
.hs-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.hs-friend { appearance: none; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 2px solid transparent; background: var(--card); color: var(--text); cursor: pointer; font: inherit; min-width: 0; transition: background .2s, border-color .2s; }
.hs-friend:hover { background: var(--card2); }
.hs-friend.is-on { border-color: var(--me); background: rgba(41, 211, 255, .1); }
.hs-friend .nm { display: flex; align-items: center; gap: 4px; max-width: 100%; font: 700 13px var(--font-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-friend .nm .ar-flag { flex: none; }
.hs-friend small { font-size: 11px; color: var(--muted); }
.hs-friend.online small { color: var(--ok); }
.hs-av { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--font-d); color: #fff; flex: none; }
.hs-av.a0 { background: linear-gradient(135deg, var(--a0), var(--me)); } .hs-av.a1 { background: linear-gradient(135deg, var(--a1), var(--gold)); color: #2A1D00; } .hs-av.a2 { background: linear-gradient(135deg, var(--a2), var(--ok)); }
.hs-av.a3 { background: linear-gradient(135deg, var(--a3), var(--opp)); } .hs-av.a4 { background: linear-gradient(135deg, var(--a4), var(--a0)); } .hs-av.a5 { background: linear-gradient(135deg, var(--a5), var(--a1)); color: #2A1D00; }
.hs-friend.online .hs-av::after { content: ""; position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); }
.hs-av .hs-check { top: -4px; right: -4px; }
.hs-av.sm { width: 30px; height: 30px; font-size: 13px; margin-right: -8px; border: 2px solid var(--bg2); }

/* The ticket */
.hs-side { display: none; }
.hs-ticket { position: relative; overflow: hidden; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px 20px 20px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(170deg, rgba(42, 26, 110, .85), rgba(11, 8, 32, .9)); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15); }
.hs-ticket > * { position: relative; }
.hs-tk-glow { position: absolute !important; top: -40px; left: 50%; transform: translateX(-50%) scale(4.5); filter: blur(30px); opacity: .55; pointer-events: none; }
.hs-tk-ico .ar-mode-ico { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.hs-tk-ico .ar-mode-ico svg { width: 46px; height: 46px; }
.hs-tk-name { margin: 2px 0 0; font: 900 28px/1.05 var(--font-d); text-transform: uppercase; letter-spacing: .02em; }
.hs-tk-sub { margin: 0; color: var(--muted); font-size: 14px; }
.hs-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 4px; border-radius: 16px; overflow: hidden; background: var(--line); border: 1px dashed rgba(255, 255, 255, .22); }
.hs-stat { display: grid; gap: 2px; padding: 10px 8px; background: rgba(11, 8, 32, .85); }
.hs-stat b { font: 900 20px var(--font-d); text-transform: uppercase; }
.hs-stat span { font: 800 11px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.hs-tk-cats { margin: 0; font-size: 13px; color: var(--text); opacity: .85; max-height: 3.9em; overflow: hidden; }
.hs-tk-friends { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; min-height: 0; }
.hs-tk-friends:empty { display: none; }
.hs-tk-inv { margin-left: 16px; font: 800 12px var(--font-b); color: var(--me); text-transform: uppercase; letter-spacing: .06em; }
.hs-go { width: 100%; }
.hs .ar-err { margin: 0; }

/* The phone bar */
.hs-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 8, 32, .88); border-top: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hs-bar-ico .ar-mode-ico { width: 42px; height: 42px; border-radius: 12px; }
.hs-bar-ico .ar-mode-ico svg { width: 22px; height: 22px; }
.hs-bar-txt { display: grid; min-width: 0; flex: 1; }
.hs-bar-txt b { font: 800 15px var(--font-d); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-bar-txt span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-bar .hs-go { width: auto; flex: none; padding: 12px 18px; }

@media (min-width: 640px) {
  .hs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs-step { padding: 22px; }
}
@media (min-width: 960px) {
  .hs-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .hs-side { display: block; position: sticky; top: 16px; }
  .hs-bar { display: none; }
  .hs-about { display: none; }
}
@media (max-width: 420px) {
  .hs-cards { grid-template-columns: 1fr; }
  .hs-players { gap: 14px; }
  .hs-big b { font-size: 56px; }
}

/* Player card in the lobby: one big button that opens the profile. */
.ar-me-btn { appearance: none; width: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; flex-wrap: nowrap; transition: transform .15s, border-color .2s, background .2s; }
.ar-me-btn:hover { border-color: rgba(41, 211, 255, .5); background: rgba(41, 211, 255, .06); }
.ar-me-btn:active { transform: scale(.99); }
.ar-me-btn .ar-me-who { min-width: 0; }
.ar-me-btn .ar-me-name { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-me-hint { font: 800 12px var(--font-b); color: var(--me); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ar-me-fc { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 700; }
.ar-me-chev { flex: none; width: 22px; height: 22px; color: var(--muted); transition: transform .2s, color .2s; }
.ar-me-chev svg { width: 100%; height: 100%; }
.ar-me-btn:hover .ar-me-chev { transform: translateX(3px); color: var(--me); }
@media (max-width: 420px) { .ar-me-btn { gap: 10px; } .ar-me-btn .ar-av.big { width: 52px; height: 52px; font-size: 22px; } }

/* Profile modal */
body.ar-noscroll { overflow: hidden; }
.ar-pmodal { place-items: start center; overflow-y: auto; padding: 24px 16px; }
.ar-pbox { position: relative; width: 100%; max-width: 460px; margin: auto 0; padding: 26px 20px 20px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(170deg, rgba(42, 26, 110, .97), rgba(16, 11, 42, .98)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15); animation: ar-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.ar-pclose { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.ar-pclose svg { width: 18px; height: 18px; }
.ar-pclose:hover { background: var(--card2); }
.ar-phead { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ar-phead .ar-av.huge { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 40px rgba(41, 211, 255, .45); }
.ar-pname { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; max-width: 100%; font: 900 26px/1.1 var(--font-b); overflow-wrap: anywhere; }
.ar-pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 0; border-radius: 16px; overflow: hidden; background: var(--line); }
.ar-pstat { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; background: rgba(11, 8, 32, .8); }
.ar-pstat b { font: 900 20px var(--font-d); }
.ar-pstat span { font: 800 10px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ar-pfav { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.ar-ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0 14px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.ar-ptab { appearance: none; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 800 14px var(--font-d); text-transform: uppercase; letter-spacing: .06em; padding: 10px; cursor: pointer; transition: background .2s, color .2s; }
.ar-ptab.is-on { background: linear-gradient(135deg, var(--me), var(--a0)); color: #fff; }
.ar-ppane { display: grid; gap: 14px; }
.ar-prow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); }
.ar-prow-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ar-prow-t b { font-size: 14px; }
.ar-prow-t small { font-size: 12px; color: var(--muted); }
.ar-pcode { flex: none; font: 800 16px var(--font-d); color: var(--gold); letter-spacing: .08em; }
.ar-pform { display: grid; gap: 6px; }
.ar-plabel { font: 800 12px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ar-pnote { margin: 0; font-size: 13px; color: var(--muted); }
.ar-pform .ar-err { margin: 0; }
.ar-ppane .ar-flist { border-top: 0; padding-top: 0; }
.ar-ppane .ar-flist-ul { max-height: 46vh; }
@media (max-width: 380px) { .ar-pstat b { font-size: 17px; } .ar-prow { flex-wrap: wrap; } }
.ar-joinroom .ar-input.ar-pname-in { text-transform: none; letter-spacing: 0; font-family: var(--font-b); }

/* Player pictures */
.ar-av.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
.ar-av.xs { width: 26px; height: 26px; font-size: 12px; box-shadow: none; }
.hs-av.has-img { background-size: cover !important; background-position: center; color: transparent; }
.ar-flist-ul .nm .ar-av.xs { margin-right: 2px; }

/* Rating tiers: a shield with the number, the tier beside it. */
.ar-rk { --t1: #F4F6FB; --t2: #8E9AAF; --tg: rgba(200, 210, 230, .35); --tx: #1d1033; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.ar-rk.t-bronze { --t1: #F6C08F; --t2: #9A4F22; --tg: rgba(214, 125, 62, .45); --tx: #2A1406; }
.ar-rk.t-silver { --t1: #FFFFFF; --t2: #8C98B4; --tg: rgba(190, 205, 235, .45); --tx: #1d1033; }
.ar-rk.t-gold { --t1: #FFF0A8; --t2: #E39A00; --tg: rgba(255, 201, 60, .55); --tx: #3A2300; }
.ar-rk.t-plat { --t1: #C9FFF4; --t2: #10A3A0; --tg: rgba(46, 229, 200, .5); --tx: #032B2A; }
.ar-rk.t-diamond { --t1: #D3F3FF; --t2: #6A4CFF; --tg: rgba(41, 211, 255, .6); --tx: #10063A; }
.ar-rk.t-champ { --t1: #FFD86B; --t2: #FF3D8B; --tg: rgba(255, 79, 163, .65); --tx: #3A0018; }
.ar-rk-sh { position: relative; width: 58px; height: 64px; display: grid; place-items: center; align-content: center; gap: 0; color: var(--tx);
  filter: drop-shadow(0 4px 10px var(--tg)) drop-shadow(0 0 1px rgba(0, 0, 0, .5)); }
.ar-rk-sh::before, .ar-rk-sh::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 16%, 100% 60%, 50% 100%, 0 60%, 0 16%); }
.ar-rk-sh::before { background: linear-gradient(160deg, var(--t1), var(--t2)); }
.ar-rk-sh::after { inset: 4px; background: linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 45%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, 0) 100%), linear-gradient(160deg, var(--t1), var(--t2)); }
.ar-rk.t-champ .ar-rk-sh::before { background: conic-gradient(from 210deg, #FFD86B, #FF3D8B, #7C5CFF, #29D3FF, #FFD86B); }
.ar-rk-ico, .ar-rk-sh b { position: relative; z-index: 1; }
.ar-rk-ico { width: 18px; height: 18px; margin-top: -4px; opacity: .85; }
.ar-rk-ico svg { width: 100%; height: 100%; display: block; }
.ar-rk-sh b { font: 900 14px/1 var(--font-d); letter-spacing: .01em; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ar-rk-tx { display: grid; justify-items: center; gap: 4px; }
.ar-rk-tier { font: 900 11px var(--font-d); text-transform: uppercase; letter-spacing: .12em; background: linear-gradient(90deg, var(--t1), var(--t2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-rk.t-silver .ar-rk-tier { background: linear-gradient(90deg, #fff, #B9C3DA); -webkit-background-clip: text; background-clip: text; }
.ar-rk.big { flex-direction: row; gap: 16px; padding: 12px 18px 12px 14px; border-radius: 20px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); width: 100%; max-width: 320px; }
.ar-rk.big .ar-rk-sh { width: 76px; height: 84px; }
.ar-rk.big .ar-rk-ico { width: 24px; height: 24px; }
.ar-rk.big .ar-rk-sh b { font-size: 19px; }
.ar-rk.big .ar-rk-tx { justify-items: start; flex: 1; text-align: left; }
.ar-rk.big .ar-rk-tier { font-size: 24px; letter-spacing: .06em; }
.ar-rk-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ar-rk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t2), var(--t1)); box-shadow: 0 0 12px var(--tg); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.ar-rk-tx small { font-size: 12px; color: var(--muted); }
.ar-me-btn .ar-rk { margin-left: auto; }
@media (max-width: 420px) { .ar-me-btn .ar-rk-sh { width: 50px; height: 56px; } .ar-me-btn .ar-rk-sh b { font-size: 12px; } .ar-me-btn .ar-rk-ico { width: 15px; height: 15px; } }

/* Profile: the picture button */
.ar-pav { appearance: none; position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.ar-pav .ar-av.huge { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 40px rgba(41, 211, 255, .45); transition: transform .2s; }
.ar-pav:hover .ar-av.huge { transform: scale(1.04); }
.ar-pav-cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0B0820; background: linear-gradient(135deg, var(--gold), var(--a1)); border: 3px solid #1E1450; }
.ar-pav-cam svg { width: 17px; height: 17px; }
.ar-ptabs { grid-template-columns: repeat(3, 1fr); }
.ar-phead .ar-rk.big { margin-top: 4px; }

/* Profile: the picture tab */
.ar-upl { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 2px dashed rgba(41, 211, 255, .45); background: rgba(41, 211, 255, .06); cursor: pointer; transition: background .2s, border-color .2s; }
.ar-upl:hover { background: rgba(41, 211, 255, .12); border-color: var(--me); }
.ar-upl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ar-upl:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.ar-upl-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--me), var(--a0)); }
.ar-upl-ico svg { width: 22px; height: 22px; }
.ar-upl-t { display: grid; gap: 2px; }
.ar-upl-t b { font-size: 15px; }
.ar-upl-t small { font-size: 12px; color: var(--muted); }
.ar-avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 4px; margin: -4px; }
.ar-avpick { appearance: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; transition: transform .15s; }
.ar-avpick:hover { transform: scale(1.07); }
.ar-avpick .ar-av.pk { width: 100%; height: 100%; font-size: 22px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); transition: box-shadow .2s; }
.ar-avpick.is-on .ar-av.pk { box-shadow: 0 0 0 3px var(--bg2), 0 0 0 6px var(--me), 0 0 18px rgba(41, 211, 255, .6); }
.ar-crop { display: grid; gap: 10px; justify-items: center; }
.ar-crop-stage { position: relative; width: min(240px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: grab; touch-action: none; box-shadow: 0 0 0 4px var(--me), 0 0 30px rgba(41, 211, 255, .45); }
.ar-crop-stage:active { cursor: grabbing; }
.ar-crop-stage canvas { width: 100%; height: 100%; display: block; }
.ar-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); pointer-events: none; }
.ar-crop .ar-pnote { text-align: center; }
.ar-crop-zoom { margin: 0; --p: 0%; max-width: 260px; }
.ar-crop-acts { display: flex; gap: 8px; }

/* Connection trouble */
.ar-net { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(420px, calc(100% - 24px)); padding: 10px 16px; border-radius: 16px;
  background: rgba(40, 10, 24, .92); border: 1px solid rgba(255, 84, 104, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ar-net-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ar-net-in { from { transform: translate(-50%, -20px); opacity: 0; } }
.ar-net > span:last-child { display: grid; }
.ar-net b { font-size: 14px; }
.ar-net small { font-size: 12px; color: var(--muted); }
.ar-net-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--no); animation: ar-blink 1s infinite; }

/* Friends playing now, and the friends list rows */
.ar-fl .ar-av { width: 40px; height: 40px; font-size: 16px; }
.ar-fl.busy { opacity: .85; }
.ar-fl .ar-btn:disabled { opacity: .5; background: var(--card2); box-shadow: none; }
.ar-flist-ul li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ar-flist-ul li .nm { flex: 1; }
.ar-flist-ul li .st { order: 5; flex-basis: 100%; padding-left: 18px; }
.ar-flist-ul li .st:empty { display: none; }
.ar-chip.go { background: linear-gradient(135deg, var(--me), var(--a0)); border-color: transparent; color: #fff; }

/* PIN and switches in the profile */
.ar-prow .ar-chip { flex: none; }
.ar-pin-st { flex: none; font: 800 12px var(--font-b); text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.ar-pin-st.on { background: rgba(46, 229, 157, .15); color: var(--ok); }
.ar-joinroom .ar-input.ar-pin { letter-spacing: .4em; font-family: var(--font-d); }
.ar-pinrow { display: grid; gap: 6px; }
.ar-pinrow .ar-input { font-size: 20px; letter-spacing: .4em; text-align: center; }
.ar-switch.ar-prow { padding: 12px 14px; }

/* Steal: STOLEN! */
.ar-stolen { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 50%, rgba(60, 40, 10, .9), rgba(11, 8, 32, .95) 70%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ar-fade .2s ease both; }
.ar-stolen.out { opacity: 0; transition: opacity .55s ease; }
.ar-stolen.victim { background: radial-gradient(60% 50% at 50% 50%, rgba(80, 14, 30, .92), rgba(11, 8, 32, .95) 70%); }
.ar-stolen-stripes { position: absolute; left: -20%; right: -20%; top: 50%; height: 120px; margin-top: -60px; transform: rotate(-8deg);
  background: repeating-linear-gradient(-45deg, rgba(255, 201, 60, .9) 0 22px, rgba(11, 8, 32, .9) 22px 44px); opacity: .22; animation: ar-stripes 3s linear both; }
@keyframes ar-stripes { from { transform: rotate(-8deg) translateX(-12%); } to { transform: rotate(-8deg) translateX(12%); } }
.ar-stolen-row { position: relative; display: grid; grid-template-columns: auto minmax(120px, 260px) auto; align-items: center; gap: 10px; width: min(560px, 92vw); }
.ar-stolen-p { display: grid; justify-items: center; gap: 6px; font: 800 14px var(--font-b); color: #fff; max-width: 96px; }
.ar-stolen-p span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-stolen-p .ar-av { width: 64px; height: 64px; font-size: 26px; display: inline-grid !important; }
.ar-stolen-p.from .ar-av { animation: ar-stolen-hit .5s .55s ease both; }
.ar-stolen-p.to .ar-av { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(255, 201, 60, .7); animation: ar-stolen-gain .6s 1.15s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ar-stolen-hit { 30% { transform: translateX(-6px) rotate(-6deg); filter: brightness(1.6); } 60% { transform: translateX(4px); } 100% { transform: none; filter: grayscale(.5) brightness(.85); } }
@keyframes ar-stolen-gain { 40% { transform: scale(1.22); } }
.ar-stolen-lane { position: relative; height: 70px; }
.ar-stolen-coin { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 999px; font: 900 18px var(--font-d); color: #2A1D00; white-space: nowrap;
  background: radial-gradient(circle at 30% 30%, #FFF6C9, #FFC93C 45%, #D98A00); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 24px rgba(255, 201, 60, .9);
  animation: ar-coin-lift .35s .2s ease-out both, ar-coin-fly .6s .65s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes ar-coin-lift { from { opacity: 0; transform: translate(-50%, 0) scale(.4); } to { opacity: 1; transform: translate(-50%, -80%) scale(1); } }
@keyframes ar-coin-fly { from { left: 0; transform: translate(-50%, -80%) scale(1); } 60% { transform: translate(-50%, -110%) scale(1.15) rotate(8deg); } to { left: 100%; transform: translate(-50%, -50%) scale(.9); } }
.ar-stolen-trail { position: absolute; top: 50%; left: 0; height: 6px; width: 0; margin-top: -3px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 201, 60, 0), rgba(255, 201, 60, .9));
  box-shadow: 0 0 16px rgba(255, 201, 60, .8); animation: ar-trail .6s .65s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes ar-trail { 0% { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
.ar-stolen-hand { position: absolute; top: 50%; right: -14px; width: 54px; height: 54px; color: var(--gold); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
  animation: ar-hand-grab 1.2s .25s cubic-bezier(.5, 0, .3, 1) both; }
.ar-stolen-hand svg { width: 100%; height: 100%; }
@keyframes ar-hand-grab { 0% { opacity: 0; transform: translate(40px, -50%) rotate(-30deg) scaleX(-1); } 25% { opacity: 1; } 40% { transform: translate(calc(-1 * min(260px, 50vw)), -60%) rotate(-10deg) scaleX(-1); } 55% { transform: translate(calc(-1 * min(260px, 50vw)), -60%) rotate(8deg) scaleX(-1) scale(.9); }
  100% { opacity: 1; transform: translate(0, -50%) rotate(-12deg) scaleX(-1); } }
.ar-stolen-t { position: relative; font: 900 clamp(54px, 17vw, 120px)/1 var(--font-d); letter-spacing: .04em; color: #fff; text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 201, 60, .8), 0 6px 0 #B36B00; transform: rotate(-6deg); animation: ar-stamp .5s 1.05s cubic-bezier(.2, 1.7, .4, 1) both, ar-glitch .9s 1.55s steps(2) both; }
.ar-stolen.victim .ar-stolen-t { text-shadow: 0 0 28px rgba(255, 84, 104, .9), 0 6px 0 #7A1430; }
.ar-stolen-t::before, .ar-stolen-t::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; animation: ar-glitch-l .9s 1.55s steps(3) both; }
.ar-stolen-t::before { color: #29D3FF; }
.ar-stolen-t::after { color: #FF4FA3; animation-name: ar-glitch-r; }
@keyframes ar-stamp { from { opacity: 0; transform: rotate(-6deg) scale(3); filter: blur(6px); } to { opacity: 1; transform: rotate(-6deg) scale(1); filter: none; } }
@keyframes ar-glitch { 0%, 100% { transform: rotate(-6deg); } 33% { transform: rotate(-6deg) translate(3px, -2px) skewX(-6deg); } 66% { transform: rotate(-6deg) translate(-3px, 1px) skewX(4deg); } }
@keyframes ar-glitch-l { 0% { opacity: .9; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 50% { opacity: .9; transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); } 100% { opacity: 0; transform: none; } }
@keyframes ar-glitch-r { 0% { opacity: .9; transform: translate(6px, -2px); clip-path: inset(50% 0 20% 0); } 50% { opacity: .9; transform: translate(-5px, 2px); clip-path: inset(5% 0 70% 0); } 100% { opacity: 0; transform: none; } }
.ar-stolen-sub { position: relative; font: 800 18px var(--font-b); color: #fff; max-width: 440px; animation: ar-fade .4s 1.35s both; }
.ar-stolen-bits { position: absolute; left: 50%; top: 50%; }
.ar-stolen-bits i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); opacity: 0;
  animation: ar-bit .8s 1.15s ease-out both; }
.ar-stolen-bits i:nth-child(3n) { background: #fff; width: 6px; height: 6px; }
.ar-stolen-bits i:nth-child(4n) { background: var(--opp); box-shadow: 0 0 10px var(--opp); }
@keyframes ar-bit { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 2.4)) scale(.3); } }
@media (prefers-reduced-motion: reduce) { .ar-stolen-hand, .ar-stolen-bits, .ar-stolen-trail { display: none; } }

/* The rating after a battle */
.ar-rres { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; max-width: 420px; margin: 4px auto 0; padding: 14px 18px 14px 14px; border-radius: 22px; text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); animation: ar-rise .5s .3s cubic-bezier(.2, .9, .3, 1.2) both; flex-wrap: wrap; }
.ar-rres.up { border-color: rgba(46, 229, 157, .35); }
.ar-rres.down { border-color: rgba(255, 84, 104, .3); }
.ar-rres-badge .ar-rk-sh { width: 72px; height: 80px; }
.ar-rres-badge .ar-rk-sh b { font-size: 17px; }
.ar-rres-badge .ar-rk-ico { width: 22px; height: 22px; }
.ar-rres-badge .ar-rk-tier { font-size: 12px; }
.ar-rk-new .ar-rk-sh { animation: ar-rk-promo .9s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes ar-rk-promo { 0% { transform: scale(.3) rotate(-20deg); filter: brightness(3) drop-shadow(0 0 30px #fff); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }
.ar-rres-tx { flex: 1; min-width: 160px; display: grid; gap: 6px; }
.ar-rres-k { font: 800 11px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.ar-rres-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-rres-n { font: 900 38px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.ar-rres-d { padding: 5px 12px; border-radius: 999px; font: 900 16px var(--font-d); opacity: 0; transform: translateY(8px) scale(.8); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.ar-rres-d.in { opacity: 1; transform: none; }
.ar-rres.up .ar-rres-d { color: #062A1C; background: linear-gradient(135deg, #7CFFC4, var(--ok)); box-shadow: 0 0 18px rgba(46, 229, 157, .5); }
.ar-rres.down .ar-rres-d { color: #fff; background: linear-gradient(135deg, var(--no), #B0213A); box-shadow: 0 0 18px rgba(255, 84, 104, .4); }
.ar-rres.even .ar-rres-d { background: var(--card2); color: var(--text); }
.ar-rres-bar { --t1: #fff; --t2: #8C98B4; --tg: rgba(190, 205, 235, .45); }
.ar-rres-bar.t-bronze { --t1: #F6C08F; --t2: #9A4F22; --tg: rgba(214, 125, 62, .45); } .ar-rres-bar.t-gold { --t1: #FFF0A8; --t2: #E39A00; --tg: rgba(255, 201, 60, .55); }
.ar-rres-bar.t-plat { --t1: #C9FFF4; --t2: #10A3A0; --tg: rgba(46, 229, 200, .5); } .ar-rres-bar.t-diamond { --t1: #D3F3FF; --t2: #6A4CFF; --tg: rgba(41, 211, 255, .6); } .ar-rres-bar.t-champ { --t1: #FFD86B; --t2: #FF3D8B; --tg: rgba(255, 79, 163, .65); }
.ar-rres-bar i { transition: width 1.3s cubic-bezier(.2, .9, .3, 1); }
.ar-rres-note { font-size: 12px; color: var(--muted); }
.ar-rres-promo { flex-basis: 100%; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; text-align: center; font: 900 18px var(--font-d); text-transform: uppercase; letter-spacing: .04em; animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-rres-promo.up { color: #2A1D00; background: linear-gradient(135deg, #FFF0A8, var(--gold), var(--a1)); box-shadow: 0 0 30px rgba(255, 201, 60, .55); }
.ar-rres-promo.down { color: var(--text); background: rgba(255, 255, 255, .08); font-size: 14px; }
.ar-rres.promoted { animation: ar-rres-glow 1.6s ease both; }
@keyframes ar-rres-glow { 30% { box-shadow: 0 0 0 4px rgba(255, 201, 60, .5), 0 0 60px rgba(255, 201, 60, .5); } }
.ar-fxprev { position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 99; }

/* Room at the bottom for the phone's home bar, so Quit and Back to the lobby are never under it. */
.ar-app { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.ar-quit { margin-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Quick Match */
.ar-quick { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; min-width: min(320px, 100%); padding: 16px 28px; border-radius: 18px; font: 900 20px var(--font-d); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 10px 30px rgba(41, 211, 255, .35), 0 0 0 1px rgba(255, 255, 255, .15) inset; transition: transform .15s, box-shadow .2s; }
.ar-quick svg { width: 22px; height: 22px; }
.ar-quick:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(41, 211, 255, .5), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.ar-quick:active { transform: scale(.97); }
.ar-quick-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ar-mode-more { display: block; margin: 6px auto 0; font-weight: 800; }
.lb-nav.ar-tabs { margin-left: 0; }
.lb-nav.ar-tabs .ar-tab { text-decoration: none; }

/* Daily Duel streak */
.ar-streak { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 138, 61, .1); border: 1px solid rgba(255, 138, 61, .35); }
.ar-streak-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--gold), var(--a1) 60%, var(--no)); box-shadow: 0 0 14px rgba(255, 138, 61, .55); }
.ar-streak-ico svg { width: 20px; height: 20px; }
.ar-streak.hot .ar-streak-ico { animation: ar-flicker 1.6s ease-in-out infinite; }
@keyframes ar-flicker { 50% { box-shadow: 0 0 22px rgba(255, 201, 60, .8); transform: scale(1.06); } }
.ar-streak.risk { border-color: rgba(255, 201, 60, .6); background: rgba(255, 201, 60, .1); }
.ar-streak-t { display: grid; flex: 1; min-width: 0; }
.ar-streak-t b { font: 900 16px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.ar-streak-t small { font-size: 12px; color: var(--muted); }
.ar-streak-dots { display: flex; gap: 4px; flex: none; }
.ar-streak-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.ar-streak-dots i.on { background: var(--a1); box-shadow: 0 0 6px var(--a1); }

/* Sound on/off */
.ar-sound { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; display: grid; place-items: center; flex: none; }
.ar-sound svg { width: 20px; height: 20px; }
.ar-sound .x { display: none; }
.ar-sound.off { color: var(--muted); }
.ar-sound.off .w { display: none; }
.ar-sound.off .x { display: inline; }

/* How a mode works, while waiting */
.ar-how { margin: 0 auto; width: 100%; max-width: 520px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); padding: 4px 14px; }
.ar-how summary { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 15px; }
.ar-how summary::-webkit-details-marker { display: none; }
.ar-how summary::after { content: "+"; margin-left: auto; font: 800 20px var(--font-b); color: var(--muted); }
.ar-how[open] summary::after { content: "\2212"; }
.ar-how-ico .ar-mode-ico { width: 36px; height: 36px; border-radius: 11px; }
.ar-how-ico .ar-mode-ico svg { width: 20px; height: 20px; }
.ar-how p { margin: 2px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ar-how[open] { border-color: rgba(41, 211, 255, .4); }

/* Badges */
.ar-badges { display: grid; gap: 12px; }
.ar-badges .ar-h2 { margin: 6px 0 0; }
.ar-badge-h { margin: 6px 0 0; font: 800 14px var(--font-d); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ar-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.ar-badge-c { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text); }
.ar-badge-c.locked { color: var(--muted); }
.ar-badge { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .25), transparent 55%), var(--bgc, linear-gradient(145deg, #7C5CFF, #29D3FF)); box-shadow: 0 0 0 3px var(--ring, rgba(255, 255, 255, .25)), 0 6px 16px rgba(0, 0, 0, .35); color: #fff; }
.ar-badge-i { width: 28px; height: 28px; display: grid; }
.ar-badge-i svg { width: 100%; height: 100%; }
.ar-badge.ms { --bgc: linear-gradient(145deg, #FF8A3D, #E9478F); --ring: #FFC93C; }
.ar-badge.off { --bgc: rgba(255, 255, 255, .06); --ring: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .25); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
.ar-badge.lv1 { --bgc: linear-gradient(145deg, #F6C08F, #9A4F22); --ring: #C77B45; color: #2A1406; }
.ar-badge.lv2 { --bgc: linear-gradient(145deg, #FFFFFF, #8C98B4); --ring: #C9D2E6; color: #1d1033; }
.ar-badge.lv3 { --bgc: linear-gradient(145deg, #FFF0A8, #E39A00); --ring: #FFC93C; color: #3A2300; box-shadow: 0 0 0 3px #FFC93C, 0 0 18px rgba(255, 201, 60, .6); }
.ar-pbadges { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.ar-pbadges > b { flex: none; font: 900 13px var(--font-d); text-transform: uppercase; letter-spacing: .06em; }
.ar-badges.mini { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.ar-badges.mini .ar-badge { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--ring, rgba(255, 255, 255, .25)); }
.ar-badges.mini .ar-badge-i { width: 17px; height: 17px; }

/* Tier frames around a player's picture */
.ar-av.ar-av.tf-bronze { box-shadow: 0 0 0 3px #C77B45; }
.ar-av.ar-av.tf-silver { box-shadow: 0 0 0 3px #C9D2E6; }
.ar-av.ar-av.tf-gold { box-shadow: 0 0 0 3px #FFC93C, 0 0 14px rgba(255, 201, 60, .45); }
.ar-av.ar-av.tf-plat { box-shadow: 0 0 0 3px #3FE0D0, 0 0 16px rgba(46, 229, 200, .45); }
.ar-av.ar-av.tf-diamond { box-shadow: 0 0 0 3px #8FD8FF, 0 0 0 6px rgba(124, 92, 255, .55), 0 0 22px rgba(41, 211, 255, .55); }
.ar-av.ar-av.tf-champ { box-shadow: 0 0 0 3px #FFD86B, 0 0 0 6px rgba(255, 61, 139, .65), 0 0 26px rgba(255, 79, 163, .6); }

/* Seasons */
.ar-sbadge .ar-rk-sh { width: 50px; height: 56px; }
.ar-sbadge .ar-rk-sh b { font-size: 11px; }
.ar-sbadge .ar-rk-ico { width: 14px; height: 14px; }
.ar-sbadge .ar-rk-tx { display: none; }
.ar-sbadge.mini .ar-rk-sh { width: 28px; height: 32px; }
.ar-sbadge.mini .ar-rk-sh b, .ar-sbadge.mini .ar-rk-ico { display: none; }
.ar-season-chip, .lb-season { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(124, 92, 255, .16); border: 1px solid rgba(124, 92, 255, .4); font-size: 13px; font-weight: 700; color: var(--text); }
.lb-season { margin-left: auto; }
.ar-pseason { margin-top: 8px; }

/* Quick reactions */
.ar-emotes { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 8px; }
.ar-emote-tog { appearance: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: rgba(22, 15, 56, .9); color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ar-emote-tog svg { width: 26px; height: 26px; }
.ar-emote-tog[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.ar-emote-tray { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(22, 15, 56, .95); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: ar-pop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-emote { appearance: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); cursor: pointer; font-size: 22px; line-height: 1; transition: transform .12s; }
.ar-emote.txt { font: 900 14px var(--font-d); color: var(--gold); }
.ar-emote:hover { transform: scale(1.15); }
.ar-emote:active { transform: scale(.9); }
.ar-emote-float { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 61; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.ar-emote-b { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(22, 15, 56, .92); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); animation: ar-emote-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-emote-b.me { padding: 6px 12px; border-color: rgba(41, 211, 255, .5); }
.ar-emote-b.out { opacity: 0; transform: translateY(-16px); transition: opacity .5s, transform .5s; }
@keyframes ar-emote-in { from { opacity: 0; transform: translateY(20px) scale(.6); } }
.ar-emote-e { font-size: 26px; line-height: 1; }
.ar-emote-e.txt { font: 900 18px var(--font-d); color: var(--gold); }
.ar-emote-n { font-size: 12px; font-weight: 700; color: var(--muted); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-emote-b .ar-av.xs { display: inline-grid !important; }
@media (max-width: 520px) { .ar-emotes { bottom: calc(76px + env(safe-area-inset-bottom)); } .ar-emote-float { bottom: calc(136px + env(safe-area-inset-bottom)); } }

/* Share result and small messages */
.ar-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ar-share svg { width: 18px; height: 18px; }
.ar-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 130; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: rgba(22, 15, 56, .96); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-weight: 700; font-size: 14px; animation: ar-net-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.ar-toast.out { opacity: 0; transition: opacity .4s; }
.ar-pbadges { min-width: 0; overflow: hidden; }
.ar-pbadges .ar-badges.mini { flex: 1; min-width: 0; flex-wrap: wrap; overflow: visible; }
.ar-pbadges { align-items: flex-start; }
.ar-pbadges > b { padding-top: 8px; }
.ar-pbox { min-width: 0; }
.ar-pbox > * { min-width: 0; max-width: 100%; }

/* Halftime */
.st-half { gap: 18px; padding-top: 2vh; width: 100%; }
.hf-head { display: grid; justify-items: center; gap: 6px; }
.hf-kicker { padding: 5px 14px; border-radius: 999px; font: 900 13px var(--font-d); letter-spacing: .2em; text-transform: uppercase; color: #2A1D00; background: linear-gradient(135deg, var(--gold), var(--a1)); box-shadow: 0 0 22px rgba(255, 201, 60, .45); animation: ar-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hf-title { margin: 4px 0 0; font: 900 clamp(34px, 9vw, 54px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .02em; background: linear-gradient(180deg, #fff, #BFE9FF); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hf-title .6s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes hf-title { from { opacity: 0; transform: translateY(14px) scale(.9); letter-spacing: .3em; filter: blur(4px); } }
.hf-sub { margin: 0; color: var(--muted); font-weight: 700; animation: ar-fade .4s .35s both; }
.hf-prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 360px; margin-top: 6px; }
.hf-prog i { width: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); animation: ar-fade .2s calc(.4s + var(--i) * 25ms) both; }
.hf-prog i.on { background: linear-gradient(90deg, var(--me), var(--a0)); box-shadow: 0 0 8px rgba(41, 211, 255, .5); }
.hf-prog.bar { display: block; width: min(320px, 80vw); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hf-prog.bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--me), var(--a0)); }
.st-half .ar-av { display: inline-grid !important; }
.hf-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; max-width: 520px; }
.hf-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px 14px; border-radius: 22px; background: var(--card); border: 2px solid var(--line); min-width: 0; }
.hf-card.me { border-color: rgba(41, 211, 255, .6); animation: ar-slam-l .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.hf-card.opp { border-color: rgba(255, 79, 163, .6); animation: ar-slam-r .6s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
.hf-card.lead { box-shadow: 0 0 0 4px rgba(255, 201, 60, .25), 0 0 34px rgba(255, 201, 60, .35); border-color: var(--gold); }
.hf-crown { position: absolute; top: -16px; width: 32px; height: 32px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 201, 60, .7)); animation: ar-pop .5s .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.hf-crown svg { width: 100%; height: 100%; }
.hf-nm { display: flex; align-items: center; gap: 5px; max-width: 100%; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-sc { font: 900 clamp(32px, 9vw, 46px)/1 var(--font-d); font-variant-numeric: tabular-nums; }
.hf-card.me .hf-sc { color: var(--me); } .hf-card.opp .hf-sc { color: var(--opp); }
.hf-cr { font-size: 12px; color: var(--muted); font-weight: 700; }
.hf-vs { font: 900 26px var(--font-d); color: var(--gold); text-shadow: 0 0 18px rgba(255, 201, 60, .6); animation: ar-vs-in .6s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
.hf-tug { position: relative; width: 100%; max-width: 520px; height: 16px; border-radius: 999px; background: linear-gradient(90deg, transparent, transparent), var(--opp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 0 20px rgba(255, 79, 163, .35); }
.hf-tug i.me { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, var(--a0), var(--me)); box-shadow: 0 0 20px rgba(41, 211, 255, .5); transition: width 1.1s cubic-bezier(.2, .9, .3, 1.1); }
.hf-knob { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 0 20px #fff; transition: left 1.1s cubic-bezier(.2, .9, .3, 1.1); }
.hf-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; width: 100%; max-width: 480px; height: 250px; }
.hf-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.hf-col .hf-sc { font-size: clamp(20px, 6vw, 28px); }
.hf-col.p1 .hf-sc { color: var(--gold); }
.hf-col.me .hf-nm { color: var(--me); }
.hf-blk { width: 100%; height: var(--h); max-height: 110px; min-height: 40px; display: grid; place-items: start center; padding-top: 6px; border-radius: 14px 14px 4px 4px; font: 900 24px var(--font-d); color: rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); transform-origin: bottom; animation: hf-rise .7s var(--d) cubic-bezier(.2, 1.2, .4, 1) both; }
.hf-blk.r1 { background: linear-gradient(180deg, #FFE27A, #E39A00); color: #3A2300; box-shadow: 0 0 26px rgba(255, 201, 60, .45); }
.hf-blk.r2 { background: linear-gradient(180deg, #FFFFFF, #8C98B4); color: #1d1033; }
.hf-blk.r3 { background: linear-gradient(180deg, #F6C08F, #9A4F22); color: #2A1406; }
@keyframes hf-rise { from { transform: scaleY(0); opacity: .3; } }
.hf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 480px; }
.hf-list li { display: grid; grid-template-columns: 30px auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); animation: ar-rise .45s calc(.6s + var(--i) * 60ms) cubic-bezier(.2, .9, .3, 1.2) both; }
.hf-list li.me { border-color: var(--me); background: rgba(41, 211, 255, .12); }
.hf-list li.gone { opacity: .5; }
.hf-list .rk { font: 900 18px var(--font-d); color: var(--muted); text-align: center; }
.hf-list .nm { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-list .sc { font: 900 18px var(--font-d); }
.hf-next { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.ar-cdring.sm { width: 54px; margin: 0; }
.ar-cdring.sm b { font-size: 20px; }
.ar-cdring.sm circle { stroke-width: 9; }

/* Right and wrong */
.ar-opt { position: relative; }
.ar-opt-ic { position: absolute; top: 50%; right: 10px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; animation: ar-pop .45s .2s cubic-bezier(.2, 1.7, .4, 1) both; }
.ar-opt-ic svg { width: 18px; height: 18px; }
.ar-opt-ic.ok { background: #fff; color: #0E8A60; box-shadow: 0 0 14px rgba(255, 255, 255, .6); }
.ar-opt-ic.no { background: var(--no); color: #fff; }
.ar-opts.reveal .ar-opt .ar-picks { margin-right: 34px; }
.ar-vbadge { display: inline-flex; align-items: center; gap: 12px; }
.ar-vb-ic { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; animation: ar-vb-in .55s cubic-bezier(.2, 1.7, .4, 1) both; }
.ar-vb-ic svg { position: relative; z-index: 1; width: 30px; height: 30px; }
.ar-vbadge.ok .ar-vb-ic { color: #04301E; background: radial-gradient(circle at 35% 30%, #B8FFE0, var(--ok)); box-shadow: 0 0 26px rgba(46, 229, 157, .7); }
.ar-vbadge.no .ar-vb-ic { color: #fff; background: radial-gradient(circle at 35% 30%, #FF9AA8, var(--no)); box-shadow: 0 0 26px rgba(255, 84, 104, .6); animation: ar-vb-in .55s cubic-bezier(.2, 1.7, .4, 1) both, ar-vb-no .5s .5s ease both; }
.ar-vbadge.time .ar-vb-ic { color: #2A1D00; background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--gold)); box-shadow: 0 0 22px rgba(255, 201, 60, .5); }
.ar-vb-ic .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid currentColor; opacity: 0; }
.ar-vbadge.ok .ring { border-color: var(--ok); } .ar-vbadge.no .ring { border-color: var(--no); } .ar-vbadge.time .ring { border-color: var(--gold); }
.ar-vb-ic .r1 { animation: ar-vb-ring .9s .15s ease-out both; }
.ar-vb-ic .r2 { animation: ar-vb-ring .9s .35s ease-out both; }
@keyframes ar-vb-in { from { transform: scale(0) rotate(-120deg); } 70% { transform: scale(1.18) rotate(8deg); } to { transform: none; } }
@keyframes ar-vb-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ar-vb-no { 20% { transform: translateX(-7px) rotate(-8deg); } 40% { transform: translateX(6px) rotate(6deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.ar-verdict { display: inline-flex; }
.ar-verdict span { display: inline-block; animation: ar-vb-letter .45s calc(.12s + var(--i) * 35ms) cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ar-vb-letter { from { opacity: 0; transform: translateY(-22px) scale(1.4); } }
.ar-verdict.no span { animation-name: ar-vb-letter-no; }
@keyframes ar-vb-letter-no { from { opacity: 0; transform: translateY(14px) skewX(-14deg); filter: blur(3px); } }
.ar-rfx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.ar-rfx.ok { box-shadow: inset 0 0 90px rgba(46, 229, 157, .55); animation: ar-rfx-edge 1.2s ease both; }
.ar-rfx.no { box-shadow: inset 0 0 110px rgba(255, 84, 104, .65); animation: ar-rfx-edge .9s ease both; }
@keyframes ar-rfx-edge { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.ar-rfx.ok i { position: absolute; bottom: -20px; left: var(--x); width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); transform: scale(var(--s)); animation: ar-spark 1.2s var(--d) cubic-bezier(.2, .7, .3, 1) both; }
.ar-rfx.ok i:nth-child(3n) { background: #fff; box-shadow: 0 0 10px #fff; width: 7px; height: 7px; }
.ar-rfx.ok i:nth-child(4n) { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
@keyframes ar-spark { 0% { opacity: 0; transform: translateY(0) scale(var(--s)); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-62vh) scale(.2); } }

/* Text size (set in the player profile, kept on the device). */
.ar-app .ar-prompt { font-size: calc(clamp(26px, 7.2vw, 40px) * var(--ar-text, 1)); }
.ar-app .ar-prompt.small { font-size: calc(clamp(20px, 5.4vw, 27px) * var(--ar-text, 1)); }
.ar-app .ar-opt { font-size: calc(17px * var(--ar-text, 1)); }
.ar-app .ar-fact-text { font-size: calc(clamp(19px, 4.8vw, 28px) * var(--ar-text, 1)); }
.ar-app .ar-note, .ar-app .ar-row-b, .ar-app .ar-me-rec { font-size: calc(14px * var(--ar-text, 1)); }
.ar-textsize { display: grid; gap: 8px; }
.ar-textsize > span { display: grid; gap: 2px; }
.ar-textsize small { color: var(--muted); font-size: 13px; }

/* Daily Duel card: the duel on the left, today's leader on the right. */
.ar-daily { --dl: var(--gold); --dl-ink: #2A1D00; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 0; padding: 0; }
.ar-daily.t-music { --dl: var(--opp); --dl-ink: #fff; }
.ar-daily.t-decades { --dl: var(--me); --dl-ink: #032A36; }
.ar-daily-main { position: relative; z-index: 1; display: grid; gap: 8px; align-content: start; padding: 18px; min-width: 0; }
.ar-daily::after { right: auto; left: 55%; }
.ar-daily-lead { position: relative; z-index: 1; appearance: none; border: 0; border-left: 1px solid color-mix(in srgb, var(--dl) 40%, transparent); cursor: pointer; font: inherit; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 8px; min-width: 0; text-align: center;
  background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--dl) 26%, transparent), rgba(10, 6, 30, .35) 70%); transition: background .2s; }
.ar-daily-lead:hover { background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--dl) 36%, transparent), rgba(10, 6, 30, .3) 70%); }
.ar-daily-lead:focus-visible { outline: 3px solid var(--dl); outline-offset: -3px; }
.ar-dl-k { font: 900 11px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--dl); }
.ar-dl-face { position: relative; display: grid; place-items: center; margin-top: 20px; }
.ar-dl-face .ar-av.big { width: clamp(52px, 13vw, 76px); height: clamp(52px, 13vw, 76px); font-size: clamp(22px, 6vw, 32px);
  box-shadow: 0 0 0 3px var(--dl), 0 0 24px color-mix(in srgb, var(--dl) 60%, transparent); }
.ar-dl-crown { position: absolute; top: -24px; left: 50%; width: 34px; height: 30px; color: var(--dl); transform: translateX(-50%) rotate(-8deg);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px color-mix(in srgb, var(--dl) 70%, transparent)); animation: ar-dl-crown 2.8s ease-in-out infinite; }
.ar-dl-crown svg { width: 100%; height: 100%; display: block; }
@keyframes ar-dl-crown { 0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); } 50% { transform: translateX(-50%) rotate(-4deg) translateY(-3px); } }
.ar-dl-q { display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--muted); font-weight: 900; }
.ar-daily-lead.empty .ar-dl-crown { opacity: .45; animation: none; }
.ar-dl-name { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; margin-top: 6px; font-weight: 800; font-size: 14px; }
.ar-dl-name > span { overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ar-dl-name .ar-flag { flex: none; width: 16px; height: 12px; }
.ar-dl-score { font: 900 clamp(22px, 6vw, 32px)/1 var(--font-d); color: var(--dl); text-shadow: 0 0 18px color-mix(in srgb, var(--dl) 55%, transparent); }
.ar-dl-sub { color: var(--muted); font-size: 12px; line-height: 1.2; }
.ar-daily-lead.me .ar-dl-name { color: var(--dl); }
@media (max-width: 480px) { .ar-dl-name .ar-flag { display: none; } .ar-dl-name { font-size: 13px; } }
@media (max-width: 380px) { .ar-dl-sub { display: none; } .ar-daily-main { padding: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { .ar-dl-crown { animation: none; } }

/* Halftime badge */
.hf-badge { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 460px; }
.hf-wing { flex: 1; height: 10px; min-width: 20px; border-radius: 3px; opacity: .9;
  background: repeating-linear-gradient(-55deg, var(--gold) 0 6px, transparent 6px 11px); animation: hf-wing .6s cubic-bezier(.2, 1.2, .4, 1) .25s both; }
.hf-wing.l { transform-origin: right; -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.hf-wing.r { transform-origin: left; -webkit-mask: linear-gradient(270deg, transparent, #000); mask: linear-gradient(270deg, transparent, #000); }
@keyframes hf-wing { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .9; } }
.hf-plate { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 16px; border-radius: 12px; transform: skewX(-10deg);
  background: linear-gradient(180deg, #FFE27A, var(--gold) 55%, #E89B00); color: #2A1D00; border: 2px solid #FFF3C4;
  box-shadow: 0 6px 0 #9A6400, 0 12px 30px rgba(255, 180, 0, .45), 0 0 40px rgba(255, 201, 60, .35); animation: hf-plate .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.hf-plate > * { transform: skewX(10deg); }
.hf-plate b { font: 900 clamp(22px, 6.4vw, 30px)/1 var(--font-d); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.hf-plate::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: hf-shine 2.6s ease-in-out .7s infinite; }
@keyframes hf-shine { 0% { left: -40%; } 45%, 100% { left: 130%; } }
@keyframes hf-plate { 0% { opacity: 0; transform: skewX(-10deg) scale(.4) rotate(-6deg); } 100% { opacity: 1; transform: skewX(-10deg) scale(1) rotate(0); } }
.hf-watch { display: grid; place-items: center; width: clamp(26px, 7vw, 34px); height: clamp(26px, 7vw, 34px); }
.hf-watch svg { width: 100%; height: 100%; }
.hf-watch .hf-hand { transform-origin: 12px 14px; animation: hf-hand 1.2s steps(8) infinite; }
@keyframes hf-hand { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hf-plate, .hf-wing { animation: none; } .hf-plate::after { display: none; } .hf-watch .hf-hand { animation: none; } }

/* Perfect games line in the profile */
.ar-pperfect { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 8px 14px; border-radius: 999px; width: fit-content; margin-inline: auto;
  background: linear-gradient(135deg, rgba(255, 201, 60, .22), rgba(255, 140, 0, .14)); border: 1px solid rgba(255, 201, 60, .55); font-weight: 800; color: var(--gold); }
.ar-pperfect-i { width: 18px; height: 18px; display: grid; }
.ar-pperfect-i svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255, 201, 60, .7)); }

/* Hot streak */
.ar-hot { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; align-content: center; gap: 6px; animation: ar-hot-glow 2.6s ease both; }
@keyframes ar-hot-glow { 0% { box-shadow: inset 0 0 0 rgba(255, 110, 0, 0); } 20% { box-shadow: inset 0 -120px 160px -40px rgba(255, 110, 0, .55), inset 0 0 80px rgba(255, 60, 0, .35); } 100% { box-shadow: inset 0 0 0 rgba(255, 110, 0, 0); } }
.ar-hot-wall { position: absolute; left: 0; right: 0; bottom: -10px; height: 40vh; }
.ar-hot-flame { position: absolute; bottom: 0; left: calc(var(--x) - 5%); width: 22%; transform-origin: 50% 100%; transform: scaleY(0); opacity: .9;
  animation: ar-hot-rise 1.9s cubic-bezier(.2, 1.1, .4, 1) var(--d) both; filter: drop-shadow(0 0 16px rgba(255, 120, 0, .7)); }
.ar-hot-flame svg { width: 100%; height: auto; display: block; }
.ar-hot-flame .f1, .ar-hot-ico .f1 { transform-origin: 50% 100%; animation: ar-hot-flicker .32s ease-in-out infinite alternate; }
.ar-hot-flame .f2, .ar-hot-ico .f2 { transform-origin: 50% 100%; animation: ar-hot-flicker .24s ease-in-out infinite alternate-reverse; }
@keyframes ar-hot-flicker { from { transform: scale(1, 1) skewX(-2deg); } to { transform: scale(.94, 1.08) skewX(3deg); } }
@keyframes ar-hot-rise { 0% { transform: scaleY(0); opacity: 0; } 25% { transform: scaleY(calc(var(--h) * 1.25)); opacity: 1; } 70% { transform: scaleY(var(--h)); opacity: .9; } 100% { transform: scaleY(0); opacity: 0; } }
.ar-hot-embers i { position: absolute; bottom: 0; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: #FFD54F; box-shadow: 0 0 8px #FF9100;
  animation: ar-ember 1.8s ease-out var(--d) both; }
@keyframes ar-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -70vh); opacity: 0; } }
.ar-hot-badge { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 22px 10px 12px; border-radius: 22px;
  background: linear-gradient(135deg, #FF6A00, #FF2D55); border: 2px solid #FFD180; color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 106, 0, .2), 0 14px 40px rgba(255, 60, 0, .55); animation: ar-hot-punch .6s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes ar-hot-punch { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.ar-hot-ico { width: 46px; display: block; }
.ar-hot-ico svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(255, 230, 120, .8)); }
.ar-hot-t { display: grid; line-height: 1; }
.ar-hot-n { font: 900 46px/1 var(--font-d); text-shadow: 0 3px 0 rgba(120, 20, 0, .45); }
.ar-hot-t small { font: 900 12px var(--font-d); letter-spacing: .16em; text-transform: uppercase; opacity: .95; }
.ar-hot-w { position: relative; font: 900 clamp(30px, 9vw, 54px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .03em; font-style: italic;
  background: linear-gradient(180deg, #FFF3C4, #FFB300 55%, #FF5722); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(90, 20, 0, .6)) drop-shadow(0 0 18px rgba(255, 120, 0, .6)); animation: ar-hot-word .55s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes ar-hot-word { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ar-hot.big .ar-hot-badge { transform-origin: center; }
.ar-hot.big .ar-hot-w, .ar-hot.mega .ar-hot-w { animation: ar-hot-word .55s cubic-bezier(.2, 1.6, .4, 1) .15s both, ar-hot-shake .1s linear .7s 6; }
@keyframes ar-hot-shake { 50% { transform: translate(2px, -1px) rotate(-1deg); } }
.ar-hot.mega .ar-hot-badge { background: linear-gradient(135deg, #7A2BFF, #FF2D55 50%, #FF9100); }
.ar-hot.out { opacity: 0; transition: opacity .55s; }

/* Perfect game */
.ar-perfect { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255, 201, 60, .35), rgba(20, 10, 50, .94) 60%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: ar-fade-in .35s ease both; }
@keyframes ar-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ar-perfect.out { opacity: 0; transition: opacity .45s; }
.ar-perfect-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 220, 120, .16) 0 8deg, transparent 8deg 20deg); animation: ar-perfect-spin 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); }
@keyframes ar-perfect-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ar-perfect-ring { position: relative; width: clamp(170px, 46vw, 230px); aspect-ratio: 1; display: grid; place-items: center; animation: ar-hot-punch .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-perfect-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-perfect-ring .bg { fill: rgba(10, 6, 30, .6); stroke: rgba(255, 255, 255, .12); stroke-width: 9; }
.ar-perfect-ring .fg { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327;
  filter: drop-shadow(0 0 8px rgba(255, 201, 60, .9)); animation: ar-ring-fill 1.1s cubic-bezier(.4, 0, .2, 1) .5s forwards; }
@keyframes ar-ring-fill { to { stroke-dashoffset: 0; } }
.ar-perfect-star { position: absolute; width: 46%; color: var(--gold); top: 14%; animation: ar-star-pop .7s cubic-bezier(.2, 1.8, .4, 1) 1.55s both; filter: drop-shadow(0 0 14px rgba(255, 201, 60, .9)); }
.ar-perfect-star svg { width: 100%; height: auto; display: block; }
@keyframes ar-star-pop { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.ar-perfect-n { position: absolute; bottom: 18%; font: 900 clamp(26px, 7vw, 36px)/1 var(--font-d); color: #fff; font-variant-numeric: tabular-nums; }
.ar-perfect-w { position: relative; margin: 8px 0 0; text-align: center; font: 900 clamp(38px, 11vw, 72px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .02em; }
.ar-perfect-w span { display: inline-block; background: linear-gradient(180deg, #FFF8D6, #FFC93C 50%, #E89B00); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #8A5A00) drop-shadow(0 0 20px rgba(255, 201, 60, .5)); animation: ar-letter-drop .5s cubic-bezier(.2, 1.6, .4, 1) calc(1.7s + var(--i) * 45ms) both; }
.ar-perfect-w span.sp { width: .3em; }
@keyframes ar-letter-drop { 0% { transform: translateY(-80px) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ar-perfect-sub { margin: 0; color: #FFE9A0; font-weight: 800; font-size: clamp(15px, 4vw, 19px); text-align: center; animation: ar-fade-in .5s ease 2.4s both; }
.ar-perfect-tap { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; font-weight: 700; animation: ar-fade-in .5s ease 3s both; }
.ar-perfect-bits { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.ar-perfect-bits i { position: absolute; width: 22px; height: 22px; margin: -11px; color: var(--gold); opacity: 0; animation: ar-star-fly 1.1s cubic-bezier(.1, .8, .3, 1) 1.6s both; }
.ar-perfect-bits i:nth-child(even) { color: #fff; width: 14px; height: 14px; margin: -7px; }
.ar-perfect-bits svg { width: 100%; height: 100%; display: block; }
@keyframes ar-star-fly { 0% { transform: rotate(var(--a)) translateY(0) scale(.3); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1) rotate(180deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ar-hot, .ar-hot-badge, .ar-hot-w, .ar-hot-ico .f1, .ar-hot-ico .f2 { animation: none; }
  .ar-perfect, .ar-perfect-rays, .ar-perfect-ring, .ar-perfect-star, .ar-perfect-w span, .ar-perfect-sub, .ar-perfect-tap { animation: none; }
  .ar-perfect-ring .fg { animation: none; stroke-dashoffset: 0; }
  .ar-perfect-bits { display: none; }
}
.ar-pchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.ar-pchips .ar-pperfect { margin: 0; }
.ar-pperfect.hot { color: #FF9F43; border-color: rgba(255, 120, 40, .6); background: linear-gradient(135deg, rgba(255, 106, 0, .22), rgba(255, 45, 85, .14)); }
.ar-pperfect.hot .ar-pperfect-i svg { filter: drop-shadow(0 0 6px rgba(255, 120, 0, .8)); }
.ar-tile.hot b { color: #FF9F43; }

/* ---------- 1.8.1: news ticker and the new header ---------- */
:root { --tk-h: 38px; }
.ar-ticker { position: sticky; top: 0; z-index: 70; display: flex; align-items: stretch; height: var(--tk-h); overflow: hidden;
  background: linear-gradient(90deg, rgba(10, 6, 30, .96), rgba(26, 14, 66, .96)); border-bottom: 1px solid rgba(124, 92, 255, .45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font: 600 14px/1 var(--font-b); }
.tk-badge { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 14px 0 12px; font: 900 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #FF3D6E, #7C5CFF); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-right: 22px; }
.tk-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: tk-pulse 1.6s infinite; }
@keyframes tk-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.tk-view { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tk-track { display: flex; width: max-content; height: 100%; }
.tk-track.run { animation: tk-crawl var(--tk-dur, 60s) linear infinite; }
.ar-ticker:hover .tk-track.run, .ar-ticker:focus-within .tk-track.run { animation-play-state: paused; }
@keyframes tk-crawl { to { transform: translateX(-50%); } }
.tk-track.still { width: auto; overflow-x: auto; scrollbar-width: none; }
.tk-lap { display: flex; align-items: center; height: 100%; }
.tk-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; color: var(--text); text-decoration: none; position: relative; }
.tk-item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; transform: rotate(45deg); background: rgba(124, 92, 255, .7); }
.tk-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.tk-ico svg { width: 15px; height: 15px; }
.tk-item.k-bank .tk-ico { color: var(--me); } .tk-item.k-live .tk-ico { color: #FF5468; } .tk-item.k-result .tk-ico { color: var(--gold); }
.tk-item.k-streak .tk-ico { color: #FF8A1C; } .tk-item.k-perfect .tk-ico { color: var(--gold); } .tk-item.k-new .tk-ico { color: var(--ok); }
.tk-item.k-daily .tk-ico, .tk-item.k-top .tk-ico { color: var(--gold); } .tk-item.k-idea .tk-ico { color: #fff; background: linear-gradient(135deg, #7C5CFF, #FF4FA3); }
.tk-item.k-idea { color: #FFE9A0; }
.tk-item.k-idea:hover .tk-t { text-decoration: underline; }
.tk-t { display: inline-flex; align-items: center; gap: 6px; }
.tk-t > b { color: var(--me); font-weight: 900; }
.tk-mode { font: 800 11px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; margin-right: 2px; }
.tk-who { display: inline-flex; align-items: center; gap: 5px; }
.tk-who .ar-flag { width: 16px; height: 12px; border-radius: 2px; }
.tk-who b { color: #fff; }
.tk-score { font: 900 14px var(--font-d); color: var(--gold); }
.tk-score.lo { color: var(--muted); }
.tk-vs { color: var(--muted); font-size: 13px; }
.tk-cta { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #fff; text-decoration: none; font: 800 13px var(--font-b);
  background: linear-gradient(135deg, rgba(124, 92, 255, .9), rgba(255, 79, 163, .9)); border-left: 1px solid rgba(255, 255, 255, .2); transition: filter .15s; }
.tk-cta:hover { filter: brightness(1.15); }
.tk-cta svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .tk-cta span { display: none; } .tk-badge { padding-left: 10px; padding-right: 18px; letter-spacing: .08em; } .ar-ticker { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .tk-badge i { animation: none; } }
.aw, .lb { height: calc(100vh - var(--tk-h)); }

/* Header */
.ar-top2 { gap: 14px; padding: 14px 0 10px; }
.ar-brand2 { gap: 10px; flex: none; }
.ar-logo { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 4px 14px rgba(124, 92, 255, .45)); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.ar-brand2:hover .ar-logo { transform: rotate(-8deg) scale(1.08); }
.ar-wm { font: 900 21px/1 var(--font-d); letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #fff 0%, #BFE9FF 40%, #FFC6E6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.ar-nav2 { margin-left: auto; }
.ar-nav2 .ar-tab { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.ar-nav2 .ar-tab svg { width: 17px; height: 17px; flex: none; }
.ar-nav2 .ar-tab.is-on { background: linear-gradient(135deg, #7C5CFF, #FF4FA3); color: #fff; box-shadow: 0 4px 16px rgba(124, 92, 255, .45); }
.ar-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.ar-top2 .ar-sound { margin: 0; }
.ar-langdd { position: relative; }
.ar-langdd summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); cursor: pointer; font: 800 13px var(--font-b); }
.ar-langdd summary::-webkit-details-marker { display: none; }
.ar-langdd summary svg { width: 18px; height: 18px; color: var(--muted); }
.ar-langdd[open] summary { border-color: var(--me); }
.ar-langdd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 170px; display: grid; padding: 6px; border-radius: 14px; background: rgba(22, 15, 56, .98); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.ar-langdd-menu a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.ar-langdd-menu a b { width: 26px; font: 900 12px var(--font-d); color: var(--muted); }
.ar-langdd-menu a:hover { background: var(--card2); }
.ar-langdd-menu a[aria-current] { background: rgba(41, 211, 255, .14); }
.ar-langdd-menu a[aria-current] b { color: var(--me); }
@media (max-width: 700px) {
  .ar-top2 { flex-wrap: wrap; }
  .ar-top2 .ar-tools { margin-left: auto; }
  .ar-top2 .ar-nav2 { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .ar-top2 .ar-nav2 .ar-tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; }
  .ar-wm { font-size: 18px; }
  .ar-logo { width: 36px; height: 36px; }
}
@media (max-width: 400px) { .ar-top2 .ar-nav2 .ar-tab svg { display: none; } }
.aw-top .ar-brand2 .ar-wm { font-size: 18px; }
.aw-top .ar-nav2 { margin-left: 0; }

/* Suggest a pack page */
.ar-req { gap: 18px; }
.ar-req-hero { text-align: center; display: grid; justify-items: center; gap: 6px; margin-top: 8px; }
.ar-req-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7C5CFF, #FF4FA3); box-shadow: 0 10px 30px rgba(124, 92, 255, .45); }
.ar-req-ico svg { width: 34px; height: 34px; }
.ar-req .ar-card { padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 16px; }
.ar-req-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ar-req-kinds legend { font-weight: 800; margin-bottom: 8px; }
.ar-req-kind input { position: absolute; opacity: 0; }
.ar-req-kind span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); cursor: pointer; font-weight: 700; }
.ar-req-kind input:checked + span { background: linear-gradient(135deg, #7C5CFF, #FF4FA3); border-color: transparent; color: #fff; }
.ar-req-kind input:focus-visible + span { outline: 3px solid var(--me); outline-offset: 2px; }
.ar-req-f { display: grid; gap: 6px; font-weight: 700; }
.ar-req-f small { color: var(--muted); font-weight: 500; }
.ar-req-f .ar-input { width: 100%; box-sizing: border-box; }
.ar-req-f textarea.ar-input { resize: vertical; min-height: 120px; font: inherit; line-height: 1.4; }
.ar-req-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ar-req-two { grid-template-columns: 1fr; } }
.ar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ar-req-done { text-align: center; }
.ar-req-done h2 { margin: 0; font: 900 26px var(--font-d); color: var(--ok); }
.ar-req .ar-input { font-size: 16px; font-weight: 600; padding: 12px 14px; }

/* Flag a question */
.ar-flagq { position: absolute; top: 6px; right: 6px; z-index: 5; }
.ar-race-q, .ar-stage { position: relative; }
.ar-flagq-b { appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 6, 30, .6); color: var(--muted); font: 700 12px var(--font-b); cursor: pointer; transition: color .15s, border-color .15s; }
.ar-flagq-b svg { width: 14px; height: 14px; }
.ar-flagq-b:hover { color: #fff; border-color: var(--no); }
.ar-flagq-b.done { color: var(--no); border-color: rgba(255, 84, 104, .6); cursor: default; }
.ar-flagq-b.done svg path { fill: rgba(255, 84, 104, .35); }
.ar-flagq-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 250px; display: grid; gap: 4px; padding: 10px; border-radius: 16px; background: rgba(22, 15, 56, .98); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); animation: ar-pop .25s cubic-bezier(.2, 1.5, .4, 1) both; }
.ar-flagq-menu > b { font: 800 13px var(--font-b); color: var(--muted); padding: 2px 6px 6px; }
.ar-flagq-r { appearance: none; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .05); color: var(--text); font: 700 14px var(--font-b); cursor: pointer; }
.ar-flagq-r:hover, .ar-flagq-r:focus-visible { background: rgba(255, 84, 104, .2); outline: none; }
.st-answer .ar-prompt, .st-reveal .ar-prompt, .ar-race-q .ar-prompt { padding: 0 64px; }
@media (max-width: 560px) { .st-answer .ar-prompt, .st-reveal .ar-prompt, .ar-race-q .ar-prompt { padding: 18px 0 0; } .ar-flagq-b span { display: none; } }

/* The report after a battle */
.ar-freport .ar-modal-box { max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow: auto; text-align: left; border-color: rgba(255, 84, 104, .7); box-shadow: 0 0 50px rgba(255, 84, 104, .25); display: grid; gap: 14px; }
.ar-freport.out { opacity: 0; transition: opacity .3s; }
.ar-freport-head { display: flex; gap: 12px; align-items: flex-start; }
.ar-freport-head h2 { margin: 0; font: 900 22px var(--font-d); }
.ar-freport-head p { margin: 4px 0 0; color: var(--muted); }
.ar-freport-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FF5468, #FF8A3D); }
.ar-freport-ico svg { width: 24px; height: 24px; }
.ar-freport-list { display: grid; gap: 12px; }
.ar-freport-q { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.ar-freport-n { margin: 0; font: 800 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ar-freport-p { font-size: 17px; line-height: 1.35; }
.ar-freport-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ar-freport-opts li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.ar-freport-opts li .ltr { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 800 12px var(--font-d); background: rgba(255, 255, 255, .08); flex: none; }
.ar-freport-opts li.right { background: rgba(46, 229, 157, .12); }
.ar-freport-opts li.right .ltr { background: var(--ok); color: #04261A; }
.ar-freport-opts li em { margin-left: auto; font-style: normal; font: 800 11px var(--font-b); color: var(--ok); text-transform: uppercase; letter-spacing: .06em; }
.ar-freport .ar-input { font-size: 15px; font-weight: 600; padding: 10px 12px; }
.ar-freport textarea.ar-input { resize: vertical; font-family: var(--font-b); }
.ar-freport .ar-acts { animation: none; justify-content: flex-end; margin: 0; }
@media (min-width: 701px) {
  .ar-app > .ar-top2 { width: min(1120px, calc(100vw - 32px)); align-self: center; flex-wrap: nowrap; }
  .ar-top2 .ar-nav2 { margin: 0 auto; }
}
@media (min-width: 701px) and (max-width: 1080px) { .ar-top2 .ar-wm { display: none; } .ar-top2 .ar-nav2 .ar-tab { padding: 7px 11px; } }

/* Drop-down lists: dark, with our own arrow, and a dark list when opened (color-scheme), everywhere in the arena. */
body.arena { color-scheme: dark; }
body.arena select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2329D3FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 13px; padding-right: 44px; }
body.arena select.ar-input { background-color: rgba(10, 6, 30, .55); transition: border-color .15s, box-shadow .15s; }
body.arena select.ar-input:hover { border-color: rgba(41, 211, 255, .5); }
body.arena select.ar-input:focus { outline: none; border-color: var(--me); box-shadow: 0 0 0 4px rgba(41, 211, 255, .18); }
body.arena select option, body.arena select optgroup { background: #1A1240; color: #F4F2FF; font-weight: 600; }
body.arena select option:checked { background: #7C5CFF; color: #fff; }
body.arena select optgroup { color: #A9A3C9; font-weight: 800; }

/* Friends list rows: name opens their stats */
.ar-flist-ul li { display: flex; flex-wrap: wrap; }
.ar-flist-ul .nm { appearance: none; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; padding: 0; cursor: pointer; flex: 1; text-align: left; }
.ar-flist-ul .nm:hover .nmt { text-decoration: underline; color: var(--me); }
.ar-flist-ul .nmt { overflow: hidden; text-overflow: ellipsis; }

/* A friend's stats */
.ar-fstats { z-index: 92; }
.ar-fstats .ar-modal-box { position: relative; max-width: 480px; width: 100%; max-height: calc(100vh - 40px); overflow: auto; text-align: left; border-color: rgba(41, 211, 255, .55); box-shadow: 0 0 60px rgba(41, 211, 255, .2); display: grid; gap: 14px; }
.ar-fs-x { position: absolute; top: 10px; right: 10px; }
.ar-fs-head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ar-fs-hn { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.ar-fs-name { margin: 0; display: flex; align-items: center; gap: 8px; font: 900 24px var(--font-d); overflow-wrap: anywhere; }
.ar-fs-sub { margin: 0; color: var(--muted); font-size: 13px; }
.ar-fs-k { margin: 0; font: 800 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ar-fs-vs { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.ar-fs-vsbar { display: flex; height: 30px; border-radius: 999px; overflow: hidden; font: 900 15px var(--font-d); }
.ar-fs-vsbar span { display: grid; place-items: center; min-width: 34px; color: #08121F; transition: flex-grow .6s ease; }
.ar-fs-vsbar .me { background: linear-gradient(90deg, #29D3FF, #6BE4FF); }
.ar-fs-vsbar .op { background: linear-gradient(90deg, #FF7ABF, #FF4FA3); }
.ar-fs-vsn { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.ar-fs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 16px; overflow: hidden; background: var(--line); }
.ar-fs-t { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; background: rgba(11, 8, 32, .85); text-align: center; }
.ar-fs-t b { font: 900 22px var(--font-d); }
.ar-fs-t span { font: 800 10px var(--font-b); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.ar-fs-t.gold b { color: var(--gold); } .ar-fs-t.hot b { color: #FF9F43; }
.ar-fs-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-fs-dots { display: flex; gap: 4px; }
.ar-fs-dots i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 900 11px var(--font-d); font-style: normal; background: rgba(255, 255, 255, .1); color: var(--muted); }
.ar-fs-dots i.r-W { background: var(--ok); color: #04261A; } .ar-fs-dots i.r-L { background: var(--no); color: #fff; }
.ar-fs-fav { margin: 0; color: var(--muted); font-size: 14px; }
.ar-fs-badges .ar-badges.mini { flex-wrap: wrap; overflow: visible; }
.ar-fstats .ar-acts { animation: none; margin: 0; }
@media (max-width: 420px) { .ar-fs-t b { font-size: 19px; } .ar-fs-head .ar-av.huge { width: 72px; height: 72px; font-size: 32px; } }