:root {
  --bg: #fef6fb;
  --ink: #4a3f6b;
  --ink-soft: #8a7fb0;
  --accent: #6a5cff;
  --accent-2: #2fd7c4;
  --accent-3: #ffc861;
  --button: #5b7cff;
  --button-dark: #4048d8;
  --button-shadow: #2a2a8f;
  --card: rgba(255, 255, 255, 0.72);
  --card-border: rgba(255, 255, 255, 0.9);
  --shadow: 0 20px 45px -20px rgba(120, 80, 160, 0.45);
  --radius: 26px;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Quicksand", system-ui, sans-serif;
  --font-title: "Pacifico", "Fredoka", cursive;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { overflow-x: hidden; }
img, svg, canvas { max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* No text selection or long-press copy callouts anywhere — game feel.
   The name input stays selectable and editable. touch-action: manipulation
   kills double-tap zoom without breaking taps or scrolling. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
input { -webkit-user-select: text; user-select: text; }
body.holding { cursor: grabbing; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(160deg, #fef6fb 0%, #eef4ff 55%, #f3fbff 100%);
  display: flex;
  flex-direction: column;
  /* "safe center" centers when content fits, but falls back to the top/left
     when it's too tall/wide — so nothing ever gets clipped out of reach. */
  align-items: safe center;
  justify-content: safe center;
  min-height: 100vh;        /* fallback for older browsers */
  min-height: 100dvh;       /* dynamic viewport on mobile (handles URL bar) */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Floating background blobs */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: float 14s ease-in-out infinite;
}
.blob--1 { width: 320px; height: 320px; background: var(--accent); top: -80px; left: -60px; }
.blob--2 { width: 280px; height: 280px; background: var(--accent-2); bottom: -90px; right: -50px; animation-delay: -4s; }
.blob--3 { width: 220px; height: 220px; background: var(--accent-3); top: 40%; right: 12%; animation-delay: -8s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-30px) translateX(20px) scale(1.08); }
}

/* Layout */
.page {
  position: relative;
  z-index: 1;
  width: min(540px, 92vw);
  max-width: 100%;
  min-width: 0;   /* don't let long text grow the flex item past the viewport */
  padding: max(40px, env(safe-area-inset-top)) 28px max(40px, env(safe-area-inset-bottom));
  text-align: center;
}

.hero { margin-bottom: 14px; }

.title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.15;
  margin: 0 0 10px;
  padding-bottom: 6px;
  overflow-wrap: break-word;
  background: linear-gradient(120deg, var(--accent) 0%, #8b5cf6 60%, #6a8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  font-weight: 600;
}

/* Stage card */
.stage {
  margin-top: 28px;
  padding: 36px 26px 30px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.timer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 12vw, 4.2rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: transform 0.15s ease, color 0.2s ease;
}
.timer.is-running { color: var(--accent); }

/* The big button */
.big-button {
  position: relative;
  width: clamp(150px, 46vw, 200px);
  height: clamp(150px, 46vw, 200px);
  margin: 30px auto 8px;
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-display);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #a5b4ff 0%, var(--button) 45%, var(--button-dark) 100%);
  box-shadow:
    0 18px 0 var(--button-shadow),
    0 26px 30px -10px rgba(184, 53, 103, 0.55),
    inset 0 -6px 12px rgba(0,0,0,0.12),
    inset 0 8px 16px rgba(255,255,255,0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.big-button__label {
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(160, 40, 80, 0.4);
}
.big-button__label small {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.big-button__shine {
  position: absolute;
  top: 18px;
  left: 30px;
  width: 70px;
  height: 46px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  filter: blur(2px);
  transform: rotate(-25deg);
  z-index: 1;
  pointer-events: none;
}

/* Cute pulsing "press me" halo */
.big-button::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid rgba(106, 92, 255, 0.45);
  animation: pulse-ring 2.2s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.92); opacity: 0.7; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
.big-button.is-pressed::after { animation: none; opacity: 0; }

.big-button[hidden] { display: none; }
.big-button:hover { transform: translateY(-2px); }
.big-button:focus-visible {
  outline: 4px solid rgba(106, 140, 255, 0.5);
  outline-offset: 6px;
}

.big-button.is-pressed {
  transform: translateY(16px);
  box-shadow:
    0 2px 0 var(--button-shadow),
    0 6px 12px -6px rgba(184, 53, 103, 0.5),
    inset 0 -3px 8px rgba(0,0,0,0.18),
    inset 0 6px 14px rgba(255,255,255,0.4);
}

.hint {
  margin: 22px auto 0;
  max-width: 320px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-weight: 600;
}

/* Try Again button */
.try-again {
  margin: 18px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent) 0%, #8b5cf6 55%, #6a8cff 100%);
  box-shadow: 0 12px 24px -8px rgba(91, 124, 255, 0.7);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  animation: pop 0.3s ease;
}
.try-again:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -8px rgba(91, 124, 255, 0.8); }
.try-again:active { transform: translateY(0); }
.try-again:focus-visible { outline: 4px solid rgba(106, 140, 255, 0.5); outline-offset: 3px; }
.try-again[hidden] { display: none; }

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Name box */
.namebox {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.namebox label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.namebox input {
  width: 160px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(255,255,255,0.8);
  border: 2px solid rgba(106, 92, 255, 0.35);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.namebox input::placeholder { color: var(--ink-soft); opacity: 0.6; letter-spacing: 0.06em; }
.namebox input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(106, 92, 255, 0.18);
}

/* Stats */
.stats {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.stat {
  flex: 1;
  min-width: 0;
  max-width: 160px;
  padding: 16px 12px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 18px;
}
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
}
.stat__label {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* Share button */
.share-btn {
  position: relative;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg, #a5b4ff 0%, var(--accent) 45%, #8b5cf6 100%);
  background-size: 180% 180%;
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 22px -8px rgba(91, 124, 255, 0.85);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background-position 0.4s ease;
}
/* little bouncing emoji */
.share-btn::before {
  content: "💖";
  display: inline-block;
  animation: heart-bounce 1.6s ease-in-out infinite;
}
@keyframes heart-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.15); }
}
.share-btn:hover {
  transform: translateY(-3px) rotate(-1.5deg);
  background-position: 100% 100%;
  box-shadow: 0 16px 28px -8px rgba(91, 124, 255, 0.9);
  animation: share-wiggle 0.5s ease;
}
@keyframes share-wiggle {
  0%, 100% { transform: translateY(-3px) rotate(-1.5deg); }
  30%      { transform: translateY(-3px) rotate(2deg); }
  60%      { transform: translateY(-3px) rotate(-2deg); }
}
.share-btn:active { transform: translateY(-1px) scale(0.97); }
.share-btn:focus-visible { outline: 4px solid rgba(106, 140, 255, 0.5); outline-offset: 3px; }

/* Ad slots — the inline script only loads the one size that fits this screen,
   so nothing is ever clipped or hidden. Centered overflow keeps wide banners
   visually centered in the viewport even though .page is narrower. */
.ad-slot {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Desktop side rails — only written to the page on screens ≥1220px wide,
   so they can never overlap the game. */
.ad-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.ad-rail--left { left: 20px; }
.ad-rail--right { right: 20px; }
@media (max-width: 1219px) {
  .ad-rail { display: none; }
}

/* About / how-to-play copy */
.about {
  margin-top: 28px;
  padding: 26px 24px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.about h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 18px 0 8px;
  color: var(--accent);
}
.about h2:first-child { margin-top: 0; }
.about p {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Footer */
.footer {
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
}
.footer .heart { color: var(--accent); }

/* Phones */
@media (max-width: 420px) {
  .page { padding-left: 18px; padding-right: 18px; }
  .stage { padding: 28px 18px 24px; }
  .namebox input { width: 140px; }
  .stat { padding: 12px 8px; }
  .stat__value { font-size: 1.3rem; }
  .blob { opacity: 0.35; }
}

/* Short / landscape screens: trim vertical whitespace so it fits */
@media (max-height: 640px) and (orientation: landscape) {
  .page { padding-top: 16px; padding-bottom: 16px; }
  .big-button { margin: 16px auto 4px; }
  .hint { margin-top: 14px; }
  .stage { margin-top: 16px; }
}

/* Large screens: a touch more breathing room */
@media (min-width: 1000px) {
  .page { width: min(580px, 60vw); }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
  max-width: 90vw;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Confetti */
.confetti {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 14px;
  z-index: 9;
  pointer-events: none;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .confetti { animation: none; }
  .big-button::after { animation: none; opacity: 0; }
  .share-btn::before, .share-btn:hover { animation: none; }
}