:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ink: #5c301e;
  --coral: #ef736d;
  --cream: #fff1ce;
}

* { box-sizing: border-box; }

.game-error {
  width: min(90%, 430px);
  margin: 18vh auto;
  padding: 28px;
  border-radius: 24px;
  background: #fff5dc;
  color: #663923;
  text-align: center;
  box-shadow: 0 8px 30px rgba(70, 35, 20, .2);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f4c28e;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; }

.demo-setup {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(255,244,218,.48), rgba(245,190,135,.48)), url("assets/room background.png") center / cover;
  color: var(--ink);
}
.demo-setup-card { width: min(100%, 470px); margin: 0 auto; padding: 25px 18px; border: 3px solid #ef8a7e; border-radius: 28px; background: rgba(255,248,228,.94); text-align: center; box-shadow: 0 8px 0 rgba(92,49,30,.15); }
.demo-setup-eyebrow { color: #c85854; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.demo-setup h1 { margin: 7px 0 6px; color: #713821; font-size: clamp(30px, 9vw, 43px); line-height: 1; }
.demo-setup p { margin: 0 auto 8px; max-width: 34ch; line-height: 1.4; }
.demo-setup-card > img { width: min(42vw, 180px); display: block; margin: 6px auto; }
.demo-setup form { text-align: left; }
.demo-setup form > label span, .demo-setup legend { display: block; margin-bottom: 7px; font-weight: 900; }
.demo-setup input[type="text"] { width: 100%; padding: 12px 13px; border: 2px solid #e8b395; border-radius: 14px; background: #fffdf4; color: #4c2c1d; outline: 0; }
.demo-from-field { display: block; margin-top: 13px; }
.demo-setup fieldset { margin: 17px 0; padding: 0; border: 0; }
.demo-language-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.demo-language-buttons label { padding: 12px 7px; border: 2px solid #ecc1a7; border-radius: 14px; background: #fffaf0; text-align: center; font-weight: 900; }
.demo-language-buttons label.selected { border-color: #ef746e; background: #fff0e7; }
.demo-language-buttons input { position: absolute; opacity: 0; }
.demo-setup button { width: 100%; padding: 14px 18px; border: 0; border-radius: 999px; background: #ef746e; color: white; font-weight: 900; font-size: 17px; box-shadow: 0 5px 0 #c44f50; }
.demo-setup small { display: block; margin-top: 12px; color: #946950; text-align: center; }

.game {
  position: relative;
  container-type: size;
  width: min(100vw, 540px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #f5c38e;
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

.game::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: linear-gradient(180deg, rgba(255,247,222,.08), transparent 58%, rgba(179,91,43,.08));
}

.title-wrap {
  position: absolute;
  top: max(1.5%, env(safe-area-inset-top));
  left: 50%;
  width: 68%;
  min-height: 5.2%;
  padding: 1.25% 3%;
  transform: translateX(-50%);
  z-index: 12;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  border: clamp(2px, .65cqw, 4px) solid #e85f5e;
  border-radius: clamp(10px, 3cqw, 18px);
  background: #f7a39a;
  box-shadow: 0 clamp(3px, 1cqw, 6px) 0 rgba(154, 64, 53, .2);
}

.title-wrap::before {
  content: "";
  position: absolute;
  inset: clamp(3px, .9cqw, 5px);
  border: clamp(1px, .35cqw, 2px) dashed rgba(255, 244, 221, .78);
  border-radius: clamp(7px, 2.2cqw, 13px);
  pointer-events: none;
}

.title-wrap > img { display: none; }

.title-wrap h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(16px, 4.75cqw, 25px);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 2px 0 #fff7e7;
}

.progress {
  position: absolute;
  top: calc(100% + clamp(7px, 2cqw, 11px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: .18rem .65rem;
  border: 2px solid rgba(118,61,31,.22);
  border-radius: 999px;
  background: rgba(255,247,222,.9);
  font-size: clamp(11px, 3.1vw, 16px);
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(118,61,31,.12);
}

.round-button {
  position: absolute;
  top: max(1.1%, env(safe-area-inset-top));
  z-index: 20;
  width: clamp(42px, 12vw, 64px);
  height: clamp(42px, 12vw, 64px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 3px 2px rgba(92,48,30,.2));
}

.round-button img { width: 100%; height: 100%; object-fit: contain; }
.round-button:active { transform: scale(.92); }
.sound-button { left: 2.5%; }
.pause-button { right: 2.5%; }

.edit-button {
  position: absolute;
  top: max(8.3%, calc(env(safe-area-inset-top) + 58px));
  left: 2.5%;
  z-index: 20;
  border: 2px solid rgba(118,61,31,.22);
  border-radius: 999px;
  padding: .32rem .62rem;
  background: rgba(255,247,222,.92);
  color: var(--ink);
  font-size: clamp(10px, 2.8cqw, 14px);
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(118,61,31,.12);
}

.playfield { position: absolute; inset: 0; z-index: 2; touch-action: none; }
.balloon-layer, .object-layer { position: absolute; inset: 0; pointer-events: none; }
.object-layer { z-index: 8; }

.balloon {
  position: absolute;
  width: clamp(74px, 22vw, 120px);
  transform: translate(-50%, -50%);
  transform-origin: 50% 18%;
  filter: drop-shadow(0 5px 3px rgba(95,50,28,.18));
  will-change: left, top, transform;
  animation: balloonBob 1.7s ease-in-out infinite alternate;
}

.balloon.popping { animation: pop .16s ease-out forwards; }

@keyframes balloonBob {
  from { margin-top: -5px; rotate: -2deg; }
  to { margin-top: 5px; rotate: 2deg; }
}

@keyframes pop {
  0% { scale: 1; opacity: 1; }
  45% { scale: 1.22 .82; }
  100% { scale: 1.65; opacity: 0; }
}

.falling-object {
  position: absolute;
  width: clamp(58px, 17cqw, 92px);
  height: auto;
  max-height: clamp(64px, 19cqw, 104px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 3px rgba(95,50,28,.18));
  will-change: top, transform, opacity;
}

.character {
  position: absolute;
  left: 50%;
  bottom: 12.5%;
  width: clamp(92px, 27vw, 148px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: 6;
  will-change: transform, bottom;
}

.character > img { position: relative; z-index: 2; width: 100%; display: block; }
.character.moving-left > img { transform: rotate(-3deg); }
.character.moving-right > img { transform: rotate(3deg); }

.pose-photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 48%;
  background: #ffe6d5;
}
.pose-photo img {
  position: absolute;
  left: var(--photo-x, 50%);
  top: var(--photo-y, 50%);
  width: var(--photo-zoom, 125%);
  height: var(--photo-zoom, 125%);
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.pose-neutral { left: 49.25%; top: 42.25%; width: 46.85%; aspect-ratio: 221 / 214; }
.pose-jump { left: 49.25%; top: 42.82%; width: 43.86%; aspect-ratio: 207 / 202; }
.pose-hold { left: 49.13%; top: 42.47%; width: 46.40%; aspect-ratio: 219 / 211; }

.character.preparing { animation: squash .12s ease-in forwards; }
.character.jumping { animation: jump .68s cubic-bezier(.32,.01,.35,1); }
.character.landing { animation: land .15s ease-out; }

@keyframes squash {
  to { transform: translateX(-50%) scale(1.09,.88); }
}

@keyframes jump {
  0% { transform: translateX(-50%) scale(1.06,.9); bottom: 12.5%; }
  18% { transform: translateX(-50%) scale(.94,1.08) rotate(-1deg); }
  50% { transform: translateX(-50%) scale(1) rotate(1deg); bottom: 36%; }
  82% { transform: translateX(-50%) scale(.98,1.03) rotate(-1deg); }
  100% { transform: translateX(-50%); bottom: 12.5%; }
}

@keyframes land {
  50% { transform: translateX(-50%) scale(1.1,.86); }
}

.instruction {
  position: absolute;
  left: 50%;
  bottom: max(1.7%, env(safe-area-inset-bottom));
  width: 82%;
  transform: translateX(-50%);
  z-index: 15;
  text-align: center;
  color: var(--ink);
}

.instruction img { width: 100%; display: block; }
.instruction p {
  position: absolute;
  inset: 32% 12% auto;
  margin: 0;
  font-size: clamp(12px, 3.35cqw, 18px);
  line-height: .98;
  font-weight: 900;
  white-space: normal;
}

.opening-screen {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12% 8% 8%;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(rgba(255,242,208,.72), rgba(250,205,155,.48)), url("assets/room background.png") center / cover;
}
.opening-screen::before { content: ""; position: absolute; inset: 12% 6%; border: 3px solid rgba(239,115,109,.48); border-radius: 30px; background: rgba(255,247,222,.72); box-shadow: 0 9px 0 rgba(108,58,34,.13); }
.opening-screen > * { position: relative; z-index: 1; }
.opening-kicker { color: #c75c57; font-size: clamp(11px, 3cqw, 15px); font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.opening-screen h2 { max-width: 90%; margin: 9px 0 14px; color: #713821; font-size: clamp(28px, 8.2cqw, 44px); line-height: .98; }
.opening-character { position: relative; width: clamp(145px, 43cqw, 225px); margin: 2% auto; }
.opening-character > img { position: relative; z-index: 2; display: block; width: 100%; }
.opening-screen button { width: 72%; margin-top: 4%; border: 0; border-radius: 999px; padding: 14px 18px; background: var(--coral); color: white; font-size: clamp(17px, 4.8cqw, 25px); font-weight: 900; box-shadow: 0 6px 0 #b94f50; }
.opening-screen button:active { transform: translateY(3px); box-shadow: 0 3px 0 #b94f50; }
.opening-screen button span { margin-left: 8px; }
.opening-screen small { margin-top: 15px; font-size: clamp(10px, 2.7cqw, 14px); font-weight: 900; }

.pause-overlay, .finale {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(86,50,35,.28);
  backdrop-filter: blur(3px);
}

[hidden] { display: none !important; }

.pause-card, .message-card {
  width: 82%;
  padding: 1.35rem;
  border: 4px solid #f4a095;
  border-radius: 24px;
  background: #fff4d9;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 9px 0 rgba(111,58,34,.2), 0 18px 35px rgba(77,38,22,.22);
}

.pause-card p { margin: .25rem 0 1rem; font-weight: 900; font-size: 1.15rem; }
.pause-card button, .message-card button {
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  background: var(--coral);
  color: white;
  font-weight: 900;
  box-shadow: 0 4px 0 #b94f50;
}

.finale { background: rgba(255,236,193,.46); }
.glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,220,.95), rgba(255,218,125,.25) 55%, transparent 72%);
  animation: glowPulse 1.1s ease-in-out infinite alternate;
}

@keyframes glowPulse { to { transform: scale(1.13); opacity: .72; } }

.final-character {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: clamp(132px, 40vw, 210px);
  transform: translateX(-50%) scale(.4);
  opacity: 0;
  z-index: 3;
  transition: transform .45s cubic-bezier(.2,1.3,.45,1), opacity .3s;
}

.final-character.visible { transform: translateX(-50%) scale(1); opacity: 1; }
.final-character-image { position: relative; z-index: 2; width: 100%; display: block; }
.final-present {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 47%;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 5px 3px rgba(95,50,28,.2));
}

.message-card {
  position: relative;
  z-index: 6;
  animation: cardIn .48s cubic-bezier(.2,1.25,.4,1) both;
}

@keyframes cardIn {
  from { transform: translateY(35px) scale(.72); opacity: 0; }
}

.message-kicker { color: #c65e58; text-transform: uppercase; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.message-card h2 { margin: .35rem 0 .65rem; color: #ce5d58; font-size: clamp(1.65rem, 8vw, 2.6rem); line-height: .98; }
.message-card p { margin: 0 auto 1rem; max-width: 28ch; line-height: 1.42; }
.message-card strong { display: block; margin-bottom: 1rem; }
.message-card .secondary-button { display: block; margin: .75rem auto 0; background: #fff0d5; color: var(--ink); box-shadow: 0 3px 0 #d9aa82; }
.message-card .demo-cta { display: block; width: 100%; margin: .75rem auto 0; background: #7dbd72; box-shadow: 0 4px 0 #568b4d; }

.confetti { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -8%;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confettiFall var(--duration) linear forwards;
}

@keyframes confettiFall {
  to { transform: translate3d(var(--drift), 112dvh, 0) rotate(760deg); }
}

/* Only interrupt genuinely landscape, phone-sized screens. Desktop browsers
   keep showing the centered portrait game so the prototype is easy to test. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  body::before {
    content: "Please rotate your phone";
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #fff0d4;
    color: var(--ink);
    font-weight: 900;
    text-align: center;
  }
}