/* Alpine's x-cloak only does anything if the page defines what it means. Without this rule the
   markup is fully visible between parse and Alpine boot -- which is why the running-instance
   dock appeared, empty, on every page load before the script had decided there was nothing to
   show. With it, anything marked x-cloak stays hidden until Alpine deliberately reveals it. */
[x-cloak] { display: none !important; }
/* ------------------------------------------------------------------
   CyFlag — a faithful FlagYard layout (measured from the live site) in CyFlag's colours.
   Palette: strictly black & white (accent = white, hover = light grey).
   body #0a0a0a · surfaces #141414 / #1c1c1c / #262626 · text #fafafa / #a3a3a3 · accent #ffffff (light #d4d4d4)
   top banner 48px · top bar 48px · sidebar 248px (padding 24) · content padding 48px · radius 6px
   Status colours (green / amber / red) are kept for meaning only.
------------------------------------------------------------------ */
:root, [data-bs-theme=dark] {
  --fy-bg: #0a0a0a;
  --fy-surface: #141414;
  --fy-surface-2: #1c1c1c;
  --fy-surface-3: #262626;
  --fy-line: rgba(255, 255, 255, 0.08);
  --fy-text: #fafafa;
  --fy-text-2: #a3a3a3;
  --fy-text-3: #d4d4d4;
  --fy-text-soft: #f5f5f5;
  --fy-accent: #ffffff;
  --fy-accent-hover: #e5e5e5;
  --fy-accent-2: #d4d4d4;
  --fy-green: #34d399;
  --fy-easy: #d4d4d4;
  --fy-medium: #e5e5e5;
  --fy-hard: #ffb454;
  --fy-insane: #fc3535;
  --fy-outline: #e5e5e5;
  --fy-radius: 6px;
  --fy-topbar: 72px;   /* the mark needs height to be read at a glance */
  --fy-sidebar: 248px;
  --fy-gutter: 48px;

  --bs-body-bg: var(--fy-bg);
  --bs-body-color: var(--fy-text);
  --bs-secondary-color: var(--fy-text-2);
  --bs-tertiary-color: var(--fy-text-3);
  --bs-secondary-bg: var(--fy-surface);
  --bs-tertiary-bg: var(--fy-surface-2);
  --bs-border-color: var(--fy-line);
  --bs-link-color: var(--fy-text);
  --bs-link-hover-color: var(--fy-accent-2);
  --bs-link-color-rgb: 249, 249, 249;
  --bs-heading-color: var(--fy-text);
  --bs-body-font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --bs-body-font-size: 16px;
  --bs-primary: var(--fy-accent);
  --bs-primary-rgb: 59, 130, 246;
  --bs-dark: var(--fy-surface);
  --bs-gray-dark: var(--fy-surface);
  --bs-secondary: var(--fy-surface-3);
  --bs-secondary-rgb: 35, 40, 46;
  --bs-info: var(--fy-accent);
  --bs-info-rgb: 59, 130, 246;
  --bs-success: var(--fy-green);
  --bs-danger: var(--fy-insane);
  --bs-warning: var(--fy-hard);
}

html { scroll-behavior: smooth; }
body.tq-body { background: var(--fy-bg); color: var(--fy-text); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
.num { font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.tq-b { color: #8a8a8a; font-style: normal; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; color: var(--fy-accent-2); }
h1, h2, h3, h4 { font-weight: 600; }

/* ---------- banner + top bar (both full width, like FlagYard) ---------- */
.fy-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: var(--fy-topbar); padding: 0 var(--fy-gutter); background: var(--fy-bg); }
.fy-logo { display: inline-flex; align-items: center; gap: 14px; height: 60px; color: var(--fy-text); font-weight: 800; font-size: 24px; letter-spacing: -0.2px; }
/* The bar is the same black as the page, so the mark needs a little lift of its own to
   separate from it — a soft halo rather than a plate behind it. */
.fy-logo img { width: 72px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .30)); }
.fy-logo:hover { color: var(--fy-text); }

/* the language switch, styled for the dark bar */
.fy-langbtn-form { display: inline-flex; }
.fy-langbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--fy-radius); border: 1px solid var(--fy-surface-3); background: transparent; color: var(--fy-text-2); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; }
.fy-langbtn:hover { color: var(--fy-text); border-color: var(--fy-text-2); }
.fy-langbtn i { font-size: 15px; }
@media (max-width: 480px) { .fy-langbtn span { display: none; } .fy-langbtn { padding: 0 10px; } }
.fy-topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.fy-menu-btn { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--fy-text); font-size: 20px; margin-inline-end: 8px; }
.fy-user { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px 0 0; border: 0; background: transparent; color: var(--fy-text); font-weight: 700; font-size: 16px; }
[dir=rtl] .fy-user { padding: 0 0 0 6px; }
.fy-user:hover { color: var(--fy-text); }
.fy-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fy-surface-3); color: var(--fy-text); font-weight: 700; font-size: 16px; overflow: hidden; }
.fy-user-caret { font-size: 12px; color: var(--fy-text-2); }
.fy-icon-btn { width: 40px; height: 40px; border: 0; border-radius: var(--fy-radius); background: transparent; color: var(--fy-text-2); font-size: 18px; }
.fy-icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--fy-text); }
.fy-auth { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--fy-radius); font-weight: 700; font-size: 14px; white-space: nowrap; }
.fy-auth-primary { background: var(--fy-accent); color: #000; }
.fy-auth-primary:hover { background: var(--fy-accent-hover); color: #000; }
.fy-auth-ghost { color: var(--fy-text-2); border: 2px solid var(--fy-surface-3); }
.fy-auth-ghost:hover { color: var(--fy-text); }

.dropdown-menu { background: var(--fy-surface); border: 1px solid var(--fy-line); border-radius: var(--fy-radius); padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.dropdown-item { display: flex; align-items: center; gap: 10px; color: var(--fy-text-2); border-radius: 4px; padding: 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dropdown-item i { width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item.active { background: rgba(255, 255, 255, 0.06); color: var(--fy-text); }
.dropdown-divider { border-color: var(--fy-line); }

/* ---------- sidebar (below the top bar) ---------- */
.fy-shell { display: flex; align-items: flex-start; }
.fy-sidebar { position: sticky; top: var(--fy-topbar); width: var(--fy-sidebar); flex: 0 0 var(--fy-sidebar); height: calc(100dvh - var(--fy-topbar)); padding: 24px; background: var(--fy-surface); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; z-index: 20; }
.fy-nav-link { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: var(--fy-radius); color: var(--fy-text-2); font-weight: 600; font-size: 16px; }
.fy-nav-link i, .fy-nav-link svg { width: 20px; text-align: center; font-size: 17px; }
.fy-nav-link:hover { color: var(--fy-text); }
.fy-nav-link.is-active { color: var(--fy-text); font-weight: 700; background: rgba(255, 255, 255, 0.05); }
.fy-nav-toggle { margin-inline-start: auto; border: 0; background: transparent; padding: 0 4px; color: inherit; }
.fy-nav-link .fy-nav-caret {  font-size: 12px; color: var(--fy-text-2); transition: transform .2s; width: auto; }
.fy-nav-group.is-open .fy-nav-caret { transform: rotate(180deg); }
.fy-nav-sub { display: none; flex-direction: column; gap: 2px; padding: 4px 0; }
.fy-nav-group.is-open .fy-nav-sub { display: flex; }
.fy-nav-sub a { display: block; padding: 8px 16px; padding-inline-start: 48px; color: var(--fy-text-2); font-size: 14px; font-weight: 600; border-radius: var(--fy-radius); }
.fy-nav-sub a:hover { color: var(--fy-text); background: rgba(255, 255, 255, 0.04); }
.fy-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fy-accent); color: #000; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.fy-nav-admin { color: var(--fy-hard); }
.fy-nav-spacer { flex: 1; }
.fy-nav-foot { padding: 12px 16px 0; font-size: 13px; color: var(--fy-text-2); border-top: 1px solid var(--fy-line); }
.fy-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); border: 0; z-index: 15; }

/* ---------- main ---------- */
.fy-main { flex: 1; min-width: 0; padding: var(--fy-gutter); }
.fy-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--fy-text-2); font-size: 16px; margin-bottom: 24px; }
.fy-crumbs a { color: var(--fy-text-2); }
.fy-crumbs a:hover { color: var(--fy-text); }
.fy-crumbs .is-current { color: var(--fy-text); }
.fy-label { display: block; font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); margin: 0 0 8px; }
.fy-card { background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 274px; color: var(--fy-text-soft); font-size: 14px; }
.fy-section { margin-bottom: 24px; }

/* stat tiles */
.fy-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.fy-tile { display: flex; align-items: center; gap: 24px; height: 80px; padding: 0 32px; background: var(--fy-surface); border-radius: var(--fy-radius); min-width: 0; }
.fy-tile-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--fy-radius); background: rgba(255, 255, 255, 0.16); color: var(--fy-accent-2); font-size: 18px; flex-shrink: 0; }
.fy-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fy-tile-label { font-size: 16px; color: var(--fy-text-2); }
.fy-tile-value { font-size: 16px; font-weight: 700; color: var(--fy-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-tile-level { flex-direction: column; justify-content: center; gap: 10px; align-items: center; }
.fy-dashes { display: flex; gap: 6px; }
.fy-dash { width: 29px; height: 11px; border-radius: 30px; background: var(--fy-surface-3); }
.fy-dash.is-on { background: var(--fy-accent); }
.fy-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fy-green); margin-inline-end: 8px; vertical-align: middle; }

/* activity rows (each row is its own card, like FlagYard) */
.fy-rows { display: flex; flex-direction: column; gap: 8px; }
.fy-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 24px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-rows { gap: 20px; }
.fy-row-flag { color: var(--fy-accent-2); font-size: 18px; margin-inline-end: 8px; }
.fy-row-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fy-surface-3); color: var(--fy-text); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.fy-row-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 16px; }
.fy-row-text b { font-weight: 600; color: var(--fy-text); }
.fy-row-text span { color: var(--fy-text-2); }
.fy-row-pts { display: inline-flex; align-items: center; gap: 6px; color: var(--fy-text-soft); font-size: 16px; white-space: nowrap; padding: 0 24px; }
.fy-row-pts i { color: var(--fy-hard); font-size: 14px; }
.fy-row-time { margin-inline-start: auto; color: var(--fy-text-3); font-size: 13.33px; white-space: nowrap; }
.fy-ann { display: flex; flex-direction: column; gap: 6px; padding: 16px 24px; }
.fy-ann + .fy-ann { border-top: 1px solid var(--fy-line); }
.fy-ann h3 { font-size: 16px; font-weight: 600; margin: 0; }
.fy-ann p { margin: 0; color: var(--fy-text-2); font-size: 14px; }
.fy-ann time { color: var(--fy-text-3); font-size: 13.33px; }

/* ---------- labs (challenges) ---------- */
.fy-lab-head { display: flex; align-items: center; gap: 24px; padding: 32px 24px; background: var(--fy-surface); border-radius: var(--fy-radius); margin-bottom: 24px; }
.fy-lab-icon { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 12px; background: var(--fy-surface-2); color: var(--fy-accent-2); font-size: 26px; flex-shrink: 0; }
.fy-lab-title { font-size: 19.2px; font-weight: 600; color: var(--fy-text-soft); margin: 0; }
.fy-lab-count { font-size: 13.33px; color: var(--fy-text-2); margin: 4px 0 0; }
.fy-lab-desc { font-size: 16px; color: var(--fy-text-soft); margin: 12px 0 0; }
.fy-ring { margin-inline-start: auto; position: relative; width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: conic-gradient(var(--fy-green) calc(var(--p, 0) * 1%), var(--fy-surface-3) 0); }
.fy-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--fy-surface); }
.fy-ring-inner { position: relative; text-align: center; }
.fy-ring-pct { font-size: 19.2px; font-weight: 700; color: var(--fy-text-soft); }
.fy-ring-sub { font-size: 12px; color: var(--fy-text-3); }
.fy-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--fy-line); margin-bottom: 24px; }
.fy-tab { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--fy-text-2); font-weight: 600; font-size: 16px; border-bottom: 2px solid transparent; }
.fy-tab.is-active { color: var(--fy-text); border-bottom-color: var(--fy-accent); }
.fy-count { display: inline-grid; place-items: center; height: 20px; min-width: 26px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 12px; font-weight: 500; }
.fy-list { display: flex; flex-direction: column; gap: 16px; }
.fy-chal { display: grid; grid-template-columns: minmax(0, 1.5fr) 110px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 24px; align-items: center; gap: 16px; width: 100%; height: 72px; padding: 0 40px; background: var(--fy-surface); border: 0; border-radius: var(--fy-radius); color: var(--fy-text); text-align: start; }
.fy-chal:hover { background: var(--fy-surface-2); }
.fy-chal-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 13.33px; font-weight: 600; white-space: nowrap; width: fit-content; }
.fy-pill-easy { color: var(--fy-easy); background: rgba(255, 255, 255, 0.14); }
.fy-pill-medium { color: var(--fy-medium); background: rgba(255, 255, 255, 0.10); }
.fy-pill-hard { color: var(--fy-hard); background: rgba(255, 180, 84, 0.14); }
/* Insane sits on its own: a blood crimson carried across to violet, so it does not read
   as just another shade of the red already used for first blood and live status. */
.fy-pill-insane { color: #ff3b6b; border: 1px solid rgba(190, 40, 120, .45);
  background: linear-gradient(135deg, rgba(225, 29, 72, .22), rgba(126, 34, 206, .26)); }
.fy-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fy-text-soft); white-space: nowrap; }
.fy-meta i { color: var(--fy-text-2); font-size: 15px; }
.fy-meta i.fa-star, .fy-meta i.fa-wand-magic-sparkles { color: var(--fy-hard); }
.fy-done { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fy-text-soft); white-space: nowrap; }
.fy-done i { color: var(--fy-green); font-size: 16px; }
.fy-chev { color: var(--fy-text); font-size: 12px; text-align: end; }

/* ---------- challenge (modal styled as FlagYard's challenge page) ---------- */
#challenge-window .modal-dialog { max-width: 1096px; margin: 24px auto; }
#challenge-window .modal-content { background: transparent; border: 0; box-shadow: none; }
.fy-chal-page { display: flex; flex-direction: column; gap: 24px; position: relative; }
.fy-chal-close { position: absolute; inset-inline-end: 0; top: -4px; width: 40px; height: 40px; border: 0; border-radius: var(--fy-radius); background: var(--fy-surface); color: var(--fy-text); font-size: 18px; z-index: 2; }
.fy-chal-close:hover { background: var(--fy-surface-2); }
.fy-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fy-stat { display: flex; align-items: center; gap: 24px; height: 80px; padding: 0 32px; background: var(--fy-surface); border-radius: var(--fy-radius); min-width: 0; }
.fy-stat-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: var(--fy-radius); background: var(--fy-surface-2); font-size: 17px; flex-shrink: 0; }
.fy-stat-icon.is-pts { color: var(--fy-hard); background: rgba(255, 180, 84, 0.14); }
.fy-stat-icon.is-hacks { color: #fff; background: rgba(255, 255, 255, 0.10); }
.fy-stat-icon.is-blood { color: var(--fy-insane); background: rgba(252, 53, 53, 0.14); }
.fy-stat-label { font-size: 13.33px; font-weight: 600; color: var(--fy-text-3); }
.fy-stat-value { font-size: 16px; font-weight: 700; color: var(--fy-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* First blood: a long solver name used to push the elapsed time out of the tile, so the one
   number people came to read disappeared. The name is the part that gives way now. */
.fy-fb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fy-fb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The elapsed time rides on the label line, so the solver's name gets the whole value row and
   the number stays readable however long the name is. */
.fy-stat-label { display: flex; align-items: baseline; gap: 8px; }
.fy-fb-time { flex: 0 0 auto; color: var(--fy-insane); font-size: 13.33px; font-weight: 700; white-space: nowrap; }
.fy-stat-value .fy-fb-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fy-green); color: #000; font-size: 12px; margin-inline-end: 8px; vertical-align: middle; }
.fy-chal-head { display: flex; align-items: flex-start; gap: 24px; padding: 32px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-chal-avatar { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 50%; background: var(--fy-surface-2); color: var(--fy-text); font-size: 24px; flex-shrink: 0; }
.fy-chal-head-body { flex: 1; min-width: 0; }
.fy-chal-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fy-chal-title { font-size: 19.2px; font-weight: 600; color: var(--fy-text-soft); margin: 0; }
.fy-chal-cat { font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); text-transform: uppercase; margin-top: 4px; }
.fy-chal-by { font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); white-space: nowrap; }
.fy-chal-desc { margin: 24px 0 0; color: var(--fy-text-soft); font-size: 16px; line-height: 1.6; }
.fy-chal-desc p:last-child { margin-bottom: 0; }
.fy-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fy-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--fy-text); font-size: 13.33px; font-weight: 600; }
.fy-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fy-one { display: grid; grid-template-columns: 1fr; gap: 16px; }
.fy-box { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-box-head { display: flex; align-items: flex-start; gap: 16px; }
.fy-box-icon { display: grid; place-items: center; width: 48px; height: 44px; border-radius: var(--fy-radius); background: var(--fy-surface-2); color: var(--fy-text); font-size: 18px; flex-shrink: 0; }
.fy-box-icon.is-flag { color: var(--fy-accent-2); background: rgba(255, 255, 255, 0.16); }
.fy-box-title { font-size: 16px; font-weight: 600; color: var(--fy-text-3); }
.fy-box-sub { font-size: 13.33px; color: var(--fy-text-2); }
.fy-status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); white-space: nowrap; }
.fy-status i { font-size: 8px; color: var(--fy-insane); }
.fy-status.is-on i { color: var(--fy-green); }
.fy-box-body { padding-inline-start: 64px; }
.fy-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px; border: 2px solid var(--fy-outline); border-radius: var(--fy-radius); background: transparent; color: var(--fy-outline); font-weight: 700; font-size: 16px; }
.fy-btn-outline:hover { background: rgba(255, 255, 255, 0.08); color: var(--fy-outline); }
.fy-btn-outline.is-muted { border-color: var(--fy-surface-3); color: var(--fy-text-2); }
.fy-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 24px; border: 0; border-radius: var(--fy-radius); background: var(--fy-accent); color: #000; font-weight: 700; font-size: 16px; }
.fy-btn-primary:hover { background: var(--fy-accent-hover); color: #000; }
.fy-conn code { display: inline-block; direction: ltr; padding: 10px 14px; border-radius: var(--fy-radius); background: var(--fy-surface-2); color: var(--fy-accent-2); font-size: 14px; word-break: break-all; }
.fy-submit-row { display: flex; gap: 12px; }
.fy-submit-row .challenge-input { flex: 1; height: 48px; border-radius: var(--fy-radius); background: var(--fy-surface-2); border: 1px solid var(--fy-line); color: var(--fy-text); direction: ltr; text-align: left; font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; font-size: 15px; padding: 0 16px; }
.fy-submit-row .challenge-input:focus { outline: 0; border-color: var(--fy-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); background: var(--fy-surface-2); color: var(--fy-text); }
.fy-solved { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 4px; }
.fy-solved i { font-size: 36px; color: var(--fy-text-soft); }
.fy-solved b { font-size: 16px; font-weight: 700; }
.fy-solved span { color: var(--fy-text-2); font-size: 14px; }
.fy-hints details { background: var(--fy-surface-2); border-radius: var(--fy-radius); padding: 10px 14px; }
.fy-hints summary { cursor: pointer; color: var(--fy-accent-2); font-weight: 600; font-size: 14px; }
.fy-alert { border-radius: var(--fy-radius); padding: 12px 16px; font-weight: 600; text-align: center; }
.fy-alert-success { background: rgba(52, 211, 153, 0.14); color: #a7f3d0; }
.fy-alert-info { background: rgba(255, 255, 255, 0.16); color: #e5e5e5; }
.fy-alert-danger { background: rgba(252, 53, 53, 0.14); color: #fecaca; }
.fy-alert-warning { background: rgba(255, 180, 84, 0.14); color: #fde68a; }
.fy-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.fy-table th { font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); padding: 0 24px 4px; text-align: start; }
.fy-table td { background: var(--fy-surface); padding: 14px 24px; font-size: 14px; }
.fy-table tr td:first-child { border-start-start-radius: var(--fy-radius); border-end-start-radius: var(--fy-radius); }
.fy-table tr td:last-child { border-start-end-radius: var(--fy-radius); border-end-end-radius: var(--fy-radius); }
.fy-table td a { color: var(--fy-text); font-weight: 600; }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: 0.75; }

/* ---------- leaderboard ---------- */
.fy-lb-row { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 64px; padding: 0 24px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-lb-rank { font-size: 16px; font-weight: 700; color: var(--fy-text-2); font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; }
.fy-lb-row.is-1 .fy-lb-rank { color: #fcd34d; }
.fy-lb-row.is-2 .fy-lb-rank { color: #e5e7eb; }
.fy-lb-row.is-3 .fy-lb-rank { color: #f59e0b; }
.fy-lb-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-lb-score { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fy-text-soft); }
.fy-lb-score i { color: var(--fy-hard); }
#score-graph { background: var(--fy-surface); border-radius: var(--fy-radius); padding: 12px; margin-bottom: 24px; }
.nav-pills .nav-link { color: var(--fy-text-2); border-radius: var(--fy-radius); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--fy-accent); color: #000; }

/* ---------- generic pages (login, register, settings, profile…) ---------- */
.jumbotron { background: transparent; color: var(--fy-text); padding: 0 0 24px; margin: 0; text-align: start; }
.jumbotron h1 { font-size: 24px; font-weight: 600; }
.jumbotron h2, .jumbotron h3 { font-size: 16px; color: var(--fy-text-2); font-weight: 600; }
.container { max-width: 100%; padding: 0; }
.fy-form-card { max-width: 520px; padding: 32px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.form-control, .form-select { min-height: 48px; border-radius: var(--fy-radius); background: var(--fy-surface-2); border: 1px solid var(--fy-line); color: var(--fy-text); }
.form-control:focus, .form-select:focus { background: var(--fy-surface-2); border-color: var(--fy-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); color: var(--fy-text); }
.form-control::placeholder { color: var(--fy-text-2); }
.form-label, label { color: var(--fy-text-3); font-weight: 600; font-size: 14px; }
.btn { border-radius: var(--fy-radius); font-weight: 700; min-height: 44px; }
.btn-primary { background: var(--fy-accent); border-color: var(--fy-accent); color: #000; }
.btn-primary:hover { background: var(--fy-accent-hover); border-color: var(--fy-accent-hover); }
.btn-secondary, .btn-outline-secondary, .btn-info, .btn-outline-info { background: transparent; border: 2px solid var(--fy-outline); color: var(--fy-outline); }
.btn-outline-secondary:hover, .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--fy-outline); }
.card, .bg-body-tertiary { background: var(--fy-surface) !important; border: 0; border-radius: var(--fy-radius); }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-table-color: var(--fy-text); --bs-table-border-color: var(--fy-line); }
.table thead th { color: var(--fy-text-2); font-size: 13.33px; font-weight: 600; }
.table td, .table th { padding: 12px 16px; vertical-align: middle; }
.alert { border-radius: var(--fy-radius); border: 0; }
.alert-success { background: rgba(52, 211, 153, 0.14); color: #a7f3d0; }
.alert-danger { background: rgba(252, 53, 53, 0.14); color: #fecaca; }
.alert-info { background: rgba(255, 255, 255, 0.16); color: #e5e5e5; }
.alert-warning { background: rgba(255, 180, 84, 0.14); color: #fde68a; }
.badge.bg-secondary, .badge.bg-primary, .badge.bg-info { background: rgba(255, 255, 255, 0.08) !important; color: var(--fy-text); font-weight: 600; }
.text-muted { color: var(--fy-text-2) !important; }
hr { border-color: var(--fy-line); opacity: 1; }
.fy-page-content { padding: 24px; line-height: 1.9; }
.nav-tabs { border-bottom-color: var(--fy-line); }
.nav-tabs .nav-link { color: var(--fy-text-2); border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--fy-text); background: transparent; border-bottom-color: var(--fy-accent); }
.snackbar, .toast { background: var(--fy-surface) !important; color: var(--fy-text) !important; border: 1px solid var(--fy-line); border-radius: var(--fy-radius); }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  :root { --fy-gutter: 24px; }
  .fy-chal { grid-template-columns: minmax(0, 1.4fr) 100px minmax(0, 1fr) minmax(0, 1fr) 24px; padding: 0 24px; }
  .fy-chal .fy-done { display: none; }
}
@media (max-width: 991.98px) {
  .fy-menu-btn { display: inline-grid; place-items: center; }
  .fy-sidebar { position: fixed; top: var(--fy-topbar); inset-inline-start: 0; height: calc(100dvh - var(--fy-topbar)); transform: translateX(100%); transition: transform .25s ease; z-index: 25; box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
  [dir=ltr] .fy-sidebar { transform: translateX(-100%); }
  body.fy-nav-open .fy-sidebar { transform: none; }
  body.fy-nav-open .fy-scrim { display: block; }
  body.fy-nav-open { overflow: hidden; }
  .fy-tiles, .fy-stats { grid-template-columns: 1fr; gap: 16px; }
  .fy-two { grid-template-columns: 1fr; }
  .fy-lab-head { flex-wrap: wrap; }
  .fy-ring { width: 104px; height: 104px; }
  .fy-chal { grid-template-columns: minmax(0, 1fr) 24px; height: auto; padding: 16px 20px; row-gap: 8px; }
  .fy-chal-name { grid-column: 1; }
  .fy-chal .fy-chev { grid-column: 2; grid-row: 1; }
  .fy-chal .fy-pill, .fy-chal .fy-meta, .fy-chal .fy-done { grid-column: 1 / -1; display: inline-flex; }
  .fy-row { flex-wrap: wrap; padding: 12px 16px; }
  .fy-row-pts { padding: 0; }
  .fy-row-time { width: 100%; margin: 0; }
  .fy-box-body { padding-inline-start: 0; }
}
@media (max-width: 575.98px) {
  :root { --fy-gutter: 16px; }
  .fy-tile { padding: 0 20px; gap: 16px; }
  .fy-lab-head { padding: 20px; }
  .fy-chal-head { padding: 20px; flex-direction: column; }
  .fy-submit-row { flex-direction: column; }
  .fy-lb-row { grid-template-columns: 40px 40px minmax(0, 1fr) auto; padding: 0 12px; }
  .fy-user-name { display: none; }
}

/* ---------- standalone auth pages (FlagYard SSO look) ---------- */
.fy-auth-body { position: relative; overflow-x: hidden; max-width: 100vw; }
.fy-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fy-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1c1c1c, #0f0f0f 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03); }
.fy-orb-a { width: 520px; height: 520px; top: -110px; inset-inline-start: -60px; }
.fy-orb-b { width: 320px; height: 320px; top: 40px; inset-inline-start: 240px; opacity: .9; }
.fy-orb-c { width: 360px; height: 360px; bottom: -80px; inset-inline-end: 40px; }
.fy-orb-d { width: 230px; height: 230px; bottom: 120px; inset-inline-end: 270px; opacity: .9; }
.fy-auth-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 30px 40px; }
.fy-auth-logo { display: inline-flex; align-items: center; gap: 16px; color: var(--fy-text); }
.fy-auth-logo:hover { color: var(--fy-text); }
.fy-auth-logo img { width: 48px; height: 48px; }
.fy-auth-logo-sep { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.25); }
.fy-auth-wordmark { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.fy-auth-wordmark em { font-style: normal; color: var(--fy-accent-2); }
.fy-lang { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--fy-radius); background: rgba(20, 20, 20, 0.6); }
.fy-lang-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--fy-text-2); font-weight: 600; font-size: 14px; }
.fy-lang-btn.is-active { background: var(--fy-surface-3); color: var(--fy-text); }
.fy-auth-main { position: relative; z-index: 1; display: grid; place-items: center; min-height: calc(100dvh - 108px); padding: 24px 16px 48px; }
.fy-auth-card { width: 100%; max-width: 600px; padding: 32px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-auth-title { font-size: 24px; font-weight: 700; margin: 0 0 24px; }
.fy-auth-form { display: flex; flex-direction: column; gap: 24px; }
.fy-field { display: flex; flex-direction: column; gap: 8px; }
.fy-field label { font-size: 14px; color: var(--fy-text-2); font-weight: 500; }
.fy-field small { font-size: 12.5px; color: var(--fy-text-2); }
.fy-field .form-control { height: 48px; background: var(--fy-bg); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 16px; }
.fy-field .form-control:focus { background: var(--fy-bg); border-color: var(--fy-accent); box-shadow: 0 0 0 1px var(--fy-accent); }
.fy-pass { position: relative; }
.fy-pass .form-control { padding-inline-end: 44px; }
.fy-eye { position: absolute; inset-block: 0; inset-inline-end: 8px; width: 32px; border: 0; background: transparent; color: var(--fy-text-2); }
.fy-auth-submit { height: 48px; margin-top: 8px; }
.fy-auth-links { margin-top: 40px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.fy-auth-links p { margin: 0; color: var(--fy-text); font-size: 16px; }
.fy-auth-links a { color: var(--fy-accent); font-weight: 700; }
.fy-auth-links a:hover { color: var(--fy-accent-2); }
.fy-auth-text { color: var(--fy-text-2); font-size: 15px; margin: 0; line-height: 1.7; }
.fy-auth-fine { color: var(--fy-text-2); font-size: 13px; text-align: center; margin: 0; }
.fy-auth-fine a { color: var(--fy-accent); }
.fy-extra:empty { display: none; }
.fy-extra .mb-3 { margin-bottom: 0 !important; }
@media (max-width: 575.98px) {
  .fy-auth-top { padding: 20px 16px; }
  .fy-auth-logo img { width: 36px; height: 36px; }
  .fy-auth-wordmark { font-size: 22px; }
  .fy-auth-card { padding: 24px 20px; }
  .fy-orb-b, .fy-orb-d { display: none; }
}

/* ---------- standalone challenge page: the core "modal" rendered in the page flow ---------- */
.fy-static-modal, .fy-static-modal.show { position: static !important; display: block !important; opacity: 1 !important; overflow: visible; z-index: auto; }
.fy-static-modal .modal-dialog { max-width: none; margin: 0; transform: none !important; transition: none; }
.fy-standalone .fy-chal-close { display: none; }
.fy-standalone .fy-chal-page > .fy-crumbs { display: none; }
body:has(.fy-static-modal.show) { overflow: auto !important; padding-right: 0 !important; }
body:has(.fy-static-modal) .modal-backdrop { display: none !important; }

/* ---------- public landing page ---------- */
.fy-landing-body { overflow-x: hidden; }
.fy-land-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 48px; }
.fy-land-actions { display: flex; align-items: center; gap: 24px; }
.fy-land-lang { border: 0; background: transparent; color: var(--fy-text); font-weight: 600; font-size: 15px; }
.fy-land-login { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1.5px solid var(--fy-text); border-radius: var(--fy-radius); color: var(--fy-text); font-weight: 700; font-size: 14px; }
.fy-land-login:hover { background: rgba(255, 255, 255, 0.08); color: var(--fy-text); }
.fy-hero { position: relative; min-height: 560px; display: grid; place-items: center; text-align: center; padding: 80px 24px 120px; overflow: hidden; }
.fy-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.fy-hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fy-hero-orb-a { width: 560px; height: 560px; top: -220px; inset-inline-start: -120px; }
.fy-hero-orb-b { width: 300px; height: 300px; top: -60px; inset-inline-end: 30px; }
.fy-hero-orb-c { width: 190px; height: 190px; bottom: 60px; left: 50%; margin-left: -20px; }
.fy-bubble { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 18px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06); }
.fy-bubble-1 { width: 56px; height: 56px; border-radius: 12px; background: #fff; color: #000; top: 110px; inset-inline-start: 135px; }
.fy-bubble-2 { background: #262626; color: #fff; top: 300px; inset-inline-start: 205px; }
.fy-bubble-3 { background: #fff; color: #000; top: 375px; inset-inline-start: 410px; }
.fy-bubble-4 { background: #404040; top: 305px; left: 50%; margin-left: 100px; width: 40px; height: 40px; font-size: 15px; }
.fy-bubble-5 { background: #fff; color: #000; top: 435px; left: 50%; margin-left: 60px; width: 30px; height: 30px; font-size: 12px; }
.fy-bubble-6 { width: 56px; height: 56px; border-radius: 12px; background: #171717; top: 220px; inset-inline-end: 50px; }
.fy-bubble-7 { background: #e5e5e5; color: #000; top: 405px; inset-inline-end: 315px; }
.fy-hero-inner { position: relative; max-width: 720px; }
.fy-hero h1 { font-size: 56px; font-weight: 700; margin: 0 0 20px; }
.fy-hero p { font-size: 22px; color: var(--fy-text-soft); line-height: 1.6; margin: 0 0 32px; }
.fy-cta { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--fy-radius); background: var(--fy-accent); color: #000; font-weight: 700; font-size: 15px; }
.fy-cta:hover { background: var(--fy-accent-hover); color: #000; }
.fy-land-section { max-width: 940px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.fy-eyebrow { display: block; font-size: 16px; font-weight: 600; color: var(--fy-text); margin-bottom: 12px; }
.fy-land-section h2, .fy-band h2 { font-size: 30px; font-weight: 700; margin: 0 0 16px; }
.fy-land-section p, .fy-band-inner > p { font-size: 18px; line-height: 1.8; color: var(--fy-text-soft); margin: 0 auto; max-width: 900px; }
.fy-land-section .fy-cta { margin-top: 32px; }
.fy-cats { display: grid; grid-template-columns: repeat(4, 240px); justify-content: center; gap: 40px; padding: 0 24px 40px; }
.fy-cat { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 20px 32px; background: var(--fy-surface); border-radius: var(--fy-radius); }
.fy-cat-art { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #262626, #141414 70%); color: var(--fy-accent-2); font-size: 44px; }
.fy-cat-2 { color: #fff; } .fy-cat-3 { color: var(--fy-accent-2); } .fy-cat-4 { color: #a3a3a3; } .fy-cat-5 { color: var(--fy-accent); } .fy-cat-6 { color: #fff; } .fy-cat-7 { color: var(--fy-accent-2); } .fy-cat-8 { color: #a3a3a3; } .fy-cat-9 { color: var(--fy-accent); } .fy-cat-10 { color: #fff; }
.fy-cat-name { font-size: 18px; font-weight: 600; }
.fy-band { position: relative; background: #111111; padding: 120px 24px 96px; margin-top: 40px; }
.fy-band::before { content: ""; position: absolute; left: 0; right: 0; top: -70px; height: 70px; background: #111111; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.fy-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -70px; height: 70px; background: #111111; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fy-band-inner { max-width: 1084px; margin: 0 auto; text-align: center; }
.fy-band-title { margin-top: 120px !important; margin-bottom: 40px !important; }
.fy-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 48px; text-align: start; }
.fy-feat { background: var(--fy-surface); border-radius: var(--fy-radius); overflow: hidden; min-height: 200px; }
.fy-feat-head { display: flex; align-items: center; gap: 12px; height: 78px; padding: 0 28px; font-size: 18px; font-weight: 700; color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 78%); }
[dir=rtl] .fy-feat-head { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.fy-feat-head i { font-size: 22px; }
.fy-feat p { padding: 20px 28px 28px; margin: 0; color: var(--fy-text-soft); font-size: 15px; line-height: 1.8; }
.fy-tone-blue { background: #fff; color: #000; } .fy-tone-orange { background: #e5e5e5; color: #000; } .fy-tone-purple { background: #404040; } .fy-tone-green { background: #262626; } .fy-tone-pink { background: #fff; color: #000; } .fy-tone-gray { background: #404040; } .fy-tone-teal { background: #a3a3a3; color: #000; }
.fy-land-foot { background: #111111; padding: 48px 24px 24px; margin-top: 40px; }
.fy-land-foot-top { max-width: 1392px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.fy-land-foot-brand { display: flex; flex-direction: column; gap: 12px; }
.fy-land-foot-cols { display: flex; gap: 64px; }
.fy-land-foot-cols > div { display: flex; flex-direction: column; gap: 12px; }
.fy-land-foot-label { font-size: 13.33px; font-weight: 600; color: var(--fy-text-2); }
.fy-land-foot-cols a { display: inline-flex; align-items: center; gap: 10px; color: var(--fy-text); font-size: 15px; }
.fy-land-foot-bottom { max-width: 1392px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--fy-line); display: flex; justify-content: space-between; color: var(--fy-text-2); font-size: 13.33px; }
@media (max-width: 1199.98px) { .fy-cats { grid-template-columns: repeat(3, 1fr); gap: 24px; } .fy-feats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 767.98px) {
  .fy-land-head { padding: 14px 16px; } .fy-land-actions { gap: 12px; }
  .fy-hero { min-height: 420px; padding: 48px 16px 80px; } .fy-hero h1 { font-size: 36px; } .fy-hero p { font-size: 17px; }
  .fy-bubble-2, .fy-bubble-3, .fy-bubble-5, .fy-bubble-7 { display: none; }
  .fy-land-section { padding: 64px 16px; } .fy-land-section h2, .fy-band h2 { font-size: 24px; } .fy-land-section p, .fy-band-inner > p { font-size: 16px; }
  .fy-cats { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 16px 24px; } .fy-cat { padding: 24px 12px; } .fy-cat-art { width: 88px; height: 88px; font-size: 32px; }
  .fy-feats { grid-template-columns: 1fr; gap: 16px; } .fy-band-title { margin-top: 64px !important; }
  .fy-land-foot-cols { flex-direction: column; gap: 24px; } .fy-land-foot-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ================= borrowed from Tuwaiq Challenges (nav, hero, event card, glass rows, footer) ================= */
.fy-landing-body { background: #000; }
.tw-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 48px; position: relative; z-index: 3; }
.tw-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
/* the landing nav and footer carry the same mark as the app bar, at the same presence */
.tw-brand img { width: 72px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .30)); }
.tw-brand-text b { font-size: 19px; }
.tw-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.tw-brand-text b { font-size: 16px; font-weight: 700; }
.tw-brand-text small { font-size: 10px; color: #a3a3a3; font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; }
.tw-links { display: flex; gap: 40px; }
.tw-links a { color: #fff; font-size: 16px; font-weight: 500; padding: 6px 0; }
.tw-links a:hover, .tw-links a.is-active { color: var(--fy-accent-2); }
.tw-nav-end { display: flex; align-items: center; gap: 12px; }
.tw-lang { display: inline-flex; align-items: center; gap: 8px; height: 39px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 14px; font-weight: 500; }
.tw-login { display: inline-flex; align-items: center; height: 44px; padding: 10px 24px; border-radius: 12px; background: var(--fy-accent); color: #000; font-size: 16px; font-weight: 500; }
.tw-login:hover { background: var(--fy-accent-hover); color: #000; }
.tw-menu-btn { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #fff; }
.tw-mobile-nav { display: none; flex-direction: column; padding: 8px 16px 16px; gap: 4px; }
.tw-mobile-nav.is-open { display: flex; }
.tw-mobile-nav a { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #fff; font-weight: 500; }

.tw-hero { position: relative; text-align: center; padding: 56px 24px 160px; overflow: hidden; }
.tw-planet { position: absolute; left: 50%; top: 330px; width: 2400px; height: 2400px; margin-left: -1200px; border-radius: 50%; background: radial-gradient(circle at 50% 0%, #1f1f1f 0%, #0d0d0d 22%, #000 45%); box-shadow: 0 -2px 40px rgba(255, 255, 255, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.35); }
.tw-stars { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 140px 140px, 90px 90px; background-position: 20px 30px, 60px 80px; opacity: .5; mask-image: linear-gradient(#000 60%, transparent); }
.tw-eyebrow { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 8px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 12px; }
.tw-title { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0 20px; }
.tw-title img { width: 96px; height: 96px; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.7)); }
.tw-title div { text-align: start; }
.tw-title h1 { font-size: 48px; font-weight: 700; margin: 0; line-height: 1.1; }
.tw-title span { display: block; font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; font-size: 22px; font-weight: 600; color: #fff; }
.tw-sub { position: relative; color: #d4d4d4; font-size: 20px; margin: 0 auto; max-width: 720px; }

.tw-event-wrap { padding: 0 48px; margin-top: -110px; position: relative; z-index: 2; }
.tw-event { position: relative; display: flex; align-items: center; gap: 32px; padding: 40px 48px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(20, 20, 20, 0.75) 60%, rgba(10, 10, 10, 0.7)); backdrop-filter: blur(16px); overflow: hidden; }
.tw-event-mark { position: absolute; inset-inline-start: -40px; top: -40px; width: 320px; height: 320px; opacity: .08; filter: blur(2px); pointer-events: none; }
.tw-event-body { flex: 1; min-width: 0; position: relative; }
.tw-tag { display: inline-flex; align-items: center; height: 27px; padding: 4px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)); color: #fff; font-size: 14px; font-weight: 500; }
.tw-event h3 { font-size: 42px; font-weight: 700; margin: 18px 0 14px; }
.tw-event p { color: #d4d4d4; font-size: 16px; line-height: 1.8; margin: 0 0 22px; max-width: 900px; }
.tw-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.tw-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 14px; }
.tw-pill i { color: var(--fy-accent-2); }
.tw-round-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 22px 28px; border-radius: 999px; background: #fff; color: #000; font-size: 29px; font-weight: 500; white-space: nowrap; }
.tw-round-btn:hover { background: #e5e5e5; color: #000; }
.tw-section { max-width: 1200px; margin: 0 auto; padding: 48px 24px 24px; }
.tw-h3 { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 600; margin: 0 0 32px; }
.tw-h3-mark { width: 44px; height: 36px; object-fit: contain; }

.tw-foot { position: relative; padding: 120px 24px 32px; overflow: hidden; }
.tw-floor { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 80px 80px; transform: perspective(600px) rotateX(60deg) translateY(-60px); transform-origin: top; opacity: .5; mask-image: linear-gradient(transparent, #000 40%, transparent); }
.tw-foot::after { content: ""; position: absolute; left: 50%; bottom: -260px; width: 900px; height: 500px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.tw-foot-logos { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; }
.tw-foot-sep { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.25); }
.tw-foot-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 100px auto 0; color: #a3a3a3; font-size: 14px; }
.tw-foot-social { display: flex; gap: 18px; font-size: 18px; }
.tw-foot-social a { color: #fff; }

/* Tuwaiq-style glass leaderboard */
.tw-seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); margin: 0 auto 32px; }
.tw-seg button { height: 34px; padding: 0 24px; border: 0; border-radius: 999px; background: transparent; color: #a3a3a3; font-size: 14px; font-weight: 500; }
.tw-seg button.is-active { background: rgba(255, 255, 255, 0.2); color: #fff; }
.tw-lb-head, .tw-lb-row { display: grid; grid-template-columns: 148px minmax(0, 1.4fr) 1fr 1fr 1fr; align-items: center; gap: 16px; padding: 16px 24px; }
.tw-lb-head { color: #a3a3a3; font-size: 13px; padding-bottom: 8px; }
.tw-lb-row { min-height: 76px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(12, 12, 12, 0.45)); margin-bottom: 12px; color: #fff; }
.tw-lb-row:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
/* Leaderboard rank. The number used to sit between two grey arrow shapes, which read as
   clutter rather than as a placing. A podium badge says the same thing without decoration:
   the first three are struck in metal, everyone below is a plain, quiet numeral. */
.tw-rank { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
           font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; font-size: 19px; font-weight: 800; line-height: 1;
           color: #b9bdc4; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.tw-rank.is-podium { color: #17181b; border: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); font-size: 21px; }
.tw-rank.is-r1 { background: linear-gradient(150deg, #ffe9a8 0%, #f3c14f 45%, #bf8c22 100%);
                 box-shadow: 0 0 0 1px rgba(255, 224, 150, .5), 0 6px 20px rgba(226, 170, 45, .28); }
.tw-rank.is-r2 { background: linear-gradient(150deg, #f4f6f9 0%, #cdd2d9 45%, #949aa3 100%);
                 box-shadow: 0 0 0 1px rgba(233, 237, 242, .45), 0 6px 18px rgba(170, 178, 190, .2); }
.tw-rank.is-r3 { background: linear-gradient(150deg, #f0c49c 0%, #d2955f 45%, #9c6233 100%);
                 box-shadow: 0 0 0 1px rgba(240, 198, 158, .42), 0 6px 18px rgba(170, 110, 60, .2); }
.tw-lb-name { display: flex; flex-direction: column; }
.tw-lb-name b { font-size: 20px; font-weight: 400; }
.tw-lb-name small { color: #a3a3a3; font-size: 12px; }
.tw-lb-stat { display: inline-flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; }
.tw-lb-stat small { font-size: 12px; color: #8a8a8a; font-weight: 400; }
.tw-more { display: inline-flex; align-items: center; height: 40px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; font-size: 14px; }
.tw-page-title { display: flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 700; margin: 0 0 24px; }
.tw-search { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); max-width: 540px; margin: 0 auto 20px; }
.tw-search input { flex: 1; border: 0; background: transparent; color: #fff; font-size: 14px; outline: 0; }
.tw-search input::placeholder { color: #8a8a8a; }
.tw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 32px; }
.tw-chip { height: 46px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 14px; font-weight: 500; }
.tw-chip.is-active { background: rgba(255, 255, 255, 0.18); }
/* auto-fit with a ceiling: three across when there are three, and a single card that
   stays card-sized at the start of the row instead of a lone box beside two empty
   thirds -- which is what a fixed 3-column grid gives you on a quiet day. */
.tw-ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: start; gap: 24px; }
/* an archived announcement is a teaser; the full text lives on its own card above */
.tw-ev-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; }
.tw-ev { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.tw-ev-banner { height: 118px; border-radius: 12px; background: linear-gradient(135deg, #141414, #262626 55%, #ffffff); display: grid; place-items: center; color: #fff; font-size: 40px; }
.tw-ev h3 { font-size: 20px; font-weight: 600; margin: 0; }
.tw-ev p { color: #d4d4d4; font-size: 14px; margin: 0; line-height: 1.7; }
.tw-ev time { color: #a3a3a3; font-size: 13px; }
.tw-arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--fy-accent); color: #000; }

/* ================= section style (numbered "// section" labels, tiles, schedule, FAQ) ================= */
.cv-section { max-width: 1200px; margin: 0 auto; padding: 64px 24px 0; }
.cv-label { display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; font-size: 12px; letter-spacing: 1.5px; color: rgba(229, 229, 229, 0.5); margin-bottom: 28px; }
.cv-dash { flex: 1; border-bottom: 1px dashed rgba(229, 229, 229, 0.2); }
.cv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 56px; }
.cv-tile { padding: 18px; border: 1px solid rgba(229, 229, 229, 0.12); border-radius: 6px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 8px; }
.cv-tile-label { font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; font-size: 12px; letter-spacing: 1px; color: rgba(229, 229, 229, 0.5); display: inline-flex; gap: 8px; align-items: center; }
.cv-tile-label i { color: var(--fy-accent); }
.cv-tile b { font-size: 18px; font-weight: 500; font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; }
.cv-tile small { color: rgba(229, 229, 229, 0.6); font-size: 13px; line-height: 1.6; }
.cv-sched { border: 1px solid rgba(229, 229, 229, 0.12); border-radius: 6px; padding: 8px 24px; }
.cv-sched > div { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; }
.cv-sched > div + div { border-top: 1px solid rgba(229, 229, 229, 0.06); }
.cv-sq { width: 8px; height: 8px; background: #525252; }
.cv-sq.is-g { background: #22c55e; } .cv-sq.is-b { background: var(--fy-accent); }
.cv-leader { flex: 1; border-bottom: 1px dotted rgba(229, 229, 229, 0.25); margin: 0 12px; height: 0; }
.cv-sched b { font-weight: 500; color: #e5e5e5; }
.cv-faq { display: flex; flex-direction: column; gap: 10px; }
.cv-q { border: 1px solid rgba(229, 229, 229, 0.12); border-radius: 6px; background: rgba(255, 255, 255, 0.02); }
.cv-q summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; }
.cv-q summary::-webkit-details-marker { display: none; }
.cv-q summary i { color: rgba(229, 229, 229, 0.5); font-size: 12px; transition: transform .2s; }
.cv-q[open] summary i { transform: rotate(180deg); }
.cv-q p { margin: 0; padding: 0 20px 18px; color: rgba(229, 229, 229, 0.7); line-height: 1.8; font-size: 14px; }

@media (max-width: 1199.98px) { .cv-tiles { grid-template-columns: repeat(2, 1fr); } .tw-ev-grid { grid-template-columns: repeat(2, 1fr); } .tw-lb-head, .tw-lb-row { grid-template-columns: 70px minmax(0, 1.4fr) 1fr 1fr; } .tw-lb-row > :nth-child(4) { display: none; } .tw-lb-head > :nth-child(4) { display: none; } }
@media (max-width: 991.98px) { .tw-links { display: none; } .tw-menu-btn { display: inline-grid; place-items: center; } .tw-login { display: none; } .tw-nav { padding: 12px 16px; } .tw-event { flex-direction: column; align-items: stretch; padding: 24px; } .tw-event h3 { font-size: 28px; } .tw-round-btn { font-size: 20px; padding: 14px 22px; align-self: center; } .tw-event-wrap { padding: 0 16px; margin-top: -60px; } .tw-hero { padding: 40px 16px 110px; } .tw-title h1 { font-size: 34px; } .tw-title img { width: 64px; height: 64px; } .tw-sub { font-size: 16px; } .cv-tiles { grid-template-columns: 1fr; } .tw-ev-grid { grid-template-columns: 1fr; } .tw-lb-head { display: none; } .tw-lb-row { grid-template-columns: 104px minmax(0, 1fr); row-gap: 6px; } .tw-lb-row > :nth-child(n+3) { grid-column: 2; } .tw-rank { width: 38px; height: 38px; font-size: 16px; border-radius: 12px; } .tw-foot-bottom { flex-direction: column; gap: 12px; text-align: center; } .cv-section { padding: 40px 16px 0; } }

/* ---------- auth pages in the Tuwaiq landing style ---------- */
.twa-main { position: relative; min-height: calc(100dvh - 48px - 72px); display: grid; place-items: center; padding: 48px 16px 96px; overflow: hidden; }
.twa-planet { top: 420px; }
.twa-card { position: relative; width: 100%; max-width: 600px; padding: 40px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(20, 20, 20, 0.6) 60%, rgba(12, 12, 12, 0.6)); backdrop-filter: blur(16px); }
.twa-card .fy-auth-title { font-size: 26px; }
.twa-card .fy-field .form-control { background: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.12); border-radius: 12px; }
.twa-card .fy-auth-submit, .twa-card .fy-btn-primary { border-radius: 12px; }
.twa-card .fy-auth-links a { color: var(--fy-accent-2); }
@media (max-width: 575.98px) { .twa-card { padding: 24px 20px; border-radius: 16px; } }

/* ---------- profile ---------- */
.pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 32px; margin-bottom: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(20, 20, 20, 0.6) 60%, rgba(12, 12, 12, 0.6)); }
.pf-avatar { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--fy-accent), var(--fy-accent-2)); color: #000; font-size: 36px; font-weight: 700; flex-shrink: 0; }
.pf-main { flex: 1; min-width: 240px; }
.pf-name { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pf-dashes .fy-dash { width: 40px; }
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex-basis: 420px; }
.pf-stat { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); }
.pf-graph-card { padding: 20px; }
.pf-graph-card .progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); margin-bottom: 12px; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--fy-text-2); }
.pf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; }
/* Graph sizes = CTFd core (_graphs.scss) so echarts lays out exactly as in the default theme */
#score-graph { min-height: 400px; }
#keys-pie-graph, #categories-pie-graph { min-height: 400px; display: block; }

/* ---------- users list ---------- */
.tw-users-search { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.tw-users-search .form-select { width: 150px; min-height: 46px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.04); }
.tw-users-search .tw-search input { width: 100%; }
.tw-user-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(12, 12, 12, 0.45)); color: #fff; }
.tw-user-row:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.tw-user-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tw-user-main b { font-size: 16px; font-weight: 600; }
.tw-user-main small { color: var(--fy-text-2); font-size: 13px; }
.tw-user-site { color: var(--fy-text-2); }
.tw-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.nav-pills .nav-link { text-align: start; padding: 12px 16px; }
@media (max-width: 767.98px) { .pf-head { padding: 20px; } .pf-stats { flex-basis: 100%; } .tw-users-search { flex-wrap: wrap; } .tw-users-search .form-select { width: 100%; } }

/* ---------- First Blood: dark blood pours from the top, then the title cuts in ---------- */
.fy-blood { position: fixed; inset: 0; z-index: 2000; overflow: hidden; display: grid; place-items: center; background: #030306; animation: fy-blood-in .5s ease-out both; }
@keyframes fy-blood-in { from { opacity: 0; } to { opacity: 1; } }
.fy-blood-vignette { position: absolute; inset: 0; background: radial-gradient(1000px 700px at 40% 30%, rgba(120, 0, 0, 0.35), transparent 70%), radial-gradient(800px 500px at 50% 100%, rgba(255, 255, 255, 0.18), transparent 70%); pointer-events: none; }
.fy-blood-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fy-blood-mass { animation: fy-pool .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: top; }
@keyframes fy-pool { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* The drops do not run any more: they appear at their own shape and the mass drops in from the
   top. scaleY(0->1) was what read as liquid flowing down the screen. */
.fy-drip { transform-origin: 0 0; transform: none; opacity: 0; animation: fy-drip .7s ease-out both; }
.fy-drip-shine { animation-timing-function: ease-out; }
@keyframes fy-drip { from { opacity: 0; } to { opacity: 1; } }
.fy-blood.is-drips { background: radial-gradient(900px 600px at 50% 40%, rgba(120, 0, 0, 0.35), transparent 70%), rgba(3, 3, 6, 0.94); }
.fy-blood.is-drips .fy-blood-text { animation-delay: .4s; }
.fy-blood.is-falcon .fy-blood-vignette { background: radial-gradient(1000px 700px at 40% 22%, rgba(110, 0, 0, 0.22), transparent 70%), radial-gradient(900px 600px at 50% 105%, rgba(255, 255, 255, 0.14), transparent 70%); }
.fy-blood-falcon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 700px) { .fy-blood-falcon { inset: auto; top: 4vh; left: -58vw; width: 220vw; height: 52vh; object-fit: contain; object-position: center top; } .fy-blood-text { bottom: 4vh; } }
/* Anchored to the bottom rather than pushed down from the centre. `margin-top: 50vh` on a
   grid-centred element put the text at a fixed 900px from the top, so on any screen shorter
   than about 1110px -- which is most laptops -- the whole congratulation was below the fold
   and the player only ever saw the falcon. */
.fy-blood-text { position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center; padding: 24px; margin: 0; animation: fy-text-in .6s 2.05s cubic-bezier(.2,.9,.2,1) both; }
@keyframes fy-text-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.fy-blood-text .fy-blood-eyebrow { display: block; font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; letter-spacing: .5em; font-size: 14px; color: #ff3b3b; font-weight: 600; text-shadow: 0 0 18px rgba(255, 30, 30, .6); margin-bottom: 8px; }
.fy-blood-text h2 { margin: 0; font-size: clamp(56px, 11vw, 132px); line-height: 1; font-weight: 800; letter-spacing: .02em; font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif; background: linear-gradient(180deg, #fff 0%, #ffb3b3 45%, #b00000 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255, 40, 40, .45)); }
.fy-blood-text h3 { margin: 14px 0 0; font-size: clamp(24px, 4vw, 40px); font-weight: 700; color: #fff; }
.fy-blood-text p { margin: 10px 0 0; color: #d4d4d4; font-size: 18px; }
.fy-blood-text p b { color: #fff; font-size: 20px; }
.fy-blood-close { margin-top: 26px; padding: 12px 34px; border-radius: 999px; border: 1px solid rgba(255, 60, 60, .55); background: rgba(120, 0, 0, .25); color: #fff; font-weight: 600; cursor: pointer; }
.fy-blood-close:hover { background: rgba(160, 0, 0, .45); }
.fy-blood-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%); }
@keyframes fy-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fy-pour { from { transform: translateY(-40%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fy-ooze { from { transform: scaleY(.45) } to { transform: none } }
@keyframes fy-drop { 0% { transform: scaleY(0) } 100% { transform: scaleY(1) } }
@keyframes fy-drop-shine { 0% { transform: scaleY(0) } 100% { transform: scaleY(1) } }
@keyframes fy-cut { 0% { opacity: 0; transform: scale(1.6); filter: blur(6px) } 60% { transform: scale(.96) } 100% { opacity: 1; transform: none; filter: none } }
@media (prefers-reduced-motion: reduce) { .fy-blood-falcon, .fy-blood-text, .fy-blood-mass, .fy-drip { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- own icons ---------- */
.tq-ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.fy-stat-icon .tq-ico { width: 22px; height: 22px; }
.fy-meta .tq-ico, .fy-row-pts .tq-ico { width: 15px; height: 15px; margin-inline-end: 5px; }
.fy-stat-icon.is-rank { color: #fff; background: rgba(255, 255, 255, 0.10); }

/* ---------- events ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ev-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--fy-surface); color: var(--fy-text); overflow: hidden; transition: transform .15s, border-color .15s; }
.ev-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); color: var(--fy-text); }
.ev-banner, .ev-head-banner { position: relative; aspect-ratio: 2 / 1; background: radial-gradient(500px 220px at 80% 0%, rgba(255, 255, 255, 0.45), transparent 60%), linear-gradient(135deg, #1c1c1c, #111 60%, #0a0a0a); display: grid; place-items: center; overflow: hidden; }
.ev-banner img, .ev-head-banner img { width: 100%; height: 100%; object-fit: cover; }
.ev-banner .ev-banner-mark, .ev-head-banner .ev-banner-mark { position: absolute; width: 46%; height: auto; opacity: .18; inset-inline-end: -6%; top: -8%; filter: blur(1px); }
.ev-banner-name { position: relative; font-size: 24px; font-weight: 700; color: #fff; text-align: center; padding: 0 20px; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.ev-status { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); }
.ev-status.is-live { background: rgba(52, 211, 153, .22); color: #a7f3d0; }
.ev-status.is-live i { font-size: 7px; color: var(--fy-green); animation: ev-pulse 1.4s infinite; }
.ev-status.is-upcoming { background: rgba(255, 255, 255, .3); color: #e5e5e5; }
.ev-status.is-ended { background: rgba(255, 255, 255, .14); color: #d4d4d4; }
.ev-head .ev-status { position: static; }
@keyframes ev-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.ev-body { padding: 18px 20px 8px; }
.ev-body h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ev-body p { color: var(--fy-text-2); font-size: 14px; line-height: 1.7; margin: 0; }
.ev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px 18px; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--fy-text-2); font-size: 13px; }
.ev-foot i { color: var(--fy-accent-2); margin-inline-end: 4px; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .18); color: #e5e5e5; margin-inline-start: auto; }
.ev-chip.is-on { background: rgba(52, 211, 153, .18); color: #a7f3d0; }
.ev-chip.is-off { background: rgba(255, 255, 255, .08); color: var(--fy-text-2); }
.ev-chip i { color: inherit; margin: 0; }

.ev-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--fy-surface); margin-bottom: 24px; }
.ev-head-banner { border-radius: 14px; align-self: start; }
.ev-head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ev-head-title h1 { font-size: 26px; font-weight: 700; margin: 0; }
.ev-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 180, 84, .5); color: var(--fy-hard); font-size: 12px; font-weight: 600; }
.ev-tagline { margin: 10px 0 0; color: var(--fy-text-2); font-size: 15px; }
.ev-desc { margin-top: 12px; color: #d4d4d4; font-size: 14px; line-height: 1.8; }
.ev-desc p:last-child { margin-bottom: 0; }
.ev-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--fy-accent-2); font-weight: 600; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--fy-text-2); font-size: 13px; }
.ev-meta i { color: var(--fy-accent-2); margin-inline-end: 4px; }
.ev-meta b { color: #fff; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.ev-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ev-cta .ev-chip { margin: 0; padding: 9px 14px; font-size: 13px; }
.ev-note { color: #ff9a9a; font-size: 13px; }
.ev-count { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.ev-count-label { color: var(--fy-text-2); font-size: 13px; margin-inline-end: 8px; }
.ev-count .num { min-width: 34px; text-align: center; font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; font-size: 22px; font-weight: 600; color: #fff; }
.ev-count i { font-style: normal; color: var(--fy-muted); font-size: 11px; margin-inline-end: 6px; }
.ev-tabs { margin-bottom: 20px; }
.ev-pane[hidden] { display: none; }
.ev-me { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 16px; }
.ev-me .fy-row-avatar { width: 52px; height: 52px; font-size: 20px; }
.ev-me-name { display: flex; flex-direction: column; gap: 2px; }
.ev-me-name b { font-size: 18px; }
.ev-me-name small { color: var(--fy-text-2); display: inline-flex; align-items: center; gap: 6px; }
.ev-stats { margin-bottom: 20px; }
.ev-info { margin-top: 8px; }
.ev-list { padding: 18px 20px; }
.ev-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ev-list li { display: flex; align-items: flex-start; gap: 10px; color: #d4d4d4; font-size: 14px; line-height: 1.6; }
.ev-list li i { color: var(--fy-hard); margin-top: 4px; }
.tw-lb-row.is-me { border-color: rgba(52, 211, 153, .5); }
.ev-locked { display: grid; place-items: center; gap: 12px; padding: 56px 24px; text-align: center; }
.ev-locked-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 180, 84, .14); color: var(--fy-hard); font-size: 24px; }
.ev-locked h2 { font-size: 22px; margin: 0; }
.ev-locked p { color: var(--fy-text-2); margin: 0; max-width: 520px; }
@media (max-width: 1199.98px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) {
  .ev-grid { grid-template-columns: 1fr; gap: 16px; }
  .ev-head { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .ev-head-title h1 { font-size: 22px; }
  .ev-actions { flex-direction: column; align-items: stretch; }
  .ev-count { justify-content: center; flex-wrap: wrap; }
  .ev-cta { justify-content: center; }
  .ev-tabs { overflow-x: auto; }
}

.fy-pill-cat { background: rgba(255, 255, 255, .14); color: var(--fy-accent-2); }

.fy-row-link { color: var(--fy-text); }
.fy-row-link:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.fy-row-link .ev-status { position: static; margin-inline-start: 8px; padding: 3px 10px; font-size: 11px; }
.fy-row-link .ev-chip { margin-inline-start: auto; }

/* ---------- contribute (propose a challenge) ---------- */
.cb-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.cb-form { padding: 24px; display: grid; gap: 16px; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb-form .fy-field label small { color: var(--fy-muted); font-weight: 400; margin-inline-start: 6px; }
.cb-form textarea.form-control { min-height: 120px; resize: vertical; }
.cb-form input[type=file].form-control { padding-top: 10px; }
.cb-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--fy-text-2); }
.cb-check input { accent-color: var(--fy-accent); width: 16px; height: 16px; }
.cb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cb-side { display: grid; gap: 16px; }
.cb-tips, .cb-mine { padding: 18px 20px; }
.cb-tips ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cb-tips li { display: flex; gap: 10px; align-items: flex-start; color: #d4d4d4; font-size: 14px; line-height: 1.6; }
.cb-tips li i { color: var(--fy-green); margin-top: 4px; }
.cb-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cb-item:first-of-type { margin-top: 8px; }
.cb-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cb-item-main small { color: var(--fy-muted); font-size: 12px; }
.cb-item-main .cb-note { color: var(--fy-hard); }
.cb-item .ev-chip { margin: 0; }
@media (max-width: 991.98px) { .cb-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .cb-row { grid-template-columns: 1fr; } .cb-form { padding: 16px; } }

.fy-chal-by p { display: inline; margin: 0; }

/* ---------- labs index (one category per page) ---------- */
.fy-labs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fy-lab-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--fy-surface); border: 1px solid var(--fy-line); border-radius: 12px; color: var(--fy-text); transition: border-color .15s, transform .15s, background .15s; }
.fy-lab-card:hover { border-color: rgba(255, 255, 255, .45); background: var(--fy-surface-2); transform: translateY(-2px); color: var(--fy-text); }
.fy-lab-card .fy-lab-icon { width: 56px; height: 56px; flex-shrink: 0; }
.fy-lab-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fy-lab-card .fy-lab-title { font-size: 17px; }
.fy-lab-card .fy-lab-count { margin: 0; }
.fy-lab-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fy-lab-bar i { display: block; height: 100%; background: #fff; border-radius: 3px; transition: width .4s; }
.fy-lab-pct { font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace; font-weight: 600; color: var(--fy-accent-2); font-size: 15px; }
.fy-nav-sub a.is-active { color: var(--fy-accent-2); }

/* ---------- Running-instance dock: pinned state for boxes the player has open ---------- */
.fy-dock { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 1600; width: min(380px, calc(100vw - 36px));
           background: rgba(16,16,19,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
           box-shadow: 0 18px 48px rgba(0,0,0,.55); backdrop-filter: blur(8px); overflow: hidden; }
.fy-dock-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none;
               border: 0; color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-align: start; }
.fy-dock-tab:hover { background: rgba(255,255,255,.05); }
.fy-dock-dot { width: 9px; height: 9px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 10px #35d07f; flex: none;
               animation: fy-dock-pulse 2s ease-in-out infinite; }
@keyframes fy-dock-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.fy-dock-label { flex: 1; }
.fy-dock-count { color: #9aa0a6; font-size: 13px; }
.fy-dock-body { border-top: 1px solid rgba(255,255,255,.1); padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.fy-dock-row { padding: 10px 10px 11px; border-radius: 11px; background: rgba(255,255,255,.04); }
.fy-dock-info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fy-dock-name { font-size: 14px; color: #fff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-dock-meta { color: #9aa0a6; font-size: 12.5px; flex: none; }
.fy-dock-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.fy-dock-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
               border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #d8d8dd;
               font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.fy-dock-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.fy-dock-btn.is-go { border-color: rgba(255,255,255,.34); color: #fff; }
.fy-dock-btn.is-stop { border-color: rgba(252,53,53,.4); color: #ff8a8a; }
.fy-dock-btn.is-stop:hover { background: rgba(252,53,53,.16); color: #fff; }
.fy-dock-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) { .fy-dock { inset-inline: 12px; width: auto; bottom: 12px; } }

/* ---------- Profile picture ---------- */
/* Wherever an initial used to sit, an uploaded picture fills the same circle exactly. */
.fy-avatar img, .pf-avatar img, .fy-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.pf-avatar { overflow: hidden; }
.fy-row-avatar { overflow: hidden; }

.fy-pfp { display: flex; align-items: center; gap: 18px; padding: 16px; margin-bottom: 22px;
          border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.fy-pfp-now { position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none; overflow: hidden;
              display: grid; place-items: center; background: linear-gradient(135deg, var(--fy-accent), var(--fy-accent-2));
              color: #000; font-size: 32px; font-weight: 700; }
.fy-pfp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fy-pfp-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fy-pfp-title { font-size: 15px; color: #fff; }
.fy-pfp-hint { font-size: 12.5px; color: #8a8f9f; }
.fy-pfp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fy-pfp-pick { cursor: pointer; margin: 0; }
.fy-pfp-pick.is-busy { opacity: .6; cursor: default; }
.fy-pfp-err { font-size: 12.5px; color: #ff8a8a; margin-top: 6px; }
@media (max-width: 575.98px) { .fy-pfp { flex-direction: column; text-align: center; align-items: center; } .fy-pfp-acts { justify-content: center; } }

/* ---------- One typeface, both scripts ---------- */
/* CTFd's own bundle sets `html, body, .container { font-family: Lato }`. Lato has no Arabic
   glyphs at all, so every Arabic character on the site quietly fell through to whatever the
   visitor's operating system happened to default to -- a different face on Windows, macOS and
   Android, sitting next to Latin text in Lato. Naming the pair here, from the stylesheet that
   loads last, puts Latin in IBM Plex Sans and Arabic in IBM Plex Sans Arabic on every machine. */
html, body, .container,
h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th,
button, input, select, textarea, label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* the deliberate exceptions keep their own face, with Arabic still covered by the fallback */
.num, code, pre, kbd, samp,
.cv-label, .cv-tile-label, .cv-tile b, .fy-lb-rank,
.fy-submit-row .challenge-input, .ev-count .num, .fy-blood-text .fy-blood-eyebrow {
  font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace;
}
.tw-title span, .tw-brand-text small, .tw-rank, .fy-blood-text h2 {
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
}

/* ---------- Leaderboard: the player's picture beside their rank ---------- */
.tw-lb-who { display: inline-flex; align-items: center; gap: 12px; }
.tw-lb-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
              overflow: hidden; flex: none; background: var(--fy-surface-3);
              color: var(--fy-text); font-weight: 700; font-size: 15px;
              border: 1px solid rgba(255, 255, 255, .12); }
.tw-lb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) { .tw-lb-face { width: 32px; height: 32px; font-size: 13px; } }

/* ------------------------------------------------------------------ event podium
   The top three, on a lit stage. Ranks carry metal rather than colour-coded chips:
   a flat gold swatch reads as a label, a gradient with a highlight running across it
   reads as a medal, and that is the whole difference between the two. */
.ev-podium { position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 46px; padding: 58px 24px 40px; margin-bottom: 26px; overflow: hidden;
  border: 1px solid var(--fy-line); border-radius: 18px;
  background:
    radial-gradient(760px 320px at 50% 6%, rgba(255, 255, 255, .07), transparent 68%),
    linear-gradient(180deg, #121212 0%, #0b0b0b 72%, #080808 100%); }

/* One shaft of light down onto the winner, same language as the event banner. It hangs off
   the first-place pod rather than the panel, so it still finds the winner when there are only
   one or two of them and the row is not centred on the middle slot. */
.ev-podium-glow { display: none; }
.is-p1::before { content: ""; position: absolute; left: 50%; top: -58%; width: 420px; height: 210%;
  z-index: -1; transform: translateX(-50%); pointer-events: none; filter: blur(22px);
  background: linear-gradient(to bottom, rgba(226, 240, 255, .16), rgba(200, 224, 255, .05) 46%, transparent 76%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); }

.ev-pod { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  width: 216px; }
.ev-pod-ring { position: relative; width: 132px; height: 132px; border-radius: 50%; padding: 7px;
  display: grid; place-items: center; }
/* the bevel: a bright edge on top and a dark one underneath, which is what makes a flat
   gradient look like a struck piece of metal rather than a coloured circle */
.ev-pod-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .55), inset 0 -2px 2px rgba(0, 0, 0, .45); }
.ev-pod-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid;
  place-items: center; background: var(--fy-surface-2); border: 2px solid #0b0b0b;
  font-size: 34px; font-weight: 700; color: var(--fy-text-2); }
.ev-pod-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the rank plate: a hexagon, because a circle here would just be a second avatar */
.ev-pod-hex { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 44px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ev-pod-hex i { display: grid; place-items: center; width: calc(100% - 4px); height: calc(100% - 4px);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #0d0d0d; font-style: normal; font-weight: 700; font-size: 15px; color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace; }

.ev-pod-name { margin-top: 24px; font-size: 16px; font-weight: 700; color: var(--fy-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-pod-stats { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 8px 6px;
  border: 1px solid var(--fy-line); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.ev-pod-stats span { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
  color: var(--fy-text-2); font-size: 13px; }
.ev-pod-stats span + span { border-inline-start: 1px solid var(--fy-line); }
.ev-pod-stats em { font-style: normal; font-weight: 700; color: var(--fy-text); font-size: 15px; }
.ev-pod-stats .tq-ico, .ev-pod-stats i { width: 16px; height: 16px; font-size: 14px; opacity: 1;
  color: var(--fy-text-3); }
.ev-pod-stats .is-blood, .ev-pod-stats .is-blood .tq-ico { color: #ff5a5a; }
.ev-pod-stats .is-blood em { color: #ff8a8a; }

/* --- the metals --- */
.is-p1 .ev-pod-ring { width: 168px; height: 168px; padding: 8px;
  background: conic-gradient(from 212deg, #a9781b, #ffeeb6 11%, #e8bb52 27%, #9d6f18 44%, #ffd98a 61%, #c79a2e 77%, #fff3c8 91%, #a9781b);
  box-shadow: 0 0 0 1px rgba(255, 233, 168, .4), 0 0 52px rgba(232, 187, 82, .34), 0 18px 40px rgba(0, 0, 0, .6); }
.is-p1 .ev-pod-hex { background: linear-gradient(145deg, #ffeeb6, #c79a2e); bottom: -15px; width: 46px; height: 51px; }
.is-p1 .ev-pod-hex i { font-size: 17px; }
.is-p1 .ev-pod-face { font-size: 44px; }
.is-p1 .ev-pod-name { font-size: 19px; }
/* the winner stands higher; the others sit on the step below */
.is-p1 { width: 250px; margin-bottom: 30px; }

.is-p2 .ev-pod-ring {
  background: conic-gradient(from 212deg, #7f858d, #ffffff 11%, #ccd2d9 27%, #82888f 44%, #eef1f4 61%, #a8aeb6 77%, #ffffff 91%, #7f858d);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 34px rgba(203, 210, 217, .2), 0 14px 32px rgba(0, 0, 0, .55); }
.is-p2 .ev-pod-hex { background: linear-gradient(145deg, #ffffff, #9aa1a9); }

.is-p3 .ev-pod-ring {
  background: conic-gradient(from 212deg, #7d4718, #f7cfa5 11%, #c37d3f 27%, #74421a 44%, #e2ab79 61%, #a8632c 77%, #f9d7b3 91%, #7d4718);
  box-shadow: 0 0 0 1px rgba(247, 207, 165, .26), 0 0 34px rgba(195, 125, 63, .2), 0 14px 32px rgba(0, 0, 0, .55); }
.is-p3 .ev-pod-hex { background: linear-gradient(145deg, #f7cfa5, #a8632c); }

/* your own row, wherever you land */
.ev-pod.is-me .ev-pod-name::after { content: "•"; margin-inline-start: 7px; color: var(--fy-green); }

.ev-lb-rest { margin-top: 4px; }

@media (max-width: 767.98px) {
  .ev-podium { flex-direction: column; align-items: center; gap: 30px; padding: 34px 16px 30px; }
  .ev-pod, .is-p1 { width: 100%; max-width: 300px; margin-bottom: 0; }
  /* stacked, the winner goes on top -- "raised" has no meaning in a single column */
  .is-p1 { order: -1; }
  .is-p1 .ev-pod-ring { width: 140px; height: 140px; }
  .ev-podium-glow { display: none; }
}

/* ------------------------------------------------------------- announcements
   The newest announcement is treated as a piece of the brand rather than a list item:
   same canvas as the event banner -- black, one shaft of light, the mark ghosted behind
   the type -- so an announcement and the poster it is announcing look like one thing. */
.tw-note-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 46px 52px 40px;
  border: 1px solid rgba(255, 255, 255, .1); margin-bottom: 40px;
  background: radial-gradient(900px 420px at 26% 0%, rgba(255, 255, 255, .07), transparent 66%),
              linear-gradient(160deg, #121212 0%, #0b0b0b 68%, #080808 100%); }
.tw-note-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000 10%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 30% 20%, #000 10%, transparent 80%); }
.tw-note-beam { position: absolute; inset: -40%; pointer-events: none; filter: blur(12px);
  background: linear-gradient(104deg, transparent 30%, rgba(210, 230, 255, .10) 37%,
              rgba(230, 242, 255, .17) 40%, rgba(210, 230, 255, .07) 44%, transparent 51%);
  -webkit-mask-image: linear-gradient(to bottom, #000 6%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 6%, transparent 82%); }
.tw-note-mark { position: absolute; inset-inline-end: -30px; top: -26px; width: 300px; height: auto;
  opacity: .07; filter: blur(1px); pointer-events: none; }
.tw-note-body { position: relative; z-index: 1; max-width: 900px; }

.tw-note-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-radius: 4px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04);
  font-size: 13px; font-weight: 600; letter-spacing: .5px; color: #e9e9e9; }
.tw-note-badge i { width: 7px; height: 7px; border-radius: 1px; background: #ff2d2d;
  box-shadow: 0 0 10px rgba(255, 45, 45, .8); }
.tw-note-hero h2 { margin: 20px 0 0; font-size: 36px; font-weight: 700; letter-spacing: -.6px; line-height: 1.35; }
/* the one flourish, same gold hairline the poster uses */
.tw-note-hair { display: block; height: 2px; margin-top: 20px; max-width: 460px;
  background: linear-gradient(to left, #e8bb52 0 92px, rgba(255, 255, 255, .13) 92px 100%); }
.tw-note-text { margin-top: 22px; color: #d4d4d4; font-size: 16px; line-height: 1.95; }
.tw-note-text p:last-child { margin-bottom: 0; }
.tw-note-text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* an announcement that ends in a bare link is ending in a call to action -- draw it as one */
.tw-note-text > p:last-child > a:only-child { display: inline-flex; align-items: center;
  margin-top: 6px; padding: 14px 28px; border-radius: 6px; background: #fff; color: #000;
  font-weight: 700; font-size: 16px; text-decoration: none; }
.tw-note-text > p:last-child > a:only-child:hover { background: #e5e5e5; }
.tw-note-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  color: #a3a3a3; font-size: 13px; }

.tw-note-past { margin: 0 0 18px; font-size: 18px; font-weight: 600; color: var(--fy-text-2); }
/* the grid banner carries the mark instead of a stock icon */
.tw-ev-banner img { width: 58%; height: auto; opacity: .9;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, .25)); }
.tw-ev-text { color: #d4d4d4; font-size: 14px; line-height: 1.75; }
.tw-ev-text p:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .tw-note-hero { padding: 30px 22px 26px; border-radius: 14px; }
  .tw-note-hero h2 { font-size: 26px; }
  .tw-note-mark { width: 190px; opacity: .05; }
}

/* two chips share the one cell the row gives them */
.fy-chal-pills { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* submissions closed: a padlock instead of an input that would only be refused */
.fy-locked { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 18px; text-align: center; }
.fy-locked-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  color: var(--fy-text-2); font-size: 22px; }
.fy-locked-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--fy-text); }
.fy-locked-sub { margin: 0; font-size: 13px; color: var(--fy-text-2); }