/* Practice page concept based on the selected blue arena / red accent mockup. */
html[data-site-theme] #page-practice {
  --practice-concept-red: var(--header-hud-accent, #ff263e);
  --practice-concept-cyan: #18c9f5;
}

html[data-site-theme] #page-practice > .page-heading { display: none; }
html[data-site-theme] #page-practice .warmup-intro {
  position: relative; isolation: isolate; min-height: 128px; align-items: center;
  margin: 2px 0 14px; padding: 20px 18px; overflow: hidden; border-bottom: 1px solid #19384b;
}
html[data-site-theme] #page-practice .warmup-intro::before {
  position: absolute; z-index: -2; inset: 0; content: "";
  background: linear-gradient(90deg,#080d14 0%,#080d14f2 25%,#080d1480 56%,#080d14a0 100%),
    linear-gradient(180deg,transparent 55%,#06111b18 56%,#07111b 100%),
    repeating-linear-gradient(0deg,transparent 0 31px,#31b8ee0c 32px),
    repeating-linear-gradient(90deg,transparent 0 54px,#31b8ee0b 55px),
    radial-gradient(ellipse at 77% 71%,#075078 0,#09243a 30%,#080d14 72%);
}
html[data-site-theme] #page-practice .warmup-intro::after {
  position: absolute; z-index: -1; top: 0; right: 0; width: min(44%,560px); height: 100%; content: ""; pointer-events: none;
  background:
    radial-gradient(circle,#ff3349 1.15px,transparent 1.8px) 94% 21%/15px 15px,
    linear-gradient(130deg,transparent 0 23%,#ef26351a 23.2% 29%,transparent 29.2% 43%,#ef26352b 43.2% 50%,transparent 50.2% 65%,#ef263520 65.2% 72%,transparent 72.2%);
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 34%);
  mask-image: linear-gradient(90deg,transparent 0,#000 34%);
}
html[data-site-theme] #page-practice .warmup-intro h1 { margin-top: 4px; color: #f4f8fc; font-size: clamp(38px,4.5vw,56px); font-weight: 650; letter-spacing: -.055em; text-shadow: 0 5px 25px #0008; }
html[data-site-theme] #page-practice .warmup-intro .eyebrow { color: var(--practice-concept-red); }
html[data-site-theme] #page-practice .warmup-intro .form-intro { margin-top: 7px; color: #c6d6e3; }

html[data-site-theme] #page-practice .browser-check-card {
  grid-template-columns: minmax(0,1.08fr) minmax(290px,.92fr); grid-template-rows:auto auto; gap: 12px 20px;
  align-items: center; margin: 0 0 14px; padding: 19px 20px; border: 1px solid color-mix(in srgb,var(--practice-concept-red) 52%,#16364a) !important;
  border-radius: 12px; background: linear-gradient(90deg,transparent,#0a1621a8 65%,#07121c),radial-gradient(ellipse at 92% 10%,#0c405d 0,transparent 44%),linear-gradient(125deg,#0a1824,#07111a 62%,#091622) !important;
  box-shadow: inset 0 1px #ffffff0d,0 13px 34px #0005 !important;
}
html[data-site-theme] #page-practice .browser-check-heading { grid-column:1; grid-row:1; }
html[data-site-theme] #page-practice .browser-check-mark { border-color: color-mix(in srgb,var(--practice-concept-red) 72%,white 5%); background: #121a27; color: var(--practice-concept-red); box-shadow: 0 0 26px color-mix(in srgb,var(--practice-concept-red) 24%,transparent); }
html[data-site-theme] #page-practice .browser-check-heading h2 { color: #f2f7fb; }
html[data-site-theme] #page-practice .browser-check-heading p:last-child { color: #b8cad8; }
html[data-site-theme] #page-practice .browser-check-heading .eyebrow,
html[data-site-theme] #page-practice .browser-check-supported > span { color: var(--practice-concept-red); }
html[data-site-theme] #page-practice .browser-check-supported { grid-column:2; grid-row:1/3; padding-inline-start: 20px; border-inline-start: 1px solid #254155; }
html[data-site-theme] #page-practice .browser-version-list > span { border-color: #27465b; border-radius: 7px; background: #08131d; color: #e2edf5; }
html[data-site-theme] #page-practice .browser-version-list b,
html[data-site-theme] #page-practice .browser-version-list small { color: #a9c4d7; }
html[data-site-theme] #page-practice .browser-check-platform-note { color: #9fb5c5; }
html[data-site-theme] #page-practice .browser-check-action { grid-column:1; grid-row:2; align-items: center; flex-direction: row; justify-content: flex-start; gap: 14px; min-width: 0; padding: 12px 0 0; border-top: 1px solid #254155; border-inline-start: 0; }
html[data-site-theme] #page-practice .browser-check-action .button { flex:0 0 auto; min-width: 200px; min-height: 44px; width: auto; border: 1px solid var(--practice-concept-red) !important; border-radius: 8px; background: var(--practice-concept-red) !important; color: #fff !important; box-shadow: 0 6px 22px color-mix(in srgb,var(--practice-concept-red) 25%,transparent); }
html[data-site-theme] #page-practice .browser-check-action .button:hover { filter: brightness(1.1); }
html[data-site-theme] #page-practice .browser-check-status { color: #abc0cf; font-size: 10px; }
html[data-site-theme] #page-practice .browser-check-result { min-width:0; }
html[data-site-theme] #page-practice .browser-check-status[data-state="success"] { color: #89e7a7; }
html[data-site-theme] #page-practice .browser-check-status[data-state="failure"],html[data-site-theme] #page-practice .browser-check-status[data-state="error"] { color: #ff8a96; }

html[data-site-theme] #page-practice .practice-playlist-panel { margin: 0 0 14px; border: 1px solid color-mix(in srgb,var(--practice-concept-red) 54%,#173247) !important; border-radius: 10px; background: linear-gradient(105deg,#10131b,#0a111a 70%,#10131b) !important; }
html[data-site-theme] #page-practice .practice-playlist-panel > summary { min-height: 58px; padding: 12px 16px; color: #f0f4fa; }
html[data-site-theme] #page-practice .practice-playlist-panel > summary::after { color: var(--practice-concept-red); font-size: 22px; }
html[data-site-theme] #page-practice .playlist-free-tag { border-color: #68424b; color: #dce9f3; }
html[data-site-theme] #page-practice .practice-playlist-content > p:first-child { color: #b0c1ce; }

html[data-site-theme] #page-practice .practice-toolbar { margin-top: 0; grid-template-columns: minmax(220px,1fr) minmax(190px,270px); gap: 12px; }
html[data-site-theme] #page-practice .practice-search-control input,html[data-site-theme] #page-practice .practice-filter-control select { height: 46px; border: 1px solid #1b819e; border-radius: 9px; background: linear-gradient(145deg,#07141d,#08121b); color: #edf6fb; }
html[data-site-theme] #page-practice .practice-search-control > span { color: #d9e8f1; }
html[data-site-theme] #page-practice .practice-search-control input:focus,html[data-site-theme] #page-practice .practice-filter-control select:focus { border-color: var(--practice-concept-cyan); box-shadow: 0 0 0 3px #18c9f526; }
html[data-site-theme] #page-practice .practice-filter-control::after { color: #8df268; }
html[data-site-theme] #page-practice .practice-score-note { margin: 8px 0 18px; color: #a9bdcb; }
html[data-site-theme] #page-practice .practice-section-heading { margin: 0 0 10px; }
html[data-site-theme] #page-practice .practice-section-heading .eyebrow { margin-bottom: 4px; color: var(--practice-concept-red); }
html[data-site-theme] #page-practice .practice-section-heading h2 { margin: 0; padding-inline-start: 12px; border-inline-start: 4px solid var(--practice-concept-red); color: #f0f5fa; font-size: clamp(22px,2.5vw,30px); }

html[data-site-theme] #page-practice .practice-drill-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
html[data-site-theme] #page-practice .practice-drill-item { min-width: 0; overflow: hidden; border: 1px solid #193c51; border-radius: 11px; background: linear-gradient(150deg,#0b1924,#071019 70%); box-shadow: 0 12px 28px #0004; transition: transform .18s,border-color .18s,box-shadow .18s; }
html[data-site-theme] #page-practice .practice-drill-item:hover,html[data-site-theme] #page-practice .practice-drill-item:focus-within { transform: translateY(-2px); border-color: var(--practice-concept-cyan); box-shadow: 0 16px 34px #0007,0 0 0 1px #18c9f51c; }
html[data-site-theme] #page-practice .practice-drill-card { grid-template-rows: auto auto auto; row-gap: 8px; min-height: 0; padding: 0 0 13px; border: 0; border-radius: 0; background: transparent !important; color: #edf4f8; box-shadow: none !important; transform: none !important; }
html[data-site-theme] #page-practice .practice-card-art,html[data-site-theme] #page-practice .practice-card-video { border-bottom: 1px solid #19435b; }
html[data-site-theme] #page-practice .practice-drill-icon { color: var(--practice-concept-red); }
html[data-site-theme] #page-practice .practice-drill-card strong { color: #eff5f9; font-size: 16px; }
html[data-site-theme] #page-practice .practice-best-score { display: block !important; grid-column: 2/-1; grid-row: 3; padding: 0; color: #aec1ce; font-size: 10px; }
html[data-site-theme] #page-practice .practice-drill-action { border: 1px solid var(--practice-concept-red); background: transparent; color: var(--practice-concept-red); }
html[data-site-theme] #page-practice .practice-favorite-toggle { border-color: #8ba5b2; background: #07131ce8; color: #edf5fa; backdrop-filter: blur(6px); }
html[data-site-theme] #page-practice .practice-favorite-toggle.is-favorite { border-color: #ffd65e; color: #ffd65e; }
html[data-site-theme] #page-practice .practice-select-toggle span { border-color: #92aab8; background: #07131ce8; }
html[data-site-theme] #page-practice .practice-select-toggle.is-selected span { border-color: #fff; background: #fff; }

@media (max-width: 1080px) {
  html[data-site-theme] #page-practice .browser-check-card { grid-template-columns: minmax(0,1fr) minmax(240px,.92fr); }
  html[data-site-theme] #page-practice .browser-check-action .button { width: auto; min-width: 180px; }
}
@media (max-width: 850px) {
  html[data-site-theme] #page-practice .practice-drill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-site-theme] #page-practice .warmup-intro { min-height: 112px; }
}
@media (max-width: 620px) {
  html[data-site-theme] #page-practice .warmup-intro { min-height: 96px; padding: 16px 8px; }
  html[data-site-theme] #page-practice .warmup-intro::after { width: 54%; }
  html[data-site-theme] #page-practice .browser-check-card { grid-template-columns: 1fr; grid-template-rows:auto; gap: 14px; padding: 16px; }
  html[data-site-theme] #page-practice .browser-check-heading,html[data-site-theme] #page-practice .browser-check-supported,html[data-site-theme] #page-practice .browser-check-action { grid-column:auto; grid-row:auto; }
  html[data-site-theme] #page-practice .browser-check-supported { padding: 13px 0 0; border-inline-start: 0; border-top: 1px solid #254155; }
  html[data-site-theme] #page-practice .browser-check-action { align-items: stretch; flex-direction: column; padding: 12px 0 0; }
  html[data-site-theme] #page-practice .browser-check-action .button { width: 100%; }
  html[data-site-theme] #page-practice .practice-toolbar { grid-template-columns: 1fr; }
  html[data-site-theme] #page-practice .practice-drill-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html[data-site-theme] #page-practice .practice-drill-item { transition: none; } }


html[data-site-theme] #page-practice .practice-playlist-panel > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  justify-content: initial;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}
html[data-site-theme] #page-practice .practice-playlist-panel > summary::after { display: none; }
html[data-site-theme] #page-practice .playlist-summary-title { grid-column: 1; grid-row: 1; }
html[data-site-theme] #page-practice .playlist-free-tag { grid-column: 2; grid-row: 1; }
html[data-site-theme] #page-practice .playlist-summary-description { grid-column: 1/4; grid-row: 2; color: #a9bdcb; font-size: 11px; }
html[data-site-theme] #page-practice .playlist-summary-action { grid-column: 4; grid-row: 1/3; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--practice-concept-red); border-radius: 8px; color: #edf5fa; white-space: nowrap; }
html[data-site-theme] #page-practice .playlist-summary-action b { color: var(--practice-concept-red); font-size: 20px; line-height: 1; }
html[data-site-theme] #page-practice .playlist-summary-action i { color: var(--practice-concept-red); font-size: 18px; font-style: normal; }

html[data-site-theme] #page-practice .practice-drill-card { grid-template-rows: auto auto auto auto; }
html[data-site-theme] #page-practice .practice-card-description { grid-column: 1/-1; grid-row: 3; display: -webkit-box; min-height: 36px; padding: 0 15px; overflow: hidden; color: #adc0ce; font-size: 11px; line-height: 1.5; text-align: start; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html[data-site-theme] #page-practice .practice-best-score { grid-column: 1/3; grid-row: 4; padding-inline-start: 15px; align-self: center; }
html[data-site-theme] #page-practice .practice-drill-action { grid-column: 3; grid-row: 4; justify-self: end; align-self: center; width: 38px; height: 38px; margin-inline-end: 14px; border-radius: 50%; }

@media (max-width: 620px) {
  html[data-site-theme] #page-practice .practice-playlist-panel > summary { grid-template-columns: auto auto minmax(0,1fr); }
  html[data-site-theme] #page-practice .playlist-summary-description { grid-column: 1/-1; }
  html[data-site-theme] #page-practice .playlist-summary-action { grid-column: 3; grid-row: 1; min-height: 38px; padding-inline: 9px; }
  html[data-site-theme] #page-practice .practice-card-description { min-height: 0; }
}

/* Carry the shared arena art into Warm-up while keeping its own copy and theme accents. */
html[data-site-theme] #page-warmup {
  --warmup-design-accent: var(--header-hud-accent, var(--amber, #ff6b70));
}
html[data-site-theme] #page-home {
  --home-warmup-accent: var(--header-hud-accent, var(--amber, #ff6b70));
}
html[data-site-theme] #page-home .hero-copy {
  position:relative; isolation:isolate; overflow:hidden;
}
html[data-site-theme] #page-home .hero-copy::before {
  position:absolute; z-index:-1; inset:0; content:""; pointer-events:none;
  background:
    radial-gradient(circle,color-mix(in srgb,var(--home-warmup-accent) 82%,white) 1.15px,transparent 1.8px) 94% 20%/15px 15px,
    linear-gradient(130deg,transparent 0 23%,color-mix(in srgb,var(--home-warmup-accent) 10%,transparent) 23.2% 29%,transparent 29.2% 43%,color-mix(in srgb,var(--home-warmup-accent) 17%,transparent) 43.2% 50%,transparent 50.2% 65%,color-mix(in srgb,var(--home-warmup-accent) 12%,transparent) 65.2% 72%,transparent 72.2%),
    radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--home-warmup-accent) 8%,transparent),transparent 62%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);
  mask-image:linear-gradient(90deg,transparent 0,#000 38%);
}
html[data-site-theme] #page-warmup .warmup-intro {
  position: relative; isolation: isolate; min-height: 128px; align-items: center;
  margin: 2px 0 14px; padding: 20px 18px; overflow: hidden; border-bottom: 1px solid #19384b;
}
html[data-site-theme] #page-warmup .warmup-intro::before {
  position: absolute; z-index: -2; inset: 0; content: "";
  background: linear-gradient(90deg,#080d14 0%,#080d14f2 25%,#080d1480 56%,#080d14a0 100%),
    repeating-linear-gradient(0deg,transparent 0 31px,#31b8ee0c 32px),
    repeating-linear-gradient(90deg,transparent 0 54px,#31b8ee0b 55px),
    radial-gradient(ellipse at 77% 71%,#075078 0,#09243a 30%,#080d14 72%);
}
html[data-site-theme] #page-warmup .warmup-intro::after {
  position: absolute; z-index: -1; top: 0; right: 0; width: min(44%,560px); height: 100%; content: ""; pointer-events: none;
  background:
    radial-gradient(circle,color-mix(in srgb,var(--warmup-design-accent) 82%,white) 1.15px,transparent 1.8px) 94% 21%/15px 15px,
    linear-gradient(130deg,transparent 0 23%,color-mix(in srgb,var(--warmup-design-accent) 10%,transparent) 23.2% 29%,transparent 29.2% 43%,color-mix(in srgb,var(--warmup-design-accent) 17%,transparent) 43.2% 50%,transparent 50.2% 65%,color-mix(in srgb,var(--warmup-design-accent) 12%,transparent) 65.2% 72%,transparent 72.2%);
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 34%);
  mask-image: linear-gradient(90deg,transparent 0,#000 34%);
}
html[data-site-theme] #page-warmup .browser-check-card {
  grid-template-columns: minmax(0,1.08fr) minmax(290px,.92fr); grid-template-rows:auto auto; gap: 12px 20px;
  margin: 0 0 14px; padding: 19px 20px; border: 1px solid color-mix(in srgb,var(--warmup-design-accent) 52%,#16364a) !important;
  border-radius: 12px; background: linear-gradient(90deg,transparent,#0a1621a8 65%,#07121c),radial-gradient(ellipse at 92% 10%,#0c405d 0,transparent 44%),linear-gradient(125deg,#0a1824,#07111a 62%,#091622) !important;
  box-shadow: inset 0 1px #ffffff0d,0 13px 34px #0005 !important;
}
html[data-site-theme] #page-warmup .browser-check-heading { grid-column:1; grid-row:1; }
html[data-site-theme] #page-warmup .browser-check-mark { border-color:color-mix(in srgb,var(--warmup-design-accent) 72%,white 5%); color:var(--warmup-design-accent); box-shadow:0 0 26px color-mix(in srgb,var(--warmup-design-accent) 24%,transparent); }
html[data-site-theme] #page-warmup .browser-check-heading h2 { color:#f2f7fb; }
html[data-site-theme] #page-warmup .browser-check-heading p:last-child { color:#b8cad8; }
html[data-site-theme] #page-warmup .browser-check-heading .eyebrow,
html[data-site-theme] #page-warmup .browser-check-supported > span { color:var(--warmup-design-accent); }
html[data-site-theme] #page-warmup .browser-check-supported { grid-column:2; grid-row:1/3; padding-inline-start:20px; border-inline-start:1px solid #254155; }
html[data-site-theme] #page-warmup .browser-version-list > span { border-color:#27465b; border-radius:7px; background:#08131d; color:#e2edf5; }
html[data-site-theme] #page-warmup .browser-version-list b,
html[data-site-theme] #page-warmup .browser-version-list small { color:#a9c4d7; }
html[data-site-theme] #page-warmup .browser-check-platform-note { color:#9fb5c5; }
html[data-site-theme] #page-warmup .browser-check-action { grid-column:1; grid-row:2; align-items:center; flex-direction:row; justify-content:flex-start; gap:14px; min-width:0; padding:12px 0 0; border-top:1px solid #254155; border-inline-start:0; }
html[data-site-theme] #page-warmup .browser-check-action .button { flex:0 0 auto; min-width:200px; min-height:44px; width:auto; border:1px solid var(--warmup-design-accent) !important; border-radius:8px; background:var(--warmup-design-accent) !important; color:#fff !important; box-shadow:0 6px 22px color-mix(in srgb,var(--warmup-design-accent) 25%,transparent); }
html[data-site-theme] #page-warmup .browser-check-status { color:#abc0cf; font-size:10px; }
html[data-site-theme] #page-warmup .browser-check-result { min-width:0; }
@media (max-width:1080px) {
  html[data-site-theme] #page-warmup .browser-check-card { grid-template-columns:minmax(0,1fr) minmax(240px,.92fr); }
  html[data-site-theme] #page-warmup .browser-check-action .button { min-width:180px; }
}
@media (max-width:720px) {
  html[data-site-theme] #page-warmup .browser-check-card { grid-template-columns:1fr; grid-template-rows:auto; gap:14px; padding:16px; }
  html[data-site-theme] #page-warmup .browser-check-heading,html[data-site-theme] #page-warmup .browser-check-supported,html[data-site-theme] #page-warmup .browser-check-action { grid-column:auto; grid-row:auto; }
  html[data-site-theme] #page-warmup .browser-check-supported { padding:13px 0 0; border-inline-start:0; border-top:1px solid #254155; }
  html[data-site-theme] #page-warmup .browser-check-action { align-items:stretch; flex-direction:column; }
  html[data-site-theme] #page-warmup .browser-check-action .button { width:100%; }
  html[data-site-theme] #page-warmup .warmup-intro { min-height:104px; padding:16px 12px; }
  html[data-site-theme] #page-warmup .warmup-intro::after { width:54%; }
}