/* Securinets Quals theme for CTFd 3.8 — all styles in one file (no build step).
   Sections: 1 base (fonts, tokens, reset) · 2 motion · 3 layout · 4 components · 5 pages.
   Edit freely, then bump THEME_VERSION in templates/macros/theme.html so browsers reload it. */

/* ============================================================ base */
/* Fonts (self-hosted, SIL OFL — see assets/fonts/OFL-*.txt), design tokens, reset. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 113%; ascent-override: 85.6%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* palette sampled from the Securinets Quals trailer */
  --void: #0a080d;
  --surface: #161116;
  --raised: #1d171c;
  --charcoal: #2b252c;
  --line-strong: #4a4049;
  --signal: #e80032;        /* Securinets red */
  --signal-hot: #ff1446;
  --coral: #e8727c;         /* red for small text (AA on void) */
  --bone: #ece6e4;
  --ash: #a89ca1;
  --white: #ffffff;
  --cyan: rgba(62, 232, 255, .55);

  --bg: var(--void);
  --panel: var(--surface);
  --line: var(--charcoal);
  --text: var(--bone);
  --muted: var(--ash);
  --accent: var(--signal);
  --accent-text: var(--coral);

  --font-display: "Montserrat", "Montserrat Fallback", "Arial Black", system-ui, sans-serif;
  --font-body: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-fast: 120ms;
  --t-med: 200ms;
  --ease-snap: cubic-bezier(.2, .9, .1, 1);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --nav-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 500 15px/1.6 var(--font-body);
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(232, 0, 50, .45); color: var(--white); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  padding: 12px 14px; background: var(--accent); color: var(--white);
  font: 700 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none; transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.02; }
.label { font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
/* JetBrains Mono draws ligatures (-> as an arrow, != as a not-equal sign, == and __ merged). Flags, code and anything typed
   must show their exact characters. !important because every later `font:` shorthand resets these. */
input, textarea, code, kbd, samp, pre, .mono { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }

/* film grain over everything (animated in motion.css) */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ motion */
/* Motion: background logo, solve shockwave and glitch primitives.
   Rules that keep this smooth on phones (measured during the mockup phase):
   - no endless clip-path/filter animations: the logo glitch is a one-off class added by JS
   - state classes sit on the animated elements, not on <html>
   Under prefers-reduced-motion nothing moves (no scaling, sliding, zooming, glitch jumps or text
   scrambles); only gentle opacity effects remain: the logo's slow breathing (brightness only) and fade-ins. */

@keyframes slice {
  0%   { clip-path: inset(0 0 0 0); transform: translateX(0); }
  20%  { clip-path: inset(10% 0 55% 0); transform: translateX(-6px); text-shadow: 2px 0 var(--signal), -2px 0 #3ee8ff; }
  40%  { clip-path: inset(60% 0 8% 0); transform: translateX(5px); }
  60%  { clip-path: inset(30% 0 35% 0); transform: translateX(-3px); }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0); text-shadow: none; }
}
@keyframes split {
  0% { text-shadow: -3px 0 var(--cyan), 3px 0 rgba(232, 0, 50, .85); transform: translateX(2px); }
  50% { text-shadow: 2px 0 var(--cyan), -2px 0 rgba(232, 0, 50, .85); transform: translateX(-1px); }
  100% { text-shadow: none; transform: none; }
}
.split { animation: split 160ms steps(2) 1; }
.glitch { animation: slice 160ms steps(4) 1; }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes fade { from { opacity: 0; } }

body::after { animation: grain 900ms steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); }
}

/* click / correct-flag shockwave: drawn small, scaled up (a full-size ring is a huge texture on phones) */
@keyframes shock {
  from { transform: translate(-50%, -50%) scale(0); opacity: .9; }
  to   { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.shock {
  position: fixed; width: 50vmax; height: 50vmax; border-radius: 50%;
  border: 1px solid var(--signal);
  box-shadow: 0 0 12px 2px rgba(232, 0, 50, .35), inset 0 0 12px 2px rgba(232, 0, 50, .25);
  pointer-events: none; z-index: 102;
  animation: shock 700ms cubic-bezier(.1, .7, .2, 1) forwards;
}
/* touch screens: a plain ring (a blurred shadow this size is slow to paint on a phone) */
@media (hover: none) { .shock { box-shadow: none; border-width: 1.5px; } }

/* ---------- background logo ----------
   .bgmark  position, size, breathing      .glow   home-page glow + pointer parallax
   .intro   entrance / glitch              .shape  red layer masked to the logo   .scan  light band */
.bgmark {
  position: fixed; z-index: -1; pointer-events: none;
  top: 53%; top: calc(var(--nav-h) + (100svh - var(--nav-h)) / 2); left: 50%;
  width: min(86vw, 1000px, calc((100svh - var(--nav-h)) * 1.38)); aspect-ratio: 262 / 171;
  translate: -50% -50%; opacity: .09;
  animation: mark-arrive-wrap 600ms ease-out both;
}
.bgmark .glow, .bgmark .intro { position: absolute; inset: 0; }
/* breathing lives on its own layer (one animation per property per element keeps it on the GPU) */
.bgmark .glow { will-change: transform, opacity; animation: mark-breathe 7s 600ms ease-in-out infinite; }
.bgmark .intro { animation: mark-arrive 600ms cubic-bezier(.16, .84, .3, 1) both; }
.bgmark .shape {
  position: absolute; inset: 0; overflow: hidden; background: var(--signal);
  -webkit-mask: url("../img/mark-red.svg") center / contain no-repeat;
  mask: url("../img/mark-red.svg") center / contain no-repeat;
}
.bgmark .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 26%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 50%, transparent);
  translate: 0 -110%; animation: mark-scan 14s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes mark-arrive-wrap { from { opacity: 0; } }
@keyframes mark-arrive { 0% { scale: .6; } 70% { scale: 1.02; } 100% { scale: 1; } }
@keyframes mark-breathe {
  0%, 100% { opacity: .43; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}
@keyframes mark-scan {
  0% { translate: 0 -110%; }
  55%, 100% { translate: 0 420%; }
}

/* home page: the logo glitches in, then breathes (7 s: swells ~7% and brightens) */
.bgmark.center {
  top: 46%; top: calc(var(--nav-h) + (100svh - var(--nav-h)) * .45);
  width: min(92vw, 1000px, calc((100svh - var(--nav-h)) * 1.38));
  opacity: .12; animation: none;
}
.bgmark.center .glow {
  translate: var(--px, 0px) var(--py, 0px); transition: translate 600ms cubic-bezier(.2, .7, .3, 1);
  animation: mark-breathe-home 7s ease-in-out infinite;
}
.bgmark.center .glow::before { content: ""; position: absolute; inset: -14% -10%; background: radial-gradient(closest-side, rgba(232, 0, 50, .32), rgba(232, 0, 50, .1) 55%, transparent 75%); }
.bgmark.center .intro { animation: mark-intro 900ms cubic-bezier(.2, .8, .2, 1) both; }
.bgmark.center .scan { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55) 50%, transparent); animation-duration: 12s; }
/* once the entrance has played it is dropped, so a glitch never replays it */
.bgmark .intro.arrived { animation: none; }
@keyframes mark-breathe-home { 0%, 100% { opacity: .45; scale: 1; } 50% { opacity: 1; scale: 1.07; } }
@keyframes mark-intro {
  0% { opacity: 0; scale: 1.12; translate: 0 0; }
  14% { opacity: 1; scale: 1.06; translate: -22px 0; animation-timing-function: steps(1, end); }
  24% { opacity: .55; translate: 18px 0; animation-timing-function: steps(1, end); }
  34% { opacity: 1; translate: -10px 0; animation-timing-function: steps(1, end); }
  44% { translate: 0 0; scale: 1.02; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
/* occasional glitch: a 220 ms one-off added by JS (.glitching on .intro) */
.bgmark .intro.glitching { animation: mark-glitch 220ms steps(1, end) 1; }
@keyframes mark-glitch {
  0% { transform: translateX(-14px); opacity: .6; }
  27% { transform: translateX(12px); opacity: 1; }
  54% { transform: translateX(-4px); opacity: .8; }
  82%, 100% { transform: none; opacity: 1; }
}
@media (max-width: 700px) {
  .bgmark { width: min(92vw, calc((100svh - var(--nav-h)) * 1.38)); }
  /* home: 88vw so the 7% swell of the breathing still leaves the wing tips on screen */
  .bgmark.center { width: min(88vw, calc((100svh - var(--nav-h)) * 1.38)); top: 42%; top: calc(var(--nav-h) + (100svh - var(--nav-h)) * .38); }
}

/* theme setting: background logo off */
.no-bgmark .bgmark { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .shock, .bgmark .scan { display: none; }
  body::after { animation: none !important; }

  /* opacity-only effects that stay on */
  .bgmark { animation: soft-arrive 600ms ease-out both !important; }
  .bgmark .glow { animation: soft-breathe 7s 600ms ease-in-out infinite !important; }
  .bgmark .intro { animation: none !important; }
  .bgmark.center { animation: soft-arrive 1200ms ease-out both !important; }
  .bgmark.center .glow { animation: soft-breathe-home 7s ease-in-out infinite !important; translate: none; }
}
@keyframes soft-arrive { from { opacity: 0; } }
@keyframes soft-breathe { 0%, 100% { opacity: .43; } 50% { opacity: 1; } }
@keyframes soft-breathe-home { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ============================================================ layout */
/* Layout: nav, mobile menu, footer, page head. */

/* ---------- nav ---------- */
.nav { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; background: rgba(10, 8, 13, .94); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; }
.brand img { width: 30px; height: auto; max-height: 30px; object-fit: contain; transition: filter var(--t-fast); }
.brand .brand-logo { width: auto; max-width: 160px; height: 28px; }
.brand span { font: 800 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; gap: 24px; margin-right: auto; min-width: 0; }
.nav-links a, .nav-right a, .nav-right button {
  font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  text-decoration: none; padding: 8px 0; position: relative; background: none; border: 0; transition: color var(--t-fast); white-space: nowrap;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-snap); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-right a[aria-current="page"] { color: var(--text); }
.nav .btn { height: 36px; padding: 0 14px; }
.nav-right .btn-primary, .nav-right .btn-primary[aria-current] { color: var(--white); background: var(--accent); padding: 0 14px; }
.menu-btn { display: none; }
@media (hover: hover) {
  .brand:hover img { filter: drop-shadow(2px 0 0 rgba(232, 0, 50, .8)) drop-shadow(-2px 0 0 var(--cyan)); }
  .nav-links a:hover, .nav-right a:hover, .nav-right button:hover { color: var(--text); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-right .btn-primary:hover { color: var(--white); background: var(--signal-hot); }
}
@media (max-width: 1000px) {
  .nav .wrap { gap: 16px; }
  .nav-links, .nav-right .hide-sm { display: none; }
  .nav-right { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .mobile-menu[data-open="true"] { display: flex; }
}


/* ---------- notices under the nav (email confirmation etc.) ---------- */
.notice-bar { border-bottom: 1px solid var(--line); background: var(--raised); }
.notice-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; font-size: 14px; }
.notice-bar a { color: var(--accent-text); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: 64px; position: relative; z-index: 1; flex: none; }
body > main { flex: 1 0 auto; width: 100%; }
body > .nav, body > .notice-bar { flex: none; }
.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 64px; padding-block: 10px; }
.site-foot .lang { display: flex; align-items: center; gap: 10px; }
.site-foot select { height: 44px; padding: 0 34px 0 12px; font-family: system-ui, sans-serif; }
.landing-page .site-foot { margin-top: 0; }

/* ---------- page head: big title, facts beside it (never small text above the title) ---------- */
.page-head { position: relative; padding-block: clamp(36px, 6vw, 72px) 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.page-head h1 { font-size: clamp(27.2px, 8.4vw, 83.2px); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.page-head h1.name { text-transform: none; letter-spacing: -.03em; }
.facts { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.fact { display: grid; gap: 6px; text-align: right; }
.fact b { font: 800 clamp(16px, 2.1vw, 24px)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.fact b small { font-size: .6em; color: var(--muted); font-weight: 700; }
.fact .label { order: 2; }
.page-head .search { width: 360px; max-width: 100%; }
.byline { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: -4px; }
.byline span, .byline a { font: 600 14px/1.3 var(--font-mono); color: var(--muted); text-decoration: none; }
.byline b { color: var(--text); font-weight: 700; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (hover: hover) { .byline a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 700px) {
  .fact { text-align: left; }
  .facts { gap: 24px; }
  .page-head .search { width: 100%; }
  .actions { justify-content: flex-start; }
}
.page-body { padding-bottom: 32px; }
.section-title { font-size: 22.4px; margin-bottom: 18px; }
.narrow { max-width: 640px; }

/* ---------- account menu ---------- */
.byline { align-items: center; }
.byline .tag { margin-left: 0; vertical-align: 0; }

/* ============================================================ components */
/* Components: buttons, forms, alerts, tabs, tables, pager, dialogs, toasts, tags, states, prose. */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--text);
  font: 800 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-ghost { border-color: var(--line-strong); }
.btn-quiet { border-color: var(--line); color: var(--muted); height: 44px; padding: 0 14px; font-size: 12px; }
.btn-danger { border-color: rgba(232, 114, 124, .5); color: var(--accent-text); height: 44px; padding: 0 14px; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[data-busy] { opacity: .7; cursor: progress; }
@media (hover: hover) {
  .btn-primary:not([disabled]):hover { background: var(--signal-hot); box-shadow: 3px 0 0 var(--cyan), -3px 0 0 #8a001e; }
  .btn-ghost:not([disabled]):hover { border-color: var(--text); box-shadow: 2px 0 0 rgba(232, 0, 50, .7), -2px 0 0 var(--cyan); }
  .btn-quiet:not([disabled]):hover { color: var(--text); border-color: var(--text); }
  .btn-danger:not([disabled]):hover { border-color: var(--accent-text); }
}
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
/* Single-column grids: the column may shrink below its content's min-content width (a long link, a
   field with a button beside it) instead of pushing past its box on a narrow phone. */
.form, .field, .dlg-body, .alerts, .toast, .state, .after-solve, .panel-error, .note-days, .note-body, .awards li, .custom-fields, .cats { grid-template-columns: minmax(0, 1fr); }
.field > label, .field .label-row { font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.field .label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.field .req { color: var(--accent-text); margin-left: 4px; }
.field .opt { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.help { font-size: 13px; color: var(--muted); }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=file]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 0;
  color: var(--text); font: 500 16px/1.4 var(--font-body);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea, textarea.input { padding: 12px 14px; min-height: 96px; resize: vertical; }
select.input, .field select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a89ca1' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #7d7177; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--raised); box-shadow: inset 2px 0 0 var(--accent); }
.input[readonly], .field input[readonly] { color: var(--muted); }
.input.mono { font-family: var(--font-mono); font-size: 15px; }
@media (hover: hover) { .input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: #6b5f66; } }
input[type=checkbox], input[type=radio] { accent-color: var(--signal); width: 18px; height: 18px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); }
.check label { text-transform: none; letter-spacing: 0; font: 500 15px/1.4 var(--font-body); color: var(--text); }
input[type=file] { font-size: 14px; color: var(--muted); }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form-sep { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.form .btn[type=submit], .form input[type=submit] { justify-self: start; }
input[type=submit].btn { cursor: pointer; }

/* ---------- alerts ---------- */
.alerts { display: grid; gap: 10px; margin-bottom: 24px; }
.alert { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; border-left: 2px solid var(--line-strong); background: var(--panel); font-size: 15px; }
.alert-error { border-left-color: var(--accent); background: rgba(232, 0, 50, .08); }
.alert-success { border-left-color: var(--bone); }
.alert a { color: var(--accent-text); }
.alert .dismiss { background: none; border: 0; color: var(--muted); padding: 0 4px; min-width: 32px; min-height: 32px; font-size: 18px; line-height: 1; }
.alert.glitch-in { animation: slice 160ms steps(4) 1; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { background: none; border: 0; padding: 12px 0; min-height: 44px; color: var(--muted); font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; position: relative; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--text); }
.tabs [aria-selected="true"]::after, .tabs [aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
@media (hover: hover) { .tabs a:hover, .tabs button:hover { color: var(--text); } }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.table th { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.table td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table .n { overflow-wrap: anywhere; }
.table .n a { font: 700 16px/1.3 var(--font-body); text-decoration: none; }
.table td.num { text-align: right; font: 700 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.table .dim { color: var(--muted); font: 500 14px/1.3 var(--font-mono); }
.table .dim a { text-decoration: none; }
.table .r { width: 64px; font: 800 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.table tr.me td { background: rgba(232, 0, 50, .07); }
.table tr.me td:first-child { box-shadow: inset 2px 0 0 var(--accent); color: var(--text); }
.table.animate tbody tr { animation: row-in 200ms var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 14ms); }
.table.animate tbody tr:nth-child(n+21) { animation: none; }
@media (hover: hover) {
  .table tbody tr:hover { background: var(--panel); }
  .table .n a:hover, .table .dim a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 640px) {
  .table .hide-sm { display: none; }
  .table .r { width: 40px; }
  .table th, .table td { padding-inline: 5px; }
  .table th { letter-spacing: .06em; }
}
.table-scroll { overflow-x: auto; }

/* ---------- pager ---------- */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 32px; }
.pager nav { display: flex; gap: 4px; flex-wrap: wrap; }
.pager a, .pager span.cur { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); text-decoration: none; font: 700 13px/1 var(--font-mono); color: var(--muted); }
.pager span.cur { color: var(--text); border-color: var(--accent); }
@media (hover: hover) { .pager a:hover { color: var(--text); border-color: var(--text); } }

/* ---------- tags ---------- */
.tag { display: inline-block; margin-left: 10px; font: 800 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 3px 5px; vertical-align: 2px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.tag.you { color: var(--accent-text); border-color: var(--accent-text); }
.tag.red { color: var(--accent-text); border-color: transparent; padding-inline: 0; }

/* ---------- copy box ---------- */
.conn { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--panel); }
.conn code, .conn input { flex: 1; min-width: 0; padding: 12px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.5 var(--font-mono); background: none; border: 0; color: var(--text); }
.conn a { flex: 1; min-width: 0; padding: 12px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.5 var(--font-mono); color: var(--text); }
.conn button { background: none; border: 0; border-left: 1px solid var(--line); padding: 0 14px; min-width: 72px; font: 700 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
@media (hover: hover) { .conn button:hover { color: var(--text); } }

/* ---------- dialogs (native <dialog>) ---------- */
dialog { padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); max-width: min(560px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgba(10, 8, 13, .74); }
/* While a modal is open the page behind it stays put: no scrolling under a dialog or the challenge
   panel (phones scroll the page through a modal otherwise), and scrolling inside one never spills
   over to the page. The scrollbar gutter is reserved so the page doesn't shift sideways on desktop. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
dialog, .dlg-body, .panel-body { overscroll-behavior: contain; }
dialog[open] { animation: dialog-in var(--t-med) var(--ease-snap); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font: 900 17.6px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.dlg-body { padding: 22px; display: grid; gap: 16px; max-height: calc(100svh - 200px); overflow-y: auto; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.close { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: none; border: 1px solid var(--line); height: 40px; min-width: 44px; padding: 0 12px; color: var(--muted); font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: color var(--t-fast), border-color var(--t-fast); }
.close svg { width: 12px; height: 12px; }
@media (hover: hover) { .close:hover { color: var(--text); border-color: var(--text); } }
@media (max-width: 520px) { .close .esc { display: none; } }

/* ---------- toasts (live notifications) ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--accent); padding: 14px 16px; display: grid; gap: 6px; animation: toast-in 240ms var(--ease-snap); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.toast-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.toast-head strong { font: 800 15px/1.3 var(--font-body); }
.toast .dismiss { background: none; border: 0; color: var(--muted); min-width: 32px; min-height: 32px; font-size: 18px; line-height: 1; margin: -6px -8px 0 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- empty / loading / error states ---------- */
.state { padding: 56px 0; display: grid; gap: 16px; justify-items: start; }
.state h2 { font: 900 clamp(20.8px, 4vw, 28.8px)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; }
.state p { color: var(--muted); max-width: 60ch; }
.skeleton { display: grid; gap: 1px; padding-block: 40px; }
.skeleton i { display: block; height: 58px; background: linear-gradient(90deg, var(--panel) 0%, var(--raised) 40%, var(--panel) 80%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton i:nth-child(3n) { width: 82%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- prose (admin-written content: descriptions, pages, notifications, hints) ---------- */
.prose { color: #ddd5d7; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 12px; }
.prose h1, .prose h2, .prose h3, .prose h4 { font: 800 1.25em/1.2 var(--font-body); color: var(--text); margin-top: 24px; }
.prose h1 { font-size: 1.6em; } .prose h2 { font-size: 1.35em; }
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose code { font: 500 .9em/1.4 var(--font-mono); background: var(--raised); padding: 1px 5px; }
.prose pre { background: var(--raised); border: 1px solid var(--line); padding: 14px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 2px solid var(--line-strong); padding-left: 14px; color: var(--muted); }
.prose img { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
/* the few Bootstrap utilities CTFd's default page content uses */
.prose .row { display: flex; flex-wrap: wrap; gap: 24px; }
.prose [class*="col-"] { flex: 1 1 280px; min-width: 0; }
.prose .text-center { text-align: center; }
.prose .w-100 { width: 100%; }
.prose .mx-auto { margin-inline: auto; }
.prose .d-block { display: block; }
.prose .img-fluid { max-width: 100%; height: auto; }
.prose .text-muted { color: var(--muted); }

/* ---------- search / segmented / chips ---------- */
.search { position: relative; flex: 1 1 260px; max-width: 420px; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .input { padding-left: 40px; padding-right: 44px; height: 44px; min-height: 44px; font-size: 15px; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 11px/1 var(--font-mono); color: var(--muted); border: 1px solid var(--line); padding: 4px 7px; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button, .chip { height: 44px; padding: 0 14px; background: transparent; border: 0; color: var(--muted); font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { color: var(--text); background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 10px; border: 1px solid var(--line); }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
@media (hover: hover) { .seg button:hover, .chip:hover { color: var(--text); } }
@media (max-width: 400px) { .seg { width: 100%; } .seg button { flex: 1 1 auto; padding: 0 8px; } }

/* ---------- touch screens: 44 px targets, visible tap feedback ---------- */
a, button, summary, label { -webkit-tap-highlight-color: rgba(232, 0, 50, .16); }
@media (pointer: coarse) {
  .chip { height: 44px; padding: 0 12px; }
  .close { height: 44px; }
  .btn-quiet, .btn-danger { height: 44px; }
  .conn button { min-width: 64px; }
  .table tbody tr:active { background: var(--panel); }
  .btn-ghost:active, .btn-quiet:active, .close:active, .chip:active, .seg button:active { border-color: var(--text); color: var(--text); }
}
.field .label-row a, .field .label-row .link-btn { text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--font-mono); color: var(--muted); }
@media (hover: hover) { .field .label-row a:hover { color: var(--text); } }

/* ============================================================ pages */
/* Pages: landing, auth, challenges board + panel, scoreboard, profiles, notifications, errors. */

/* ---------- landing ---------- */
.landing { display: grid; grid-template-rows: 1fr; position: relative; }
.landing .stage { position: relative; z-index: 1; display: grid; place-content: center; text-align: center; padding: 56px var(--gutter) 32px; }
.landing h1 .l1 { display: block; font-size: clamp(22.4px, 5.1vw, 60.8px); letter-spacing: .01em; }
.landing h1 .l2 { display: block; font-size: clamp(51.2px, 16.8vw, 208px); margin-top: -.02em; }
.landing h1.one { font-size: clamp(35.2px, 8.8vw, 120px); overflow-wrap: anywhere; }
.landing h1 .glitching { animation: slice 180ms steps(4) 1; }
.landing .date { margin-top: 28px; font: 800 clamp(12px, 1.6vw, 16px)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.landing .desc { margin: 20px auto 0; max-width: 56ch; color: var(--muted); }
.countdown { display: flex; justify-content: center; gap: clamp(12px, 3vw, 40px); margin-top: 40px; }
.countdown div { display: grid; gap: 8px; min-width: 56px; }
.countdown b { font: 900 clamp(25.6px, 4.8vw, 51.2px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.countdown b { contain: layout style; }
.countdown-label { margin-top: 36px; }
.countdown-label + .countdown { margin-top: 14px; }
.landing .cta { display: flex; gap: 12px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.page-content { padding-block: 48px; }

/* ---------- auth ---------- */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.auth-side { position: relative; border-right: 1px solid var(--line); padding: clamp(32px, 6vw, 80px) var(--gutter); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-side h1 .l1 { display: block; font-size: clamp(19.2px, 2.9vw, 35.2px); letter-spacing: .01em; }
.auth-side h1 .l2 { display: block; font-size: clamp(51.2px, 8.8vw, 120px); }
.auth-side h1.one { font-size: clamp(32px, 5.6vw, 76.8px); overflow-wrap: anywhere; }
.auth-main { padding: clamp(32px, 6vw, 80px) var(--gutter); display: flex; flex-direction: column; justify-content: center; max-width: 560px; width: 100%; }
.auth-main .tabs { margin-bottom: 32px; }
.auth-main h2 { font: 900 clamp(22.4px, 3.2vw, 32px)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 20px; }
.auth-main .lead { color: var(--muted); margin-bottom: 20px; }
.auth .form .btn[type=submit], .auth .form input[type=submit] { width: 100%; justify-self: stretch; }
.oauth { margin-bottom: 24px; }
.tos { font-size: 13px; color: var(--muted); }
.tos a { color: var(--accent-text); }
.registration-review > p { color: var(--muted); }
.registration-review dl { display: grid; margin-top: 18px; border-top: 1px solid var(--line); }
.registration-review dl > div { display: grid; grid-template-columns: minmax(90px, .7fr) 1.3fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.registration-review dt { color: var(--muted); font: 700 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.registration-review dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; align-content: start; }
  .auth-side { border-right: 0; border-bottom: 1px solid var(--line); padding-block: 28px 24px; min-height: 0; }
  .auth-side .foot { display: none; }
  .auth-main { justify-content: flex-start; padding-top: 28px; }
}
@media (pointer: coarse) { .field .label-row a { display: inline-block; padding-block: 16px; margin-block: -16px; } }

/* ---------- rules acceptance gate ---------- */
.rules-consent { display: grid; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--line-strong); background: rgba(22, 17, 22, .78); }
.rules-consent-head h2 { margin: 0; font: 900 clamp(18px, 2.2vw, 24px)/1.05 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.rules-consent-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.rules-state { flex: none; padding: 6px 8px; border: 1px solid var(--line-strong); color: var(--muted); font: 700 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.rules-state.is-ready { border-color: var(--accent); color: var(--text); }
.rules-reader {
  max-height: min(290px, 42svh); overflow-y: auto; overscroll-behavior: contain; padding: 18px;
  border: 1px solid var(--line); background: var(--bg); scrollbar-color: var(--accent) var(--panel);
}
.rules-reader:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules-reader .prose { font-size: 14px; line-height: 1.6; }
.rules-reader .prose > :first-child { margin-top: 0; }
.rules-end { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--accent); color: var(--accent-text); font: 800 10px/1 var(--font-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.rules-check { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 44px; color: var(--text); font: 650 14px/1.45 var(--font-body); cursor: pointer; }
.rules-check input { position: absolute; z-index: 1; left: 0; top: 0; appearance: none; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.rules-box { display: block; justify-self: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); background: var(--bg); }
.rules-check input:checked + .rules-box { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--bg); }
.rules-check input:focus-visible + .rules-box { outline: 2px solid var(--text); outline-offset: 3px; }
.rules-check input:disabled { cursor: not-allowed; }
.rules-check input:disabled + .rules-box { opacity: .45; }
.rules-check:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.rules-page-head p { max-width: 64ch; margin-top: 14px; color: var(--muted); }
/* the rules header stacks its lines under the title (.page-head is a row) */
.rules-page-head { flex-direction: column; align-items: flex-start; row-gap: 6px; }
.rules-page-head .rules-change-note { font-size: 14px; }
.rules-page-head p + .rules-change-note { margin-top: 8px; }
.rules-change-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rules-page { padding-bottom: 72px; }
.rules-consent-full { padding: clamp(18px, 3vw, 32px); }
.rules-consent-full .rules-reader { max-height: min(460px, 52svh); }
.rules-consent-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; }
.rules-consent-foot .rules-check { flex: 1 1 auto; }
.rules-consent-foot .btn { flex: none; }
@media (max-width: 640px) {
  .rules-consent { padding: 16px; }
  .rules-consent-head, .rules-consent-foot { align-items: stretch; flex-direction: column; }
  .rules-state { align-self: start; }
  .rules-reader { max-height: min(300px, 48svh); padding: 14px; }
  .rules-consent-foot .btn { width: 100%; }
}

/* ---------- challenges board ---------- */
.toolbar { padding-block: 16px; border-block: 1px solid var(--line); position: sticky; top: var(--nav-h); z-index: 30; background: var(--bg); }
.toolbar .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
@media (max-width: 700px) { .toolbar { position: static; } }
.cat { display: grid; grid-template-columns: 240px 1fr; gap: 0 48px; padding-block: 40px; border-bottom: 1px solid var(--line); }
.cat-head { position: sticky; top: 156px; align-self: start; min-width: 0; }
.cat-head h2 { font-size: 28.8px; overflow-wrap: anywhere; }
.cat-head .progress { display: flex; gap: 4px; margin-top: 14px; }
.cat-head .progress i { flex: 1; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.cat-head .progress i.on::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: fill 260ms var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.cat-head .label { margin-top: 10px; }
@media (max-width: 860px) {
  .cat { grid-template-columns: 1fr; gap: 16px; padding-block: 28px; }
  .cat-head { position: static; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
  .cat-head h2 { font-size: 22.4px; }
  .cat-head .progress { order: 3; flex-basis: 100%; margin-top: 0; }
  .cat-head .label { margin-top: 0; }
}
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rows li { animation: row-in 200ms var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 16ms); }
.rows li:nth-child(n+13) { animation: none; }
.row {
  display: grid; grid-template-columns: 22px 1fr auto 72px; align-items: center; gap: 16px; width: 100%;
  min-height: 60px; padding: 10px 12px 10px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit;
  text-align: left; text-decoration: none; position: relative; transition: background var(--t-fast);
}
/* Hover and keyboard focus: a soft red wash fades in from the left and the points turn red.
   The text itself stays still and sharp. The wash sits under the content (isolation + z-index). */
.row { isolation: isolate; }
.row::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(223, 22, 29, .16), rgba(223, 22, 29, .05) 45%, rgba(223, 22, 29, 0) 85%);
  opacity: 0; transition: opacity var(--t-fast);
}
.row:focus-visible { outline-offset: -2px; }
.row:focus-visible::after { opacity: 1; }
.row .name { font: 700 15px/1.3 var(--font-body); letter-spacing: -.005em; overflow-wrap: anywhere; transition: color var(--t-fast); }
.row .solves { font: 500 13px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.row .pts { font: 800 16px/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; transition: color var(--t-fast); }
.row:not([data-locked]):focus-visible .pts { color: var(--accent-text); }
.row .mark { width: 16px; height: 16px; color: var(--accent-text); }
.row .tag { margin-left: 10px; }
.row[data-solved] { box-shadow: inset 2px 0 0 var(--accent); }
.row[data-solved] .name, .row[data-solved] .pts { color: var(--muted); }
.row[data-locked] { cursor: not-allowed; color: var(--muted); }
.row[data-locked] .mark { color: var(--muted); }
@media (hover: hover) {
  .row:not([data-locked]):hover { background: var(--panel); }
  .row:not([data-locked]):hover::after { opacity: 1; }
  .row:not([data-locked]):hover .pts { color: var(--accent-text); }
  .row[data-solved]:hover .name { color: var(--text); }
}
@media (pointer: coarse) { .row:active { background: var(--panel); } }
@media (max-width: 520px) {
  .row { grid-template-columns: 22px 1fr auto; gap: 4px 12px; }
  .row .solves { grid-column: 2; grid-row: 2; }
  .row .pts { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- challenge panel (native modal dialog on the right) ---------- */
dialog.panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: 100%; width: min(640px, 100vw); max-width: 100vw;
  border: 0; border-left: 1px solid var(--line); background: var(--panel); overflow: hidden;
}
dialog.panel[open] { display: flex; flex-direction: column; animation: panel-in var(--t-med) var(--ease-snap); }
dialog.panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: top; animation: edge 280ms var(--ease-snap) both; z-index: 2; }
@keyframes panel-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes edge { from { transform: scaleY(0); } }
.panel-top { display: flex; justify-content: flex-end; align-items: center; padding: 16px 28px 0; flex: none; }
.panel-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* challenge.html: .panel-inner > .panel-body (scrolls) + .flag (stays at the bottom) */
.panel-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-body { overflow-y: auto; padding: 8px 28px 28px; flex: 1; min-height: 0; }
.panel-loading { padding: 28px; }
.panel h2.challenge-name { font-size: clamp(24px, 4.8vw, 41.6px); outline: none; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.meta > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; font: 700 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meta > span + span { border-left: 1px solid var(--line); }
.meta b { color: var(--text); font-size: 15px; letter-spacing: 0; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ch-tags .tag { margin-left: 0; }
.byline-small { margin-top: 10px; font-size: 13px; color: var(--muted); }
.panel .tabs { margin-top: 24px; }
.panel .desc { margin-top: 22px; max-width: 62ch; }
.panel .conn { margin-top: 20px; }
.block-label { margin: 28px 0 10px; }
.files { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.files a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 14px/1.3 var(--font-mono); overflow-wrap: anywhere; transition: color var(--t-fast), padding var(--t-fast); }
.files a svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
@media (hover: hover) { .files a:hover { color: var(--accent-text); padding-left: 8px; } }
.hint { border-bottom: 1px solid var(--line); }
.hint:first-of-type { border-top: 1px solid var(--line); }
.hint summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; min-height: 44px; font: 700 13px/1.3 var(--font-mono); letter-spacing: .04em; }
.hint summary::-webkit-details-marker { display: none; }
.hint summary::after { content: "+"; color: var(--muted); }
.hint[open] summary::after { content: "\2212"; }
.hint .cost { color: var(--accent-text); margin-left: auto; }
.hint .hint-body { padding: 0 2px 16px; }
.attempts-line { margin-top: 18px; }
.panel-tab { padding-top: 16px; }
.mini { width: 100%; border-collapse: collapse; }
.mini td { padding: 10px 2px; border-bottom: 1px solid var(--line); font: 600 14px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.mini td:last-child { text-align: right; color: var(--muted); font-weight: 500; white-space: nowrap; }
.mini a { text-decoration: none; }
.flag { padding: 20px 28px 24px; border-top: 1px solid var(--line); background: var(--panel); flex: none; }
.flag-row { display: flex; margin-top: 8px; }
.flag-row .input { height: 52px; min-height: 52px; }
.flag-row .btn { height: 52px; flex: none; }
.feedback { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; min-height: 22px; font: 500 14px/1.4 var(--font-body); }
.feedback b { font: 800 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.feedback.is-wrong b { color: var(--accent-text); }
.feedback.is-correct b { color: var(--white); background: var(--accent); padding: 4px 6px; }
.feedback.is-neutral b { color: var(--text); border: 1px solid var(--line-strong); padding: 3px 6px; }
.after-solve { display: grid; gap: 14px; margin-top: 14px; }
.rating { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rating button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.panel-error { padding: 28px; display: grid; gap: 14px; justify-items: start; }
@media (max-height: 520px) { dialog.panel[open] { overflow-y: auto; } .panel-view, .panel-inner, .panel-body { flex: none; overflow: visible; } }
@media (max-width: 520px) {
  .panel-top, .panel-body, .flag { padding-inline: 16px; }
  .flag-row .btn { padding: 0 16px; }
  .flag { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ---------- scoreboard ---------- */
.podium { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; border-block: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
.podium > li { padding: 32px 28px 28px; display: grid; gap: 10px; align-content: end; position: relative; overflow: hidden; min-width: 0; }
.podium > li + li { border-left: 1px solid var(--line); }
.podium .rank { font: 900 clamp(40px, 5vw, 70px)/.88 var(--font-display); letter-spacing: -.04em; }
.podium .first .rank { color: var(--accent); text-shadow: 0 0 40px rgba(232, 0, 50, .35); }
.podium .team { font: 800 clamp(13px, 1.4vw, 17px)/1.2 var(--font-body); overflow-wrap: anywhere; text-decoration: none; justify-self: start; padding-block: 4px; }
.podium .pts { display: flex; gap: 16px; flex-wrap: wrap; font: 700 13px/1 var(--font-mono); color: var(--muted); }
.podium .first .pts b { color: var(--text); }
@media (hover: hover) { .podium .team:hover { text-decoration: underline; text-underline-offset: 5px; } }
@media (pointer: coarse) { .podium .team { padding-block: 12px; } }
@media (max-width: 760px) {
  .podium { grid-template-columns: 1fr; }
  .podium > li { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 16px; padding: 18px 4px; }
  .podium > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .podium .rank { grid-row: span 2; font-size: 38.4px; min-width: 56px; }
}
.brackets { margin: 0; }
.standings-title { margin-top: 0; }
.standings-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 8px; min-height: 46px; }
.standings-head .section-title { margin-bottom: 0; }
.graph { margin-block: 32px; min-height: 120px; }
.graph .chart-plot svg { width: 100%; display: block; overflow: visible; }
.graph .axis { font: 500 11px var(--font-mono); fill: var(--muted); }
.graph .grid { stroke: currentColor; stroke-opacity: .14; color: var(--muted); }
.graph path.line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; animation: fade 400ms ease-out both; }
.graph .legend { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.graph .legend span { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--font-mono); color: var(--muted); }
.graph .legend i { width: 14px; height: 2px; background: currentColor; flex: none; }
.standings .bar { width: 28%; }
.standings .bar i { display: block; height: 3px; background: var(--line-strong); transform-origin: left; animation: fill 500ms var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 30ms + 200ms); }
.standings tr.me .bar i { background: var(--accent); }
.standings th.country, .standings td.country { width: 18%; text-align: right; }
.standings td.country { color: var(--muted); font: 600 12px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.updated { margin-top: -16px; margin-bottom: 24px; }
@media (max-width: 640px) {
  .standings-head .brackets { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .standings-head .brackets button { min-width: 0; height: auto; min-height: 44px; padding-inline: 8px; white-space: normal; line-height: 1.2; }
  .standings .bar { display: none; }
  .standings th.country, .standings td.country { width: 27%; }
  .standings td.country { font-size: 10.5px; }
}

/* ---------- profiles (user / team) ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border-block: 1px solid var(--line); }
.stats > div { padding: 24px 20px 20px; display: grid; gap: 8px; min-width: 0; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { font: 900 clamp(25.6px, 4vw, 51.2px)/.9 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats b small { font-size: .45em; color: var(--muted); letter-spacing: 0; }
.stats .hot b { color: var(--accent); }
@media (max-width: 760px) {
  .stats.four { --cols: 2; }
  .stats.four > div:nth-child(3) { border-left: 0; }
  .stats.four > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stats > div { padding-inline: 12px; }
}
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; padding-block: 40px; border-bottom: 1px solid var(--line); }
.two-col > * { min-width: 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
.block { padding-block: 40px; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; }
.members { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.members li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px; border-bottom: 1px solid var(--line); }
.members li > span:first-child { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.members a { display: inline-block; padding-block: 12px; font: 700 16px/1.3 var(--font-body); text-decoration: none; overflow-wrap: anywhere; }
.members .num { font: 700 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .members a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cats li { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 56px; gap: 14px; align-items: center; font: 700 13px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.cats li > span:first-child { overflow-wrap: anywhere; }
.cats .track { height: 6px; background: var(--line); }
.cats .track i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: fill 520ms var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }
.cats .v { text-align: right; color: var(--muted); }
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.awards li { background: var(--bg); padding: 18px; display: grid; gap: 6px; }
.awards b { font: 900 22.4px/1 var(--font-display); }
.awards strong { font-weight: 800; }
.custom-fields { flex-basis: 100%; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.custom-fields b { color: var(--text); }

/* ---------- notifications page ---------- */
.note-days { display: grid; gap: 36px; max-width: 860px; padding-bottom: 32px; }
.note-day-title { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.notes { list-style: none; margin: 0; padding: 0; }
.note { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.note-time { font: 700 13px/1.5 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.note-body { display: grid; gap: 6px; min-width: 0; }
.note-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 800 16px/1.3 var(--font-body); color: var(--text); }
.note-title .tag { margin-left: 0; }
.note.is-new { box-shadow: inset 2px 0 0 var(--accent); padding-left: 14px; }
.note .prose { font-size: 15px; }
@media (max-width: 520px) { .note { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- settings ---------- */
.settings-grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding-block: 8px 40px; }
.settings-grid .tabs { flex-direction: column; border-bottom: 0; border-left: 1px solid var(--line); gap: 0; align-self: start; }
.settings-grid .tabs button { padding: 12px 16px; justify-content: flex-start; }
.settings-grid .tabs [aria-selected="true"]::after { left: -1px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; gap: 24px; }
  .settings-grid .tabs { flex-direction: row; border-left: 0; border-bottom: 1px solid var(--line); gap: 24px; }
  .settings-grid .tabs button { padding: 12px 0; }
  .settings-grid .tabs [aria-selected="true"]::after { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; }
}

/* ---------- errors ---------- */
.error-page { display: grid; align-content: center; gap: 20px; padding-block: clamp(40px, 9vh, 96px); }
.error-page .code { font: 900 clamp(76.8px, 19.2vw, 224px)/1 var(--font-display); letter-spacing: -.05em; color: var(--accent); }
.error-page h1 { font: 900 clamp(20.8px, 4vw, 38.4px)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; max-width: 24ch; }
.error-page p { color: var(--muted); max-width: 60ch; }

/* ---------- setup ---------- */
.setup-section { padding-block: 32px; border-bottom: 1px solid var(--line); display: grid; gap: 20px; }
.setup-section h2 { font-size: 20.8px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modes label { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); cursor: pointer; }
.modes label:has(input:checked) { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.modes ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
.dt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-title .l1 { display: block; font-size: clamp(19.2px, 2.9vw, 35.2px); letter-spacing: .01em; }
.auth-title .l2 { display: block; font-size: clamp(51.2px, 8.8vw, 120px); }
.auth-title.one { font-size: clamp(32px, 5.6vw, 76.8px); overflow-wrap: anywhere; }

/* ---------- list pages / simple forms ---------- */
.search-form { display: flex; gap: 8px; width: min(100%, 480px); }
.search-form select.input { width: auto; flex: none; min-height: 44px; height: 44px; font-size: 14px; }
.search-form .search { max-width: none; }
.results-line { margin-bottom: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.results-line .link-btn { text-transform: none; letter-spacing: 0; }
.lead-text { font-size: 18px; color: var(--text); }
@media (max-width: 700px) { .search-form { width: 100%; } }


/* ============================================================ layout stability
   Space for content filled in by JS (local date, countdown label, graphs), so nothing jumps after load. */
.landing .date { min-height: 1em; }
.countdown-label { min-height: 1.3em; }
.graph[data-graph] { min-height: 300px; }
.two-col .graph[data-graph] { min-height: 240px; }
@media (max-width: 520px) { .graph[data-graph] { min-height: 250px; } .two-col .graph[data-graph] { min-height: 240px; } }
.graph[data-graph][hidden] { display: none; }

.landing h1 .l2 { margin-top: .06em; }
.auth-title .l2 { margin-top: .06em; }
.page-head h1.name { line-height: 1.1; }
.chips[data-cats] { min-height: 32px; }
@media (pointer: coarse) { .chips[data-cats] { min-height: 44px; } }

/* ============================================================ chart (score graph) */
.chart { position: relative; outline-offset: 6px; }
.chart-plot { position: relative; touch-action: pan-y; cursor: crosshair; }
.chart .hair { stroke: var(--bone); stroke-opacity: .5; stroke-width: 1; pointer-events: none; }
.graph path.line-dash { animation: fade 400ms ease-out both; }
.chart-tip { position: absolute; top: 8px; z-index: 5; min-width: 180px; max-width: min(280px, 80%); padding: 10px 12px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 12px 28px rgba(0, 0, 0, .5); pointer-events: none; }
.chart-tip-time { font: 700 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.chart-tip ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.chart-tip li { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); align-items: center; gap: 8px; font: 500 13px/1.3 var(--font-body); }
.chart-tip li b { font: 800 13px/1 var(--font-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.chart-tip li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
svg.key { display: inline-block; flex: none; vertical-align: middle; width: 18px; height: 8px; max-width: none; overflow: visible; }
.graph .legend { gap: 8px 18px; }
.graph .legend span { gap: 8px; white-space: nowrap; }
.who, .team-line { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.team-line { justify-self: start; }
.team-line .team { justify-self: auto; }
.podium .team-line .key { width: 22px; }
/* while the ranking switch reloads: keep the previous render, dimmed (no skeleton, no jump) */
[data-scoreboard].is-loading .podium, [data-scoreboard].is-loading .graph, [data-scoreboard].is-loading .standings { opacity: .45; transition: opacity var(--t-fast); }

/* ============================================================ event title sizing (big line scales with its length) */
.landing h1 .l2 { font-size: min(208px, max(25.6px, calc(84vw / var(--n, 5)))); }
.auth-title .l2 { font-size: min(120px, calc(44.8vw / var(--n, 5))); }
@media (max-width: 860px) { .auth-title .l2 { font-size: min(96px, calc(80vw / var(--n, 5))); } }
.landing h1.one span, .auth-title.one span { display: block; }
/* long CTF names: the brand text in the top bar shortens instead of pushing the menu off screen */
.brand { min-width: 0; flex: 0 1 auto; }
.brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .wrap > .nav-right { flex: none; }
/* small screens: the brand wraps at the title split ("Securinets CTF" / "Quals 2026") instead of being cut */

/* ============================================================ navigation: one account dropdown + phone menu */
.count:empty { display: none; }
.count { font: 800 11px/1 var(--font-mono); letter-spacing: 0; color: var(--white); background: var(--accent); min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; }

/* account button + dropdown (desktop) */
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 220px; }
.acct-btn .acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-btn::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast); }
.acct-btn[aria-expanded="true"] { color: var(--text); }
.acct-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 11px); width: 240px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); z-index: 45; animation: menu-in 140ms var(--ease-snap); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* shared menu parts */
.menu-who { display: grid; gap: 3px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.menu-who b { font: 800 14px/1.25 var(--font-body); color: var(--text); overflow-wrap: anywhere; }
.menu-who span { font: 600 12px/1.3 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.menu-list { display: grid; padding: 6px 0; }
.nav-right .menu-list a, .menu-list a, .nav-right .menu-out, .menu-out {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 16px;
  font: 600 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; white-space: nowrap;
}
.menu-list a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); background: var(--raised); }
.nav-right .menu-out, .menu-out { color: var(--accent-text); border-top: 1px solid var(--line); min-height: 44px; }
@media (hover: hover) { .menu-list a:hover, .menu-out:hover, .menu-grid a:hover { background: var(--raised); } }

/* phone menu button: label + burger */
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px !important; }
@media (max-width: 1000px) { .menu-btn { display: inline-flex; } }
.menu-btn .burger { position: relative; width: 16px; height: 2px; background: currentColor; transition: background var(--t-fast); }
.menu-btn .burger::before, .menu-btn .burger::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform var(--t-fast); }
.menu-btn .burger::before { transform: translateY(-5px); }
.menu-btn .burger::after { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] { color: var(--text); }
.menu-btn[aria-expanded="true"] .burger { background: transparent; }
.menu-btn[aria-expanded="true"] .burger::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger::after { transform: rotate(-45deg); }

/* phone menu panel */
.mobile-menu {
  display: none; position: fixed; z-index: 45; top: calc(var(--nav-h) - 1px);
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  width: min(300px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - var(--nav-h) - 16px);
  overflow-y: auto; overscroll-behavior: contain; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: menu-in 160ms var(--ease-snap);
}
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.menu-grid a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; background: var(--panel); font: 700 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.menu-grid a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); background: var(--raised); }
.menu-grid a:last-child:nth-child(odd) { grid-column: span 2; }
.mobile-menu .menu-list { border-bottom: 0; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.menu-actions .btn { height: 44px; padding: 0 10px; }

/* phones: brand shows the mark + the big part of the title on one line */
@media (max-width: 480px) {
  .brand .brand-name .b1 { display: none; }
  .brand .brand-name { font-size: 13px; }
}

/* ============================================================ discord */
.discord-link { display: inline-flex; align-items: center; gap: 10px; margin: 28px auto 0; padding: 10px 4px; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.discord-link svg { color: var(--text); }
.site-foot .wrap { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-foot .lang { justify-self: end; }
.foot-mid { display: flex; justify-content: center; }
@media (max-width: 640px) { .site-foot .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: 16px; } .site-foot .lang { justify-self: center; } .foot-mid { order: -1; } }
.foot-discord { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.foot-discord svg { width: 26px; height: 26px; }
@media (hover: hover) { .discord-link:hover, .foot-discord:hover { color: var(--text); } }

/* ============================================================ content pages (Rules etc.): numbered lists */
.page-body .prose > ol { list-style: none; counter-reset: item; padding: 0; margin: 0; max-width: 760px; border-top: 1px solid var(--line); }
.page-body .prose > ol > li { counter-increment: item; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0; font: 600 17px/1.5 var(--font-body); color: var(--text); }
.page-body .prose > ol > li::before { content: counter(item, decimal-leading-zero); font: 800 20px/1 var(--font-mono); color: var(--accent); }

/* ---------- touch screens ----------
   Kept last so these win over the size rules above.
   - Every text field at 16px or more, otherwise iOS Safari zooms the page on focus
     (flag box, search, list filters, connection info).
   - Tap targets of at least 44px. The extra room is padding cancelled by a negative margin, so the
     layout doesn't move: names in tables, dismiss buttons, the Discord link, text buttons under forms.
   - The "/" shortcut hint in the search box means nothing without a keyboard. */
@media (hover: none) and (pointer: coarse) {
  .input, .input.mono, .search .input, .search-form select.input, .conn input, .field input, .field select, .field textarea { font-size: 16px; }
  .table td a, .mini td a { display: inline-block; padding: 12px 10px; margin: -12px -10px; }
  .alert .dismiss, .toast .dismiss { min-width: 44px; min-height: 44px; margin-block: -6px; }
  .toast .dismiss { margin-right: -12px; }
  .discord-link { min-height: 44px; padding-block: 0; }
  a.link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .search kbd { display: none; }
}