/* ================================================================
   TinyTapper — styles.css
   ================================================================ */

:root {
  --bg-deep:    #0e0720;
  --bg-mid:     #160b38;
  --panel-bg:   rgba(10, 4, 28, 0.96);
  --panel-border: rgba(180, 140, 255, 0.28);
  --panel-text: #ede8ff;
  --panel-muted: #a898cc;
  --accent:     #c084fc;
  --accent-dim: rgba(192, 132, 252, 0.25);
  --accent-glow: rgba(192, 132, 252, 0.45);
  --modal-bg:   rgba(12, 5, 32, 0.90);
  --modal-border: rgba(192, 132, 252, 0.30);
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #1e0a4a 0%, var(--bg-deep) 60%);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}

/* ── Animated background canvas ──────────────────────────── */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

#bg-canvas[hidden] {
  display: none;
}

/* ── Stars background ─────────────────────────────────────── */
#stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 72%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 9%,  rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 44%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 82%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 61%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 14%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 7% 55%,  rgba(255,255,255,0.3) 0%, transparent 100%);
}

/* ── Playground ───────────────────────────────────────────── */
#playground {
  position: fixed;
  inset: 0;
  z-index: 1;
  outline: none;
}

/* ── Tapper characters ────────────────────────────────────── */
.tt-char {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  transform-origin: center center;
  will-change: transform, opacity;
  animation: ttPop var(--dur, 2.5s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tt-char.is-letter,
.tt-char.is-number {
  font-family: 'Arial Rounded MT Bold', 'Fredoka One', 'Nunito', 'Comic Sans MS', sans-serif;
  font-weight: 900;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 255, 255, 0.08);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
}

@keyframes ttPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.15);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.2);
  }
  18% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.92);
  }
  26% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.06);
  }
  33% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.88) translateY(-50px);
  }
}

/* ── Mouse trail sparkles ─────────────────────────────────── */
.tt-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: sparkleOut var(--sdur, 0.7s) ease-out forwards;
}

/* Four-point star variant */
.tt-sparkle.star {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes sparkleOut {
  0% {
    opacity: 1;
    transform: translate(var(--sx, -50%), var(--sy, -50%)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(var(--sx, -50%) + var(--vx, 0px)),
      calc(var(--sy, -50%) + var(--vy, 0px))
    ) scale(0.1);
  }
}

/* ── Welcome modal ────────────────────────────────────────── */
#welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#welcome-modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 1, 14, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 24px;
  padding: 32px 28px 28px;
  color: var(--panel-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  text-align: center;
  animation: modalAppear 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.modal-emoji {
  font-size: 3.8rem;
  line-height: 1;
  animation: floatBob 3s ease-in-out infinite;
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-10px) rotate(3deg); }
}

.modal-box h1 {
  font-size: clamp(2.2rem, 9vw, 3rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
  background: linear-gradient(135deg, #f0abfc 10%, #818cf8 50%, #38bdf8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-tagline {
  color: #c4b0e8;
  font-size: 1rem;
  line-height: 1.45;
}

.modal-info-block {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
}

.info-placeholder {
  color: rgba(180, 160, 220, 0.7);
  font-size: 0.84rem;
  margin-bottom: 10px;
  line-height: 1.4;
}

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.info-list li {
  font-size: 0.9rem;
  color: #d4c8f0;
  line-height: 1.35;
}

#start-btn {
  font: inherit;
  font-size: 1.18rem;
  font-weight: 700;
  color: #f5f0ff;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.32), rgba(129, 140, 248, 0.32));
  border: 1px solid rgba(216, 180, 254, 0.55);
  border-radius: 14px;
  padding: 14px 36px;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 20px rgba(192, 132, 252, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  position: relative;
  overflow: hidden;
}

#start-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 75%
  );
  transform: translateX(-200%);
  transition: transform 0.5s ease;
}

#start-btn:hover::after {
  transform: translateX(200%);
}

#start-btn:hover {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.48), rgba(129, 140, 248, 0.48));
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(192, 132, 252, 0.42);
}

#start-btn:active {
  transform: translateY(0);
}

.modal-parent-note {
  color: rgba(170, 150, 210, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

.modal-parent-note kbd {
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}

/* ── Admin / Parent panel ─────────────────────────────────── */
#admin-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 50;
  width: min(310px, calc(100vw - 24px));
  background: var(--panel-bg);
  color: var(--panel-text);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 12px 44px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: panelSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#admin-panel[hidden] {
  display: none;
}

@keyframes panelSlide {
  from {
    opacity: 0;
    transform: translateX(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-top h2 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--panel-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

#admin-close-x {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--panel-text);
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

#admin-close-x:hover {
  background: rgba(255, 255, 255, 0.18);
}

.admin-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--panel-muted);
  cursor: pointer;
}

.admin-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-row select {
  font: inherit;
  font-size: 0.82rem;
  /* Solid colour — transparent bg shows white in the OS dropdown list */
  background: #1a0e38;
  color: var(--panel-text);
  border: 1px solid rgba(192, 132, 252, 0.30);
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 115px;
  cursor: pointer;
  /* Custom arrow tinted to match the panel */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c084fc'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

/* Options panel — solid dark so text stays readable on all OSes */
.admin-row select option {
  background: #1a0e38;
  color: #ede8ff;
}

.admin-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

.admin-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-actions button {
  font: inherit;
  font-size: 0.82rem;
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  color: var(--panel-text);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  padding: 7px 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.admin-actions button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.admin-tip {
  color: rgba(160, 140, 200, 0.65);
  font-size: 0.74rem;
  line-height: 1.35;
  margin-bottom: 12px;
}

#admin-done {
  width: 100%;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--panel-text);
  background: linear-gradient(135deg, var(--accent-dim), rgba(129, 140, 248, 0.25));
  border: 1px solid rgba(192, 132, 252, 0.42);
  border-radius: 11px;
  padding: 9px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

#admin-done:hover {
  background: linear-gradient(135deg, var(--accent-glow), rgba(129, 140, 248, 0.4));
  box-shadow: 0 4px 16px rgba(192, 132, 252, 0.3);
}

/* ── Hold zone (top-left corner trigger) ─────────────────── */
#hold-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: 40;
  cursor: pointer;
}

#hold-arc {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity 0.2s;
  transform: rotate(-90deg);
}

#hold-zone.holding #hold-arc {
  opacity: 1;
}

.arc-track {
  fill: none;
  stroke: rgba(192, 132, 252, 0.2);
  stroke-width: 3;
}

.arc-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 113; /* 2π × 18 ≈ 113 */
  stroke-dashoffset: 113;
  transition: stroke-dashoffset 2s linear;
  filter: drop-shadow(0 0 4px var(--accent));
}

#hold-zone.holding .arc-fill {
  stroke-dashoffset: 0;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-box {
    padding: 24px 18px 22px;
    gap: 14px;
    border-radius: 18px;
  }

  .modal-emoji {
    font-size: 3rem;
  }

  #admin-panel {
    width: calc(100vw - 16px);
    left: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-emoji,
  #start-btn::after {
    animation: none;
    transform: none;
    transition: none;
  }

  .tt-char {
    animation-duration: 2s !important;
  }
}

/* ── Focus styles ─────────────────────────────────────────── */
#start-btn:focus-visible,
#admin-done:focus-visible,
#admin-close-x:focus-visible,
.admin-actions button:focus-visible,
.admin-row select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}