/* ==========================================================================
   WorldSkills Cyber Arena
   Design language ported from the Endolum system (assets/brand/STYLE.md).

   The six rules that govern every surface here:
     1. Restraint is the personality. Whitespace and weight contrast do the work.
     2. Two registers, no middle: hairline display type against 11px mono labels.
     3. Mono labels carry structure. Every section opens with one plus a rule.
     4. Gold appears once, on hover and inside the mark. Never in body copy.
     5. Generous padding, strict grid, exact alignment.
     6. Motion announces a surface once. Nothing loops.
   ========================================================================== */

:root {
  --ink:        #16191e;
  --ink-warm:   #1a1d22;
  --plate:      #1d2026;
  --plate-deep: #131619;
  --paper:      #f4f1ea;
  --paper-dim:  #c4c0b4;
  --dim:        #8e8b83;
  --faint:      #555248;
  --hairline:   #2a2d33;
  --rule:       #34383e;
  --gold:       #e8c888;
  --emerald:    #2a5a42;
  --danger:     #b15252;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(244, 241, 234, 0.18); color: var(--paper); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline); }
::-webkit-scrollbar-thumb:hover { background: var(--rule); }

/* ---------- layout ---------- */

.wide { max-width: 1360px; margin: 0 auto; padding: 0 72px; position: relative; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 72px; }

.mono {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}
.mono-sm {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}

/* ---------- navigation ---------- */

nav.top {
  position: sticky; top: 0; z-index: 20;
  padding: 24px 72px;
  background: rgba(22, 25, 30, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px;
}
nav.top .brand {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 400; font-size: 16px; letter-spacing: -0.01em; color: var(--paper);
}
nav.top .brand svg { width: 24px; height: 24px; flex: none; }
nav.top .brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
nav.top .brand .brand-sub {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}
nav.top .links {
  display: flex; gap: 32px; justify-self: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
nav.top .links a {
  color: var(--dim); padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
nav.top .links a:hover { color: var(--paper); border-bottom-color: var(--gold); }
nav.top .links a.current { color: var(--paper); }
nav.top .nav-right { display: inline-flex; align-items: center; gap: 20px; justify-self: end; }
nav.top .who {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-dim);
}
nav.top .enter {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper);
  padding: 10px 16px; border: 1px solid var(--rule);
  background: transparent; cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
nav.top .enter:hover { border-color: var(--paper); }

/* ---------- mark ---------- */

/* The mark draws itself in: outer ring, inner ring, then the shield, then the core
   lights. Dash lengths are the real measured path lengths (131.9 / 91.1 / 88.0), so
   each stroke starts exactly empty rather than partway through an oversized dash.
   Rotated -90deg so every stroke begins at twelve o'clock.
   This is the signature motion of the system, and it fires once per surface. */
.mark-svg .ring,
.mark-svg .core-path {
  transition: stroke-dashoffset 1.4s var(--ease);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.mark-svg .ring-1    { stroke-dasharray: 132; stroke-dashoffset: 132; }
.mark-svg .ring-2    { stroke-dasharray: 92;  stroke-dashoffset: 92; }
.mark-svg .core-path { stroke-dasharray: 88;  stroke-dashoffset: 88; }

.mark-svg.lit .ring-1    { stroke-dashoffset: 0; transition-delay: 0.15s; }
.mark-svg.lit .ring-2    { stroke-dashoffset: 0; transition-delay: 0.40s; }
.mark-svg.lit .core-path { stroke-dashoffset: 0; transition-delay: 0.65s; }

.mark-svg .core-dot { opacity: 0; transition: opacity 0.6s var(--ease); }
.mark-svg.lit .core-dot { opacity: 1; transition-delay: 1.5s; }

/* ---------- hero ---------- */

section.hero {
  padding: 180px 0 160px;
  border-bottom: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
section.hero .grid {
  display: grid; grid-template-columns: 1fr auto; gap: 120px; align-items: center;
}
section.hero .eyebrow { margin-bottom: 48px; }
section.hero h1 {
  font-weight: 200; font-size: clamp(54px, 7vw, 110px);
  line-height: 1.02; letter-spacing: -0.04em;
  margin: 0 0 40px; max-width: 15ch; color: var(--paper);
}
section.hero .sub {
  font-size: 17px; line-height: 1.7; color: var(--paper-dim);
  max-width: 58ch; font-weight: 400; margin: 0 0 48px;
}
section.hero .hero-mark { width: 260px; height: 260px; }
section.hero .hero-mark svg { width: 100%; height: 100%; display: block; }

.hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* ---------- sections ---------- */

section.block { padding: 140px 0; border-top: 1px solid var(--hairline); }
section.block:first-of-type { border-top: none; }
section.warm { background: var(--ink-warm); }

.section-head {
  display: flex; align-items: baseline; gap: 48px; margin-bottom: 80px;
}
.section-head .line { flex: 1; height: 1px; background: var(--hairline); }
.section-head h2 {
  font-weight: 300; font-size: 30px; line-height: 1;
  letter-spacing: -0.025em; margin: 0; color: var(--paper);
}

.lede { font-size: 17px; line-height: 1.7; color: var(--paper-dim); max-width: 62ch; }

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.card {
  background: var(--ink); padding: 48px 40px;
  transition: background-color 0.3s var(--ease);
}
.card:hover { background: var(--plate); }
.card .num { display: block; margin-bottom: 28px; }
.card h3 {
  font-weight: 300; font-size: 24px; line-height: 1.3;
  letter-spacing: -0.02em; margin: 0 0 16px; color: var(--paper);
}
.card p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--paper-dim); }

.panel { background: var(--ink-warm); border: 1px solid var(--hairline); padding: 40px; }
.panel + .panel { margin-top: 24px; }
.panel h3 {
  font-weight: 300; font-size: 22px; letter-spacing: -0.02em;
  margin: 0 0 20px; color: var(--paper);
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px; }
.stat .n {
  font-weight: 200; font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1; letter-spacing: -0.04em; color: var(--paper); display: block;
}
.stat .l { margin-top: 14px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--paper); cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.ghost { border-color: var(--rule); color: var(--paper-dim); }
.btn.ghost:hover:not(:disabled) { border-color: var(--paper); background: transparent; color: var(--paper); }
.btn.danger { border-color: var(--rule); color: var(--paper-dim); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn.full { width: 100%; }
.btn.sm { padding: 9px 18px; font-size: 10px; }

/* ---------- forms ---------- */

.field { margin-bottom: 32px; }
.field label { display: block; margin-bottom: 10px; }
.input {
  width: 100%; padding: 12px 0; background: transparent; border: none;
  border-bottom: 1px solid var(--rule); color: var(--paper);
  font-family: var(--sans); font-size: 16px;
  transition: border-color 0.3s var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-bottom-color: var(--paper); }
.input.mono-input { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; }

.notice {
  border: 1px solid var(--hairline); border-left: 1px solid var(--gold);
  background: var(--ink-warm); padding: 18px 24px; margin-bottom: 32px;
  font-size: 14.5px; color: var(--paper-dim);
}
.notice.bad { border-left-color: var(--danger); }
.notice.good { border-left-color: var(--emerald); }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 12px; color: var(--paper-dim); border: 1px solid var(--hairline);
}
.badge.solved { color: var(--paper); border-color: var(--rule); }
.badge.live { color: var(--gold); border-color: var(--gold); }
.badge.off { color: var(--faint); border-color: var(--hairline); }

/* ---------- progress ---------- */

.progress { margin: 40px 0; }
.progress .track { height: 1px; background: var(--hairline); position: relative; }
.progress .fill {
  position: absolute; left: 0; top: 0; height: 1px; background: var(--paper);
  transition: width 0.8s var(--ease);
}
.progress .meta { display: flex; justify-content: space-between; margin-bottom: 14px; }

/* ---------- question list ---------- */

.qlist { border: 1px solid var(--hairline); border-bottom: none; }
.q {
  border-bottom: 1px solid var(--hairline);
  padding: 36px 40px; background: var(--ink);
  transition: background-color 0.3s var(--ease);
}
.q:hover { background: var(--ink-warm); }
.q.is-solved { background: var(--plate-deep); }
.q .q-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; margin-bottom: 18px;
}
.q .q-id { display: flex; align-items: baseline; gap: 20px; }
.q h3 {
  font-weight: 300; font-size: 21px; letter-spacing: -0.02em;
  margin: 0; color: var(--paper);
}
.q .prompt { color: var(--paper-dim); margin: 0 0 20px; max-width: 78ch; font-size: 15.5px; }
.q .hint {
  font-size: 13.5px; color: var(--dim); margin: 0 0 24px;
  padding-left: 20px; border-left: 1px solid var(--hairline);
}
.q .answer-row { display: flex; gap: 20px; align-items: flex-end; max-width: 720px; }
.q .answer-row .field { flex: 1; margin-bottom: 0; }
.q .solved-value {
  font-family: var(--mono); font-size: 14px; color: var(--paper);
  padding: 12px 0; border-bottom: 1px solid var(--rule); word-break: break-all;
}

/* ---------- flag ---------- */

.flag-panel {
  border: 1px solid var(--gold); background: var(--ink-warm);
  padding: 56px 48px; text-align: center; margin-bottom: 56px;
}
.flag-panel h2 {
  font-weight: 200; font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.035em;
  margin: 24px 0 20px; color: var(--paper);
}
.flag-value {
  font-family: var(--mono); font-size: clamp(13px, 1.6vw, 19px); font-weight: 500;
  color: var(--gold); word-break: break-all; padding: 24px;
  border: 1px solid var(--hairline); background: var(--plate-deep);
  display: block; margin-top: 32px; letter-spacing: 0.02em;
}

/* ---------- tables ---------- */

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}
table.data td {
  padding: 14px 20px; border-bottom: 1px solid var(--hairline); color: var(--paper-dim);
}
table.data td.name { color: var(--paper); font-family: var(--mono); font-size: 13px; }
table.data tr:hover td { background: var(--ink-warm); }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); }

/* ---------- lab ---------- */

.lab-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 44px; }
.lab-url {
  font-family: var(--mono); font-size: 15px; color: var(--paper);
  padding: 20px 24px; border: 1px solid var(--rule); background: var(--plate-deep);
  display: block; margin: 8px 0 32px; word-break: break-all;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
a.lab-url:hover { border-color: var(--gold); color: var(--gold); }
.lab-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.lab-actions form { margin: 0; }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--hairline); padding: 64px 0 72px;
  background: var(--ink);
}
footer.site .row { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
footer.site .legal { color: var(--faint); font-size: 13px; }

/* ---------- motion ---------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .wide, .narrow { padding: 0 40px; }
  nav.top { padding: 20px 40px; grid-template-columns: 1fr auto; gap: 24px; }
  nav.top .links { display: none; }
  section.hero { padding: 120px 0 100px; }
  section.hero .grid { grid-template-columns: 1fr; gap: 64px; }
  section.hero .hero-brand { display: none; }
  section.block { padding: 96px 0; }
  .section-head { gap: 28px; margin-bottom: 56px; }
}

@media (max-width: 680px) {
  .wide, .narrow { padding: 0 24px; }
  nav.top { padding: 18px 24px; }
  nav.top .brand .brand-sub { display: none; }
  .card { padding: 36px 28px; }
  .panel { padding: 28px 24px; }
  .q { padding: 28px 24px; }
  .q .q-head { flex-direction: column; gap: 12px; }
  .q .answer-row { flex-direction: column; align-items: stretch; gap: 20px; }
  .stat-row { gap: 32px; }
  .flag-panel { padding: 40px 24px; }
}