/* v2 compatibility layer for ported pages (veto, draft, rentals, tournaments,
   guide, skins). v2's stylesheets (recoloured copies in this folder) read
   v2 token names — this file defines those names with Eternal Blue Sky
   values and restyles v2's shared components to match v3. Loaded after the
   ported page CSS. */

:root {
  --bg-primary: var(--ground);
  --bg-secondary: var(--panel);
  --bg-tertiary: var(--inset);
  --bg-card: var(--panel);
  --bg-hover: rgba(90, 162, 255, .08);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-color: var(--line);
  --border-subtle: var(--line);
  --accent-primary: var(--act-hi);
  --accent-secondary: var(--act);
  --success: var(--on);
  --warning: #e0a526;
  --danger: var(--warn);
  --info: var(--sky);
  --purple: #a78bfa;
  --shadow: rgba(0, 0, 0, .35);
  --shadow-strong: rgba(0, 0, 0, .5);
  --navbar-bg: var(--rail);
  --card-bg-dark: var(--panel);
  --glass-bg: var(--panel);
  --glass-border: 1px solid var(--line);
  --glass-border-color: var(--line);
  --section-label: var(--ink-3);
  --input-bg: var(--inset);
  --input-border: var(--line-2);
  --input-focus-border: var(--act-hi);
  --input-focus-glow: 0 0 0 3px rgba(47, 139, 255, .2);
  --btn-primary: var(--act);
  --btn-primary-text: #fff;
  --card-shadow: none;
  --row-bg: var(--inset);
  --row-border: 1px solid var(--line);
  --font-display: var(--f-display);
  --font-body: var(--f-body);
  --font-mono: var(--f-num);
  --surface-canvas: var(--ground);
  --surface: var(--panel);
  --surface-inset: var(--inset);
  --surface-overlay: var(--raise);
  --surface-code: var(--rail);
  --surface-border: var(--line);
  --surface-border-strong: var(--line-2);
  --surface-featured-border: var(--act-hi);
  --fill-subtle: rgba(255, 255, 255, .025);
  --fill: rgba(255, 255, 255, .05);
  --fill-strong: rgba(255, 255, 255, .08);
  --tint-accent-bg: rgba(47, 139, 255, .12);  --tint-accent-border: rgba(47, 139, 255, .4);  --tint-accent-text: #8cc0ff;
  --tint-info-bg: rgba(90, 162, 255, .1);     --tint-info-border: rgba(90, 162, 255, .35); --tint-info-text: #a9cfff;
  --tint-success-bg: var(--on-bg);            --tint-success-border: rgba(53, 196, 106, .45); --tint-success-text: #6be39b;
  --tint-warning-bg: rgba(224, 165, 38, .1);  --tint-warning-border: rgba(224, 165, 38, .4); --tint-warning-text: #f0c060;
  --tint-danger-bg: var(--warn-bg);           --tint-danger-border: #6b3a3a;                --tint-danger-text: #ffc0a3;
  --tint-neutral-bg: rgba(255, 255, 255, .05); --tint-neutral-border: var(--line-2);        --tint-neutral-text: var(--ink-2);
  --tint-purple-bg: rgba(167, 139, 250, .12); --tint-purple-border: rgba(167, 139, 250, .4); --tint-purple-text: #c4b5fd;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r);
  --radius-lg: var(--r);
  --radius-card: var(--r);
  --space-card: var(--pad);
  --page-max: 1320px;
  --focus-ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--act-hi);
  --arena-cyan: var(--act-hi);
  --arena-cyan-text: #8cc0ff;
  --arena-cyan-soft: rgba(47, 139, 255, .12);
  --arena-cyan-edge: rgba(47, 139, 255, .4);
  --arena-glow: none;
  --arena-grad: var(--act);
  --arena-radius: var(--r);
}

/* Page shell: v2 pages were centred containers; keep them inside v3's main. */
.v2 .container { max-width: none; padding-left: 0; padding-right: 0; }
/* Rent page: the booking form row uses the same full width as the cards above it. */
.v2 .rental-container { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.v2 .main > * + * { margin-top: 0; }
.v2 .main > .v2-page > * + * { margin-top: var(--gap); }

/* Font Awesome icons sit on the text baseline like v3's line icons. */
.v2 .fas, .v2 .fab, .v2 .far { line-height: 1; }

/* v2 buttons → v3 buttons */
.v2 .btn { border-radius: var(--r-sm); font-family: var(--f-body); font-weight: 600; box-shadow: none; text-shadow: none; }
.v2 .btn-primary { background: var(--act); border: 1px solid var(--act); color: #fff; }
.v2 .btn-primary:hover { background: var(--act-hi); border-color: var(--act-hi); color: #fff; }
.v2 .btn-secondary, .v2 .btn-ghost, .v2 .btn-info { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.v2 .btn-secondary:hover, .v2 .btn-ghost:hover, .v2 .btn-info:hover { background: var(--raise); border-color: #3a5a8c; }
.v2 .btn-danger, .v2 .btn-danger-ghost { background: transparent; border: 1px solid #5a3440; color: var(--warn); }
.v2 .btn-danger:hover, .v2 .btn-danger-ghost:hover { background: var(--warn-bg); border-color: var(--warn); }
.v2 .btn-success { background: var(--on-bg); border: 1px solid rgba(53, 196, 106, .45); color: #6be39b; }
.v2 .btn-warning { background: rgba(224, 165, 38, .12); border: 1px solid rgba(224, 165, 38, .45); color: #f0c060; }
.v2 .btn-lg { min-height: 52px; padding: 0 22px; font-size: 16px; }
.v2 .btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.v2 .btn-block { width: 100%; }
.v2 .btn[disabled], .v2 .btn:disabled { opacity: .45; cursor: not-allowed; }

/* v2 surfaces: flat navy, v3 corners */
.v2 .card, .v2 .arena-card, .v2 .info-card, .v2 .settings-section, .v2 .guide-card, .v2 .guide-step, .v2 .stat-card, .v2 .action-card {
  background: var(--panel); background-image: none; border: 1px solid var(--line); border-radius: var(--r); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.v2 .card-inset { background: var(--inset); border-color: var(--line); }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--f-display); letter-spacing: 0; text-shadow: none; }
.v2 h1 { text-transform: uppercase; }
.v2 table { font-variant-numeric: tabular-nums; }
.v2 input[type="text"], .v2 input[type="search"], .v2 input[type="number"], .v2 input[type="password"],
.v2 input[type="email"], .v2 input[type="url"], .v2 input[type="date"], .v2 input[type="datetime-local"], .v2 select, .v2 textarea {
  background-color: var(--inset); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink);
}
.v2 input:focus, .v2 select:focus, .v2 textarea:focus { outline: none; border-color: var(--act-hi); box-shadow: 0 0 0 3px rgba(47, 139, 255, .2); }
.v2 input[type="checkbox"], .v2 input[type="radio"] { accent-color: var(--act-hi); }
.v2 .badge, .v2 .status-badge, .v2 .pill { border-radius: 6px; font-family: var(--f-num); letter-spacing: .04em; }

/* v2 confirm dialog (window.confirmDialog in compat.js) */
.cdlg-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(4, 10, 22, .7); opacity: 0; transition: opacity .18s; }
.cdlg-overlay.open { opacity: 1; }
.cdlg { width: min(420px, calc(100vw - 32px)); padding: 22px; border-radius: var(--r); background: var(--raise); border: 1px solid var(--line-2); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.cdlg-title { font: 800 16px/1.3 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.cdlg-msg { color: var(--ink-2); margin-bottom: 18px; }
.cdlg-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* v3 step bar used by veto/draft (inc/v2_partials.php) */
.v3-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: step; }
.v3-steps li { counter-increment: step; position: relative; padding: 11px 14px 11px 46px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--inset); color: var(--ink-3); font-weight: 600; }
.v3-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 800 13px/1 var(--f-display); color: var(--line-2); }
.v3-steps li.is-done { color: var(--ink-2); }
.v3-steps li.is-done::before { color: var(--on); }
.v3-steps li.is-now { background: var(--raise); border-color: var(--act-hi); color: var(--ink); }
.v3-steps li.is-now::before { color: var(--act-hi); }
@media (max-width: 900px) { .v3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Phone pass for ported pages (guide, tournament, skins, rentals): v3 titles, no iOS input zoom,
   nothing under 12px, 40px+ touch targets, one-row scrolling section jumps. */
@media (max-width: 900px) {
  body.v2 input:not([type=checkbox]):not([type=radio]):not([type=range]), body.v2 select, body.v2 textarea { font-size: 16px; }
  .guide-hero { padding: 8px 0 18px; text-align: left; background: none; }
  .guide-hero h1 { font-size: 22px; letter-spacing: 0; line-height: 1.15; }
  .guide-hero h1 i { font-size: .9em; }
  .guide-hero p { font-size: 15px; }
  .guide-breadcrumb { justify-content: flex-start; font-size: 13px; }
  .guide-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .guide-wrap { padding: 8px 0 48px; }
  .guide-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 28px; padding: 10px 12px; }
  .guide-toc::-webkit-scrollbar { display: none; }
  .guide-toc a { flex: none; min-height: 40px; font-size: 14px; }
  .guide-toc-label { font-size: 12.5px; letter-spacing: 0; text-transform: none; flex: none; }
  .cmd-table thead th, .cmd-badge { font-size: 12px; }
  .guide-section-head h2 { font-size: 20px; line-height: 1.2; }
}

/* Skin changer: no obvious sub-labels on the mode cards, readable skin names,
   one-line editor title; phones get a 2×2 mode grid and a single scrolling tab row. */
.v2 .pill-tab .pt-lbl span { display: none; }
.v2 .skin .n { font-size: 12.5px; }
.v2 .mht strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.v2 .skii img, .v2 .wi img, .v2 #mImg, .v2 #mPI { transition: opacity .2s; }
@media (max-width: 900px) {
  .v2 .pill-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v2 .pill-tab { padding: 10px 12px; min-height: 52px; }
  .v2 .mts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v2 .mts::-webkit-scrollbar { display: none; }
  .v2 .mt { flex: none; }
}

/* Skin changer tab icons (assets/skin-icons.svg): CS2 silhouettes on the
   category list, game-icons on the mode cards. */
.v2 .sk-ic { width: 22px; height: 22px; flex: none; color: currentColor; }
.v2 .cat-btn { display: flex; align-items: center; gap: 10px; }
.v2 .sk-ic-cat { width: 34px; height: 14px; color: var(--ink-3); }
.v2 .cat-btn.on .sk-ic-cat, .v2 .cat-btn:hover .sk-ic-cat { color: var(--sky); }
.v2 .pill-tab .pi .sk-ic { width: 22px; height: 22px; color: var(--sky); }
.v2 .sk-credit { margin: 18px 0 0; font-size: 12px; color: var(--ink-3); }
.v2 .sk-ic-img { width: 44px; height: 28px; object-fit: contain; flex: none; opacity: .7; transition: opacity .15s; }
.v2 .cat-btn.on .sk-ic-img, .v2 .cat-btn:hover .sk-ic-img { opacity: 1; }
.v2 .pill-tab .pi .sk-ic-img { width: 38px; height: 34px; opacity: .85; }
.v2 .pill-tab.on .pi .sk-ic-img, .v2 .pill-tab:hover .pi .sk-ic-img { opacity: 1; }
/* Room for icon + full label ("Handgun") in the category column. */
@media (min-width: 901px) { .v2 .main-row { grid-template-columns: 196px 1fr; } }
.v2 .sk-credit a { color: inherit; }

/* Tournament purchase on phones: the form first, the "how it works" cards after. */
@media (max-width: 760px) { .v2 .tp-sidebar { order: 1; } }

/* Tournament purchase: the buyer's own requests above the form. */
.v2 .tp-my-requests { margin-bottom: 16px; }
.v2 .tp-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v2 .tp-req-list a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-color, rgba(255,255,255,.1)); color: inherit; text-decoration: none; }
.v2 .tp-req-list a:hover { border-color: rgba(90,162,255,.5); }
.v2 .tp-req-list span { color: var(--text-secondary, #9fb0c8); font-size: .88rem; font-variant-numeric: tabular-nums; }
.v2 .tp-req-list .tp-req-st { margin-left: auto; font-weight: 700; font-size: .8rem; }

/* Public tournament page: register call to action under the hero meta. */
.v2 .t-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.v2 .t-hero-cta-note { color: var(--text-secondary, #9fb0c8); font-size: .9rem; }

/* Public bracket: live match marker; "your match" connect banner. */
.v2 .b-match.live { border-color: rgba(255, 92, 92, .55); }
.v2 .b-live { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 92, 92, .16); color: #ff8080; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.v2 .server-banner--live { flex-wrap: wrap; border-color: rgba(255, 92, 92, .45); }
.v2 .server-banner--live .sb-label i { color: #ff5c5c; font-size: .6rem; vertical-align: middle; }
.v2 .server-banner--live .sb-code { max-width: 100%; overflow-wrap: anywhere; }

/* Tournament admin console: Start Match lineups (rosters with substitutes). */
.v2 #startModal .sm-box { max-height: calc(100vh - 32px); overflow-y: auto; }
.v2 .lu-team { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.v2 .lu-team legend { display: flex; align-items: center; gap: 8px; width: 100%; }
.v2 .lu-count { margin-left: auto; font-variant-numeric: tabular-nums; color: #6ee7a8; }
.v2 .lu-count--bad { color: #ff8080; }
.v2 .lu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.v2 .lu-player { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border: 1px solid var(--border-color, rgba(255,255,255,.12)); border-radius: 8px; cursor: pointer; min-width: 0; }
.v2 .lu-player:has(input:checked) { border-color: rgba(90,162,255,.6); background: rgba(47,139,255,.08); }
.v2 .lu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 .lu-cap { margin-left: auto; font-size: .68rem; font-weight: 700; color: #f5c451; text-transform: uppercase; }

/* Tournament admin console: settings dialog. */
.v2 .st-box { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; }
.v2 .st-form { display: grid; gap: 14px; margin-top: 14px; }
.v2 .st-row { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.v2 .st-row .wm-score-input { width: 100%; text-align: left; font-size: .95rem; }
.v2 .st-row textarea.wm-score-input { resize: vertical; font-family: inherit; }
.v2 .st-hint { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-secondary, #9fb0c8); }
.v2 .st-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.v2 .st-map { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, rgba(255,255,255,.12)); border-radius: 8px; cursor: pointer; }

/* Tournament admin console: registration link strip. */
.v2 .ta-reg-strip { flex-wrap: wrap; align-items: center; gap: 8px; }
.v2 .ta-reg-url { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tournament admin console on phones: the tournament list is a short strip
   above the bracket, not a full-height column that hides it. */
@media (max-width: 768px) {
  .v2 .ta-layout { min-height: 0; }
  .v2 .ta-sidebar { height: auto; max-height: 32vh; border-right: 0; border-bottom: 1px solid var(--ta-border); }
  .v2 .ta-main { padding: 16px 0; }
  .v2 .ta-match-actions { flex-wrap: wrap; }
}