* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f2937; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  background-color: #f7f7fb;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Ctext x='6' y='50' font-family='Comic Sans MS, sans-serif' font-size='30' font-weight='700' fill='%23ffffff' fill-opacity='0.55' transform='rotate(-10 0 50)'%3Edoo doo%3C/text%3E%3C/svg%3E"),
    linear-gradient(160deg, #ffd6ec 0%, #e3c4fb 45%, #c2e9fb 100%);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-size: auto, cover;
}
.floaties { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.floaties span { position: absolute; font-size: 2rem; opacity: 0.55; animation: drift ease-in-out infinite; }
.floaties span:nth-child(1) { left: 6%;  top: 18%; animation-duration: 6s; }
.floaties span:nth-child(2) { left: 88%; top: 22%; animation-duration: 7s; animation-delay: .5s; }
.floaties span:nth-child(3) { left: 12%; top: 70%; animation-duration: 8s; animation-delay: 1s; }
.floaties span:nth-child(4) { left: 80%; top: 66%; animation-duration: 6.5s; animation-delay: .2s; }
.floaties span:nth-child(5) { left: 46%; top: 12%; animation-duration: 7.5s; animation-delay: 1.4s; }
.floaties span:nth-child(6) { left: 30%; top: 85%; animation-duration: 6.8s; animation-delay: .8s; }
.floaties span:nth-child(7) { left: 66%; top: 82%; animation-duration: 7.8s; animation-delay: 1.1s; }
.floaties span:nth-child(8) { left: 94%; top: 48%; animation-duration: 6.2s; animation-delay: .3s; }
@keyframes drift { 0%,100% { transform: translateY(10px) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }

.topbar { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 12px; }
.topbar h1 { font-size: 1.5rem; }
.back { color: #2563eb; text-decoration: none; font-size: 1rem; }

.screen { width: 100%; max-width: 480px; padding: 18px 16px 24px; text-align: center;
  background: rgba(255, 255, 255, 0.74); border-radius: 22px; margin: 8px 16px 28px;
  box-shadow: 0 12px 34px rgba(80, 40, 120, 0.16);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.how { color: #6b5b86; margin-bottom: 10px; font-size: .95rem; }
.hearts { font-size: 1.4rem; height: 1.6rem; margin-bottom: 12px; letter-spacing: 2px; }

/* solved category bands */
.solved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.band { border-radius: 16px; padding: 8px 10px; color: #2b2240; font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); animation: drop-in .45s cubic-bezier(.18,1.25,.4,1) both; }
.band .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.band .row { font-size: 2rem; margin-top: 2px; }

/* tile grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(2rem, 11vw, 3rem); background: #fff; border-radius: 16px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.10); user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  animation: pop-in .4s cubic-bezier(.18,1.25,.4,1) both; }
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: scale(.96); }
.tile.sel { background: #6a4ea0; transform: scale(1.04); box-shadow: 0 10px 22px rgba(80,40,120,.35); }
.tile.shake { animation: shake .45s; }

.controls { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ctrl { font-family: inherit; font-size: 1rem; font-weight: 700; border: none; cursor: pointer;
  padding: 12px 20px; border-radius: 999px; background: #fff; color: #6a4ea0;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform .12s ease, opacity .12s ease; }
.ctrl:active { transform: scale(.96); }
.ctrl.primary { background: #6a4ea0; color: #fff; }
.ctrl:disabled { opacity: .45; cursor: default; }

.msg { min-height: 1.5rem; margin-top: 14px; font-size: 1.05rem; font-weight: 700; color: #6a4ea0; }

@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@media (prefers-reduced-motion: reduce) { .tile, .band { animation: none; } }

/* result modal (shared celebrate.mjs ids) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: #fff; border-radius: 20px; padding: 24px; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.result-img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; }
.result-msg { font-size: 1.5rem; font-weight: 700; margin: 14px 0 6px; }
.result-answer { color: #6b7280; margin-bottom: 14px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.start { font-size: 1.3rem; padding: 16px 40px; border: none; border-radius: 16px; background: #22c55e; color: #fff; cursor: pointer; }
.confetti { position: fixed; top: -20px; font-size: 1.4rem; pointer-events: none; animation: fall 2.2s linear forwards; z-index: 50; }
@keyframes fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } }