:root {
      color-scheme: dark;
      --bg: #070708;
      --text: #f2f0ea;
      --muted: rgba(242, 240, 234, 0.42);
      --line: rgba(242, 240, 234, 0.11);
      --x: 50%;
      --y: 48%;
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #070708;
      color: var(--text);
      font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      isolation: isolate;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
    }

    body::before {
      background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,0.052), transparent 28rem),
        radial-gradient(circle at 50% 110%, rgba(156,142,103,0.055), transparent 42rem),
        linear-gradient(180deg, #0a0a0d 0%, #070708 55%, #040405 100%);
    }

    body::after {
      z-index: -1;
      opacity: 0;
      background:
        radial-gradient(
          34rem circle at var(--x) var(--y),
          rgba(245, 238, 216, 0.105),
          rgba(245, 238, 216, 0.036) 18%,
          rgba(245, 238, 216, 0.012) 34%,
          transparent 62%
        );
      transition: opacity 700ms ease;
    }

    body.pointer-active::after { opacity: 1; }

    main {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(0.72rem, 2.4vh, 1.7rem);
      transform-style: preserve-3d;
    }

    .mark {
      position: relative;
      display: inline-block;
      padding: 1.12rem 1.72rem;
      filter: drop-shadow(0 1.4rem 3rem rgba(0,0,0,0.34));
    }

    .rule {
      position: absolute;
      left: 50%;
      display: block;
      width: 5.4rem;
      height: 1px;
      background: rgba(242, 240, 234, 0.24);
      box-shadow:
        -2.6rem 0 1.8rem rgba(242, 240, 234, 0.02),
         2.6rem 0 1.8rem rgba(242, 240, 234, 0.02),
         0 0 1rem rgba(242, 240, 234, 0.035);
      opacity: 0;
      transform: translateX(-50%) scaleX(0);
      -webkit-transform: translateX(-50%) scaleX(0);
      transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      animation: ruleReveal 1300ms cubic-bezier(.2,.8,.2,1) 480ms forwards;
    }

    .rule-top { top: 0; }
    .rule-bottom { bottom: 0; animation-delay: 620ms; }

    h1 {
      margin: 0;
      font-size: clamp(1.35rem, 2vw, 1.9rem);
      font-weight: 400;
      letter-spacing: 0.28em;
      line-height: 1;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(8px) scale(0.985);
      text-shadow: 0 0 28px rgba(242,240,234,0.035);
      animation: nameReveal 1200ms cubic-bezier(.18,.84,.22,1) 180ms forwards;
    }

    .domain {
      margin-top: 0.88rem;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.24em;
      color: var(--muted);
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(5px);
      animation: detailReveal 900ms ease-out 820ms forwards;
    }

    .glint {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12rem;
      height: 12rem;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(242,240,234,0.035), transparent 58%);
      opacity: 0;
      pointer-events: none;
      animation: glintSettle 1700ms ease-out 520ms forwards;
    }

    .arcade-panel {
      --stage-w: clamp(154px, 29vmin, 188px);
      --stage-h: calc(var(--stage-w) * 1.62);
      --control: clamp(1.62rem, 4.6vmin, 2.05rem);
      width: calc(var(--stage-w) + (var(--control) * 2) + 2.7rem);
      max-width: calc(100vw - 1.2rem);
      margin-top: clamp(0.82rem, 2.2vh, 1.35rem);
      padding: 0.72rem 0.72rem 0.66rem;
      border: 1px solid rgba(242, 240, 234, 0.085);
      border-radius: 1.08rem;
      background:
        radial-gradient(circle at 50% 0%, rgba(242, 240, 234, 0.052), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.013));
      box-shadow:
        0 1.4rem 4rem rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
      opacity: 0;
      transform: translateY(7px) scale(0.99);
      animation: panelReveal 900ms cubic-bezier(.18,.84,.22,1) 1120ms forwards;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }

    .arcade-panel:focus-visible {
      outline: 1px solid rgba(242, 240, 234, 0.28);
      outline-offset: 0.28rem;
    }

    .arcade-meta,
    .arcade-status,
    .arcade-menu,
    .arcade-ideas,
    .arcade-button {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .arcade-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 0.5rem;
      font-size: 0.55rem;
      letter-spacing: 0.2em;
      line-height: 1;
      color: rgba(242, 240, 234, 0.48);
      text-transform: uppercase;
    }

    .arcade-score {
      min-width: 3.8rem;
      text-align: right;
      color: rgba(242, 240, 234, 0.64);
      font-variant-numeric: tabular-nums;
    }

    .arcade-menu {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.34rem;
      margin-bottom: 0.52rem;
    }

    .arcade-tab {
      appearance: none;
      border: 1px solid rgba(242, 240, 234, 0.065);
      border-radius: 999px;
      padding: 0.39rem 0.42rem 0.38rem;
      background: rgba(255, 255, 255, 0.018);
      color: rgba(242, 240, 234, 0.34);
      cursor: pointer;
      font-size: clamp(0.39rem, 1.35vw, 0.49rem);
      letter-spacing: 0.105em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-tap-highlight-color: transparent;
      transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .arcade-tab:hover,
    .arcade-tab:focus-visible {
      color: rgba(242, 240, 234, 0.62);
      border-color: rgba(242, 240, 234, 0.13);
      outline: none;
    }

    .arcade-tab.is-active {
      color: rgba(242, 240, 234, 0.76);
      border-color: rgba(242, 240, 234, 0.19);
      background:
        radial-gradient(circle at 50% 0%, rgba(242, 240, 234, 0.055), transparent 82%),
        rgba(255, 255, 255, 0.031);
    }

    .arcade-stage {
      display: grid;
      grid-template-columns: var(--control) var(--stage-w) var(--control);
      align-items: stretch;
      justify-content: center;
      gap: 0.36rem;
    }

    .arcade-canvas-wrap {
      position: relative;
      width: var(--stage-w);
      height: var(--stage-h);
    }

    .arcade-canvas {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 0.62rem;
      background: rgba(6, 6, 7, 0.7);
      box-shadow:
        inset 0 0 0 1px rgba(242, 240, 234, 0.055),
        inset 0 1.2rem 2.2rem rgba(255, 255, 255, 0.018),
        inset 0 -1.4rem 2rem rgba(0, 0, 0, 0.34);
    }

    .arcade-controls {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 0.36rem;
      min-height: var(--stage-h);
    }

    .arcade-button {
      width: var(--control);
      min-height: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(242, 240, 234, 0.075);
      border-radius: 0.54rem;
      padding: 0;
      background:
        radial-gradient(circle at 50% 18%, rgba(242, 240, 234, 0.052), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.011));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42);
      color: rgba(242, 240, 234, 0.42);
      font-size: clamp(0.62rem, 2.45vmin, 0.86rem);
      line-height: 1;
      cursor: pointer;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
    }

    .arcade-button:active,
    .arcade-button.is-pressed {
      transform: translateY(1px) scale(0.98);
      border-color: rgba(242, 240, 234, 0.16);
      background:
        radial-gradient(circle at 50% 20%, rgba(242, 240, 234, 0.10), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
      color: rgba(242, 240, 234, 0.72);
    }

    .arcade-button:focus-visible {
      outline: 1px solid rgba(242, 240, 234, 0.22);
      outline-offset: 0.15rem;
    }

    .arcade-button span { pointer-events: none; transform: translateY(-0.02rem); }

    .arcade-primary {
      width: 100%;
      min-height: clamp(1.35rem, 4.2vmin, 1.75rem);
      margin-top: 0.36rem;
      border-radius: 0.56rem;
      font-size: 0.48rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .arcade-status {
      min-height: 0.64rem;
      margin-top: 0.5rem;
      font-size: 0.49rem;
      letter-spacing: 0.17em;
      line-height: 1;
      color: rgba(242, 240, 234, 0.34);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .arcade-ideas {
      margin-top: 0.52rem;
      color: rgba(242, 240, 234, 0.26);
      font-size: 0.47rem;
      letter-spacing: 0.14em;
      line-height: 1.35;
      text-transform: uppercase;
    }

    @media (max-width: 520px), (pointer: coarse) {
      main { padding: clamp(0.55rem, 1.7vh, 1.1rem); }
      .mark { padding: 0.95rem 1.45rem; }
      .domain { margin-top: 0.78rem; }
      .arcade-panel {
        --stage-w: clamp(148px, 42vw, 176px);
        --control: clamp(1.78rem, 8.4vw, 2.22rem);
        padding: 0.62rem;
        border-radius: 0.94rem;
      }
      .arcade-stage,
      .arcade-controls { gap: 0.32rem; }
      .arcade-button {
        border-radius: 0.62rem;
        color: rgba(242, 240, 234, 0.52);
      }
      .arcade-menu { gap: 0.28rem; }
      .arcade-tab { padding-inline: 0.28rem; }
      .arcade-ideas { display: none; }
    }

    @media (max-height: 660px) {
      .mark { transform: scale(0.92); margin-bottom: -0.28rem; }
      .arcade-panel { --stage-w: clamp(136px, 26vmin, 164px); margin-top: 0.42rem; }
      .arcade-ideas { display: none; }
    }

    @keyframes panelReveal {
      from { opacity: 0; transform: translateY(7px) scale(0.99); filter: blur(2px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes nameReveal {
      0% { opacity: 0; transform: translateY(8px) scale(0.985); letter-spacing: 0.32em; filter: blur(3px); }
      55% { opacity: 1; filter: blur(0); }
      100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.18em; filter: blur(0); }
    }

    @keyframes detailReveal {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes ruleReveal {
      from { opacity: 0; transform: translateX(-50%) scaleX(0); -webkit-transform: translateX(-50%) scaleX(0); }
      to { opacity: 1; transform: translateX(-50%) scaleX(1); -webkit-transform: translateX(-50%) scaleX(1); }
    }

    @keyframes glintSettle {
      from { opacity: 0; transform: translate(-50%, -47%) scale(0.84); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      h1, .domain, .rule, .glint, .arcade-panel { opacity: 1; transform: none; -webkit-transform: none; }
      .rule { transform: translateX(-50%) scaleX(1); -webkit-transform: translateX(-50%) scaleX(1); }
      body::after { display: none; }
    }


.arcade-play-counts {
  width: 100%;
  margin: 0.46rem auto 0;
  display: grid;
  grid-template-columns: 0.72fr repeat(4, minmax(0, 1fr));
  gap: 0.22rem;
  align-items: stretch;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.play-counts-label,
.play-count {
  min-width: 0;
  min-height: 1.38rem;
  border: 1px solid rgba(242, 240, 234, 0.048);
  border-radius: 0.48rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.play-counts-label {
  display: grid;
  place-items: center;
  color: rgba(242, 240, 234, 0.25);
  font-size: 0.38rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

.play-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.18rem 0.1rem 0.16rem;
}

.play-count-name {
  max-width: 100%;
  color: rgba(242, 240, 234, 0.26);
  font-size: 0.34rem;
  letter-spacing: 0.13em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.play-count-value {
  color: rgba(242, 240, 234, 0.66);
  font-size: 0.64rem;
  letter-spacing: 0.035em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px), (pointer: coarse) {
  .arcade-play-counts {
    margin-top: 0.4rem;
    gap: 0.18rem;
  }
  .play-counts-label,
  .play-count {
    min-height: 1.26rem;
    border-radius: 0.42rem;
  }
  .play-counts-label {
    font-size: 0.33rem;
    letter-spacing: 0.125em;
  }
  .play-count-name {
    font-size: 0.31rem;
  }
  .play-count-value {
    font-size: 0.58rem;
  }
}