:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #061b24;
}

body {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

#gameShell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #081f2a;
}

#gameCanvas,
.overlay,
.video-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#gameCanvas {
  display: block;
  outline: none;
  cursor: default;
  touch-action: none;
}

#readerTranslation {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
}

#readerCornerMeaning,
#readerMeaning,
#readerSentenceMeaning,
#readerStoryMeaning {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, transform .42s cubic-bezier(.2,1.2,.35,1), visibility .24s;
}

#readerCornerMeaning.shown,
#readerMeaning.shown,
#readerSentenceMeaning.shown,
#readerStoryMeaning.shown {
  opacity: 1;
  visibility: visible;
}

#readerCornerMeaning {
  right: 3%;
  bottom: 12%;
  width: 22%;
  transform: translate(1.5cqw, 1cqw) scale(.88);
  transform-origin: 100% 100%;
}

#readerCornerMeaning.shown { transform: translate(0) scale(1); }

#readerMeaning {
  --meaning-unit: min(1cqw, 1.4cqh);
  left: calc(50% - 19 * var(--meaning-unit));
  bottom: 4.5%;
  width: calc(38 * var(--meaning-unit));
  transform: translateY(2cqw) scale(.9);
  transform-origin: 50% 100%;
}

#readerMeaning.shown { transform: translateY(0) scale(1); }

.reader-meaning-card { position: relative; }
.reader-translation-cloud { display: block; width: 100%; filter: drop-shadow(0 1cqw 1cqw #9d77401f); }
.reader-meaning-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .8cqw; padding-left: 2.5cqw; color: #67422b; }
.reader-meaning-text strong { font: 850 6.7cqw/1 "STKaiti", "KaiTi", serif; letter-spacing: .2cqw; }
.reader-meaning-text span { margin-top: 2cqw; white-space: nowrap; font: 500 1.55cqw/1.2 "STKaiti", "KaiTi", serif; }
.reader-meaning-face { position: absolute; width: 29%; left: -18%; bottom: 3%; }
.reader-meaning-heart { position: absolute; width: 26%; right: -19%; top: 18%; }
#readerMeaningExplanation { margin: .5cqw -3cqw 0; padding: .38cqw 1cqw; border-radius: 40px; background: #ffdce5; color: #765649; text-align: center; font: 500 2cqw/1.35 "STKaiti", "KaiTi", serif; white-space: nowrap; }
#readerMeaning .reader-meaning-text { gap: calc(.8 * var(--meaning-unit)); padding-left: calc(2.5 * var(--meaning-unit)); }
#readerMeaning .reader-meaning-text strong { font-size: calc(6.7 * var(--meaning-unit)); letter-spacing: calc(.2 * var(--meaning-unit)); }
#readerMeaning .reader-meaning-text span { font-size: calc(1.55 * var(--meaning-unit)); margin-top: calc(2 * var(--meaning-unit)); }
#readerTranslation[data-word-length="4"] #readerMeaning .reader-meaning-text strong { font-size: calc(5.6 * var(--meaning-unit)); }
#readerTranslation[data-word-length="5"] #readerMeaning .reader-meaning-text strong { font-size: calc(4.6 * var(--meaning-unit)); }
#readerMeaning #readerMeaningExplanation { margin: calc(.5 * var(--meaning-unit)) calc(-3 * var(--meaning-unit)) 0; padding: calc(.38 * var(--meaning-unit)) var(--meaning-unit); font-size: calc(2 * var(--meaning-unit)); white-space: normal; text-wrap: pretty; }
#readerCornerMeaning .reader-meaning-text strong { font-size: 5.2cqw; }
#readerCornerMeaning .reader-meaning-text span { font-size: 1.3cqw; }
#readerCornerMeaning .reader-meaning-face { width: 27%; }
#readerCornerMeaning .reader-meaning-heart { width: 24%; }
#readerCornerMeaning.shown .reader-meaning-card { animation: reader-corner-in .55s cubic-bezier(.2,1.25,.35,1) both; }
#readerCornerMeaning.shown .reader-meaning-face { animation: reader-sticker-in .55s .08s cubic-bezier(.2,1.35,.35,1) both; }
#readerCornerMeaning.shown .reader-meaning-heart { animation: reader-heart-in .55s .14s cubic-bezier(.2,1.35,.35,1) both; }
#readerMeaning.shown .reader-meaning-card { animation: reader-card-in .42s cubic-bezier(.18,1.3,.35,1) both; }
#readerMeaning.shown .reader-meaning-face { animation: reader-sticker-in .36s .02s cubic-bezier(.2,1.35,.35,1) both; }
#readerMeaning.shown .reader-meaning-heart { animation: reader-heart-in .34s .03s cubic-bezier(.2,1.35,.35,1) both; }
#readerMeaning.shown #readerMeaningExplanation { animation: reader-explanation-in .32s .04s cubic-bezier(.2,1.25,.35,1) both; }
/* BABY's original victory word uses seven 100ms wiggle frames. Keep the
   Chinese layer on that same clock, with a soft elastic response that stays
   in the lower corner and never competes with the English word. */
#readerMeaning.victory-sync .reader-meaning-card,
#readerMeaning.victory-sync #readerMeaningExplanation,
#readerMeaning.victory-sync .reader-meaning-face,
#readerMeaning.victory-sync .reader-meaning-heart,
#readerMeaning.victory-sync .reader-meaning-text strong {
  transition: translate .08s ease-out, rotate .08s ease-out, scale .08s ease-out;
}
#readerMeaning.victory-sync {
  --victory-card-y: 0cqw;
  --victory-card-rotate: 0deg;
  --victory-card-scale-x: 1;
  --victory-card-scale-y: 1;
  --victory-explanation-y: 0cqw;
  --victory-face-x: 0cqw;
  --victory-face-y: 0cqw;
  --victory-face-rotate: -5deg;
  --victory-face-scale: 1;
  --victory-heart-x: 0cqw;
  --victory-heart-y: 0cqw;
  --victory-heart-rotate: 6deg;
  --victory-heart-scale: 1;
  --victory-word-scale: 1;
}
#readerMeaning.victory-sync .reader-meaning-card { translate: 0 var(--victory-card-y); rotate: var(--victory-card-rotate); scale: var(--victory-card-scale-x) var(--victory-card-scale-y); }
#readerMeaning.victory-sync #readerMeaningExplanation { translate: 0 var(--victory-explanation-y); }
#readerMeaning.victory-sync .reader-meaning-face { translate: var(--victory-face-x) var(--victory-face-y); rotate: var(--victory-face-rotate); scale: var(--victory-face-scale); }
#readerMeaning.victory-sync .reader-meaning-heart { translate: var(--victory-heart-x) var(--victory-heart-y); rotate: var(--victory-heart-rotate); scale: var(--victory-heart-scale); }
#readerMeaning.victory-sync .reader-meaning-text strong { scale: var(--victory-word-scale); }
#readerMeaning.victory-sync[data-victory-frame="1"] {
  --victory-card-y: -.45cqw;
  --victory-card-rotate: -.8deg;
  --victory-card-scale-x: 1.015;
  --victory-card-scale-y: .985;
  --victory-explanation-y: -.28cqw;
  --victory-face-y: -1.4cqw;
  --victory-face-rotate: -7deg;
  --victory-heart-x: .5cqw;
  --victory-heart-y: -.8cqw;
  --victory-heart-rotate: -8deg;
}
#readerMeaning.victory-sync[data-victory-frame="2"] {
  --victory-card-y: -1cqw;
  --victory-card-rotate: .8deg;
  --victory-card-scale-x: 1.03;
  --victory-card-scale-y: .97;
  --victory-explanation-y: -.52cqw;
  --victory-face-x: .15cqw;
  --victory-face-y: -2.1cqw;
  --victory-face-rotate: -10deg;
  --victory-face-scale: 1.05;
  --victory-heart-x: .8cqw;
  --victory-heart-y: -1.3cqw;
  --victory-heart-rotate: -12deg;
  --victory-heart-scale: 1.1;
  --victory-word-scale: 1.035;
}
#readerMeaning.victory-sync[data-victory-frame="3"] {
  --victory-card-y: .45cqw;
  --victory-card-rotate: 1.1deg;
  --victory-card-scale-x: .98;
  --victory-card-scale-y: 1.02;
  --victory-explanation-y: .3cqw;
  --victory-face-x: -.15cqw;
  --victory-face-y: .8cqw;
  --victory-face-rotate: 8deg;
  --victory-heart-x: -.5cqw;
  --victory-heart-y: .7cqw;
  --victory-heart-rotate: 10deg;
  --victory-word-scale: .985;
}
#readerMeaning.victory-sync[data-victory-frame="4"] {
  --victory-card-y: .8cqw;
  --victory-card-rotate: -.7deg;
  --victory-card-scale-x: 1.02;
  --victory-card-scale-y: .98;
  --victory-explanation-y: .45cqw;
  --victory-face-x: -.1cqw;
  --victory-face-y: 1.3cqw;
  --victory-face-rotate: 6deg;
  --victory-heart-x: -.8cqw;
  --victory-heart-y: 1cqw;
  --victory-heart-rotate: 8deg;
  --victory-word-scale: 1.02;
}
#readerMeaning.victory-sync[data-victory-frame="5"] {
  --victory-card-y: -.3cqw;
  --victory-card-rotate: .5deg;
  --victory-card-scale-x: 1.01;
  --victory-card-scale-y: .99;
  --victory-explanation-y: -.18cqw;
  --victory-face-x: .1cqw;
  --victory-face-y: -.8cqw;
  --victory-face-rotate: -4deg;
  --victory-heart-x: .4cqw;
  --victory-heart-y: -.4cqw;
  --victory-heart-rotate: -5deg;
}
#readerMeaning.victory-sync[data-victory-frame="6"] {
  --victory-card-y: -.08cqw;
  --victory-card-rotate: -.2deg;
  --victory-face-y: -.2cqw;
  --victory-heart-y: -.1cqw;
}

#readerSentenceMeaning { inset: 0; --sentence-unit: min(1cqw, 1.4cqh); }
.reader-sentence-card-slot { position: absolute; left: calc(50% - 19 * var(--sentence-unit)); top: 8%; width: calc(38 * var(--sentence-unit)); aspect-ratio: 1920 / 819; opacity: 1; transition: opacity .18s ease; }
.reader-sentence-card-slot.obscured { opacity: 0; visibility: hidden; transition: none; }
.reader-sentence-card { position: relative; width: 100%; height: 100%; color: #5d3a28; }
.reader-sentence-cloud { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .4cqw .5cqw #8b6b431f); }
#readerSentenceMeaning.shown .reader-sentence-card { animation: reader-sentence-cloud-in .86s cubic-bezier(.18,1.3,.35,1) both; }
.reader-sentence-card strong { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8%; color: #633d32; text-align: center; font: 850 calc(2.65 * var(--sentence-unit))/1.3 "STKaiti", "KaiTi", serif; white-space: normal; text-wrap: pretty; }
#readerSentenceMeaning.shown .reader-sentence-card strong { animation: reader-sentence-copy-in .72s .22s cubic-bezier(.2,1.05,.35,1) both; }
.reader-sentence-face, .reader-sentence-heart { position: absolute; opacity: 0; }
.reader-sentence-face[hidden] { display: none; }
.reader-sentence-face { width: 24%; left: -14%; top: 36%; transform: rotate(-9deg); }
.reader-sentence-heart { width: 20%; right: -12%; top: 27%; transform: rotate(9deg); }
#readerSentenceMeaning.shown .reader-sentence-face { animation: reader-sentence-face-in .72s .42s cubic-bezier(.2,1.35,.35,1) both; }
#readerSentenceMeaning.shown .reader-sentence-heart { animation: reader-sentence-heart-in .62s .58s cubic-bezier(.2,1.35,.35,1) both; }
#readerSentenceWordMeanings { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
#readerSentenceWordMeanings.shown { opacity: 1; visibility: visible; }
.reader-sentence-word-meaning { position: absolute; width: min(9.2cqw, 14cqh); aspect-ratio: 1920 / 819; opacity: 0; visibility: hidden; transform: translateX(-50%); }
.reader-sentence-word-meaning.shown { opacity: 1; visibility: visible; }
.reader-sentence-word-meaning.moving { opacity: 0; visibility: hidden; }
.reader-sentence-note { display: flex; align-items: center; justify-content: center; gap: .3cqw; width: 100%; height: 100%; background: url("./assets/translation/translation-cloud-base.png") center / contain no-repeat; filter: drop-shadow(0 .2cqw .18cqw #a8796c20); color: #633d32; }
.reader-sentence-note span { font: 850 min(1.7cqw, 2.55cqh)/1 "STKaiti", "KaiTi", serif; white-space: nowrap; }
.reader-sentence-note b { display: none; color: #8a7456; font: 700 1cqw/1 system-ui, sans-serif; }
.reader-sentence-word-meaning.placed .reader-sentence-note b { display: inline; }
#readerSentenceWord-was.shown .reader-sentence-note { animation: reader-note-in .5s .08s both; }
#readerSentenceWord-baby.shown .reader-sentence-note { animation: reader-note-in .5s .2s both; }
#readerSentenceWord-bear.shown .reader-sentence-note { animation: reader-note-in .5s .32s both; }
.reader-sentence-word-meaning.placed.shown .reader-sentence-note { animation: reader-note-settle .56s cubic-bezier(.2,1.22,.35,1) both; }

#readerStoryMeaning { inset: 0; }
#readerStoryMeaning.shown { opacity: 1; visibility: visible; }
.reader-story-note { position: absolute; left: 28%; bottom: 25%; width: 44%; padding: .72cqw 1.2cqw .82cqw; border: .16cqw solid #d3a45e; border-radius: 1.1cqw .7cqw 1.2cqw .8cqw; background: #fff5dfee; box-shadow: 0 .35cqw 0 #d3a45e45, 0 .7cqw 1cqw #55382018; color: #633d32; text-align: center; transform: translateY(1.4cqw) rotate(-1deg) scale(.92); }
#readerStoryMeaning.shown .reader-story-note { animation: reader-story-note-in .64s cubic-bezier(.2,1.18,.35,1) both; }
.reader-story-note::before, .reader-story-note::after { content: ""; position: absolute; top: 50%; width: 1.5cqw; height: .35cqw; border-radius: 50%; background: #efbd4e; }
.reader-story-note::before { left: -2.2cqw; transform: rotate(-24deg); }
.reader-story-note::after { right: -2.2cqw; transform: rotate(24deg); }
.reader-story-note span { display: inline-block; color: #633d32; font: 850 min(2.1cqw, 3cqh)/1.2 "STKaiti", "KaiTi", serif; }

@keyframes reader-corner-in { 0% { opacity: 0; transform: translate(6cqw, -2cqw) scale(.72) rotate(2deg); } 100% { opacity: 1; transform: translate(0) scale(1) rotate(0); } }
@keyframes reader-card-in { 0% { opacity: 0; transform: translateY(15cqw) scale(.68) rotate(-3deg); } 65% { opacity: 1; transform: translateY(-1.3cqw) scale(1.04) rotate(.7deg); } 100% { opacity: 1; transform: translate(0) scale(1) rotate(0); } }
@keyframes reader-sticker-in { 0% { opacity: 0; transform: translateY(5cqw) rotate(-18deg) scale(.55); } 100% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); } }
@keyframes reader-heart-in { 0% { opacity: 0; transform: translate(3cqw, 3cqw) rotate(22deg) scale(.45); } 100% { opacity: 1; transform: translate(0) rotate(6deg) scale(1); } }
@keyframes reader-explanation-in { 0% { opacity: 0; transform: translateY(1.5cqw) scale(.82); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reader-sentence-cloud-in { 0% { opacity: 0; transform: translateY(.65cqw) scale(.65) rotate(-2deg); } 62% { opacity: 1; transform: translateY(-.25cqw) scale(1.025) rotate(.4deg); } 100% { opacity: 1; transform: none; } }
@keyframes reader-sentence-copy-in { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-1.1cqw); } 55% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(.25cqw); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes reader-sentence-face-in { 0% { opacity: 0; transform: translateY(.8cqw) rotate(-22deg) scale(.35); } 72% { opacity: 1; transform: translateY(-.2cqw) rotate(4deg) scale(1.08); } 100% { opacity: 1; transform: rotate(-9deg); } }
@keyframes reader-sentence-heart-in { 0% { opacity: 0; transform: translateY(.6cqw) rotate(24deg) scale(.2); } 70% { opacity: 1; transform: translateY(-.2cqw) rotate(-8deg) scale(1.12); } 100% { opacity: 1; transform: rotate(9deg); } }
@keyframes reader-note-in { 0% { opacity: 0; transform: scale(.65) rotate(-5deg); } 65% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes reader-note-settle { 0% { transform: scale(.78) translateY(.8cqw) rotate(-3deg); filter: brightness(1.18); } 68% { transform: scale(1.08) translateY(-.2cqw) rotate(1deg); filter: brightness(1.04); } 100% { transform: none; filter: none; } }
@keyframes reader-story-note-in { 0% { opacity: 0; transform: translateY(2.2cqw) rotate(-3deg) scale(.76); } 68% { opacity: 1; transform: translateY(-.25cqw) rotate(.8deg) scale(1.03); } 100% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); } }

.overlay {
  z-index: 10;
}

.hidden {
  display: none !important;
}

.start-gate {
  z-index: 30;
  display: grid;
  place-items: center;
  background: #122c39;
}

.start-gate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-gate-actions {
  position: absolute;
  bottom: 5%;
  width: min(90%, 760px);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.start-gate-actions .loading-label {
  position: static;
  transform: none;
  translate: none;
  translate: none;
  left: auto;
  bottom: auto;
  max-height: 20vh;
  overflow: auto;
  overflow-wrap: anywhere;
  text-align: center;
}

.start-button {
  padding: 12px 28px;
  border: 3px solid #c5b58a;
  border-radius: 16px;
  background: #fff8dc;
  color: #194652;
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: bold;
  cursor: pointer;
}

.start-button:disabled { opacity: 0.65; cursor: progress; }

.video-layer {
  background: #000;
}

.video-layer video {
  object-fit: cover;
  background: #000;
}

.corner-button,
.replay-button {
  position: absolute;
  z-index: 2;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(19, 68, 78, 0.74);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.corner-button {
  top: 3%;
  right: 2.5%;
  width: clamp(46px, 7vw, 72px);
  aspect-ratio: 1;
  font-size: clamp(34px, 5vw, 56px);
}

.replay-button {
  left: 50%;
  bottom: 7%;
  translate: -50% 0;
  width: clamp(66px, 10vw, 104px);
  aspect-ratio: 1;
  font-size: clamp(38px, 6vw, 64px);
}

.loading-label {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 5%;
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: 999px;
  color: white;
  background: rgba(0, 0, 0, 0.46);
  font-size: clamp(12px, 1.7vw, 19px);
  font-weight: 900;
  letter-spacing: 0.13em;
}
/* The game canvas owns presentation; the video is only an inline decoder. */
#storyVideo.story-decoder {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}