body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg-deep);
      background-image:
        radial-gradient(ellipse 80% 55% at 50% -5%, rgba(245, 185, 66, 0.16), transparent),
        radial-gradient(ellipse 40% 40% at 0% 100%, rgba(168, 85, 247, 0.1), transparent),
        radial-gradient(ellipse 40% 40% at 100% 100%, rgba(59, 130, 246, 0.1), transparent);
      color: var(--text);
      min-height: 100dvh;
      height: 100dvh;
      overflow: hidden;
      padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
      display: flex;
      flex-direction: column;
    }

    .header {
      text-align: center;
      flex-shrink: 0;
      margin-bottom: 0.5rem;
    }

    .header-tag {
      font-size: clamp(0.65rem, 1.4vw, 0.78rem);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-light);
      font-weight: 600;
    }

    .header h1 {
      font-family: 'Fredoka', sans-serif;
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      background: linear-gradient(180deg, #fff, var(--accent-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-top: 0.15rem;
    }

    .header-range {
      font-size: clamp(0.8rem, 1.8vw, 1rem);
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    .viewer-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 0.4rem;
      padding: 0.32rem 0.7rem;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--accent-light);
      background: rgba(245, 185, 66, 0.1);
      border: 1px solid rgba(245, 185, 66, 0.28);
    }

    .viewer-count-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);
    }

    .main {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto;
      gap: clamp(0.75rem, 2vh, 1.25rem);
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
    }

    @media (min-width: 900px) {
      .main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
      }
    }

    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: clamp(14px, 2vw, 22px);
      padding: clamp(1rem, 3vh, 2rem);
      min-height: 0;
    }

    .hero-label {
      font-size: clamp(0.75rem, 1.6vw, 0.95rem);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
      font-weight: 600;
    }

    .number-stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 900px;
    }

    .number-glow {
      position: absolute;
      width: min(90vw, 420px);
      height: min(90vw, 420px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 185, 66, 0.2), transparent 70%);
      opacity: 0;
      transition: opacity 0.35s;
    }

    .number-glow.active { opacity: 1; }

    .big-number {
      position: relative;
      width: min(75vw, 360px);
      height: min(75vw, 360px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: clamp(4rem, 18vw, 9rem);
      color: white;
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5) 0%, transparent 35%),
                  radial-gradient(circle at 38% 32%, var(--accent-light) 0%, var(--accent) 45%, #b45309 100%);
      box-shadow:
        inset -8px -14px 24px rgba(0, 0, 0, 0.4),
        inset 6px 6px 16px rgba(255, 255, 255, 0.25),
        0 0 40px var(--accent-glow),
        0 12px 40px rgba(0, 0, 0, 0.45);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .big-number::before {
      content: '';
      position: absolute;
      top: 10%;
      left: 16%;
      width: 30%;
      height: 16%;
      background: rgba(255, 255, 255, 0.42);
      border-radius: 50%;
    }

    .big-number span {
      position: relative;
      z-index: 1;
      line-height: 1;
      text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    .big-number.empty {
      font-size: clamp(3rem, 12vw, 5rem);
      color: var(--text-muted);
      background: radial-gradient(circle at 35% 28%, #475569, #1e293b);
      box-shadow: inset -6px -10px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .big-number.pop {
      animation: pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    .big-number.spinning {
      animation: ballSpin 0.42s linear infinite;
    }

    .number-glow.pulse {
      animation: glowPulse 0.55s ease-in-out infinite;
    }

    @keyframes ballSpin {
      0%   { transform: rotateY(0deg) rotateX(8deg) scale(1); }
      25%  { transform: rotateY(90deg) rotateX(-6deg) scale(1.03); }
      50%  { transform: rotateY(180deg) rotateX(8deg) scale(1); }
      75%  { transform: rotateY(270deg) rotateX(-6deg) scale(1.03); }
      100% { transform: rotateY(360deg) rotateX(8deg) scale(1); }
    }

    @keyframes glowPulse {
      0%, 100% { opacity: 0.65; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.06); }
    }

    @keyframes pop {
      0% { transform: scale(0.75); opacity: 0.5; }
      55% { transform: scale(1.08); }
      100% { transform: scale(1); opacity: 1; }
    }

    .hero-count {
      font-family: 'Fredoka', sans-serif;
      font-size: clamp(1.25rem, 3vw, 2rem);
      color: var(--accent-light);
      margin-top: clamp(0.75rem, 2vh, 1.25rem);
      text-shadow: 0 0 20px var(--accent-glow);
    }

    .hero-auto-timer {
      font-family: 'Fredoka', sans-serif;
      font-size: clamp(1.1rem, 2.6vw, 1.85rem);
      font-weight: 700;
      color: var(--accent-light);
      text-shadow: 0 0 22px var(--accent-glow);
      margin-top: clamp(0.5rem, 1.5vh, 0.85rem);
      min-height: 1.4em;
    }

    .hero-auto-timer[hidden] { display: none !important; }

    .hero-auto-timer.drawing {
      color: #fde68a;
      animation: glowPulse 0.55s ease-in-out infinite;
    }

    .hero-auto-timer.paused {
      color: #94a3b8;
      text-shadow: none;
    }

    .recent-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: clamp(14px, 2vw, 22px);
      padding: clamp(0.75rem, 1.5vh, 1rem);
      overflow: hidden;
    }

    .recent-panel h2 {
      font-size: clamp(0.7rem, 1.6vw, 0.85rem);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
      flex-shrink: 0;
    }

    .recent-grid {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1.2vw, 14px);
      align-content: flex-start;
      justify-content: center;
      padding: 0.35rem;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
    }

    .recent-grid::-webkit-scrollbar {
      width: 10px;
    }

    .recent-grid::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 8px;
    }

    .recent-grid::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--accent-light), var(--accent));
      border-radius: 8px;
    }

    .recent-num {
      position: relative;
      width: var(--giro-ball-small);
      height: var(--giro-ball-small);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: calc(var(--giro-ball-small) * 0.34);
      color: white;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.5) 0%, transparent 32%),
        radial-gradient(circle at 38% 32%, var(--accent-light) 0%, var(--accent) 45%, #b45309 100%);
      box-shadow:
        inset -4px -8px 14px rgba(0, 0, 0, 0.38),
        inset 4px 4px 10px rgba(255, 255, 255, 0.22),
        0 4px 14px rgba(0, 0, 0, 0.4);
    }

    .recent-num::before {
      content: '';
      position: absolute;
      top: 12%;
      left: 18%;
      width: 28%;
      height: 14%;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      pointer-events: none;
    }

    .recent-num.latest {
      box-shadow:
        inset -4px -8px 14px rgba(0, 0, 0, 0.38),
        inset 4px 4px 10px rgba(255, 255, 255, 0.28),
        0 0 0 3px var(--accent),
        0 0 22px var(--accent-glow),
        0 6px 18px rgba(0, 0, 0, 0.45);
      transform: scale(1.06);
      z-index: 1;
    }

    .recent-empty {
      color: var(--text-muted);
      font-size: 0.9rem;
      padding: 1rem;
      text-align: center;
      width: 100%;
    }

    .recent-num.wide {
      font-size: calc(var(--giro-ball-small) * 0.26);
    }

    @media (min-width: 1200px) {
      :root {
        --giro-ball-small: clamp(4rem, 5.5vw, 5.75rem);
      }
    }

    .admin-link {
      position: fixed;
      bottom: max(0.5rem, env(safe-area-inset-bottom));
      right: max(0.5rem, env(safe-area-inset-right));
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
      text-decoration: none;
      font-size: 1rem;
      opacity: 0.3;
    }