:root {
      --bg1: #ff00a8;
      --bg2: #00e5ff;
      --bg3: #ffe600;
      --ink: #10002b;
      --lime: #b8ff00;
      --pink: #ff4ecd;
      --blue: #1a4dff;
      --glass: rgba(255,255,255,0.2);
      --glass-border: rgba(255,255,255,0.45);
      --panel: rgba(255,255,255,0.78);
      --shadow: 10px 10px 0 rgba(0,0,0,0.18);
      --tap: 56px;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    html, body {
      margin: 0;
      min-height: 100%;
      font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
      color: var(--ink);
      overflow-x: hidden;
      cursor: crosshair;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 16%),
        radial-gradient(circle at 80% 10%, rgba(255,255,255,0.35), transparent 18%),
        linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg3), #7bff00, #ff7a00);
      background-size: 100% 100%, 100% 100%, 400% 400%;
      animation: bgShift 12s ease infinite;
    }

    body.party-tilt {
      animation: bgShift 12s ease infinite, bodyTilt 1.6s ease-in-out infinite;
      transform-origin: center center;
    }

    @keyframes bgShift {
      0% { background-position: 0% 0%, 0% 0%, 0% 50%; }
      50% { background-position: 0% 0%, 0% 0%, 100% 50%; }
      100% { background-position: 0% 0%, 0% 0%, 0% 50%; }
    }

    @keyframes bodyTilt {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(0.4deg); }
      75% { transform: rotate(-0.4deg); }
    }

    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0.25; }
    }

    @keyframes spinMadness {
      from { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.12); }
      to { transform: rotate(360deg) scale(1); }
    }

    @keyframes wobble {
      0%, 100% { transform: translateX(0) rotate(0); }
      20% { transform: translateX(-4px) rotate(-1deg); }
      40% { transform: translateX(6px) rotate(1deg); }
      60% { transform: translateX(-6px) rotate(-1deg); }
      80% { transform: translateX(4px) rotate(1deg); }
    }

    @keyframes marqueeSlow {
      from { transform: translateX(100%); }
      to { transform: translateX(-130%); }
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(24px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0.18); }
      50% { box-shadow: 0 0 24px rgba(255,255,255,0.55), 0 12px 24px rgba(0,0,0,0.18); }
    }

    #loadingScreen {
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(45deg, #000, #000 14px, #2d0067 14px, #2d0067 28px);
      color: #fff;
      z-index: 5000;
      display: grid;
      place-items: center;
      padding: 20px;
      text-align: center;
    }

    .loading-card {
      width: min(100%, 720px);
      border: 6px solid #fff;
      background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
      padding: 24px 18px;
      box-shadow: 0 0 30px rgba(255,255,255,0.35);
    }

    .loading-card h1 {
      margin: 0 0 14px;
      font-size: clamp(2rem, 10vw, 4rem);
      line-height: 0.95;
      text-shadow: 4px 4px 0 #ff00a8;
    }

    .loading-bar {
      height: 26px;
      border: 4px solid #fff;
      background: rgba(255,255,255,0.1);
      margin: 20px 0 12px;
      position: relative;
      overflow: hidden;
    }

    .loading-fill {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #ffec00, #00ff9d, #00d0ff, #ff5be8);
      transition: width 0.2s linear;
    }

    #loadingText {
      font-size: 1rem;
      letter-spacing: 0.06em;
      animation: blink 0.85s steps(2) infinite;
    }

    #confettiCanvas, #cursorCanvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 900;
    }

    #popupLayer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1000;
    }

    main {
      position: relative;
      z-index: 2;
      padding: 12px 12px 88px;
      display: none;
    }

    .top-ribbon {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.86);
      border: 4px solid #000;
      overflow: hidden;
      margin-bottom: 12px;
      backdrop-filter: blur(8px);
    }

    .top-ribbon span {
      display: inline-block;
      padding: 10px 0;
      white-space: nowrap;
      font-weight: 900;
      font-size: 0.95rem;
      animation: marqueeSlow 18s linear infinite;
      text-transform: uppercase;
    }

    .page-shell {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      gap: 14px;
    }

    .orbit {
      display: flex;
      justify-content: center;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
      border: 4px solid #000;
      background: rgba(255,255,255,0.74);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .orbit-dot {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 3px solid #000;
      background: rgba(255,255,255,0.55);
      transform: scale(0.9);
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .orbit-dot.active {
      background: linear-gradient(135deg, #ff00a8, #ffe600);
      transform: scale(1.16);
      animation: pulseGlow 1.2s infinite;
    }

    .orbit-dot.done {
      background: linear-gradient(135deg, #7bff00, #00e5ff);
      transform: scale(1);
    }

    .whisper {
      position: sticky;
      bottom: 10px;
      z-index: 80;
      width: min(100%, 780px);
      margin: 0 auto;
      padding: 12px 16px;
      border: 4px solid #000;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 10px 26px rgba(0,0,0,0.18);
      font-weight: 900;
      text-align: center;
      backdrop-filter: blur(10px);
    }

    .hero, .panel, .modern-panel, #finale {
      border: 5px solid #000;
      background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.58));
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .hero {
      padding: 18px;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -80px -80px auto;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0));
      transform: rotate(18deg);
      pointer-events: none;
    }

    .stamp {
      display: inline-block;
      margin-bottom: 14px;
      background: #ffef00;
      border: 4px solid #000;
      padding: 10px 14px;
      font-weight: 900;
      transform: rotate(4deg);
      box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
    }

    .hero-love {
      display: inline-block;
      margin: 0 0 14px;
      padding: 10px 14px;
      background: #fff;
      border: 4px solid #000;
      box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero h1 {
      margin: 0 0 10px;
      font-size: clamp(2.2rem, 11vw, 5.6rem);
      line-height: 0.92;
      text-transform: uppercase;
      text-shadow: 3px 3px 0 #fff, 7px 7px 0 #ff00a8, 11px 11px 0 #00d0ff;
      animation: wobble 1.9s infinite;
    }

    .hero p {
      margin: 0;
      max-width: 62ch;
      font-size: 1rem;
      font-weight: 800;
    }

    .badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .badge {
      background: #fff;
      border: 3px solid #000;
      padding: 8px 12px;
      font-weight: 900;
      box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
    }

    .grid {
      display: grid;
      gap: 14px;
    }

    .panel, .modern-panel {
      padding: 16px;
      animation: riseIn 0.4s ease;
    }

    .modern-panel {
      background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
      backdrop-filter: blur(16px);
      border-radius: 28px;
      border-color: rgba(0,0,0,0.95);
    }

    .modern-panel::before {
      content: "MODERN INTERLUDE";
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      font-weight: 900;
      opacity: 0.7;
    }

    .panel h2, .modern-panel h2, #finale h2 {
      margin: 0 0 10px;
      text-transform: uppercase;
      font-size: 1.35rem;
      line-height: 1.05;
    }

    .panel p, .modern-panel p, #finale p {
      margin: 0 0 12px;
      font-size: 1rem;
      font-weight: 800;
    }

    .action-row {
      display: grid;
      gap: 10px;
      align-items: stretch;
    }

    button, .fake-button {
      appearance: none;
      border: 4px solid #000;
      background: linear-gradient(180deg, #fff, #ffd9f6);
      color: #000;
      min-height: var(--tap);
      padding: 14px 18px;
      font-weight: 900;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      border-radius: 16px;
      user-select: none;
      width: 100%;
    }

    button:active, .fake-button:active {
      transform: translate(2px, 2px);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    }

    .danger { background: linear-gradient(180deg, #ff9b9b, #ff3e7b); }
    .green { background: linear-gradient(180deg, #d7ff9f, #8cff00); }
    .blue { background: linear-gradient(180deg, #c1f0ff, #49d2ff); }

    .tiny-note {
      font-size: 0.95rem;
      font-weight: 800;
      opacity: 0.86;
    }

    .meter {
      margin-top: 14px;
      border: 4px solid #000;
      height: 28px;
      background: #fff;
      overflow: hidden;
      position: relative;
    }

    .meter-fill {
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #ff00a8, #00d9ff, #c8ff00, #ff8c00);
      transition: width 0.25s ease;
    }

    #meterLabel {
      margin-top: 8px;
      font-weight: 900;
    }

    .designer-meter {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      font-weight: 900;
    }

    #designerBar {
      width: 100%;
      height: 20px;
      background: #fff;
      border: 3px solid #000;
      overflow: hidden;
    }

    #designerBar span {
      display: block;
      width: 20%;
      height: 100%;
      background: linear-gradient(90deg, #ff55aa, #ffff00, #39ff14);
      transition: width 0.2s ease;
    }

    .small-grid {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .mini-card {
      border: 3px solid #000;
      background: rgba(255,255,255,0.84);
      padding: 12px;
      font-weight: 800;
      box-shadow: 5px 5px 0 rgba(0,0,0,0.16);
    }

    .status-box {
      border: 4px solid #000;
      background: rgba(0,0,0,0.86);
      color: #39ff14;
      padding: 14px;
      font-family: "Courier New", monospace;
      min-height: 118px;
      box-shadow: inset 0 0 0 2px #39ff14;
      border-radius: 12px;
    }

    .dodging-zone {
      position: relative;
      min-height: 240px;
      border: 4px dashed #000;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.1)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 16px, transparent 16px, transparent 32px);
      border-radius: 22px;
      padding: 14px;
    }

    #runnerBtn {
      position: absolute;
      left: 14px;
      top: 90px;
      z-index: 3;
      width: auto;
      min-width: 180px;
      max-width: calc(100% - 28px);
    }

    #finale {
      display: none;
      padding: 18px;
      border-style: ridge;
      border-width: 8px;
      animation: wobble 1s infinite;
    }

    .video-wrap {
      margin-top: 16px;
      position: relative;
      padding-top: 56.25%;
      border: 5px solid #000;
      background: #000;
      overflow: hidden;
    }

    .video-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .floating-emoji {
      position: fixed;
      pointer-events: none;
      z-index: 1;
      font-size: clamp(22px, 5vw, 42px);
      opacity: 0.9;
      animation: spinMadness 6s linear infinite;
      filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.18));
    }

    .popup {
      position: absolute;
      width: min(320px, calc(100vw - 18px));
      border: 4px solid #000;
      background: #fff;
      box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
      pointer-events: auto;
      overflow: hidden;
      animation: wobble 0.8s infinite;
      border-radius: 16px;
    }

    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      background: linear-gradient(90deg, #1f56ff, #b700ff, #ff006e);
      color: #fff;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 0.84rem;
      cursor: grab;
      touch-action: none;
    }

    .popup-body {
      padding: 14px;
      font-weight: 800;
    }

    .popup-close {
      border: 3px solid #fff;
      background: #ffeb3b;
      color: #000;
      min-height: 40px;
      width: auto;
      padding: 4px 10px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: none;
      border-radius: 10px;
    }

    .toast-stack {
      position: fixed;
      right: 10px;
      bottom: 78px;
      z-index: 1200;
      display: grid;
      gap: 10px;
      width: min(320px, calc(100vw - 20px));
      pointer-events: none;
    }

    .toast {
      background: rgba(255,255,255,0.94);
      border: 4px solid #000;
      padding: 12px;
      font-weight: 900;
      box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
      transform: translateY(12px);
      opacity: 0;
      animation: toastIn 0.25s forwards;
    }

    @keyframes toastIn {
      to { transform: translateY(0); opacity: 1; }
    }

    .secret-boot {
      font-family: "Courier New", monospace;
      background: #0011aa;
      color: #fff;
      padding: 16px;
      border: 5px solid #fff;
      margin-top: 12px;
      box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
      display: none;
    }

    .footer-chaos {
      text-align: center;
      padding: 12px 12px 4px;
      font-size: 0.95rem;
      font-weight: 900;
      animation: blink 1s infinite;
    }

    .reveal {
      display: none;
    }

    .reveal.visible {
      display: block;
      animation: riseIn 0.45s ease;
    }

    .glitch {
      position: relative;
      display: inline-block;
    }

    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;
      pointer-events: none;
    }

    .glitch::before {
      text-shadow: -2px 0 #00f0ff;
      transform: translate(2px, -1px);
      opacity: 0.7;
    }

    .glitch::after {
      text-shadow: 2px 0 #ff00a8;
      transform: translate(-2px, 1px);
      opacity: 0.7;
    }

    .focus-now {
      animation: pulseGlow 1.2s infinite;
    }

    @media (min-width: 760px) {
      main {
        padding: 16px 16px 100px;
      }

      .top-ribbon span {
        font-size: 1rem;
      }

      .grid.two {
        grid-template-columns: 1.1fr 0.9fr;
      }

      .action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .small-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .designer-meter {
        grid-template-columns: auto 1fr auto;
        align-items: center;
      }
    }

    @media (min-width: 980px) {
      .hero {
        padding: 28px;
      }

      .hero p {
        font-size: 1.08rem;
      }

      .toast-stack {
        bottom: 18px;
      }

      .whisper {
        bottom: 16px;
      }
    }