* { box-sizing: border-box; margin: 0; padding: 0; }
[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;
}
/* Decorative drifting shapes — non-interactive and behind all content. */
.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: 520px; display: flex; align-items: center;
  justify-content: space-between; padding: 16px; gap: 12px;
}
.topbar h1 { font-size: 1.6rem; }
.back { color: #2563eb; text-decoration: none; font-size: 1rem; }
.hint {
  font-size: 1rem; padding: 8px 14px; border: none; border-radius: 10px;
  background: #fde68a; cursor: pointer;
}
.screen { width: 100%; max-width: 520px; padding: 24px 16px; 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); }
.screen h2 { margin: 18px 0 10px; font-size: 1.2rem; }
.levels, .modes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.level-btn, .mode-btn {
  font-size: 1.1rem; padding: 14px 18px; border: 2px solid #d1d5db;
  border-radius: 14px; background: #fff; cursor: pointer; min-width: 96px;
}
.level-btn.selected, .mode-btn.selected { border-color: #2563eb; background: #dbeafe; }
.daily-status { margin: 12px 0; color: #6b7280; min-height: 1.2em; }
.start {
  margin-top: 22px; font-size: 1.3rem; padding: 16px 40px; border: none;
  border-radius: 16px; background: #22c55e; color: #fff; cursor: pointer;
}
.board { display: grid; gap: 8px; justify-content: center; margin: 16px auto; }
.row { display: grid; gap: 8px; grid-auto-flow: column; justify-content: center; }
.tile {
  width: 56px; height: 56px; border: 2px solid #d1d5db; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; text-transform: uppercase;
}
.tile.correct { background: #22c55e; border-color: #22c55e; color: #fff; }
.tile.present { background: #eab308; border-color: #eab308; color: #fff; }
.tile.absent  { background: #9ca3af; border-color: #9ca3af; color: #fff; }
.keyboard { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 12px; }
.krow { display: flex; gap: 6px; }
.key {
  min-width: 34px; height: 52px; padding: 0 10px; border: none; border-radius: 8px;
  background: #e5e7eb; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.key.wide { min-width: 64px; font-size: 0.85rem; }
.key.correct { background: #22c55e; color: #fff; }
.key.present { background: #eab308; color: #fff; }
.key.absent  { background: #9ca3af; color: #fff; }
.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; }
.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; }
}