:root {
      color-scheme: dark;
      --color-bg: #0a0a0f;
      --color-bg-raised: #111118;
      --color-surface: #17171f;
      --color-surface-strong: #20202a;
      --color-text: #f5f3ea;
      --color-text-muted: #aaa8b3;
      --color-text-dim: #7d7b87;
      --color-primary: #ff5c46;
      --color-primary-hover: #ff725f;
      --color-primary-ink: #170503;
      --color-secondary: #55b8ff;
      --color-status: #c7f36b;
      --color-line: rgba(245, 243, 234, .14);
      --color-line-strong: rgba(245, 243, 234, .28);
      --font-display: "Russo One", "Arial Black", sans-serif;
      --font-body: "Chakra Petch", "Segoe UI", sans-serif;
      --font-mono: "Chakra Petch", ui-monospace, monospace;
      --step--1: clamp(.78rem, .74rem + .14vw, .88rem);
      --step-0: clamp(1rem, .96rem + .18vw, 1.125rem);
      --step-1: clamp(1.25rem, 1.08rem + .65vw, 1.72rem);
      --step-2: clamp(1.8rem, 1.35rem + 1.6vw, 3rem);
      --step-3: clamp(2.7rem, 1.8rem + 3.6vw, 5.8rem);
      --space-1: .25rem;
      --space-2: .5rem;
      --space-3: .75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-7: 3rem;
      --space-8: 4rem;
      --space-9: clamp(5rem, 10vw, 9rem);
      --radius-sm: .65rem;
      --radius-md: 1rem;
      --radius-lg: 1.6rem;
      --radius-xl: 2rem;
      --shadow-card: 0 22px 70px rgba(0, 0, 0, .28);
      --shadow-glow: 0 0 36px rgba(255, 92, 70, .22);
      --ease-out: cubic-bezier(.22, 1, .36, 1);
      --duration-fast: 160ms;
      --duration-base: 260ms;
      --duration-slow: 520ms;
      --container: 1240px;
      --header-h: 76px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 84% 5%, rgba(85, 184, 255, .08), transparent 27rem),
        radial-gradient(circle at 12% 28%, rgba(255, 92, 70, .06), transparent 25rem),
        var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: var(--step-0);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
    }
    body::before {
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, black, transparent 90%);
      content: "";
      pointer-events: none;
    }
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      background: linear-gradient(90deg, var(--color-primary), #ffb15c 55%, var(--color-secondary));
      box-shadow: 0 0 18px rgba(255, 92, 70, .5);
      pointer-events: none;
      will-change: transform;
    }
    .ambient-lights { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .ambient-orb { position: absolute; width: min(48vw, 620px); aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .09; will-change: transform; }
    .ambient-orb--coral { top: 6%; left: -17%; background: var(--color-primary); animation: ambientDriftOne 18s ease-in-out infinite alternate; }
    .ambient-orb--blue { top: 48%; right: -18%; background: var(--color-secondary); animation: ambientDriftTwo 22s ease-in-out infinite alternate; }
    img, svg { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    a { color: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.06; text-wrap: balance; }
    ::selection { background: var(--color-primary); color: var(--color-primary-ink); }

    .skip-link {
      position: fixed;
      top: 8px;
      left: 8px;
      z-index: 999;
      padding: .75rem 1rem;
      transform: translateY(-150%);
      border-radius: var(--radius-sm);
      background: var(--color-text);
      color: var(--color-bg);
      font-weight: 700;
      transition: transform var(--duration-fast);
    }
    .skip-link:focus { transform: translateY(0); }
    :focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 4px; }

    .shell { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
    .section { position: relative; padding-block: var(--space-9); }
    .section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      margin-bottom: 1.1rem;
      color: var(--color-primary);
      font-family: var(--font-mono);
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before { width: 26px; height: 2px; background: currentColor; content: ""; }
    .section-heading { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
    .section-heading h2 { max-width: 760px; margin-bottom: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: -.025em; }
    .section-heading p { max-width: 610px; margin-bottom: 0; color: var(--color-text-muted); }
    .section-heading--split { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: end; }

    .icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
    .btn {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: .7rem;
      padding: .75rem 1.15rem;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
      overflow: hidden;
      position: relative;
    }
    .btn::after { position: absolute; inset: -70% auto -70% -45%; width: 32%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); content: ""; pointer-events: none; }
    .btn:hover::after { animation: buttonSweep .65s var(--ease-out); }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn--primary { background: var(--color-primary); color: var(--color-primary-ink); box-shadow: var(--shadow-glow); }
    .btn--primary:hover { background: var(--color-primary-hover); box-shadow: 0 0 48px rgba(255, 92, 70, .34); }
    .btn--secondary { border-color: var(--color-line-strong); background: rgba(255,255,255,.03); color: var(--color-text); }
    .btn--secondary:hover { border-color: var(--color-text-muted); background: rgba(255,255,255,.07); }
    .btn[disabled] { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--header-h);
      border-bottom: 1px solid var(--color-line);
      background: rgba(10, 10, 15, .83);
      backdrop-filter: blur(18px);
    }
    .nav { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand { display: inline-flex; min-height: 48px; align-items: center; gap: .85rem; text-decoration: none; }
    .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--color-line-strong); border-radius: .55rem; background: var(--color-surface); }
    .brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
    .brand-copy strong { font-size: .95rem; letter-spacing: .02em; }
    .brand-copy span { color: var(--color-text-dim); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: .25rem; }
    .nav-links > a:not(.btn) { display: inline-flex; min-height: 44px; align-items: center; padding-inline: .8rem; border-radius: .5rem; color: var(--color-text-muted); font-size: .9rem; font-weight: 600; text-decoration: none; transition: color var(--duration-fast), background var(--duration-fast); }
    .nav-links > a:not(.btn):hover { background: rgba(255,255,255,.05); color: var(--color-text); }
    .nav-links > a:not(.btn)[aria-current="location"] { background: rgba(255,92,70,.09); color: var(--color-text); }
    .menu-btn { display: none; width: 48px; height: 48px; place-items: center; border: 1px solid var(--color-line); border-radius: .65rem; background: var(--color-surface); color: var(--color-text); cursor: pointer; }

    .hero { min-height: calc(100dvh - var(--header-h)); padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(3rem, 7vw, 6rem); }
    .pixel-world {
      position: relative;
      height: clamp(210px, 23vw, 286px);
      margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
      overflow: hidden;
      border: 3px solid rgba(85,184,255,.22);
      border-radius: 2px;
      background:
        linear-gradient(180deg, #090b1b 0%, #10142b 60%, #15172b 100%),
        repeating-linear-gradient(90deg, transparent 0 63px, rgba(85,184,255,.035) 63px 64px);
      box-shadow: 6px 6px 0 rgba(0,0,0,.38), inset 0 0 0 2px rgba(0,0,0,.42);
      container-type: inline-size;
      isolation: isolate;
      image-rendering: pixelated;
    }
    .pixel-world::before {
      position: absolute;
      inset: 15px 0 auto;
      height: 70px;
      background-image:
        radial-gradient(circle, var(--color-secondary) 0 1px, transparent 2px),
        radial-gradient(circle, var(--color-primary) 0 1px, transparent 2px);
      background-position: 12px 7px, 43px 29px;
      background-size: 74px 41px, 91px 53px;
      content: "";
      opacity: .35;
      animation: pixelStars 3s steps(2, end) infinite;
    }
    .pixel-world::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; height: 14px; background: repeating-linear-gradient(90deg, #55b8ff 0 18px, #173149 18px 24px); box-shadow: 0 -4px 0 #080914; content: ""; opacity: .72; }
    .pixel-moon { position: absolute; top: 34px; right: 7%; width: 34px; height: 34px; background: #fff4b5; box-shadow: 0 0 0 5px rgba(251,188,4,.1), 0 0 28px rgba(251,188,4,.28); }
    .pixel-moon::before { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: #090b1b; content: ""; }
    .pixel-moon::after { position: absolute; right: -7px; bottom: 7px; width: 7px; height: 7px; background: #fff4b5; content: ""; }
    .pixel-cloud { position: absolute; top: 76px; left: 24%; width: 42px; height: 8px; background: rgba(149,176,225,.2); box-shadow: 10px -8px 0 rgba(149,176,225,.2), 30px 0 0 rgba(149,176,225,.2), 48px 0 0 rgba(149,176,225,.2); animation: cloudDrift 14s steps(14, end) infinite alternate; }
    .pixel-skyline { position: absolute; right: 10px; bottom: 14px; left: 10px; display: grid; grid-template-columns: .72fr 1.3fr .82fr 1.36fr; align-items: end; gap: clamp(6px, 1.15vw, 14px); }
    .pixel-building {
      position: relative;
      height: var(--building-h);
      border: 3px solid var(--building-line);
      background:
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.055) 18px 20px),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(0,0,0,.12) 24px 27px),
        linear-gradient(180deg, var(--building-top), var(--building-bottom));
      box-shadow: 6px 6px 0 rgba(0,0,0,.58), inset 5px 0 rgba(255,255,255,.035), inset -7px 0 rgba(0,0,0,.15);
      color: #fff;
      font-family: "Press Start 2P", ui-monospace, monospace;
      image-rendering: pixelated;
    }
    .pixel-building::before { position: absolute; top: -9px; left: -3px; width: calc(100% + 6px); height: 9px; background: repeating-linear-gradient(90deg, var(--building-line) 0 16px, transparent 16px 22px); border-bottom: 3px solid var(--building-line); content: ""; }
    .pixel-building::after { position: absolute; inset: 3px; border: 1px dashed rgba(255,255,255,.08); content: ""; pointer-events: none; }
    .building-sign { position: absolute; top: 16px; right: 8%; left: 8%; z-index: 2; display: grid; min-height: 34px; place-items: center; padding: 6px 4px 4px; border: 3px solid var(--sign-border, #f5f7ff); background: #080914; box-shadow: 4px 4px 0 rgba(0,0,0,.62), inset 0 0 0 2px color-mix(in srgb, var(--building-line), transparent 72%); color: var(--sign-color, #fff); font-size: var(--sign-size, clamp(.55rem, 1.25vw, .95rem)); line-height: 1.3; text-align: center; text-shadow: 2px 2px 0 color-mix(in srgb, var(--building-line), #000 45%), 0 0 12px color-mix(in srgb, var(--building-line), transparent 35%); text-transform: uppercase; }
    .building-windows { position: absolute; right: 11%; bottom: 25px; left: 11%; display: grid; grid-template-columns: repeat(4, minmax(4px, 10px)); justify-content: space-between; gap: 8px 5px; }
    .building-windows i { width: 100%; aspect-ratio: 1; border: 2px solid rgba(0,0,0,.48); background: #ffe271; box-shadow: 0 0 8px rgba(255,226,113,.34); animation: windowFlicker 4.6s steps(1, end) infinite; }
    .building-windows i:nth-child(3n+2) { background: #65d7ff; box-shadow: 0 0 8px rgba(101,215,255,.32); animation-delay: -1.8s; }
    .building-windows i:nth-child(4n) { background: #11172a; box-shadow: none; animation-delay: -3.1s; }
    .building-door { position: absolute; bottom: 0; left: 50%; z-index: 2; width: clamp(12px, 16%, 24px); height: 20px; transform: translateX(-50%); border: 3px solid rgba(0,0,0,.7); border-bottom: 0; background: #090b13; box-shadow: inset 5px 0 rgba(85,184,255,.18); }
    .building-door::after { position: absolute; top: 8px; right: 2px; width: 3px; height: 3px; background: var(--color-status); content: ""; }
    .roof-prop { position: absolute; z-index: 3; display: block; }
    .roof-antenna { top: -37px; left: 28%; width: 4px; height: 28px; background: var(--building-line); box-shadow: 12px 7px 0 -1px var(--building-line); }
    .roof-antenna::before { position: absolute; top: -4px; left: -4px; width: 12px; height: 8px; background: var(--color-primary); box-shadow: 0 0 10px rgba(255,92,70,.75); content: ""; animation: antennaBlink 1.2s steps(1, end) infinite; }
    .roof-tank { top: -28px; right: 18%; width: 28px; height: 19px; border: 3px solid #ea4335; background: #26131b; box-shadow: 4px 4px 0 rgba(0,0,0,.55); }
    .roof-tank::before { position: absolute; top: -7px; left: 3px; width: 16px; height: 5px; background: #ea4335; content: ""; }
    .roof-tank::after { position: absolute; right: 3px; bottom: -10px; left: 3px; height: 7px; border-inline: 3px solid #ea4335; content: ""; }
    .roof-dish { top: -31px; left: 21%; width: 24px; height: 16px; transform: skew(-18deg); border: 4px solid #fbbc04; border-top: 0; background: #342b13; }
    .roof-dish::after { position: absolute; right: -8px; bottom: -13px; width: 4px; height: 13px; background: #fbbc04; content: ""; }
    .roof-flag { top: -42px; right: 20%; width: 4px; height: 33px; background: #34a853; }
    .roof-flag::after { position: absolute; top: 0; left: 4px; width: 24px; height: 14px; background: linear-gradient(90deg, #ff5c46 0 33%, #fbbc04 33% 66%, #55b8ff 66%); box-shadow: 3px 3px 0 rgba(0,0,0,.42); content: ""; animation: flagWave 1.4s steps(2, end) infinite; }
    .flag-confetti { position: absolute; top: -66px; right: 9%; z-index: 5; width: 70px; height: 58px; pointer-events: none; }
    .flag-confetti i { --confetti-x: 0px; --confetti-y: -36px; --confetti-r: 90deg; --confetti-color: #ff5c46; position: absolute; top: 38px; left: 30px; width: 6px; height: 8px; background: var(--confetti-color); box-shadow: 2px 2px 0 rgba(0,0,0,.25); opacity: 0; animation: pixelConfetti 20s steps(10, end) infinite; will-change: transform, opacity; }
    .flag-confetti i:nth-child(2) { --confetti-x: -28px; --confetti-y: -24px; --confetti-r: -135deg; --confetti-color: #55b8ff; }
    .flag-confetti i:nth-child(3) { --confetti-x: -16px; --confetti-y: -45px; --confetti-r: 180deg; --confetti-color: #fbbc04; }
    .flag-confetti i:nth-child(4) { --confetti-x: -4px; --confetti-y: -53px; --confetti-r: -90deg; --confetti-color: #c7f36b; }
    .flag-confetti i:nth-child(5) { --confetti-x: 14px; --confetti-y: -48px; --confetti-r: 225deg; --confetti-color: #ea4335; }
    .flag-confetti i:nth-child(6) { --confetti-x: 31px; --confetti-y: -31px; --confetti-r: -180deg; --confetti-color: #4285f4; }
    .flag-confetti i:nth-child(7) { --confetti-x: 36px; --confetti-y: -9px; --confetti-r: 135deg; --confetti-color: #fbbc04; }
    .flag-confetti i:nth-child(8) { --confetti-x: -35px; --confetti-y: -6px; --confetti-r: -225deg; --confetti-color: #34a853; }
    .flag-confetti i:nth-child(9) { --confetti-x: 21px; --confetti-y: 7px; --confetti-r: 270deg; --confetti-color: #ff8c7d; }
    .flag-confetti i:nth-child(10) { --confetti-x: -19px; --confetti-y: 9px; --confetti-r: -270deg; --confetti-color: #8bd8ff; }
    .pixel-building--gdg { --building-h: 104px; --building-top: #263e78; --building-bottom: #172448; --building-line: #4285f4; --sign-color: #86bdff; }
    .pixel-building--antalya { --building-h: 146px; --building-top: #6b252b; --building-bottom: #32171d; --building-line: #ea4335; --sign-color: #ff867b; --sign-size: clamp(.48rem, 1.05vw, .82rem); }
    .pixel-building--year { --building-h: 122px; --building-top: #65511a; --building-bottom: #322a12; --building-line: #fbbc04; --sign-color: #fff0a0; }
    .pixel-building--jam { --building-h: 166px; --building-top: #205c3e; --building-bottom: #153321; --building-line: #34a853; --sign-color: #76e594; --sign-size: clamp(.47rem, 1.05vw, .8rem); }
    .runner-travel { --run-gdg: 62px; --run-antalya: 20px; --run-year: 44px; position: absolute; bottom: 183px; left: 12px; z-index: 6; width: calc(100% - 58px); height: 32px; pointer-events: none; animation: runnerTravel 10s steps(80, end) infinite alternate; will-change: transform; }
    .pixel-runner { position: relative; width: 28px; height: 34px; animation: runnerParkour .34s steps(2, end) infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.55)); will-change: transform; }
    .pixel-runner svg { width: 28px; height: 34px; image-rendering: pixelated; }
    .runner-leg--a { animation: legFrameA .24s steps(1, end) infinite; }
    .runner-leg--b { animation: legFrameB .24s steps(1, end) infinite; }
    .runner-bubble { position: absolute; top: -20px; left: 22px; padding: 3px 4px; border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-status); font-family: "Press Start 2P", monospace; font-size: 6px; line-height: 1; opacity: 0; animation: runnerCallout 5s steps(1, end) infinite; white-space: nowrap; }
    .pixel-caption { position: absolute; top: 12px; left: 12px; z-index: 2; color: var(--color-text-dim); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
    .hero-kicker { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
    .tag { display: inline-flex; min-height: 32px; align-items: center; gap: .45rem; padding: .35rem .65rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-text-muted); font-size: .76rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
    .tag--live { border-color: rgba(199,243,107,.3); color: var(--color-status); }
    .tag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(199,243,107,.09); }
    .tag--live .tag-dot { animation: statusPulse 1.8s ease-out infinite; }
    .hero h1 { max-width: 820px; margin-bottom: 1.5rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; letter-spacing: -.045em; text-transform: uppercase; }
    .hero h1 span { display: block; color: var(--color-primary); }
    .hero-lead { max-width: 650px; margin-bottom: 2rem; color: var(--color-text-muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.5rem; }
    .hero-note { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--color-text-dim); font-size: .82rem; font-weight: 600; }
    .hero-note span { display: inline-flex; align-items: center; gap: .45rem; }
    .hero-copy.is-visible > * { animation: heroItemIn .72s var(--ease-out) both; }
    .hero-copy.is-visible > :nth-child(2) { animation-delay: .08s; }
    .hero-copy.is-visible > :nth-child(3) { animation-delay: .16s; }
    .hero-copy.is-visible > :nth-child(4) { animation-delay: .24s; }
    .hero-copy.is-visible > :nth-child(5) { animation-delay: .32s; }

    .game-panel { position: relative; min-height: 560px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(31,31,42,.96), rgba(13,13,20,.95)); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; }
    .game-panel.is-visible { animation: panelBreathe 5.5s ease-in-out .7s infinite; }
    .game-panel::before { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.018) 5px 6px); content: ""; }
    .panel-top { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--color-line); color: var(--color-text-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
    .panel-dots { display: flex; gap: .4rem; }
    .panel-dots i { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--color-line-strong); }
    .panel-dots i:first-child { background: var(--color-primary); }
    .arena { position: relative; height: 390px; overflow: hidden; }
    .arena::after { position: absolute; inset: 0 0 auto; height: 90px; transform: translateY(-110px); background: linear-gradient(to bottom, transparent, rgba(85,184,255,.09), transparent); content: ""; animation: scanArena 4.8s linear infinite; pointer-events: none; }
    .arena-grid { position: absolute; inset: 45% -35% -22%; transform: perspective(420px) rotateX(63deg); background-image: linear-gradient(rgba(85,184,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(85,184,255,.18) 1px, transparent 1px); background-size: 40px 40px; animation: gridTravel 3.8s linear infinite; }
    .orb { position: absolute; top: 48%; left: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); border: 1px solid rgba(255,92,70,.7); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb0a2 0 3%, var(--color-primary) 12%, #9e1d2e 48%, #260a12 73%); box-shadow: inset -24px -28px 44px rgba(0,0,0,.55), 0 0 70px rgba(255,92,70,.22); }
    .orb { animation: orbPulse 3.2s ease-in-out infinite; }
    .orb::before, .orb::after { position: absolute; inset: -34px; border: 1px solid rgba(85,184,255,.28); border-radius: 50%; content: ""; }
    .orb::before { border-color: transparent rgba(85,184,255,.48); animation: spinReverse 12s linear infinite; }
    .orb::after { inset: -64px; border-style: dashed; animation: spin 22s linear infinite; }
    .orb-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-family: var(--font-display); font-size: 2.4rem; line-height: .85; text-align: center; text-shadow: 0 4px 18px rgba(0,0,0,.4); }
    .orb-core small { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .19em; text-transform: uppercase; }
    .hud-label { position: absolute; display: flex; align-items: center; gap: .5rem; color: var(--color-text-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
    .hud-label::before { width: 20px; height: 1px; background: var(--color-primary); content: ""; }
    .hud-label--one { top: 20%; left: 8%; }
    .hud-label--two { top: 31%; right: 7%; }
    .hud-label--three { bottom: 15%; left: 10%; }
    .hud-label--one { animation: hudSignal 3.4s ease-in-out infinite; }
    .hud-label--two { animation: hudSignal 3.4s ease-in-out .8s infinite; }
    .hud-label--three { animation: hudSignal 3.4s ease-in-out 1.6s infinite; }
    .meter { position: absolute; top: 13%; right: 7%; display: grid; gap: 5px; }
    .meter i { display: block; width: 42px; height: 3px; background: rgba(255,255,255,.12); }
    .meter i:nth-child(-n+3) { background: var(--color-secondary); }
    .meter i { transform-origin: right; animation: meterSignal 2.2s ease-in-out infinite; }
    .meter i:nth-child(2) { animation-delay: .14s; }
    .meter i:nth-child(3) { animation-delay: .28s; }
    .meter i:nth-child(4) { animation-delay: .42s; }
    .meter i:nth-child(5) { animation-delay: .56s; }
    .panel-stats { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 114px; border-top: 1px solid var(--color-line); }
    .panel-stat { display: flex; flex-direction: column; justify-content: center; padding: 1rem; }
    .panel-stat + .panel-stat { border-left: 1px solid var(--color-line); }
    .panel-stat small { color: var(--color-text-dim); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .panel-stat strong { margin-top: .15rem; font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 400; }
    .game-panel.is-visible .panel-stat { animation: panelStatIn .65s var(--ease-out) both; }
    .game-panel.is-visible .panel-stat:nth-child(1) { animation-delay: .32s; }
    .game-panel.is-visible .panel-stat:nth-child(2) { animation-delay: .4s; }
    .game-panel.is-visible .panel-stat:nth-child(3) { animation-delay: .48s; }


    .stat-rail { border-block: 1px solid var(--color-line); background: rgba(255,255,255,.015); }
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); }
    .stat { min-height: 142px; padding: 1.5rem; }
    .stat + .stat { border-left: 1px solid var(--color-line); }
    .stat strong { display: block; margin-bottom: .25rem; font-family: var(--font-display); font-size: clamp(1.8rem, 3.3vw, 3rem); font-weight: 400; color: var(--color-text); font-variant-numeric: tabular-nums; }
    .stat:last-child strong { animation: infinityPulse 2.8s ease-in-out infinite; }
    .stat span { color: var(--color-text-muted); font-size: .85rem; font-weight: 600; }

    .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; }
    .about-copy { position: sticky; top: calc(var(--header-h) + 40px); }
    .about-copy h2 { margin-bottom: 1.5rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
    .about-copy p { max-width: 570px; color: var(--color-text-muted); }
    .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .feature-card { position: relative; min-height: 260px; padding: 1.5rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base); }
    .feature-card::before, .event-card::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(85,184,255,.13), transparent 70%); opacity: 0; content: ""; pointer-events: none; transition: opacity var(--duration-base); }
    .feature-card:hover::before, .event-card:hover::before { opacity: 1; }
    .feature-card > *, .event-card > * { position: relative; z-index: 1; }
    .feature-card:nth-child(2) { margin-top: 3rem; }
    .feature-card:hover { transform: translateY(-5px); border-color: rgba(255,92,70,.45); background: linear-gradient(145deg, rgba(255,92,70,.08), rgba(255,255,255,.02)); }
    .feature-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 3rem; border: 1px solid var(--color-line-strong); border-radius: .8rem; color: var(--color-primary); }
    .feature-card.is-visible .feature-icon { animation: iconDeploy .7s var(--ease-out) both; }
    .feature-card h3 { margin-bottom: .65rem; font-size: 1.2rem; }
    .feature-card p { margin-bottom: 0; color: var(--color-text-muted); font-size: .93rem; }

    .missions { border-block: 1px solid var(--color-line); background: linear-gradient(180deg, #0d1017, #101019); }
    .mission-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
    .mission-console { position: sticky; top: calc(var(--header-h) + 32px); overflow: hidden; border: 1px solid rgba(85,184,255,.32); border-radius: var(--radius-lg); background: rgba(7,14,24,.78); box-shadow: inset 0 0 45px rgba(85,184,255,.04), var(--shadow-card); }
    .mission-console.is-updating { animation: consoleUpdate .42s var(--ease-out); }
    .console-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(85,184,255,.2); color: var(--color-secondary); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .console-body { padding: 1.5rem; }
    .console-body > small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
    .console-body h3 { margin: .55rem 0 .8rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
    .console-body p { margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: .9rem; }
    .mission-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: 1.5rem; }
    .mission-progress i { height: 5px; border-radius: 2px; background: rgba(255,255,255,.1); transition: background var(--duration-base), box-shadow var(--duration-base); }
    .mission-progress i.is-active { background: var(--color-primary); box-shadow: 0 0 14px rgba(255,92,70,.5); }
    .loadout-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .loadout-item { padding: .75rem; border: 1px solid var(--color-line); border-radius: .65rem; background: rgba(255,255,255,.025); }
    .loadout-item small { display: block; color: var(--color-text-dim); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
    .loadout-item strong { display: block; margin-top: .2rem; color: var(--color-status); font-size: .88rem; }
    .theme-vault { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid rgba(85,184,255,.16); }
    .theme-vault > span { display: block; margin-bottom: .65rem; color: var(--color-text-dim); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .theme-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
    .theme-tag { padding: .35rem .55rem; border: 1px dashed rgba(85,184,255,.34); border-radius: .4rem; color: var(--color-secondary); font-size: .72rem; font-weight: 700; }
    .mission-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .mission-card { position: relative; min-height: 275px; padding: 1.4rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: rgba(255,255,255,.025); color: var(--color-text); cursor: pointer; text-align: left; transition: transform var(--duration-base), border-color var(--duration-base), background var(--duration-base), box-shadow var(--duration-base); }
    .mission-card::before { position: absolute; top: -48px; right: -44px; width: 130px; height: 130px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; transition: transform var(--duration-slow), border-color var(--duration-base); }
    .mission-card::after { position: absolute; inset: 0; z-index: 0; background: radial-gradient(250px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,92,70,.14), transparent 72%); opacity: 0; content: ""; pointer-events: none; transition: opacity var(--duration-base); }
    .mission-card > * { position: relative; z-index: 1; }
    .mission-card:hover { transform: translateY(-4px); border-color: rgba(85,184,255,.5); background: rgba(85,184,255,.045); }
    .mission-card:hover::after { opacity: 1; }
    .mission-card:hover::before { transform: scale(1.15); border-color: rgba(85,184,255,.35); }
    .mission-card[aria-pressed="true"] { border-color: var(--color-primary); background: linear-gradient(145deg, rgba(255,92,70,.13), rgba(255,255,255,.025)); box-shadow: 0 0 0 1px rgba(255,92,70,.2), 0 18px 50px rgba(0,0,0,.25); }
    .mission-id { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.2rem; color: var(--color-primary); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
    .mission-difficulty { color: var(--color-text-dim); }
    .mission-card h3 { margin-bottom: .7rem; font-size: 1.15rem; }
    .mission-card p { margin-bottom: 1rem; color: var(--color-text-muted); font-size: .85rem; line-height: 1.55; }
    .mission-reward { color: var(--color-status); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

    .flow { border-block: 1px solid var(--color-line); background: var(--color-bg-raised); }
    .timeline { display: grid; grid-template-columns: repeat(4, 1fr); }
    .timeline-step { position: relative; min-height: 330px; padding: 1.5rem; overflow: hidden; border: 1px solid var(--color-line); border-right: 0; background: rgba(255,255,255,.014); }
    .timeline-step::after { position: absolute; inset: 0 auto 0 0; width: 2px; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--color-primary), var(--color-secondary)); content: ""; transition: transform .8s var(--ease-out) .25s; }
    .timeline-step.is-visible::after { transform: scaleY(1); }
    .timeline-step:last-child { border-right: 1px solid var(--color-line); }
    .step-num { display: inline-flex; margin-bottom: 5rem; color: var(--color-primary); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }
    .timeline-step h3 { margin-bottom: .8rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
    .timeline-step p { margin-bottom: 1rem; color: var(--color-text-muted); font-size: .9rem; }
    .step-time { color: var(--color-secondary); font-family: var(--font-mono); font-size: .73rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

    .quest-map { position: relative; display: grid; gap: .75rem; max-width: 1050px; margin-inline: auto; }
    .quest-map::before { position: absolute; top: 22px; bottom: 22px; left: 116px; width: 1px; background: linear-gradient(var(--color-secondary), var(--color-primary), var(--color-status)); content: ""; opacity: .45; }
    .quest-stage { position: relative; display: grid; grid-template-columns: 92px 24px 1fr auto; align-items: center; gap: 1rem; min-height: 82px; padding: .8rem 1rem .8rem 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(255,255,255,.018); transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base); }
    .quest-stage:hover { transform: translateX(5px); border-color: rgba(85,184,255,.42); background: rgba(85,184,255,.035); }
    .quest-time { color: var(--color-secondary); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; text-align: right; }
    .quest-node { position: relative; z-index: 1; width: 13px; height: 13px; border: 3px solid var(--color-bg-raised); border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 1px var(--color-secondary), 0 0 16px rgba(85,184,255,.5); }
    .quest-stage--major .quest-node { background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 0 18px rgba(255,92,70,.55); }
    .quest-stage--final .quest-node { background: var(--color-status); box-shadow: 0 0 0 1px var(--color-status), 0 0 18px rgba(199,243,107,.5); }
    .quest-copy h3 { margin: 0 0 .2rem; font-size: 1rem; }
    .quest-copy p { margin: 0; color: var(--color-text-muted); font-size: .79rem; }
    .quest-chip { padding: .3rem .55rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-text-dim); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

    .score-section { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-line); }
    .score-hud { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .score-card { padding: 1.1rem 1.2rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(0,0,0,.16); }
    .score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
    .score-head strong { font-size: .9rem; }
    .score-head span { color: var(--color-status); font-family: var(--font-display); font-size: 1.25rem; }
    .score-track { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
    .score-fill { display: block; width: var(--score); height: 100%; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: transform 1s var(--ease-out) var(--reveal-delay, 0ms); }
    .score-card.is-visible .score-fill { transform: scaleX(1); }
    .score-rule { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255,92,70,.28); border-radius: var(--radius-md); background: rgba(255,92,70,.06); color: var(--color-text-muted); font-size: .85rem; }
    .score-rule strong { color: var(--color-primary); }

    .prize-title { margin: clamp(4rem, 7vw, 6rem) 0 1.5rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
    .prize-vault { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: .8rem; }
    .prize-card { min-height: 230px; padding: 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); }
    .prize-card:first-child { border-color: rgba(199,243,107,.35); background: linear-gradient(145deg, rgba(199,243,107,.09), rgba(255,255,255,.012)); }
    .prize-rank { display: block; margin-bottom: 3rem; color: var(--color-status); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .prize-card h3 { margin-bottom: .7rem; font-size: 1.05rem; }
    .prize-card p { margin-bottom: 0; color: var(--color-text-muted); font-size: .8rem; }

    .events-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
    .event-card { position: relative; min-height: 440px; padding: clamp(1.5rem, 4vw, 2.5rem); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); text-decoration: none; transition: border-color var(--duration-base), transform var(--duration-base), box-shadow var(--duration-base); }
    .event-card:hover { transform: translateY(-5px); border-color: rgba(85,184,255,.5); box-shadow: var(--shadow-card); }
    .event-card--featured { background: linear-gradient(145deg, #21121a, #15151e); }
    .event-card--featured::after { position: absolute; right: -80px; bottom: -110px; width: 330px; height: 330px; border: 1px solid rgba(255,92,70,.2); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,92,70,.04), 0 0 0 80px rgba(255,92,70,.025); content: ""; }
    .event-card--featured.is-visible::after { animation: eventRadar 7s ease-in-out infinite; }
    .event-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 6rem; }
    .event-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-status); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .event-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
    .event-code { color: var(--color-text-dim); font-family: var(--font-mono); font-size: .72rem; }
    .event-card h3 { position: relative; z-index: 1; max-width: 570px; margin-bottom: 1rem; font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 3.5rem); font-weight: 400; }
    .event-card p { position: relative; z-index: 1; max-width: 540px; margin-bottom: 2rem; color: var(--color-text-muted); }
    .event-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; color: var(--color-text); font-size: .84rem; font-weight: 600; }
    .event-meta span { display: inline-flex; align-items: center; gap: .42rem; }
    .event-arrow { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--color-line-strong); border-radius: 50%; transition: background var(--duration-fast), color var(--duration-fast); }
    .event-card:hover .event-arrow { background: var(--color-secondary); color: var(--color-bg); }

    .archive { background: #f0ede5; color: #18171b; }
    .archive .eyebrow { color: #b8392b; }
    .archive .section-heading p { color: #5f5b62; }
    .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
    .filter-btn { min-height: 44px; padding: .55rem .9rem; border: 1px solid rgba(24,23,27,.22); border-radius: 999px; background: transparent; color: #48454c; cursor: pointer; font-weight: 700; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
    .filter-btn:hover, .filter-btn[aria-pressed="true"] { border-color: #18171b; background: #18171b; color: #f5f3ea; }
    .archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .archive-card { display: flex; min-height: 340px; flex-direction: column; padding: 1.5rem; border: 1px solid rgba(24,23,27,.18); border-radius: var(--radius-lg); background: rgba(255,255,255,.34); transition: transform var(--duration-base), background var(--duration-base), opacity var(--duration-base); }
    .archive-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.72); }
    .archive-card[hidden] { display: none; }
    .archive-year { margin-bottom: auto; color: #8b3030; font-family: var(--font-display); font-size: 3.5rem; }
    .archive-type { color: #6d6870; font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .archive-card h3 { margin: .6rem 0 .8rem; font-size: 1.35rem; }
    .archive-card p { margin-bottom: 0; color: #605d63; font-size: .9rem; }
    .archive-empty { display: none; padding: 2rem; border: 1px dashed rgba(24,23,27,.35); border-radius: var(--radius-lg); color: #605d63; text-align: center; }

    .faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 8vw, 8rem); }
    .faq-intro h2 { margin-bottom: 1rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
    .faq-intro p { color: var(--color-text-muted); }
    .faq-list { border-top: 1px solid var(--color-line); }
    .faq-item { border-bottom: 1px solid var(--color-line); }
    .faq-question { display: grid; width: 100%; min-height: 76px; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1rem 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; text-align: left; }
    .faq-question span { font-weight: 700; }
    .faq-question .icon { transition: transform var(--duration-base); }
    .faq-question[aria-expanded="true"] .icon { transform: rotate(45deg); }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); }
    .faq-answer > div { overflow: hidden; }
    .faq-answer p { max-width: 660px; margin: 0 0 1.5rem; color: var(--color-text-muted); }
    .faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

    .register-frame { position: relative; display: grid; grid-template-columns: 1fr minmax(340px, .72fr); gap: clamp(2rem, 7vw, 7rem); padding: clamp(1.5rem, 5vw, 4.5rem); overflow: hidden; border: 1px solid rgba(255,92,70,.38); border-radius: var(--radius-xl); background: linear-gradient(135deg, #251116, #12121a 60%); box-shadow: var(--shadow-card); }
    .register-frame::before { position: absolute; top: -150px; left: -120px; width: 340px; height: 340px; border: 1px solid rgba(255,92,70,.16); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,92,70,.035), 0 0 0 96px rgba(255,92,70,.02); content: ""; }
    .register-copy { position: relative; z-index: 1; }
    .register-copy h2 { max-width: 650px; margin-bottom: 1rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
    .register-copy p { max-width: 580px; margin-bottom: 0; color: var(--color-text-muted); }
    .register-form { position: relative; z-index: 1; align-self: center; padding: 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(10,10,15,.62); }
    .field-label { display: block; margin-bottom: .45rem; font-size: .83rem; font-weight: 700; }
    .field-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
    .field-input { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
    .field-input::placeholder { color: var(--color-text-dim); }
    .field-input:focus { border-color: var(--color-secondary); outline: 0; box-shadow: 0 0 0 3px rgba(85,184,255,.16); }
    .field-input[aria-invalid="true"] { border-color: var(--color-primary); }
    .field-help, .form-status { margin: .6rem 0 0; color: var(--color-text-dim); font-size: .75rem; }
    .form-status { min-height: 1.25rem; }
    .form-status[data-state="error"] { color: #ff9b8e; }
    .form-status[data-state="success"] { color: var(--color-status); }
    .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .75s linear infinite; }

    .site-footer { padding: 3rem 0 1.5rem; border-top: 1px solid var(--color-line); background: #07070b; }
    .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding-bottom: 3rem; }
    .footer-brand p { max-width: 460px; margin: 1.3rem 0 0; color: var(--color-text-muted); font-size: .9rem; }
    .footer-links { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 1rem 3rem; }
    .footer-group h3 { margin-bottom: .7rem; color: var(--color-text-dim); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
    .footer-group a { display: flex; min-height: 40px; align-items: center; gap: .5rem; color: var(--color-text-muted); font-size: .88rem; font-weight: 600; text-decoration: none; transition: color var(--duration-fast); }
    .footer-group a:hover { color: var(--color-text); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.3rem; border-top: 1px solid var(--color-line); color: var(--color-text-dim); font-size: .74rem; }
    .google-colors { display: flex; gap: .35rem; }
    .google-colors i { display: block; width: 22px; height: 3px; border-radius: 2px; }
    .google-colors i:nth-child(1) { background: #4285f4; }
    .google-colors i:nth-child(2) { background: #ea4335; }
    .google-colors i:nth-child(3) { background: #fbbc04; }
    .google-colors i:nth-child(4) { background: #34a853; }

    .reveal { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
    .motion-ready .reveal { opacity: 0; transform: translateY(28px) scale(.985); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes spinReverse { to { transform: rotate(-360deg); } }
    @keyframes ambientDriftOne { to { transform: translate(28vw, 18vh) scale(1.18); } }
    @keyframes ambientDriftTwo { to { transform: translate(-24vw, -14vh) scale(.82); } }
    @keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(199,243,107,.09); } 50% { box-shadow: 0 0 0 9px rgba(199,243,107,0); } }
    @keyframes buttonSweep { from { transform: translateX(0) rotate(18deg); } to { transform: translateX(520%) rotate(18deg); } }
    @keyframes panelBreathe { 0%, 100% { box-shadow: var(--shadow-card); } 50% { box-shadow: 0 28px 90px rgba(0,0,0,.38), 0 0 44px rgba(85,184,255,.09); } }
    @keyframes scanArena { to { transform: translateY(500px); } }
    @keyframes gridTravel { to { background-position: 0 40px, 40px 0; } }
    @keyframes orbPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.045); } }
    @keyframes hudSignal { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
    @keyframes meterSignal { 0%, 100% { transform: scaleX(.45); opacity: .35; } 50% { transform: scaleX(1); opacity: 1; } }
    @keyframes infinityPulse { 0%, 100% { color: var(--color-text); text-shadow: none; } 50% { color: var(--color-status); text-shadow: 0 0 24px rgba(199,243,107,.3); } }
    @keyframes iconDeploy { 0% { opacity: 0; transform: rotate(-12deg) scale(.6); } 70% { transform: rotate(4deg) scale(1.08); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
    @keyframes eventRadar { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
    @keyframes heroItemIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes panelStatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes consoleUpdate { 0% { transform: scale(1); } 45% { transform: scale(.985); border-color: var(--color-primary); } 100% { transform: scale(1); } }
    @keyframes runnerTravel {
      0% { transform: translate(0, var(--run-gdg)); }
      14% { transform: translate(14%, var(--run-gdg)); }
      18% { transform: translate(18%, calc(var(--run-antalya) - 24px)); }
      23% { transform: translate(23%, var(--run-antalya)); }
      43% { transform: translate(43%, var(--run-antalya)); }
      48% { transform: translate(48%, -8px); }
      53% { transform: translate(53%, var(--run-year)); }
      64% { transform: translate(64%, var(--run-year)); }
      69% { transform: translate(69%, 10px); }
      75% { transform: translate(75%, 0); }
      100% { transform: translate(100%, 0); }
    }
    @keyframes runnerParkour {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes legFrameA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    @keyframes legFrameB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
    @keyframes runnerCallout { 0%, 82%, 100% { opacity: 0; transform: translateY(3px); } 84%, 96% { opacity: 1; transform: translateY(0); } }
    @keyframes pixelStars { 50% { opacity: .16; } }
    @keyframes cloudDrift { to { transform: translateX(60px); } }
    @keyframes windowFlicker { 0%, 72%, 100% { opacity: 1; } 73%, 82% { opacity: .3; } }
    @keyframes antennaBlink { 0%, 49% { background: var(--color-primary); } 50%, 100% { background: #fff; } }
    @keyframes flagWave { 50% { transform: translateX(3px); } }
    @keyframes pixelConfetti {
      0%, 36.9%, 44%, 100% { opacity: 0; transform: translate(0, 0) rotate(0); }
      37% { opacity: 1; transform: translate(0, 0) rotate(0); }
      40.5% { opacity: 1; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-r)); }
      43.9% { opacity: 0; transform: translate(var(--confetti-x), calc(var(--confetti-y) + 24px)) rotate(var(--confetti-r)); }
    }

    @media (max-width: 960px) {
      :root { --header-h: 68px; }
      .hero-grid, .about-grid, .faq-wrap, .register-frame { grid-template-columns: 1fr; }
      .mission-layout { grid-template-columns: 1fr; }
      .mission-console { position: static; }
      .hero { min-height: auto; }
      .game-panel { min-height: 500px; }
      .arena { height: 340px; }
      .about-copy { position: static; }
      .timeline { grid-template-columns: repeat(2, 1fr); }
      .timeline-step:nth-child(2) { border-right: 1px solid var(--color-line); }
      .timeline-step:nth-child(n+3) { border-top: 0; }
      .events-grid { grid-template-columns: 1fr; }
      .event-card { min-height: 390px; }
      .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .prize-vault { grid-template-columns: repeat(2, 1fr); }
      .section-heading--split { grid-template-columns: 1fr; }
    }

    @media (max-width: 860px) {
      .shell { width: min(calc(100% - 24px), var(--container)); }
      .site-header { height: auto; min-height: var(--header-h); }
      .nav { min-height: var(--header-h); flex-wrap: wrap; }
      .menu-btn { display: grid; }
      .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 0 0 1rem; }
      .nav-links.is-open { display: flex; }
      .nav-links > a:not(.btn), .nav-links .btn { width: 100%; justify-content: flex-start; }
      .hero h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
      .pixel-world { height: 194px; margin-bottom: 1.25rem; }
      .pixel-skyline { gap: 4px; }
      .pixel-building { border-width: 2px; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
      .building-sign { top: 10px; right: 5%; left: 5%; min-height: 26px; padding: 4px 2px 2px; border-width: 2px; font-size: clamp(.34rem, 1.75vw, .56rem); box-shadow: 2px 2px 0 rgba(0,0,0,.62); }
      .building-windows { right: 9%; bottom: 19px; left: 9%; grid-template-columns: repeat(3, minmax(3px, 7px)); gap: 5px 3px; }
      .building-windows i { border-width: 1px; }
      .building-windows i:nth-child(n+7) { display: none; }
      .building-door { height: 15px; border-width: 2px; }
      .pixel-building--gdg { --building-h: 74px; }
      .pixel-building--antalya { --building-h: 104px; }
      .pixel-building--year { --building-h: 86px; }
      .pixel-building--jam { --building-h: 118px; }
      .roof-antenna { top: -29px; height: 20px; }
      .roof-tank { top: -23px; transform: scale(.76); transform-origin: bottom right; }
      .roof-dish { top: -25px; transform: scale(.7) skew(-18deg); transform-origin: bottom left; }
      .roof-flag { top: -34px; height: 25px; transform: scale(.75); transform-origin: bottom right; }
      .flag-confetti { top: -55px; right: 2%; transform: scale(.72); transform-origin: bottom right; }
      .runner-travel { --run-gdg: 44px; --run-antalya: 14px; --run-year: 32px; bottom: 133px; width: calc(100% - 44px); }
      .pixel-runner, .pixel-runner svg { width: 23px; height: 28px; }
      .game-panel { min-height: 450px; border-radius: var(--radius-lg); }
      .arena { height: 310px; }
      .orb { width: 150px; height: 150px; }
      .orb-core { font-size: 2rem; }
      .panel-stats { min-height: 84px; }
      .panel-stat { padding: .7rem; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .stat { min-height: 120px; }
      .stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-line); }
      .stat:nth-child(4) { border-top: 1px solid var(--color-line); }
      .feature-grid { grid-template-columns: 1fr; }
      .mission-deck, .score-hud, .prize-vault { grid-template-columns: 1fr; }
      .feature-card:nth-child(2) { margin-top: 0; }
      .timeline { grid-template-columns: 1fr; }
      .timeline-step, .timeline-step:nth-child(2), .timeline-step:last-child { min-height: 265px; border-right: 1px solid var(--color-line); border-bottom: 0; }
      .timeline-step:last-child { border-bottom: 1px solid var(--color-line); }
      .step-num { margin-bottom: 2.6rem; }
      .quest-map::before { left: 17px; }
      .quest-stage { grid-template-columns: 18px 1fr; gap: .8rem; padding: 1rem; }
      .quest-time { grid-column: 2; grid-row: 1; text-align: left; }
      .quest-node { grid-column: 1; grid-row: 1 / span 2; }
      .quest-copy { grid-column: 2; }
      .quest-chip { display: none; }
      .archive-grid { grid-template-columns: 1fr; }
      .archive-card { min-height: 290px; }
      .field-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-links { grid-template-columns: repeat(2, 1fr); }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
      .scroll-progress, .ambient-lights { display: none; }
      .game-panel, .arena::after, .arena-grid, .orb, .orb::before, .orb::after, .hud-label, .meter i { animation: none !important; }
    }