/* Arena: brackets, match rooms, ladders, admin tools and the coin shop. Built on public/css/ui.css tokens; pages set --a to their accent. */
:root { --a: #f0244f; }
/* main.css hides [hidden] without !important, so component display rules loaded later win. */
[hidden] { display: none !important; }

/* Copied from resources/views/tournaments/show.blade.php, with the accent as --a */
.tn-wrap { width: 100%; max-width: 1240px; margin: 0 auto; }
.tn-hero { position: relative; overflow: hidden; margin-top: var(--vt-space-4); padding: 2rem 1.75rem; border-radius: var(--vt-radius-lg); border: 1px solid color-mix(in srgb, var(--a) 40%, var(--vt-border));
           background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--a) 35%, transparent), transparent 60%), var(--vt-surface); }
.tn-hero > * { position: relative; }
.tn-partner { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .75rem .3rem .35rem; border-radius: var(--vt-radius-pill); background: rgba(0,0,0,.35); font-size: .75rem; color: var(--vt-text-2); }
.tn-partner .tn-avatar { width: 1.6rem; height: 1.6rem; font-size: .7rem; background: linear-gradient(135deg, #8b5cf6, #3b82f6); }
.tn-partner b { color: var(--vt-text); }
.tn-hero h1 { margin-top: .8rem; font-size: 2rem; font-weight: 800; color: var(--vt-text); line-height: 1.15; letter-spacing: -.01em; }
.tn-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.tn-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--vt-radius-pill); font-size: .75rem; font-weight: 600; color: var(--vt-text); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.tn-tag i { color: var(--a); }
.tn-pool { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; margin-top: 1.4rem; }
.tn-pool-num { display: flex; align-items: center; gap: .5rem; font-size: 2.6rem; font-weight: 800; color: var(--vt-gold); line-height: 1; font-variant-numeric: tabular-nums; }
.tn-pool-num img { height: 2rem; }
.tn-pool-sub { margin-top: .3rem; font-size: .8rem; color: var(--vt-text-2); }
.tn-time { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: var(--vt-radius-sm); background: rgba(0,0,0,.35); color: var(--vt-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tn-bar { margin-top: .5rem; height: .5rem; border-radius: var(--vt-radius-pill); background: rgba(255,255,255,.08); overflow: hidden; }
.tn-bar > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--a), var(--vt-gold)); }
.tn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-space-4); margin-top: var(--vt-space-4); align-items: start; }
@media (min-width: 1024px) { .tn-grid { grid-template-columns: minmax(0, 1fr) 24rem; } }
.tn-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 700; color: var(--vt-text); }
.tn-h small { font-size: .75rem; font-weight: 500; color: var(--vt-muted); }
.tn-btn { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--vt-gold))); color: #fff; transition: filter var(--vt-transition); }
.tn-btn:hover { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--vt-gold))); filter: brightness(1.1); color: #fff; }
.tn-btn:disabled { background: var(--vt-surface-3); color: var(--vt-muted); filter: none; }
.tn-label { display: block; margin-bottom: 6px; }
.tn-prize { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--vt-gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tn-prize img { height: .85rem; }
.tn-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--vt-border); font-size: .875rem; color: var(--vt-text-2); }
.tn-row:first-child { border-top: 0; }
.tn-avatar { width: 2rem; height: 2rem; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; color: var(--vt-text); background: var(--vt-surface-3); }
.tn-ms { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--vt-radius); background: var(--vt-surface-2); border: 1px solid var(--vt-border); }
.tn-ms + .tn-ms { margin-top: .5rem; }
.tn-ms.is-reached { border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.tn-ms-ic { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--vt-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--vt-text); background: var(--vt-surface-3); }
.tn-ms.is-reached .tn-ms-ic { background: linear-gradient(135deg, var(--a), var(--vt-gold)); color: #fff; }
.tn-copy { display: flex; gap: .5rem; }
.tn-prose { font-size: .9rem; color: var(--vt-text-2); line-height: 1.6; }
.tn-prose li { margin-top: .35rem; padding-left: 1.1rem; position: relative; }
.tn-prose li::before { content: ''; position: absolute; left: 0; top: .6rem; width: .35rem; height: .35rem; border-radius: 999px; background: var(--a); }
.tn-step { display: flex; gap: .75rem; font-size: .85rem; color: var(--vt-text-2); }
.tn-step + .tn-step { margin-top: .6rem; }
.tn-step b { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; color: #fff; background: color-mix(in srgb, var(--a) 70%, transparent); }
.tn-place { width: 2.5rem; text-align: center; font-weight: 800; color: var(--vt-muted); }
.tn-place.top { color: var(--a); }
.tn-danger { color: #fca5a5; }

/* Hypex-style additions */
.tn-hero-art { position: absolute; right: -1rem; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 15rem; color: rgba(255,255,255,.05); pointer-events: none; }
.tn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--vt-space-3); }
.tn-fact { padding: 8px 10px; border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); }
.tn-fact p { color: var(--vt-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tn-fact strong { display: block; margin-top: 2px; color: var(--vt-text); font-size: 13.5px; font-weight: 600; }
.tn-tabs { flex-wrap: nowrap; max-width: 100%; margin-top: var(--vt-space-4); overflow-x: auto; scrollbar-width: none; }
.tn-tabs::-webkit-scrollbar { display: none; }
.tn-me { background: color-mix(in srgb, var(--a) 10%, transparent); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: var(--vt-radius-sm); }
.tn-team-ic { width: 2rem; height: 2rem; border-radius: var(--vt-radius-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem; font-weight: 800; color: #fff; }

.tn-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 18px; margin-top: var(--vt-space-3); overflow-x: auto; padding-bottom: 4px; }
.tn-round { display: flex; flex-direction: column; }
.tn-round-name { margin-bottom: 8px; color: var(--vt-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tn-round-body { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 10px; }
.tn-match { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); overflow: hidden; font-size: 12.5px; }
.tn-match.is-live { border-color: color-mix(in srgb, var(--a) 60%, var(--vt-border)); }
.tn-match.is-mine { box-shadow: inset 3px 0 0 var(--a); }
.tn-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; color: var(--vt-text-2); }
.tn-slot + .tn-slot { border-top: 1px solid var(--vt-border); }
.tn-slot.is-win { color: var(--vt-text); font-weight: 700; }
.tn-slot.is-lose { color: var(--vt-faint); }
.tn-slot.is-tbd { color: var(--vt-faint); font-style: italic; }
.tn-slot b { font-variant-numeric: tabular-nums; }
.tn-match-meta { padding: 3px 9px; border-top: 1px solid var(--vt-border); color: var(--vt-faint); font-size: 10.5px; }
.tn-match.is-live .tn-match-meta { color: #fca5a5; }

.ar-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 999px; background: #f87171; }
.ar-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ar-pulse 1.6s ease-out infinite; }
@keyframes ar-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

/* Sign-up modal */
.su-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 11, 22, .65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.su-overlay.is-open { display: flex; }
.su-modal { width: 100%; max-width: 440px; padding: 20px; box-shadow: var(--vt-shadow); }
.su-head { display: flex; align-items: center; gap: 12px; }
.su-head .co-steps { margin: 0; }
.su-title { margin-top: 18px; color: var(--vt-text); font-size: 18px; font-weight: 700; }
.su-sub { margin-top: 4px; color: var(--vt-muted); font-size: 13px; }
.su-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); font-size: 13px; color: var(--vt-text-2); }
.su-check + .su-check { margin-top: 8px; }
.su-check > i { margin-top: 2px; }
.su-check b { color: var(--vt-text); }
.su-step { display: none; }
.su-step.is-active { display: block; }
.su-done { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 4px auto 0; border-radius: 999px; background: var(--vt-success-soft); color: var(--vt-success); font-size: 24px; }

/* Formats (formats.js) */
.tn-room-link { display: inline-flex; align-items: center; gap: 5px; color: var(--a); font-weight: 700; }
.tn-room-link:hover { text-decoration: underline; }
.tn-match.is-mine .tn-match-meta .tn-room-link { font-size: 11px; }
.tn-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--vt-text-2); }
.tn-table th { padding: 6px 8px; border-bottom: 1px solid var(--vt-border); color: var(--vt-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tn-table td { padding: 7px 8px; border-bottom: 1px solid var(--vt-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tn-table tbody tr:last-child td { border-bottom: 0; }
.tn-table td:nth-child(2) { width: 100%; max-width: 0; }
.tn-table tr.is-up td:first-child { box-shadow: inset 3px 0 0 var(--vt-success); }
.tn-table tr.is-me td { background: color-mix(in srgb, var(--a) 10%, transparent); color: var(--vt-text); }
.tn-key { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.tn-key.is-up { background: var(--vt-success); }
.tn-groups { display: grid; gap: var(--vt-space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--vt-space-3); }
@media (min-width: 900px) { .tn-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tn-pool-label { margin: 6px 0 2px; color: var(--vt-muted); font-size: 11px; font-weight: 700; }
.tn-round-body .tn-pool-label:first-child { margin-top: 0; }
.tn-form { display: inline-flex; gap: 3px; }
.tn-form i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 800; }
.tn-form i.is-w { background: var(--vt-success-soft); color: var(--vt-success); }
.tn-form i.is-l { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.tn-week { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); }
.tn-week + .tn-week { margin-top: 8px; }
.tn-week summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; color: var(--vt-text); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.tn-week summary::-webkit-details-marker { display: none; }
.tn-fixture { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--vt-border); font-size: 13px; color: var(--vt-text-2); }
.tn-fixture > :nth-child(2) { text-align: center; color: var(--vt-text); }
.tn-fixture.is-me { background: color-mix(in srgb, var(--a) 10%, transparent); }
.tn-live-tag { display: inline-flex; align-items: center; gap: 6px; color: #fca5a5; font-weight: 700; font-size: 12px; }
.tn-gp { display: inline-block; min-width: 26px; padding: 1px 4px; border-radius: 4px; background: var(--vt-surface-3); color: var(--vt-text); font-size: 12px; font-weight: 600; }
.tn-gp.is-win { background: color-mix(in srgb, var(--vt-gold) 22%, transparent); color: var(--vt-gold); }
.tn-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tn-pts > div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); font-size: 12.5px; color: var(--vt-text-2); }
.tn-pts b { color: var(--vt-text); }

/* Match room (match.html) */
.mr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--vt-space-4); margin-top: var(--vt-space-4); padding: 1.5rem; border-radius: var(--vt-radius-lg); border: 1px solid color-mix(in srgb, var(--a) 40%, var(--vt-border));
           background: radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--a) 28%, transparent), transparent 70%), var(--vt-surface); }
.mr-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mr-team.is-right { flex-direction: row-reverse; text-align: right; }
.mr-team .tn-team-ic { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; border-radius: var(--vt-radius); }
.mr-team-name { color: var(--vt-text); font-size: 1.15rem; font-weight: 800; }
.mr-team-sub { color: var(--vt-muted); font-size: 12px; }
.mr-mid { text-align: center; }
.mr-score { color: var(--vt-text); font-size: 2.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mr-vs { color: var(--vt-faint); font-size: 1.1rem; font-weight: 800; letter-spacing: .1em; }
.mr-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: var(--vt-radius-pill); background: rgba(0,0,0,.35); color: var(--vt-text-2); font-size: 11.5px; font-weight: 600; }
.mr-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.mr-steps { display: flex; gap: 6px; margin-top: var(--vt-space-4); overflow-x: auto; scrollbar-width: none; }
.mr-step { flex: 1; min-width: 110px; padding: 8px 10px; border-radius: var(--vt-radius-sm); background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-faint); font-size: 12px; font-weight: 600; }
.mr-step b { display: block; color: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.mr-step.is-done { color: var(--vt-text-2); border-color: color-mix(in srgb, var(--vt-success) 40%, var(--vt-border)); }
.mr-step.is-done b { color: var(--vt-success); }
.mr-step.is-active { color: var(--vt-text); border-color: var(--a); box-shadow: inset 0 -2px 0 var(--a); }
.mr-step.is-active b { color: var(--a); }
.mr-ready { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-space-3); margin-top: var(--vt-space-3); }
.mr-ready > div { padding: 12px; border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); border: 1px solid var(--vt-border); }
.mr-ready .is-ok { color: var(--vt-success); }
.mr-ready .is-wait { color: var(--vt-gold); }
.mr-clock { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.mr-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--vt-space-3); }
@media (min-width: 640px) { .mr-maps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mr-map { position: relative; display: flex; align-items: flex-end; height: 84px; padding: 8px 10px; overflow: hidden; border-radius: var(--vt-radius-sm); border: 1px solid var(--vt-border); color: #fff; font-weight: 800; text-align: left; transition: transform var(--vt-transition), opacity var(--vt-transition); }
.mr-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55)); }
.mr-map span { position: relative; z-index: 1; }
.mr-map small { position: absolute; z-index: 1; top: 6px; right: 8px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 10px; font-weight: 700; }
.mr-map:not(:disabled):hover { transform: translateY(-2px); border-color: var(--a); }
.mr-map.is-banned { opacity: .35; filter: grayscale(1); }
.mr-map.is-banned span { text-decoration: line-through; }
.mr-map.is-picked { border-color: var(--vt-success); box-shadow: 0 0 0 2px var(--vt-success); }
.mr-map:disabled { cursor: default; }
.mr-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-space-3); margin-top: var(--vt-space-3); }
.mr-side { padding: 18px; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); color: #fff; font-weight: 800; font-size: 16px; text-align: center; }
.mr-side:hover { border-color: #fff; }
.mr-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--vt-radius-sm); border: 1px dashed var(--vt-border-strong); background: var(--vt-surface-2); }
.mr-code b { color: var(--vt-text); font-size: 20px; letter-spacing: .12em; font-family: ui-monospace, monospace; }
.mr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; border: 1px dashed var(--vt-border-strong); border-radius: var(--vt-radius); background: var(--vt-surface-2); color: var(--vt-muted); font-size: 13px; text-align: center; cursor: pointer; }
.mr-drop:hover, .mr-drop.is-set { border-color: var(--a); color: var(--vt-text); }
.mr-drop i { font-size: 22px; color: var(--a); }
.mr-shot { height: 150px; border-radius: var(--vt-radius-sm); border: 1px solid var(--vt-border); background: linear-gradient(135deg, #1b2a4a, #3b1530 60%, #12121f); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-weight: 800; letter-spacing: .1em; }
.mr-scores { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; }
.mr-scores .vt-input { text-align: center; font-size: 20px; font-weight: 800; }
.mr-chat { display: flex; flex-direction: column; height: 420px; }
.mr-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: var(--vt-space-3) 0; padding-right: 4px; }
.mr-msg { display: flex; gap: 8px; font-size: 13px; }
.mr-msg .tn-avatar { width: 1.6rem; height: 1.6rem; font-size: .7rem; }
.mr-msg b { color: var(--vt-text); font-size: 12px; }
.mr-msg p { color: var(--vt-text-2); }
.mr-msg.is-sys { justify-content: center; color: var(--vt-faint); font-size: 11.5px; text-align: center; }
.mr-msg.is-admin b { color: #7dd3fc; }
.mr-timeline { position: relative; margin-top: var(--vt-space-3); padding-left: 20px; }
.mr-timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--vt-border); }
.mr-tl { position: relative; padding-bottom: 14px; font-size: 13px; color: var(--vt-text-2); }
.mr-tl::before { content: ''; position: absolute; left: -18px; top: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--vt-surface-3); border: 2px solid var(--vt-bg); }
.mr-tl.is-done::before { background: var(--vt-success); }
.mr-tl.is-now::before { background: var(--vt-gold); }
.mr-tl small { display: block; color: var(--vt-faint); font-size: 11px; }
.mr-result { text-align: center; padding: 10px 0; }
.mr-result-big { font-size: 2.6rem; font-weight: 800; letter-spacing: .04em; }
.mr-result-big.is-win { color: var(--vt-success); }
.mr-result-big.is-loss { color: #fca5a5; }
@media (max-width: 640px) {
    .mr-head { grid-template-columns: 1fr; text-align: center; }
    .mr-team, .mr-team.is-right { flex-direction: column; text-align: center; }
}
/* Server card: where the match is played and how level the pings are (_room_server.blade.php) */
.sv-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: var(--vt-space-3); }
.sv-name { color: var(--vt-text); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.sv-fair { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--vt-radius-pill); background: var(--vt-surface-3); color: var(--vt-text-2); font-size: 12px; font-weight: 700; }
.sv-fair.is-even { background: var(--vt-success-soft); color: var(--vt-success); }
.sv-fair.is-close { background: color-mix(in srgb, var(--vt-gold) 18%, transparent); color: var(--vt-gold); }
.sv-fair.is-uneven { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.sv-ping { font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-ping.is-good { color: var(--vt-success); }
.sv-ping.is-ok { color: var(--vt-gold); }
.sv-ping.is-bad { color: #fca5a5; }
.sv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; color: var(--vt-muted); font-size: 12px; }

/* Admin (admin-*.html) */
.ad-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vt-space-3); margin-top: var(--vt-space-4); }
.ad-head h1 { color: var(--vt-text); font-size: 22px; font-weight: 800; }
.ad-head p { color: var(--vt-muted); font-size: 13px; }
.ad-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-space-3); margin-top: var(--vt-space-4); }
@media (min-width: 900px) { .ad-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ad-stat { padding: 12px 14px; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface); }
.ad-stat p { color: var(--vt-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ad-stat strong { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--vt-text); font-size: 20px; font-weight: 800; }
.ad-stat.is-alert { border-color: color-mix(in srgb, var(--vt-gold) 50%, var(--vt-border)); }
.ad-stat.is-alert strong { color: var(--vt-gold); }
.ad-pane { display: none; }
.ad-pane.is-active { display: block; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tn-table .ad-actions { flex-wrap: nowrap; }
.ad-seed { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); cursor: grab; font-size: 13px; color: var(--vt-text-2); }
.ad-seed + .ad-seed { margin-top: 6px; }
.ad-seed.is-drag { opacity: .4; }
.ad-seed.is-over { border-color: var(--a); }
.ad-seed b { width: 1.75rem; color: var(--vt-faint); font-variant-numeric: tabular-nums; }
.ad-seed .fa-grip-vertical { color: var(--vt-faint); }
.ad-dispute + .ad-dispute { margin-top: var(--vt-space-4); }
.ad-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-space-3); margin-top: var(--vt-space-3); }
.ad-proof .mr-shot { height: 120px; font-size: 12px; }
.ad-quote { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--vt-border-strong); background: var(--vt-surface-2); border-radius: 0 var(--vt-radius-sm) var(--vt-radius-sm) 0; font-size: 12.5px; color: var(--vt-text-2); }
.ad-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 11, 22, .65); backdrop-filter: blur(4px); }
.ad-modal.is-open { display: flex; }
.ad-modal > .vt-card { width: 100%; max-width: 460px; box-shadow: var(--vt-shadow); }
.wz-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: var(--vt-space-4); }
.wz-pane { display: none; }
.wz-pane.is-active { display: block; }
.wz-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .wz-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wz-opt { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); text-align: left; transition: border-color var(--vt-transition); }
.wz-opt:hover { border-color: var(--vt-border-strong); }
.wz-opt.is-active { border-color: var(--a); box-shadow: 0 0 0 1px var(--a); }
.wz-opt i { flex: none; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--vt-radius-sm); background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); }
.wz-opt b { display: block; color: var(--vt-text); font-size: 13.5px; }
.wz-opt span { display: block; margin-top: 2px; color: var(--vt-muted); font-size: 12px; line-height: 1.4; }
.wz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-space-3); }
@media (min-width: 700px) { .wz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); font-size: 13px; color: var(--vt-text-2); }
.wz-toggle b { display: block; color: var(--vt-text); }
.wz-toggle input { width: 18px; height: 18px; accent-color: var(--a); }
.wz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-pill); background: var(--vt-surface-2); font-size: 12.5px; color: var(--vt-text-2); cursor: pointer; }
.wz-chip input { accent-color: var(--a); }

/* Admin moderation */
.ad-log { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vt-border); font-size: 13px; color: var(--vt-text-2); }
.ad-log:first-child { border-top: 0; }
.ad-log b { color: var(--vt-text); }
.ad-log-why { margin-top: 2px; color: var(--vt-muted); font-size: 12px; }
.ad-log-time { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--vt-faint); font-size: 11.5px; white-space: nowrap; }
.ad-danger-btn { background: #dc2626; color: #fff; }
.ad-danger-btn:hover { background: #b91c1c; color: #fff; }
.ad-edit .tn-slot { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; transition: background var(--vt-transition); }
.ad-edit .tn-slot:hover:not(.is-tbd) { background: color-mix(in srgb, var(--a) 10%, transparent); }
.ad-edit .tn-slot.is-sel { background: color-mix(in srgb, var(--a) 25%, transparent); box-shadow: inset 3px 0 0 var(--a); }
.ad-edit .tn-slot.is-target { outline: 1px dashed color-mix(in srgb, var(--a) 70%, transparent); outline-offset: -2px; }
.ad-edit .tn-slot.is-tbd { cursor: default; }
.ad-edit .tn-slot.is-tbd.is-target { cursor: pointer; }
.ad-edit .tn-match-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ad-gear { display: inline-flex; align-items: center; gap: 4px; color: var(--vt-text-2); font-weight: 700; }
.ad-gear:hover { color: var(--a); }
.ad-dq { text-decoration: line-through; opacity: .6; }
.ad-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--vt-radius); border: 1px solid color-mix(in srgb, #7dd3fc 45%, var(--vt-border)); background: color-mix(in srgb, #7dd3fc 8%, var(--vt-surface)); }
.ad-banner > b { color: #7dd3fc; }
.ad-frozen { position: relative; }
.ad-frozen::after { content: 'FROZEN BY ADMIN'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: rgba(10, 11, 22, .72); color: #7dd3fc; font-weight: 800; letter-spacing: .12em; }
.ad-flag { padding: 12px 14px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-2); }
.ad-flag + .ad-flag { margin-top: 10px; }
.ad-flag.is-high { border-color: color-mix(in srgb, #f87171 50%, var(--vt-border)); }
.ad-sev { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--vt-radius-pill); font-size: 10.5px; font-weight: 700; }
.ad-sev.is-high { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.ad-sev.is-med { background: color-mix(in srgb, var(--vt-gold) 18%, transparent); color: var(--vt-gold); }
.ad-sev.is-low { background: var(--vt-surface-3); color: var(--vt-text-2); }
.ad-strikes { display: inline-flex; gap: 3px; }
.ad-strikes i { width: 8px; height: 8px; border-radius: 2px; background: var(--vt-surface-3); }
.ad-strikes i.is-on { background: #f87171; }
.ad-chatlog { margin-top: 8px; padding: 8px 10px; border-radius: var(--vt-radius-sm); background: var(--vt-surface); font-size: 12.5px; color: var(--vt-text-2); }
.ad-chatlog p + p { margin-top: 3px; }
.ad-chatlog .is-hit { color: #fca5a5; }

/* Ladders */
.lg-queue { text-align: center; padding: 8px 0 4px; }
.lg-elo { font-size: 2.6rem; font-weight: 800; color: var(--vt-text); line-height: 1; font-variant-numeric: tabular-nums; }
.lg-elo small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--vt-muted); }
.lg-find { min-width: 220px; padding: 14px 22px; font-size: 16px; }
.lg-timer { font-size: 2rem; font-weight: 800; color: var(--vt-text); font-variant-numeric: tabular-nums; }
.lg-range { position: relative; height: 54px; margin: 18px 6px 4px; }
.lg-track { position: absolute; left: 0; right: 0; top: 24px; height: 6px; border-radius: 999px; background: var(--vt-surface-3); }
.lg-window { position: absolute; top: 18px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--a) 28%, transparent); border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); transition: left .6s ease, width .6s ease; }
.lg-dot { position: absolute; top: 21px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: var(--vt-muted); border: 2px solid var(--vt-surface); transition: background .3s; }
.lg-dot.is-in { background: var(--vt-success); }
.lg-dot.is-new { animation: lg-pop .5s ease-out; }
.lg-dot.is-me { top: 15px; width: 4px; height: 24px; margin-left: -2px; border: 0; border-radius: 2px; background: var(--a); }
.lg-tick { position: absolute; top: 42px; transform: translateX(-50%); font-size: 10.5px; color: var(--vt-faint); font-variant-numeric: tabular-nums; }
.lg-tick.is-me { top: 0; color: var(--a); font-weight: 700; }
@keyframes lg-pop { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lg-log { max-height: 150px; overflow-y: auto; margin-top: 12px; text-align: left; font-size: 12.5px; color: var(--vt-text-2); }
.lg-log p { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--vt-border); }
.lg-log p:first-child { border-top: 0; }
.lg-log time { flex: none; width: 2.6rem; color: var(--vt-faint); font-variant-numeric: tabular-nums; }
.lg-tier { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--vt-radius-pill); font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, currentColor 14%, transparent); }
.lg-zone td { padding: 4px 8px !important; background: color-mix(in srgb, var(--vt-gold) 8%, transparent); color: var(--vt-gold); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.lg-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-delta.is-up, .lg-elo-change.is-up { color: var(--vt-success); }
.lg-delta.is-down, .lg-elo-change.is-down { color: #fca5a5; }
.lg-elo-change { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lg-chart { width: 100%; height: 140px; margin-top: 10px; }
.lg-found { text-align: center; }
.lg-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; }
.lg-vs > div { padding: 12px 8px; border-radius: var(--vt-radius); background: var(--vt-surface-2); }
.lg-vs b { display: block; color: var(--vt-text); font-size: 15px; }
.lg-vs span { font-size: 12px; color: var(--vt-muted); }
.lg-ring { position: relative; width: 64px; height: 64px; margin: 16px auto 0; }
.lg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lg-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--vt-text); font-size: 18px; font-weight: 800; }
.lg-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 12px; color: var(--vt-muted); }

/* Games config (admin-games.html) */
.gm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-space-4); align-items: start; }
@media (min-width: 1024px) { .gm-grid { grid-template-columns: 17rem minmax(0, 1fr); } }
@media (min-width: 640px) { .gm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--vt-border); text-align: left; }
.gm-item:hover { background: var(--vt-surface-2); }
.gm-item.is-active { background: var(--vt-surface-2); box-shadow: inset 3px 0 0 var(--a); }
.gm-item b { display: block; color: var(--vt-text); font-size: 13.5px; }
.gm-item small { display: block; color: var(--vt-muted); font-size: 11.5px; }
.gm-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--vt-radius-sm); background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); }
.gm-icon { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); color: var(--vt-text-2); }
.gm-icon.is-active { border-color: var(--a); color: var(--a); box-shadow: 0 0 0 1px var(--a); }
.gm-swatch { width: 10px; height: 10px; border-radius: 3px; }
.wz-chip button { color: var(--vt-faint); }
.wz-chip button:hover { color: #fca5a5; }

/* Offers inside the arena (ladder queue, offer break, sponsored entry) */
.of-list { display: grid; gap: 8px; }
.of-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-2); text-align: left; }
.of-card:hover { border-color: var(--vt-border-strong); }
.of-art { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; font-size: 18px; }
.of-card b { display: block; color: var(--vt-text); font-size: 13.5px; }
.of-card small { display: block; margin-top: 1px; color: var(--vt-muted); font-size: 12px; line-height: 1.35; }
.of-wait { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--vt-border-strong); text-align: left; }
.of-break { max-width: 520px; }
.of-break .tn-h { align-items: flex-start; }
.of-boost { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--vt-radius); background: color-mix(in srgb, var(--vt-gold) 10%, transparent); color: var(--vt-text-2); font-size: 12.5px; }
.of-boost i { color: var(--vt-gold); }
.of-steps { margin-top: 12px; }
.of-steps .tn-row b { color: var(--vt-text); }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--vt-radius-pill); background: color-mix(in srgb, var(--vt-gold) 16%, transparent); color: var(--vt-gold); font-size: 11.5px; font-weight: 700; }

/* Earn popup: offers, surveys and walls (resources/views/arena/_earn.blade.php) */
.ae-overlay { z-index: 70; }
.ae-modal { display: flex; flex-direction: column; max-width: 640px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.ae-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.ae-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-gold); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ae-title { margin-top: 4px; color: var(--vt-text); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ae-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 20px 16px; }
.ae-goal { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-2); }
.ae-tabs { display: flex; width: 100%; margin-top: 14px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ae-tabs > button { flex: 1 1 0; justify-content: center; }
.ae-panel { margin-top: 12px; }
.ae-hint { margin-bottom: 8px; color: var(--vt-muted); font-size: 12.5px; line-height: 1.45; }
.ae-more { margin-top: 10px; text-align: center; font-size: 12.5px; }
.ae-more a { color: var(--vt-muted); }
.ae-more a:hover { color: var(--vt-text); }
.ae-walls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-wall { width: 100%; font: inherit; color: inherit; cursor: pointer; }
.ae-wall .of-art { overflow: hidden; }
.ae-wall .of-art img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.ae-chev { flex: none; color: var(--vt-faint); font-size: 11px; }
.ae-skel { height: 64px; border-radius: var(--vt-radius); background: linear-gradient(90deg, var(--vt-surface-2) 0%, var(--vt-surface-3) 50%, var(--vt-surface-2) 100%); background-size: 200% 100%; animation: ae-shimmer 1.2s linear infinite; }
@keyframes ae-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ae-wallbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ae-frame { position: relative; height: min(64vh, 620px); margin-top: 10px; overflow: hidden; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: #fff; }
.ae-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ae-modal.is-wall { height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: 860px; }
.ae-modal.is-wall .ae-scroll { display: flex; flex-direction: column; overflow: hidden; }
.ae-modal.is-wall #ae-sub, .ae-modal.is-wall #ae-note { display: none; }
.ae-modal.is-wall #ae-wall-view { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ae-modal.is-wall .ae-frame { flex: 1 1 auto; height: auto; min-height: 240px; }
.ae-spin { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--a); border-radius: 999px; animation: ae-turn .8s linear infinite; }
.ae-spin[hidden] { display: none; }
@keyframes ae-turn { to { transform: rotate(360deg); } }
.ae-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--vt-border); }
.ae-mute { color: var(--vt-faint); font-size: 12px; text-decoration: underline; cursor: pointer; }
.ae-mute:hover { color: var(--vt-text); }
@media (max-width: 560px) {
    .ae-walls { grid-template-columns: minmax(0, 1fr); }
    .ae-frame { height: 62vh; }
}
@media (max-width: 420px) {
    .ae-tabs > button { gap: 4px; padding: 0 8px; font-size: 12.5px; }
    .ae-tabs > button > i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ae-skel, .ae-spin { animation: none; } }

/* Money (admin-money.html) */
.ec-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--vt-surface-3); }
.ec-bar > span { display: block; height: 100%; }
.ec-pos { color: var(--vt-success); font-weight: 700; }
.ec-neg { color: #fca5a5; font-weight: 700; }
.ec-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vt-space-4); }
@media (min-width: 1024px) { .ec-split { grid-template-columns: minmax(0, 1fr) 22rem; } }
.ec-cols { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-top: 12px; }
.ec-cols > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.ec-cols span { display: block; border-radius: 3px 3px 0 0; }
.ec-cols small { margin-top: 4px; color: var(--vt-faint); font-size: 10px; text-align: center; }

/* Coin shop (shop.html) */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.sh-item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-2); text-align: left; transition: border-color var(--vt-transition); }
.sh-item:hover { border-color: var(--vt-border-strong); }
.sh-item.is-on { border-color: var(--a); box-shadow: 0 0 0 1px var(--a); }
.sh-prev { display: flex; align-items: center; justify-content: center; height: 92px; background: var(--vt-surface-3); color: var(--vt-text); font-weight: 800; }
.sh-body { padding: 10px 12px 12px; }
.sh-body b { display: block; color: var(--vt-text); font-size: 13.5px; }
.sh-body small { display: block; color: var(--vt-muted); font-size: 11.5px; }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sh-card { overflow: hidden; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface-2); }
.sh-banner { height: 84px; }
.sh-who { display: flex; align-items: flex-end; gap: 12px; margin-top: -28px; padding: 0 14px 14px; }
.sh-pfp { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 14px; background: #f0244f; color: #fff; font-size: 24px; font-weight: 800; border: 3px solid var(--vt-surface-2); }
.sh-pfp.has-frame { box-shadow: 0 0 0 3px var(--fr), 0 0 18px color-mix(in srgb, var(--fr) 60%, transparent); }
.sh-name { font-size: 17px; font-weight: 800; color: var(--vt-text); }
.sh-title { font-size: 12px; color: var(--vt-muted); }

@media (max-width: 767px) {
    .tn-hero { padding: 1.4rem 1.2rem; }
    .tn-hero h1 { font-size: 1.6rem; }
    .tn-pool-num { font-size: 2rem; }
    .tn-hero-art { font-size: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .ar-dot::after { animation: none; } }