@layer reset, base, components, utilities;

@layer base {
  :root {
    --arc-bg:      #07060f;
    --arc-dark:    #100f1e;
    --arc-panel:   #13112a;
    --arc-pink:    #ff2d9a;
    --arc-cyan:    #00e5ff;
    --arc-lime:    #aaff00;
    --arc-gold:    #ffd600;
    --arc-orange:  #ff6a00;
    --arc-white:   #e2dfff;
    --arc-dim:     #4a4578;
    --arc-dimmer:  #2a2550;

    --glow-pink: 0 0 8px var(--arc-pink),  0 0 24px color-mix(in oklab, var(--arc-pink) 55%, transparent),  0 0 56px color-mix(in oklab, var(--arc-pink)  25%, transparent);
    --glow-cyan: 0 0 8px var(--arc-cyan),  0 0 24px color-mix(in oklab, var(--arc-cyan) 55%, transparent),  0 0 56px color-mix(in oklab, var(--arc-cyan)  25%, transparent);
    --glow-lime: 0 0 8px var(--arc-lime),  0 0 24px color-mix(in oklab, var(--arc-lime) 55%, transparent),  0 0 56px color-mix(in oklab, var(--arc-lime)  25%, transparent);
    --glow-gold: 0 0 8px var(--arc-gold),  0 0 24px color-mix(in oklab, var(--arc-gold) 55%, transparent),  0 0 56px color-mix(in oklab, var(--arc-gold)  25%, transparent);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  .arc-body {
    background: var(--arc-bg);
    color: var(--arc-white);
    font-family: "Chakra Petch", system-ui, sans-serif;
    font-size: 15px;
    min-height: 100dvh;
    overflow-x: hidden;

    background-image:
      radial-gradient(ellipse 140% 50% at 50% -5%,
        color-mix(in oklab, var(--arc-pink) 10%, transparent),
        transparent 55%),
      radial-gradient(circle, var(--arc-dimmer) 1px, transparent 1px);
    background-size: auto, 28px 28px;
  }

  /* CRT scanlines */
  .arc-body::before {
    content: "";
    position: fixed; inset: 0; z-index: 200;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.07) 0px,
      rgba(0, 0, 0, 0.07) 1px,
      transparent 1px,
      transparent 3px
    );
  }

  /* CRT vignette */
  .arc-body::after {
    content: "";
    position: fixed; inset: 0; z-index: 199;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
      transparent 55%,
      rgba(0, 0, 0, 0.65) 100%);
  }
}

@layer components {

  /* ---- NAV ---- */
  .arc-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 0 clamp(16px, 4vw, 56px);
    height: 60px;
    background: color-mix(in oklab, var(--arc-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--arc-dimmer);
  }
  .arc-nav::after {
    content: "";
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--arc-cyan), transparent);
    opacity: 0.5;
  }

  .arc-nav__brand {
    display: flex; align-items: center; gap: 10px;
    font-family: "Press Start 2P", monospace;
    font-size: 10px; letter-spacing: 0.05em;
    color: var(--arc-cyan);
    text-shadow: var(--glow-cyan);
    white-space: nowrap;
  }
  .arc-nav__brand-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--arc-cyan);
    box-shadow: var(--glow-cyan);
    animation: arc-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }

  .arc-nav__links {
    display: none; gap: 32px;
    font-family: "Share Tech Mono", monospace;
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--arc-dim);
  }
  @media (min-width: 780px) { .arc-nav__links { display: flex; } }
  .arc-nav__links a {
    color: inherit; text-decoration: none;
    transition: color .2s, text-shadow .2s;
  }
  .arc-nav__links a:hover { color: var(--arc-cyan); text-shadow: var(--glow-cyan); }

  .arc-nav__cta {
    font-family: "Press Start 2P", monospace;
    font-size: 9px; letter-spacing: 0.05em;
    padding: 10px 16px;
    color: var(--arc-bg); background: var(--arc-cyan);
    text-decoration: none; text-transform: uppercase;
    box-shadow: var(--glow-cyan), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    transition: transform .15s;
    white-space: nowrap;
  }
  .arc-nav__cta:hover { transform: translateY(-2px); }

  /* ---- HERO ---- */
  .arc-hero {
    position: relative; z-index: 2;
    padding: clamp(48px, 7vw, 110px) clamp(16px, 4vw, 56px) clamp(56px, 8vw, 120px);
    overflow: clip;
  }

  .arc-hero__bg-num {
    position: absolute;
    right: -0.05em; top: -0.05em;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(160px, 30vw, 440px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in oklab, var(--arc-pink) 10%, transparent);
    pointer-events: none; user-select: none;
    letter-spacing: -0.04em;
  }

  .arc-hero__grid {
    position: relative;
    display: grid; grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
    max-width: 1400px; margin: 0 auto;
  }
  @media (min-width: 1040px) {
    .arc-hero__grid { grid-template-columns: 1.25fr 1fr; align-items: center; }
  }

  .arc-hero__eyebrow {
    font-family: "Share Tech Mono", monospace;
    font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--arc-pink); text-shadow: var(--glow-pink);
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 12px;
  }
  .arc-hero__eyebrow::before {
    content: "▶";
    animation: arc-blink 1.2s step-start infinite;
  }

  .arc-hero__title {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(22px, 3.5vw, 48px);
    line-height: 1.45; letter-spacing: -0.01em; text-transform: uppercase;
    margin: 0 0 8px; color: var(--arc-white);
  }
  .arc-hero__title em {
    font-style: normal;
    color: var(--arc-gold); text-shadow: var(--glow-gold);
  }

  .arc-hero__tagline {
    font-size: clamp(13px, 1.2vw, 16px);
    color: var(--arc-dim); max-width: 48ch; line-height: 1.7;
    margin: 16px 0 36px;
    font-family: "Share Tech Mono", monospace;
  }

  .arc-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .arc-menu__item {
    display: flex; align-items: center; gap: 14px;
    font-family: "Press Start 2P", monospace;
    font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; padding: 14px 20px;
    border: 1px solid var(--arc-dimmer);
    background: var(--arc-dark);
    color: var(--arc-white);
    transition: border-color .2s, color .2s, text-shadow .2s, background .2s;
  }
  .arc-menu__item::before {
    content: "▷";
    color: var(--arc-dim);
    transition: color .2s;
    flex-shrink: 0;
  }
  .arc-menu__item:first-child {
    border-color: var(--arc-cyan);
    color: var(--arc-cyan); text-shadow: var(--glow-cyan);
    background: color-mix(in oklab, var(--arc-cyan) 6%, var(--arc-dark));
  }
  .arc-menu__item:first-child::before { content: "▶"; color: var(--arc-cyan); }
  .arc-menu__item:hover {
    border-color: var(--arc-lime); color: var(--arc-lime);
    text-shadow: var(--glow-lime);
    background: color-mix(in oklab, var(--arc-lime) 5%, var(--arc-dark));
  }
  .arc-menu__item:hover::before { content: "▶"; color: var(--arc-lime); }

  /* ---- SCREEN CARD ---- */
  .arc-screen {
    position: relative;
    background: var(--arc-panel);
    border: 2px solid var(--arc-cyan);
    box-shadow: var(--glow-cyan), inset 0 0 40px color-mix(in oklab, var(--arc-cyan) 5%, transparent);
    overflow: hidden;
  }
  .arc-screen::before {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      color-mix(in oklab, var(--arc-cyan) 3%, transparent) 3px,
      color-mix(in oklab, var(--arc-cyan) 3%, transparent) 4px
    );
  }

  .arc-screen__header {
    position: relative; z-index: 2;
    background: var(--arc-cyan);
    color: var(--arc-bg);
    padding: 10px 20px;
    font-family: "Press Start 2P", monospace;
    font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .arc-screen__blink { animation: arc-blink 1s step-start infinite; }

  .arc-screen__body { position: relative; z-index: 2; padding: 20px; }

  .arc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 11px 0; border-bottom: 1px dashed var(--arc-dimmer); gap: 16px;
  }
  .arc-row:last-of-type { border-bottom: none; }
  .arc-row__k {
    font-family: "Share Tech Mono", monospace;
    font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--arc-dim); flex-shrink: 0;
  }
  .arc-row__v {
    font-family: "Press Start 2P", monospace;
    font-size: 9px; text-align: right; color: var(--arc-white);
    line-height: 1.5;
  }
  .arc-row__v--hi { color: var(--arc-gold); text-shadow: var(--glow-gold); }

  .arc-countdown {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--arc-dimmer);
  }
  .arc-countdown__cell {
    background: var(--arc-bg);
    border: 1px solid var(--arc-pink);
    box-shadow: var(--glow-pink);
    padding: 10px 4px; text-align: center;
  }
  .arc-countdown__num {
    display: block;
    font-family: "Press Start 2P", monospace;
    font-size: 18px; color: var(--arc-pink);
    text-shadow: var(--glow-pink);
  }
  .arc-countdown__lbl {
    display: block; margin-top: 6px;
    font-family: "Share Tech Mono", monospace;
    font-size: 8px; letter-spacing: 0.2em; color: var(--arc-dim);
  }

  .arc-slots { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--arc-dimmer); }
  .arc-slots__bar {
    height: 12px; background: var(--arc-bg);
    border: 1px solid var(--arc-lime);
    position: relative; overflow: hidden; margin-bottom: 8px;
  }
  .arc-slots__fill {
    position: absolute; inset: 0; width: var(--fill, 70%);
    background: linear-gradient(90deg, var(--arc-lime), var(--arc-gold) 60%, var(--arc-orange));
    box-shadow: 0 0 12px color-mix(in oklab, var(--arc-lime) 50%, transparent);
  }
  .arc-slots__fill::after {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.2) 6px 8px);
  }
  .arc-slots__meta {
    display: flex; justify-content: space-between;
    font-family: "Share Tech Mono", monospace; font-size: 10px; color: var(--arc-dim);
  }

  /* ---- SCOREBOARD ---- */
  .arc-scoreboard {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px; margin: 0 clamp(16px, 4vw, 56px);
    background: var(--arc-dimmer);
    border: 1px solid var(--arc-dimmer);
    position: relative; z-index: 3;
  }
  .arc-score {
    background: var(--arc-dark);
    padding: 28px 24px;
    position: relative; overflow: hidden;
  }
  .arc-score::after {
    content: attr(data-label);
    position: absolute; bottom: -24px; right: -4px;
    font-family: "Press Start 2P", monospace;
    font-size: 72px; line-height: 1;
    color: color-mix(in oklab, var(--arc-dimmer) 50%, transparent);
    pointer-events: none; white-space: nowrap;
  }
  .arc-score__k {
    font-family: "Share Tech Mono", monospace;
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--arc-dim); margin-bottom: 12px;
  }
  .arc-score__v {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(20px, 2.5vw, 32px);
    color: var(--arc-gold); text-shadow: var(--glow-gold); line-height: 1;
  }
  .arc-score__v em { font-style: normal; color: var(--arc-cyan); text-shadow: var(--glow-cyan); }
  .arc-score__v small { font-size: 0.4em; color: var(--arc-dim); text-shadow: none; letter-spacing: 0.2em; }

  /* ---- STAGE SELECT ---- */
  .arc-stages {
    padding: clamp(56px, 7vw, 100px) clamp(16px, 4vw, 56px);
    position: relative; z-index: 2;
  }
  .arc-section-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px; margin-bottom: 48px;
  }
  .arc-section-head h2 {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(18px, 2.5vw, 32px);
    line-height: 1.4; margin: 0; text-transform: uppercase;
  }
  .arc-section-head h2 em {
    font-style: normal; color: var(--arc-lime);
    text-shadow: var(--glow-lime); display: block;
  }
  .arc-section-head p {
    max-width: 38ch; color: var(--arc-dim);
    font-family: "Share Tech Mono", monospace; font-size: 13px; line-height: 1.6; margin: 0;
  }

  .arc-level-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
  .arc-level {
    display: grid; grid-template-columns: 80px 1fr;
    border: 1px solid var(--arc-dimmer);
    background: var(--arc-dark);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
  }
  .arc-level:hover { border-color: var(--arc-lime); box-shadow: var(--glow-lime); }

  .arc-level__num {
    display: flex; align-items: center; justify-content: center;
    background: var(--arc-panel);
    border-right: 1px solid var(--arc-dimmer);
    font-family: "Press Start 2P", monospace;
    font-size: 18px;
    color: var(--arc-pink); text-shadow: var(--glow-pink);
    transition: background .25s, color .25s, text-shadow .25s, border-color .25s;
    padding: 28px 8px;
  }
  .arc-level:hover .arc-level__num {
    background: color-mix(in oklab, var(--arc-lime) 8%, var(--arc-panel));
    color: var(--arc-lime); text-shadow: var(--glow-lime);
    border-color: var(--arc-lime);
  }

  .arc-level__body { padding: 20px 24px; }
  .arc-level__body h3 {
    font-family: "Press Start 2P", monospace;
    font-size: 12px; margin: 0 0 12px; text-transform: uppercase; color: var(--arc-white);
  }
  .arc-level__meta { display: flex; gap: 8px; flex-wrap: wrap; }

  .arc-chip {
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.15em;
    padding: 4px 10px; border: 1px solid; text-transform: uppercase;
  }
  .arc-chip--cyan  { color: var(--arc-cyan);   border-color: var(--arc-cyan); }
  .arc-chip--pink  { color: var(--arc-pink);   border-color: var(--arc-pink); }
  .arc-chip--gold  { color: var(--arc-gold);   border-color: var(--arc-gold); }

  /* ---- CREDITS ---- */
  .arc-credits {
    border-top: 1px solid var(--arc-dimmer);
    border-bottom: 1px solid var(--arc-dimmer);
    padding: 20px 0 24px;
    overflow: hidden;
    background: var(--arc-dark);
    position: relative; z-index: 2;
  }
  .arc-credits__label {
    text-align: center;
    font-family: "Press Start 2P", monospace;
    font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--arc-dim); margin-bottom: 16px;
  }
  .arc-credits__track {
    display: flex; gap: 64px; width: max-content;
    animation: arc-scroll 40s linear infinite;
  }
  @keyframes arc-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) { .arc-credits__track { animation: none; } }
  .arc-credits__item {
    font-family: "Press Start 2P", monospace;
    font-size: 10px; color: var(--arc-dim);
    white-space: nowrap; letter-spacing: 0.1em;
  }
  .arc-credits__item::before { content: "◈  "; color: var(--arc-pink); }

  /* ---- INSERT COIN (CTA) ---- */
  .arc-insert {
    position: relative; z-index: 2;
    margin: clamp(56px, 8vw, 100px) clamp(16px, 4vw, 56px);
    border: 2px solid var(--arc-pink);
    box-shadow: var(--glow-pink), inset 0 0 60px color-mix(in oklab, var(--arc-pink) 6%, transparent);
    background: var(--arc-panel);
    padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px);
    text-align: center;
    overflow: hidden;
  }
  .arc-insert::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
      90deg, transparent 0 48px,
      color-mix(in oklab, var(--arc-pink) 4%, transparent) 48px 50px
    );
  }

  .arc-insert__inner { position: relative; }

  .arc-insert__continue {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(20px, 4vw, 44px);
    text-transform: uppercase; color: var(--arc-white);
    margin: 0 0 8px;
  }
  .arc-insert__count {
    display: block;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(52px, 12vw, 120px);
    line-height: 1;
    color: var(--arc-gold); text-shadow: var(--glow-gold);
    margin: 8px 0 20px;
  }
  .arc-insert__sub {
    font-family: "Share Tech Mono", monospace;
    font-size: 14px; color: var(--arc-dim);
    max-width: 52ch; margin: 0 auto 36px; line-height: 1.6;
  }
  .arc-insert__coin {
    display: inline-block;
    font-family: "Press Start 2P", monospace;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--arc-bg); background: var(--arc-pink);
    padding: 18px 36px; text-decoration: none;
    box-shadow: var(--glow-pink), 0 6px 0 color-mix(in oklab, var(--arc-pink) 40%, black);
    transition: transform .15s, box-shadow .15s;
    animation: arc-blink-slow 2.2s step-start infinite;
  }
  .arc-insert__coin:hover {
    transform: translateY(-3px);
    animation: none;
    box-shadow: var(--glow-pink), 0 9px 0 color-mix(in oklab, var(--arc-pink) 40%, black);
  }
  .arc-insert__fine {
    display: block; margin-top: 18px;
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--arc-dim);
  }

  /* ---- FOOTER ---- */
  .arc-foot {
    padding: 32px clamp(16px, 4vw, 56px) 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    border-top: 1px solid var(--arc-dimmer);
    position: relative; z-index: 2;
  }
  .arc-foot::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--arc-pink), transparent);
    opacity: 0.45;
  }
  .arc-foot, .arc-foot a {
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--arc-dim); text-decoration: none;
  }
  .arc-foot a:hover { color: var(--arc-cyan); }

  /* ---- KEYFRAMES ---- */
  @keyframes arc-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes arc-blink-slow {
    0%, 74% { opacity: 1; }
    75%, 100% { opacity: 0; }
  }
  @keyframes arc-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--arc-cyan), 0 0 16px color-mix(in oklab, var(--arc-cyan) 50%, transparent); }
    50%       { box-shadow: 0 0 14px var(--arc-cyan), 0 0 32px color-mix(in oklab, var(--arc-cyan) 60%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
}


.arc-nav__org-logo { height: 30px; width: auto; display: block; background: rgba(255,255,255,0.92); padding: 2px 6px; border-radius: 0; }