@font-face {
  font-family: "Toy Rounded Fallback";
  src: local("Arial Rounded MT Bold");
  size-adjust: 100%;
}

:root {
  --cream-50: oklch(98% 0.025 88);
  --cream-100: oklch(95% 0.055 88);
  --cream-200: oklch(89% 0.09 87);
  --ink: oklch(29% 0.07 260);
  --ink-soft: oklch(45% 0.065 260);
  --blue: oklch(61% 0.18 252);
  --blue-dark: oklch(46% 0.16 254);
  --blue-pale: oklch(91% 0.055 246);
  --orange: oklch(72% 0.19 49);
  --orange-dark: oklch(55% 0.18 42);
  --yellow: oklch(87% 0.17 91);
  --yellow-dark: oklch(68% 0.15 81);
  --green: oklch(68% 0.16 151);
  --green-dark: oklch(48% 0.135 151);
  --rose: oklch(73% 0.16 18);
  --surface: oklch(99% 0.012 86);
  --border: oklch(77% 0.07 83);
  --shadow: oklch(48% 0.08 68 / 0.18);
  --font-display: "Toy Rounded Fallback", "Hannotate SC", "YouYuan", "Yuanti SC", sans-serif;
  --font-body: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--cream-100);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 16%, var(--yellow) 0 0.42rem, transparent 0.48rem),
    radial-gradient(circle at 88% 78%, var(--blue) 0 0.32rem, transparent 0.38rem),
    linear-gradient(115deg, transparent 0 49.6%, oklch(90% 0.07 88) 49.7% 50.3%, transparent 50.4%) 0 0 / 5.5rem 5.5rem,
    var(--cream-100);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--surface);
  background: var(--ink);
  border-radius: 0.5rem;
  transform: translateY(-160%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.sound-toggle {
  position: fixed;
  z-index: 12;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--surface);
  background: var(--blue);
  border: 0.16rem solid var(--ink);
  border-radius: 50%;
  box-shadow: 0.18rem 0.22rem 0 var(--ink);
  cursor: pointer;
  transform: rotate(4deg);
  transition: transform 120ms var(--ease-out), background-color 120ms linear, box-shadow 120ms var(--ease-out);
}

.sound-toggle span {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  transform: translateY(-0.04rem);
}

.sound-toggle[data-enabled="false"] {
  color: var(--ink-soft);
  background: var(--cream-200);
}

.sound-toggle[data-enabled="false"]::after {
  content: "";
  position: absolute;
  width: 1.7rem;
  height: 0.16rem;
  background: var(--ink-soft);
  border-radius: 999px;
  transform: rotate(-45deg);
}

.page-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 70rem);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.game-heading {
  position: relative;
  padding: 1rem 0 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  grid-template-areas:
    "eyebrow eyebrow"
    "title toy"
    "copy toy";
  align-items: center;
  column-gap: 0.5rem;
}

.eyebrow {
  grid-area: eyebrow;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  color: var(--blue-dark);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.eyebrow-dot {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--orange);
  border: 0.15rem solid var(--orange-dark);
  border-radius: 50%;
  box-shadow: 0.8rem 0 var(--yellow);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  grid-area: title;
  max-width: 7ch;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.game-heading > p {
  grid-area: copy;
  max-width: 25rem;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.game-heading > p strong {
  color: var(--orange-dark);
  font-size: 1.125em;
  font-variant-numeric: tabular-nums;
}

.toy-box {
  --toy-scale: 0.66;
  position: relative;
  grid-area: toy;
  justify-self: end;
  width: 8.5rem;
  height: 8rem;
  margin: 0;
  transform: rotate(-2deg) scale(var(--toy-scale));
  transition: transform 300ms var(--ease-out);
}

.toy-box__lid,
.toy-box__body {
  position: absolute;
  left: 50%;
  width: 9.5rem;
  border: 0.22rem solid var(--ink);
  transform: translateX(-50%);
}

.toy-box__lid {
  z-index: 2;
  top: 1rem;
  height: 2.15rem;
  background: var(--yellow);
  border-radius: 0.7rem 0.7rem 0.35rem 0.35rem;
  box-shadow: 0 0.42rem 0 var(--yellow-dark);
  transform-origin: left bottom;
  transition: transform 380ms var(--ease-out);
}

.toy-box__lid span {
  position: absolute;
  bottom: 100%;
  width: 0.8rem;
  height: 1rem;
  background: var(--yellow);
  border: 0.18rem solid var(--ink);
  border-bottom: 0;
  border-radius: 0.4rem 0.4rem 0 0;
}

.toy-box__lid span:first-child {
  left: 1.2rem;
}

.toy-box__lid span:last-child {
  right: 1.2rem;
}

.toy-box__body {
  top: 3rem;
  height: 6.75rem;
  background: var(--blue);
  border-radius: 0.45rem 0.45rem 1.25rem 1.25rem;
  box-shadow: inset 0 -0.75rem 0 var(--blue-dark);
}

.toy-box__face {
  position: absolute;
  top: 1.45rem;
  left: 50%;
  width: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
}

.toy-box__face i {
  width: 0.7rem;
  height: 0.9rem;
  background: var(--ink);
  border-radius: 50%;
  box-shadow: inset 0.18rem 0.1rem 0 var(--surface);
}

.toy-box__face b {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--ink);
  background: var(--surface);
  border: 0.2rem solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.toy-box__shadow {
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  width: 10rem;
  height: 1.3rem;
  background: var(--shadow);
  border-radius: 50%;
  transform: translateX(-50%);
}

.shape {
  position: absolute;
  color: var(--orange);
  font-size: 1.7rem;
}

.shape--star {
  top: 0.5rem;
  right: 0;
  transform: rotate(12deg);
}

.shape--circle {
  bottom: 1.25rem;
  left: 0.25rem;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--rose);
  border: 0.18rem solid var(--ink);
  border-radius: 50%;
}

.shape--triangle {
  right: 0.3rem;
  bottom: 0.8rem;
  width: 0;
  height: 0;
  border-right: 0.8rem solid transparent;
  border-bottom: 1.45rem solid var(--green);
  border-left: 0.8rem solid transparent;
  transform: rotate(24deg);
}

.toy-box.is-open {
  transform: rotate(0) scale(calc(var(--toy-scale) + 0.05));
}

.toy-box.is-open .toy-box__lid {
  transform: translateX(-50%) translateY(-1.1rem) rotate(-10deg);
}

.toy-box.is-open .toy-box__face b {
  color: var(--orange-dark);
}

.game-board {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 0.2rem solid var(--ink);
  border-radius: 1.4rem 1.4rem 2.4rem 1.4rem;
  box-shadow: 0.55rem 0.65rem 0 var(--ink);
}

.game-board::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 6.5rem;
  height: 6.5rem;
  background: var(--yellow);
  border: 0.2rem solid var(--ink);
  border-radius: 50%;
}

.board-topline {
  min-height: 5.5rem;
  padding: 1.35rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 0.15rem dashed var(--border);
}

.round-label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.attempt-count {
  margin: 0.1rem 0 0;
  color: var(--ink-soft);
}

.attempt-count strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.reset-button {
  position: relative;
  z-index: 1;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: var(--cream-50);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 120ms linear;
}

.range-panel,
.guess-area,
.history {
  padding: 1.5rem 1.25rem;
}

.range-panel {
  display: grid;
  gap: 1.25rem;
  background: var(--blue-pale);
  border-bottom: 0.15rem solid var(--ink);
}

.range-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.range-copy h2,
.feedback h2,
.history h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.2;
}

.range-copy output {
  flex: none;
  color: var(--blue-dark);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.number-ruler__track {
  position: relative;
  height: 0.9rem;
  overflow: hidden;
  background: oklch(82% 0.045 246);
  border: 0.14rem solid var(--ink);
  border-radius: 999px;
}

.number-ruler__active {
  position: absolute;
  inset-block: 0;
  left: var(--range-start, 0%);
  right: calc(100% - var(--range-end, 100%));
  min-width: 0.5rem;
  background: var(--blue);
  transition: left 300ms var(--ease-out), right 300ms var(--ease-out);
}

.number-ruler__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.guess-area {
  display: grid;
  gap: 1.5rem;
}

.feedback {
  min-height: 4.2rem;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: 1rem;
}

.feedback__icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  color: var(--surface);
  background: var(--blue);
  border: 0.18rem solid var(--ink);
  border-radius: 1rem 1rem 1rem 0.3rem;
  box-shadow: 0.2rem 0.25rem 0 var(--ink);
  font-family: var(--font-display);
  font-size: 1.65rem;
  transition: background-color 160ms linear;
}

.feedback p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.feedback[data-state="invalid"] .feedback__icon {
  color: var(--ink);
  background: var(--yellow);
}

.feedback[data-state="low"] .feedback__icon {
  background: var(--orange);
}

.feedback[data-state="high"] .feedback__icon {
  background: var(--rose);
}

.feedback[data-state="correct"] .feedback__icon,
.feedback[data-state="finished"] .feedback__icon {
  background: var(--green);
}

.feedback.is-updating .feedback__icon {
  animation: clue-pop 300ms var(--ease-out);
}

.guess-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.guess-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.guess-controls input {
  width: 100%;
  min-height: 4rem;
  padding: 0.6rem 1rem;
  color: var(--ink);
  background: var(--cream-50);
  border: 0.18rem solid var(--ink);
  border-radius: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 120ms linear, transform 120ms var(--ease-out);
}

.guess-controls input::placeholder {
  color: oklch(56% 0.055 260);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.guess-controls input[aria-invalid="true"] {
  border-color: var(--orange-dark);
  background: oklch(95% 0.05 60);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.guess-button {
  min-height: 4rem;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--surface);
  background: var(--orange);
  border: 0.18rem solid var(--ink);
  border-radius: 0.9rem;
  box-shadow: 0 0.38rem 0 var(--orange-dark);
  font-weight: 900;
  cursor: pointer;
  transform: translateY(-0.2rem);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms linear;
}

.guess-button span:last-child {
  font-size: 1.45rem;
}

.guess-button:active {
  box-shadow: 0 0.08rem 0 var(--orange-dark);
  transform: translateY(0.1rem);
}

.guess-button:disabled {
  color: var(--ink-soft);
  background: var(--cream-200);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.input-hint {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.history {
  padding-top: 0;
}

.history h2 {
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.history ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  list-style: none;
}

.history li {
  min-width: 3.6rem;
  padding: 0.4rem 0.65rem;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  background: var(--cream-100);
  border: 0.12rem solid var(--ink);
  border-radius: 0.65rem;
  box-shadow: 0.13rem 0.16rem 0 var(--ink);
  font-size: 0.75rem;
}

.history li strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.history li[data-state="low"] {
  background: oklch(93% 0.06 56);
}

.history li[data-state="high"] {
  background: oklch(93% 0.055 19);
}

.history li[data-state="correct"] {
  background: oklch(91% 0.065 151);
}

button:focus-visible,
input:focus-visible,
.skip-link:focus-visible {
  outline: 0.2rem solid var(--blue);
  outline-offset: 0.22rem;
}

.celebration {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.smile-party {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.smile-party__piece {
  position: absolute;
  top: var(--origin-y);
  left: var(--origin-x);
  color: var(--piece-color);
  opacity: 0.46;
  font-family: var(--font-display);
  font-size: var(--piece-size);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0.08rem 0.1rem 0 var(--surface);
  transform: translate3d(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y)), 0) rotate(var(--turn));
}

.smile-party.is-active .smile-party__piece {
  animation: smile-launch 650ms var(--ease-out) var(--launch-delay) both;
}

.smile-party__piece i {
  display: block;
  font-style: normal;
  animation: smile-float var(--float-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--float-delay) infinite alternate;
}

.celebration i {
  position: absolute;
  top: -2rem;
  left: var(--x);
  width: 0.85rem;
  height: 1.25rem;
  opacity: 0;
  background: var(--color);
  border: 0.1rem solid var(--ink);
  transform: rotate(var(--rotate));
}

.celebration i:nth-child(1) { --x: 8%; --color: var(--orange); --rotate: 13deg; }
.celebration i:nth-child(2) { --x: 20%; --color: var(--blue); --rotate: -18deg; }
.celebration i:nth-child(3) { --x: 34%; --color: var(--yellow); --rotate: 42deg; }
.celebration i:nth-child(4) { --x: 47%; --color: var(--green); --rotate: -31deg; }
.celebration i:nth-child(5) { --x: 59%; --color: var(--rose); --rotate: 26deg; }
.celebration i:nth-child(6) { --x: 72%; --color: var(--orange); --rotate: -44deg; }
.celebration i:nth-child(7) { --x: 84%; --color: var(--blue); --rotate: 35deg; }
.celebration i:nth-child(8) { --x: 94%; --color: var(--yellow); --rotate: -12deg; }

.celebration.is-active i {
  animation: confetti-fall 1.25s var(--ease-out) both;
}

.celebration.is-active i:nth-child(2n) { animation-delay: 70ms; }
.celebration.is-active i:nth-child(3n) { animation-delay: 140ms; }

@keyframes clue-pop {
  0% { opacity: 0.65; transform: scale(0.82) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translateY(-5vh) rotate(var(--rotate)); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--rotate) + 220deg)); }
}

@keyframes smile-launch {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0) scale(0.2);
  }
  55% {
    opacity: 0.62;
  }
  100% {
    opacity: 0.46;
    transform: translate3d(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y)), 0) rotate(var(--turn)) scale(1);
  }
}

@keyframes smile-float {
  from {
    transform: translate3d(0, -0.35rem, 0) rotate(-3deg);
  }
  to {
    transform: translate3d(var(--drift), 0.7rem, 0) rotate(4deg);
  }
}

@media (hover: hover) {
  .sound-toggle:hover {
    background: var(--orange);
    transform: rotate(-3deg) translateY(-0.12rem);
  }

  .reset-button:hover {
    background: var(--yellow);
    transform: rotate(-1deg) translateY(-0.1rem);
  }

  .guess-button:not(:disabled):hover {
    background: oklch(75% 0.2 53);
    transform: translateY(-0.3rem);
  }

  .guess-controls input:hover {
    transform: translateY(-0.08rem);
  }
}

@media (max-width: 52.99rem) {
  .sound-toggle {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (min-width: 37.5rem) {
  body {
    padding-block: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-bottom));
  }

  .guess-controls {
    grid-template-columns: minmax(0, 1fr) 10.5rem;
  }

  .range-panel,
  .guess-area,
  .history {
    padding-inline: 1.75rem;
  }

  .history ol {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

@media (min-width: 53rem) {
  body {
    display: grid;
    align-items: center;
  }

  .page-shell {
    grid-template-columns: minmax(17rem, 0.76fr) minmax(30rem, 1.24fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 6rem);
  }

  .game-heading {
    display: block;
    padding: 1rem 0 2.5rem;
  }

  .toy-box {
    --toy-scale: 1;
    width: 13rem;
    height: 11rem;
    margin: 2.5rem 0 0 2.2rem;
  }

  .game-board {
    border-radius: 1.6rem 1.6rem 3rem 1.6rem;
  }

  .board-topline {
    padding-inline: 1.75rem;
  }

  .range-panel {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }

  .range-copy {
    display: block;
  }

  .range-copy output {
    display: block;
    margin-top: 0.3rem;
  }
}

@media (pointer: coarse) {
  .reset-button {
    min-height: 3rem;
    padding-inline: 1rem;
  }
}

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