:root {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: #493124;
  background: #fff1d9;
  color-scheme: light;
  --fur: #c98550;
  --outline: #754628;
  --cream: #ffe0a6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 32%, #fffbef 0%, #fff1d9 66%, #fce3b7 100%);
}

.app { max-width: 600px; margin: auto; }
.screen {
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(12px, 3svh, 26px);
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
}
h1, h2, p { margin: 0; }
h1 { font-size: clamp(38px, 11vw, 64px); line-height: 1.13; text-align: center; }
h2 { font-size: clamp(17px, 5vw, 26px); text-align: center; }
small { font-weight: 800; letter-spacing: .11em; color: #77513a; }

button {
  font: inherit;
  font-weight: 800;
  min-height: 48px;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 3px solid #493124; outline-offset: 4px; }
.primary {
  min-width: min(235px, 76vw);
  padding: 12px 24px;
  border-radius: 32px;
  background: #156c60;
  color: #fff;
  box-shadow: 0 4px #0e5148;
  font-size: 23px;
}
.secondary { padding: 8px 18px; color: #493124; background: #fff9ec; border-radius: 24px; }
.primary:active { transform: translateY(2px); box-shadow: 0 2px #0e5148; }

.title-art { position: relative; width: min(60vw, 35svh, 236px); aspect-ratio: 1; }
.title-bear, .bear {
  position: relative;
  isolation: isolate;
  background: var(--fur);
  border: 4px solid var(--outline);
  box-shadow: inset 0 -10px #ae6a3f;
}
.title-bear { position: absolute; inset: 12% 4% 7%; border-radius: 49% 49% 44% 44%; }
.ear { position: absolute; z-index: -1; width: 23%; aspect-ratio: 1; top: -11%; border-radius: 50%; border: 4px solid var(--outline); background: var(--fur); }
.ear::after { content: ""; position: absolute; inset: 19%; border-radius: 50%; background: #efac82; }
.ear.left { left: 3%; }
.ear.right { right: 3%; }
.eye { position: absolute; width: 6%; height: 10%; border-radius: 50%; background: #41251c; top: 35%; }
.eye.left { left: 29%; }
.eye.right { right: 29%; }
.muzzle { position: absolute; inset: 51% 27% 13%; border-radius: 50%; background: var(--cream); }
.muzzle::before, .nose { background: #503024; border-radius: 45% 45% 60% 60%; }
.muzzle::before { content: ""; position: absolute; inset: 13% 33% 57%; }
.muzzle::after { content: ""; position: absolute; inset: 35% 28% 19%; border-bottom: 3px solid #503024; border-radius: 50%; }
.title-brush { position: absolute; width: 55%; right: -10%; bottom: 18%; transform: rotate(55deg); }
.title-brush img { display: block; width: 100%; }
.title-brush::after { content: ""; position: absolute; width: 27%; aspect-ratio: 1; right: 20%; bottom: -25%; background: var(--fur); border: 3px solid var(--outline); border-radius: 50%; }

.play-header { width: 100%; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 6px; padding: 0 8px; }
.back { padding: 0; font-size: 26px; }
.bear { width: 100%; height: clamp(200px, 53svh, 375px); margin-top: clamp(12px, 3svh, 30px); border-radius: 42% 42% 24% 24% / 31% 31% 18% 18%; user-select: none; }
.bear .eye { top: 14%; }
.nose { position: absolute; top: 21%; left: 45%; width: 10%; height: 8%; }
.mouth {
  position: absolute;
  inset: 31% -3px 7%;
  overflow: hidden;
  border: 4px solid #66352f;
  border-radius: 28% 28% 31% 31% / 23% 23% 31% 31%;
  background: radial-gradient(ellipse 35% 28% at 50% 100%, #e88f8d 98%, transparent), #773f49;
  touch-action: none;
}
.teeth { position: absolute; inset-inline: 1%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; height: 42%; }
.teeth.top { top: -1px; }
.teeth.bottom { bottom: -1px; }
.tooth { position: relative; border: 1px solid #ead7bc; background: #fffdfa; box-shadow: inset 0 0 0 3px #fff7e6; }
.top .tooth { border-radius: 0 0 40% 40%; }
.bottom .tooth { border-radius: 40% 40% 0 0; }
.tooth:first-child, .tooth:last-child { height: 82%; }
.bottom .tooth { align-self: end; }
.dirt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
}
.dirt::before {
  content: "";
  position: absolute;
  inset: 24% 13%;
  background: #d49b43;
  border-radius: 46% 59% 43% 58%;
  opacity: var(--opacity, 1);
}
.dirt.germ::before { background: #438365; border-radius: 42%; }
.dirt.germ::after { content: "••"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; opacity: var(--opacity, 1); }
.brush, .effects { position: absolute; pointer-events: none; z-index: 2; }
.effects { inset: 0; }
.brush { width: clamp(105px, 28vw, 150px); transform: translate(-19%, -33%); }
.foam, .pop { position: absolute; transform: translate(-50%, -50%); }
.foam { width: 18px; height: 18px; border-radius: 50%; background: #edffff; border: 2px solid #b9e3e0; box-shadow: 9px -5px 0 -3px #fff; animation: fade .45s ease-out both; }
.pop { color: #ffe0a0; text-shadow: 0 1px 3px #794f26; font-size: 34px; animation: pop .55s ease-out both; }
.bear.done .eye { background: transparent; border-top: 4px solid #41251c; border-radius: 50%; }
.bear.done .mouth { border-radius: 36% 36% 46% 46% / 29% 29% 45% 45%; }
.actions { display: grid; justify-items: center; gap: 12px; }
@keyframes fade { to { opacity: 0; transform: translate(-70%, -90%) scale(1.4); } }
@keyframes pop { to { opacity: 0; transform: translate(-40%, -150%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .foam, .pop { animation: none; }
}