:root {
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  --cream: #fff1df;
  --milk: #f9dfc9;
  --warm-grey: #8b766c;
  --peach: #dfa086;
  --rose: #96364e;
  --rose-light: #cb6272;
  --deep: #402a2d;
  --shadow: rgba(63, 36, 34, .28);
  --fog: .47;
  --blur: 8px;
  --beat-duration: 810ms;
  --shake: 1;
  --tile-soft: 0px;
  font-family: "Comic Sans MS", "Marker Felt", "Segoe Print", "Kaiti SC", "STKaiti", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { min-height: 100%; margin: 0; }

body {
  color: var(--deep);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 7%, rgba(255, 206, 130, .34), transparent 18rem),
    radial-gradient(circle at 52% 48%, rgba(150, 54, 78, .18), transparent 24rem),
    linear-gradient(180deg, #6b4b4d 0%, #d99a81 42%, #f1cfb5 100%);
}

button, a { font: inherit; }
button { touch-action: manipulation; }

.app {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  padding-top: var(--eazo-safe-area-top);
  padding-bottom: var(--eazo-safe-area-bottom);
  display: flex;
  align-items: stretch;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

.steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 24%, rgba(255,255,255,.24), transparent 15rem),
    radial-gradient(ellipse at 86% 22%, rgba(255,231,204,.22), transparent 16rem),
    repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 1px, transparent 1px 18px);
  filter: blur(13px);
  opacity: .68;
  animation: steamBreathe 11s ease-in-out infinite alternate;
  z-index: -2;
}

.heartbeat-light {
  position: absolute;
  top: calc(var(--eazo-safe-area-top) - 28px);
  left: 50%;
  width: min(68vw, 19rem);
  aspect-ratio: 1 / .58;
  translate: -50% 0;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at 50% 8%, rgba(255, 219, 153, .98), rgba(255, 178, 105, .35) 33%, transparent 72%);
  filter: blur(2px);
  opacity: .78;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: bulbBeat var(--beat-duration) cubic-bezier(.2,.8,.2,1) infinite;
  z-index: -1;
}

.shell {
  width: min(100%, 31rem);
  padding: clamp(.55rem, 2.5vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 0;
}

.top-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3rem;
  padding-inline: .2rem;
}

.heart {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--rose);
  text-shadow: 0 0 calc(4px + var(--shake) * 2px) rgba(203, 98, 114, .35);
  font-size: clamp(1.05rem, 4.8vw, 1.35rem);
  letter-spacing: .02em;
  animation: roseBeat var(--beat-duration) ease-in-out infinite;
  white-space: nowrap;
}

.heart-mark {
  width: 1.15rem;
  height: 1.15rem;
  position: relative;
  transform: rotate(-45deg);
  background: var(--rose);
  box-shadow: 0 0 1rem rgba(150, 54, 78, .45);
  flex: 0 0 auto;
}
.heart-mark::before, .heart-mark::after {
  content: "";
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--rose);
}
.heart-mark::before { top: -.58rem; left: 0; }
.heart-mark::after { left: .58rem; top: 0; }

.lang {
  min-width: 6.25rem;
  min-height: 44px;
  border: 1px solid rgba(93, 61, 58, .2);
  border-radius: 999px;
  background: rgba(255, 241, 223, .58);
  color: #5d3d3a;
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 .55rem 1.3rem rgba(78, 48, 45, .12);
  cursor: pointer;
  white-space: nowrap;
}

.mirror-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: min(34rem, calc(100dvh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom) - 6.5rem));
  max-height: 48rem;
  display: grid;
  place-items: center;
  animation: sceneBeat var(--beat-duration) ease-in-out infinite;
}

.mirror {
  position: relative;
  width: min(100%, 26rem);
  height: 100%;
  min-height: 32rem;
  max-height: 45rem;
  border-radius: 2.1rem;
  overflow: hidden;
  border: clamp(8px, 2vw, 13px) solid rgba(255, 224, 195, .45);
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255, 222, 185, .38), transparent 19rem),
    linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,.03) 44%, rgba(98, 66, 67, .09)),
    #d6b8a8;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 4.2rem rgba(255,255,255,.25),
    0 1.6rem 3rem rgba(68, 42, 39, .28);
}

.mirror::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(255, 237, 218, .6), rgba(242, 192, 168, .18) 29%, transparent 44%),
    radial-gradient(ellipse at 50% 45%, rgba(75, 54, 55, .18), transparent 33%),
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 16% 82%, rgba(255,255,255,.22));
  filter: blur(var(--blur));
  opacity: .78;
  transition: filter .8s ease, opacity .8s ease;
}

.mirror.clear::before { --blur: 1px; opacity: .95; }

.reflection {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 42%;
  height: 60%;
  translate: -50% 0;
  opacity: .42;
  filter: blur(calc(var(--blur) * .75));
  transition: filter 1.2s ease, opacity 1.2s ease;
  pointer-events: none;
}
.mirror.clear .reflection { filter: blur(1px); opacity: .76; }
.head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(150deg, rgba(255,238,220,.78), rgba(181,137,120,.4));
  box-shadow: 0 0 2.5rem rgba(255,232,205,.42);
}
.body {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 72%;
  height: 69%;
  translate: -50% 0;
  border-radius: 45% 45% 17% 17%;
  background: linear-gradient(150deg, rgba(255,235,216,.52), rgba(159,114,106,.24));
}

.fog-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--fog);
  transition: opacity .75s ease;
  background:
    radial-gradient(ellipse at 0% 9%, rgba(255,255,255,.72), transparent 15rem),
    radial-gradient(ellipse at 102% 27%, rgba(255,255,255,.62), transparent 14rem),
    radial-gradient(ellipse at 50% 96%, rgba(255,255,255,.58), transparent 13rem),
    repeating-radial-gradient(circle at 38% 41%, rgba(255,255,255,.13) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.38));
  mix-blend-mode: screen;
}

.locked-line {
  position: absolute;
  inset: 1rem 1rem auto 1rem;
  min-height: 4.6rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: .25rem .35rem;
  padding: .65rem .55rem;
  color: var(--rose);
  z-index: 4;
  text-align: center;
  text-shadow: 0 0 .85rem rgba(150,54,78,.28);
  pointer-events: none;
}

.locked-word {
  display: inline-block;
  position: relative;
  font-size: clamp(1.08rem, 4.8vw, 1.55rem);
  line-height: 1.05;
  animation: wordLock .58s ease both;
  white-space: nowrap;
}
.locked-word::after {
  content: "";
  position: absolute;
  inset: -.2rem -.35rem;
  background: linear-gradient(100deg, transparent, rgba(255,245,231,.75), transparent);
  opacity: 0;
  animation: shine .7s ease .04s;
  border-radius: 999px;
}

.locked-line.shatter .locked-word { animation: shatter .48s ease both; }

.success-sentence {
  position: absolute;
  inset: 26% 1.4rem auto;
  z-index: 8;
  color: var(--rose);
  font-size: clamp(1.45rem, 7vw, 2.2rem);
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 0 1rem rgba(255,232,210,.7), 0 .08rem rgba(255,255,255,.5);
  animation: appearInk 1.1s ease both;
}

.tile-field {
  position: absolute;
  inset: 5.9rem .95rem 7.2rem .95rem;
  z-index: 5;
  filter: blur(var(--tile-soft));
  transition: filter .5s ease;
}

.tile {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: .35rem .64rem .42rem;
  border-radius: 999px 42% 999px 46%;
  background: rgba(255,255,255,.16);
  color: rgba(82, 58, 58, .9);
  font-size: clamp(1rem, 4.45vw, 1.28rem);
  line-height: 1.05;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 .25rem .65rem rgba(71,45,42,.05);
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: transform 1.55s cubic-bezier(.37,.02,.21,1), opacity .28s ease, filter .3s ease;
  animation: tremble calc(520ms - min(var(--shake) * 22ms, 240ms)) steps(2, end) infinite;
}
.tile:focus-visible, .lang:focus-visible, .plain-link:focus-visible, .result-actions button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rose-light);
  outline-offset: 3px;
}
.tile:disabled { opacity: .4; cursor: default; }
.tile.flying { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) scale(.72) rotate(0deg); }
.tile.wrong { filter: blur(1px); animation: wrongTap .38s ease both; }

.instruction {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 3.35rem;
  z-index: 4;
  text-align: center;
  color: rgba(74, 54, 52, .72);
  font-size: clamp(.94rem, 3.7vw, 1.05rem);
  line-height: 1.23;
  text-shadow: 0 1px rgba(255,255,255,.55);
  pointer-events: none;
}

.not-tonight {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  translate: -50% 0;
  z-index: 7;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .9rem;
  color: rgba(77, 56, 55, .64);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.attempts {
  position: absolute;
  top: .85rem;
  right: 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(78,56,54,.58);
  font-size: .94rem;
  z-index: 7;
  white-space: nowrap;
}

.result {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  background: rgba(255, 236, 218, .34);
  backdrop-filter: blur(5px);
}
.result.show { display: flex; }

.card {
  width: min(100%, 21.5rem);
  max-height: 100%;
  overflow: auto;
  border-radius: 1.55rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.72), transparent 10rem),
    rgba(255, 238, 219, .78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 1.1rem 2rem rgba(71,45,42,.22), inset 0 0 2rem rgba(255,255,255,.35);
  padding: 1.1rem;
  text-align: center;
  color: #523b39;
}
.card h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.28rem, 7vw, 1.9rem);
  line-height: 1.1;
  color: var(--rose);
  font-weight: 600;
}
.card .sentence {
  margin: .7rem auto .9rem;
  color: var(--rose);
  font-size: clamp(1.25rem, 6vw, 1.8rem);
  line-height: 1.16;
}
.stats {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin: .75rem 0 .9rem;
}
.stat {
  min-width: 7rem;
  border-radius: 1rem;
  padding: .48rem .7rem;
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.stat b { display: block; color: var(--rose); font-size: 1.25rem; font-weight: 600; }
.stat span { font-size: .82rem; color: rgba(72,53,52,.7); }
.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .75rem;
}
.result-actions button {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(150,54,78,.2);
  background: rgba(255,245,235,.58);
  color: #5b3f3f;
  cursor: pointer;
  white-space: nowrap;
}
.result-actions .primary {
  background: var(--rose);
  color: var(--cream);
  box-shadow: 0 .5rem 1rem rgba(150,54,78,.24);
}
.result-actions button:disabled {
  opacity: .4;
  cursor: default;
}
.details {
  margin-top: .7rem;
  text-align: left;
  color: rgba(76,55,54,.8);
}
summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rose);
  white-space: nowrap;
}
.given { padding: .55rem .7rem .15rem; text-align: center; line-height: 1.25; }

@keyframes steamBreathe { from { transform: translateY(-1.5%); } to { transform: translateY(1.5%); } }
@keyframes bulbBeat { 0%,100% { opacity: .58; transform: scale(1); } 9% { opacity: .96; transform: scale(1.055); } 18% { opacity: .72; transform: scale(.99); } }
@keyframes roseBeat { 0%,100% { filter: brightness(1); } 8% { filter: brightness(1.4); } 16% { filter: brightness(1.05); } }
@keyframes sceneBeat { 0%,100% { transform: scale(1); } 9% { transform: scale(1.006); } 18% { transform: scale(1); } }
@keyframes tremble {
  0% { margin-left: calc(var(--shake) * -.35px); margin-top: calc(var(--shake) * .22px); }
  25% { margin-left: calc(var(--shake) * .42px); margin-top: calc(var(--shake) * -.3px); }
  50% { margin-left: calc(var(--shake) * -.18px); margin-top: calc(var(--shake) * -.45px); }
  75% { margin-left: calc(var(--shake) * .34px); margin-top: calc(var(--shake) * .34px); }
  100% { margin-left: calc(var(--shake) * -.35px); margin-top: calc(var(--shake) * .22px); }
}
@keyframes wordLock { from { opacity: 0; transform: translateY(.55rem) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes shine { 0% { opacity: 0; transform: translateX(-35%); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateX(35%); } }
@keyframes shatter { to { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 1rem)) rotate(var(--sr, 12deg)); filter: blur(2px); } }
@keyframes wrongTap { 0%,100% { opacity: 1; } 45% { opacity: .38; transform: translate(var(--x), var(--y)) scale(.96) rotate(var(--rot)); } }
@keyframes appearInk { from { opacity: 0; filter: blur(6px); transform: translateY(.7rem); } to { opacity: 1; filter: blur(0); transform: none; } }

@media (min-width: 720px) {
  .shell { width: min(100%, 34rem); }
  .mirror { width: min(100%, 29rem); }
}

@media (max-height: 690px) {
  .mirror-wrap { min-height: 28rem; }
  .mirror { min-height: 27.5rem; }
  .tile-field { inset: 5.2rem .95rem 6.4rem .95rem; }
  .instruction { bottom: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}