:root {
  --emerald: #1d5a3c;
  --emerald-deep: #0f3322;
  --silver: #d9dde0;
  --parchment: #f3ead6;
  --ink: #2a2118;
  --gold: #c9a45c;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07100b; overflow: hidden; overflow: clip; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }

#frame { position: fixed; inset: 0; overflow: hidden; overflow: clip; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  overflow: hidden; overflow: clip; background: #000; transform-origin: center center;
  font-family: "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif; color: var(--ink);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}
#stage.fonts-ready { opacity: 1; }
.hidden { display: none !important; }
#minigame-root { position: absolute; inset: 0; z-index: 16; overflow: hidden; isolation: isolate; touch-action: none; }
#stage.minigame-active #textbox, #stage.minigame-active #quickmenu { display: none !important; }
#stage.ui-hidden #textbox, #stage.cg-viewing #textbox { display: none !important; }
#stage.cg-active #sprites, #stage.cg-active #ambient, #stage.cg-active #bursts, #stage.cg-active #vignette { display: none; }

/* ---------- Scene ---------- */
#bg {
  position: absolute; inset: 0; background: #000 center / cover no-repeat;
  transition: opacity .6s;
}
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; }
#fade.on { opacity: 1; }

/* ---------- Dialogue box ---------- */
#textbox {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 960px; height: 220px; padding: 28px 64px 80px 34px;
  background: rgba(243, 234, 214, .93);
  border: 3px solid var(--emerald); border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(217,221,224,.7), 0 10px 30px rgba(0,0,0,.5);
  cursor: pointer;
}
#nametag {
  position: absolute; left: 34px; top: -24px; min-width: 150px; padding: 5px 22px;
  background: var(--emerald); color: var(--silver);
  border: 2px solid var(--silver); border-radius: 10px;
  font-family: "Cormorant Garamond","PP Noto UI Symbols",serif; font-weight: 700; font-size: 25px;
  text-align: center; letter-spacing: .04em;
  max-width: calc(100% - 68px); white-space: nowrap; line-height: 1.25;
}
#text { position: absolute; inset: 28px 64px 80px 34px; --dialogue-size: 23px; font-size: var(--dialogue-size); line-height: 1.38; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
#text.giant { font-size: calc(var(--dialogue-size) * 1.25); font-weight: 800; }
#text.giant-loud { padding: 1px; animation: giant-tremble 1.1s ease-in-out infinite; }
@keyframes giant-tremble {
  0%, 35%, 100% { transform: translate3d(0,0,0); }
  42%, 56% { transform: translate3d(.35px,-.7px,0); }
  49%, 63% { transform: translate3d(-.35px,.6px,0); }
  70% { transform: translate3d(.2px,-.3px,0); }
}
#text.narration { font-style: italic; color: #4a3d2e; }
/* Dialogue fitting measures each font-size change synchronously. */
#text { transition: none !important; }
#ctc {
  position: absolute; right: 26px; bottom: 54px; color: var(--emerald); font-size: 16px;
  opacity: 0; animation: bob 1s infinite;
}
#textbox.done #ctc { opacity: 1; }
#voice-skip-hint {
  position: absolute; right: 52px; bottom: 52px; padding: 4px 8px;
  color: var(--emerald-deep); background: #e5ddc9; border-radius: 5px;
  font-size: 13px; line-height: 1.4; font-weight: 700; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; pointer-events: none;
}
#voice-skip-hint.show { opacity: 1; visibility: visible; transition: opacity .2s; }
@keyframes bob { 50% { transform: translateY(4px); } }
#quickmenu {
  position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 16px;
}
#quickmenu button {
  background: none; border: 0; padding: 6px 3px; min-width: 40px; min-height: 40px; color: #365940;
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
}
#quickmenu button:hover, #quickmenu button.on { color: var(--emerald); text-decoration: underline; }
#quickmenu .speaker-button, #quickmenu .voice-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.speaker-button svg, .voice-button svg, .fullscreen-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#quickmenu .fullscreen-button { display: inline-flex; align-items: center; }
#quickmenu button[hidden] { display: none !important; }
#quickmenu .voice-button.on { background: rgba(29,90,60,.12); border-radius: 6px; }
.speaker-button .speaker-muted, .speaker-button.on .speaker-waves { display: none; }
.speaker-button.on .speaker-muted { display: block; }
#quickmenu button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 2px; }

/* ---------- Choices ---------- */
#choices {
  position: absolute; inset: 22px 30px 248px; display: flex; flex-direction: column;
  align-items: center; justify-content: safe center; gap: 16px; background: rgba(0,0,0,.25);
  overflow-y: auto; padding: 8px 0;
}
#choices button {
  width: 520px; flex-shrink: 0; padding: 12px 20px; font-size: 21px; font-weight: 700;
  color: var(--ink); background: var(--parchment);
  border: 3px solid var(--emerald); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: transform .12s, background .12s;
}
/* Long invitation and route-lock menus stay above the dialogue box. */
#choices:has(> button:nth-child(5)) { gap: 6px; }
#choices:has(> button:nth-child(5)) > button {
  width: 1040px; max-width: calc(100% - 40px); padding: 6px 20px; font-size: 23px;
}
#choices button:hover, #choices button:focus-visible {
  background: #fff8e8; transform: scale(1.03); outline: none; border-color: var(--gold);
}

/* ---------- Parchment panels ---------- */
#minigame, #nameinput, #panel {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4,12,8,.6);
}
.parchment {
  width: 720px; padding: 30px 40px 34px; text-align: center;
  background: var(--parchment); border: 3px solid var(--emerald); border-radius: 12px;
  box-shadow: 0 0 0 3px var(--silver), 0 20px 60px rgba(0,0,0,.6);
  font-family: "Cormorant Garamond","PP Noto UI Symbols",serif;
}
.parchment.small { width: 460px; }
.parchment.wide { width: 820px; max-height: 620px; display: flex; flex-direction: column; }
.parchment h2 { margin: 0 0 6px; font-size: 34px; color: var(--emerald); }
.parchment .hint { margin: 0 0 22px; font-size: 20px; }
#mg-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#mg-words button {
  padding: 12px 0; font-family: "Cormorant Garamond","PP Noto UI Symbols",serif; font-size: 25px; font-weight: 700; font-style: italic;
  color: var(--ink); background: #fffaf0; border: 2px solid #b9a782; border-radius: 8px;
  transition: transform .12s, border-color .12s, background .12s;
}
#mg-words button:hover { transform: translateY(-2px); border-color: var(--emerald); }
#mg-words button.picked { background: var(--emerald); color: var(--silver); border-color: var(--emerald); }
#name-field {
  width: 100%; padding: 10px 14px; margin-bottom: 20px; text-align: center;
  font: 700 28px "Cormorant Garamond","PP Noto UI Symbols",serif; color: var(--ink);
  background: #fffaf0; border: 2px solid #b9a782; border-radius: 8px; outline: none;
}
#name-field:focus { border-color: var(--emerald); }
#panel-body { overflow: auto; text-align: left; font-size: 20px; line-height: 1.4; margin: 10px 0 20px; flex: 1; min-height: 0; padding: 4px 8px; scrollbar-gutter: stable; overflow-wrap: anywhere; }
#panel-body .log-line { margin: 0 0 10px; }
#panel-body .log-line b { color: var(--emerald); }
#panel-body label { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-size: 22px; }
#panel-body input[type=range] { flex: 1; accent-color: var(--emerald); }
#panel-body input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--emerald); }
#panel-body select { flex: 1; min-width: 0; min-height: 44px; padding: 6px 36px 6px 12px; border: 2px solid var(--emerald); border-radius: 7px; background: var(--parchment) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d5a3c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px; color: var(--ink); font: inherit; -webkit-appearance: none; appearance: none; }
#panel-body .mute-setting { cursor: pointer; }

.btn {
  padding: 10px 30px; font: 700 21px "Cormorant Garamond","PP Noto UI Symbols",serif; letter-spacing: .05em;
  color: var(--silver); background: var(--emerald);
  border: 2px solid var(--silver); border-radius: 10px; transition: background .15s, transform .15s;
}
.btn:hover:not(:disabled) { background: #216342; transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: default; }

/* ---------- Title ---------- */
#title {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(rgba(5,18,11,.55), rgba(5,18,11,.85)),
    url("assets/bg/corridor.webp") center / cover;
}
.title-inner { text-align: center; color: var(--silver); }
.kicker { margin: 0; font: italic 500 22px "Cormorant Garamond","PP Noto UI Symbols",serif; letter-spacing: .12em; color: var(--gold); }
#title h1 {
  margin: 10px 0 36px; font: 700 76px/1.05 var(--display-font, "Cinzel Decorative"),"Cormorant Garamond","PP Noto UI Symbols",serif; color: #eef1ee;
  /* The font's oo kerning overlaps; match the cover's unkerned lettering. */
  font-kerning: none;
  text-shadow: 0 0 24px rgba(40,160,100,.55), 0 4px 0 var(--emerald-deep);
}
#title h1 span { font-size: 54px; color: var(--gold); }
#title nav { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#title nav .btn { width: 260px; }
.footnote { margin-top: 34px; font: 500 16px "Cormorant Garamond","PP Noto UI Symbols",serif; opacity: .7; }

/* ---------- Toast ---------- */
#toast {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  padding: 8px 20px; border-radius: 8px; background: var(--emerald); color: var(--silver);
  font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#audio-hint {
  position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 110;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px);
  padding: 6px 10px 6px 14px; border-radius: 8px; background: rgba(15,51,34,.94); color: var(--silver);
  font: 13px/1.4 "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#audio-hint button { flex: none; min-width: 36px; min-height: 36px; border: 0; background: transparent; color: inherit; font-size: 22px; }

/* ---------- Glitch (the DDLC touch) ---------- */
#stage.glitch #text { animation: textglitch .12s steps(2) infinite; color: #7a0f1f; }
@keyframes textglitch { 50% { transform: translateX(2px); text-shadow: -2px 0 #0f0, 2px 0 #f0f; } }

/* ---------- Live scene layers ---------- */
#scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; overflow: clip; }
#bg { background: #07100b; overflow: hidden; }
.bg-layer, .cg-layer { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .6s ease; }
/* CGs are 3:2 on a 16:9 stage: show the whole illustration (never crop heads or hands) and fill the side
   strips with a blurred, darkened copy of the same picture (set as --cg-url by setCG). */
.cg-layer { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#cg::before { content: ""; position: absolute; inset: -48px; background: var(--cg-url, none) center / cover no-repeat;
  filter: blur(26px) brightness(.5) saturate(1.1); opacity: 0; transition: opacity .6s ease; }
#cg.show::before { opacity: 1; }
.bg-layer { inset: -22px; animation: background-drift 28s ease-in-out infinite alternate; will-change: transform, opacity; }
.bg-layer.visible, .cg-layer.visible { opacity: 1; }
@keyframes background-drift { from { transform: translate3d(-8px,3px,0) scale(1.025); } to { transform: translate3d(9px,-5px,0) scale(1.065); } }
#sprites { position: absolute; inset: 0; }
.character { position: absolute; left: 0; bottom: -330px; width: 0; height: 1020px; opacity: 0; transition: transform .42s ease, opacity .32s ease; will-change: transform, opacity; }
.character.show { opacity: 1; }
.sprite-focus { position: absolute; left: -510px; width: 1020px; height: 1020px; transform: translate3d(0,14px,0) scale(.985); transform-origin: center 65%; transition: transform .32s ease, opacity .28s ease; }
.character.show .sprite-focus { transform: translate3d(0,0,0) scale(1); }
.character.speaking { z-index: 2; }
.character.speaking .sprite-focus { transform: translate3d(0,-5px,0) scale(1.015); opacity: 1; }
.character.listening .sprite-focus { opacity: 1; }
.character.listening .expression { filter: brightness(.86) drop-shadow(0 0 18px rgba(0,0,0,.45)); }
.sprite-motion { position: absolute; inset: 0; transform-origin: center 70%; animation: sprite-idle 4.8s ease-in-out infinite alternate; will-change: transform; }
.character[data-who=w] .sprite-motion { animation-duration: 5.4s; animation-delay: -.7s; }
.character[data-who=o] .sprite-motion { animation-duration: 6.1s; animation-delay: -1.9s; }
.character:is([data-who=a],[data-who=c]) .sprite-motion:not(.hop) { animation: none; }
.character:is([data-who=a],[data-who=c]) .sprite-focus { left: -350px; width: 700px; height: 700px; }
.expression { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .22s ease; filter: drop-shadow(0 0 18px rgba(0,0,0,.45)); }
.expression.visible { opacity: 1; }
@keyframes sprite-idle { from { transform: translate3d(-1px,0,0) rotate(-.1deg) scaleY(1); } to { transform: translate3d(2px,-3px,0) rotate(.12deg) scaleY(1.004); } }
.sprite-motion.hop { animation: sprite-hop .28s ease-out; }
@keyframes sprite-hop { 40% { transform: translate3d(0,-22px,0); } }
#cg { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; overflow: clip; }
/* Camera affects only the story image, inside a fixed crop. Cover + overscan
   protects every edge, including the rotated corners in sway. The underlying
   transforms are also the static Reduce motion framing. */
#cg .cg-layer[data-camera] {
  object-fit: cover; transform-origin: 50% 50%; will-change: transform;
  animation-delay: var(--camera-delay, 0s); animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}
#cg .cg-layer[data-camera=tiltup] { transform: translate3d(0,5%,0) scale(1.16); animation-name: camera-tiltup; animation-duration: 9s; }
#cg .cg-layer[data-camera=lean] { transform-origin: 50% 32%; transform: scale(1.08); animation-name: camera-lean; animation-duration: 8s; }
#cg .cg-layer[data-camera=drift] { transform: scale(1.06); animation-name: camera-drift; animation-duration: 16s; animation-iteration-count: infinite; }
#cg .cg-layer[data-camera=sway] { transform: scale(1.06); animation-name: camera-sway; animation-duration: 4s; animation-iteration-count: infinite; }
#cg .cg-layer[data-camera=rise] { transform: translate3d(0,3%,0) scale(1.14); animation-name: camera-rise; animation-duration: 2.5s; }
@keyframes camera-tiltup { from { transform: translate3d(0,-5%,0) scale(1.16); } to { transform: translate3d(0,5%,0) scale(1.16); } }
@keyframes camera-lean { from { transform: scale(1.01); } to { transform: scale(1.08); } }
@keyframes camera-drift {
  0%, 100% { transform: translate3d(-.7%,.5%,0) scale(1.05); }
  50% { transform: translate3d(.7%,-.5%,0) scale(1.075); }
}
@keyframes camera-sway {
  0%, 100% { transform: translate3d(-3px,2px,0) rotate(-.8deg) scale(1.06); }
  50% { transform: translate3d(3px,-2px,0) rotate(.8deg) scale(1.06); }
}
@keyframes camera-rise { from { transform: translate3d(0,-3%,0) scale(1.10); } to { transform: translate3d(0,3%,0) scale(1.14); } }
.cg-pending { background: radial-gradient(ellipse at 50% 30%,rgba(104,144,114,.2),rgba(6,19,13,.35)); }
#ambient { position: absolute; inset: 0; width: 1280px; height: 720px; pointer-events: none; z-index: 4; }
#stage.cg-active.cg-dust:not(.reduce-motion) #ambient { display: block; }
#bursts { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.heart { position: absolute; top: 345px; color: #f0a5c7; font: 28px serif; opacity: 0; text-shadow: 0 0 12px #fbc7dd; animation: heart-burst 1.1s ease-out forwards; }
@keyframes heart-burst { 10% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx),-150px,0) rotate(var(--turn)) scale(.5); } }
#scene.shake { animation: screen-shake .38s ease-out; }
@keyframes screen-shake { 20% { transform: translate3d(-7px,3px,0); } 40% { transform: translate3d(6px,-3px,0); } 60% { transform: translate3d(-4px,2px,0); } 80% { transform: translate3d(2px,0,0); } }
#scene.shake-heavy { animation: screen-quake .9s linear; }
/* Overscan the whole scene during the quake so its displacement cannot reveal
   the black stage at the edges. Normal shake retains its original treatment. */
@keyframes screen-quake {
  0%, 100% { transform: scale(1); }
  8% { transform: translate3d(-3px,14px,0) scale(1.045); }
  18% { transform: translate3d(4px,-13px,0) scale(1.045); }
  29% { transform: translate3d(-3px,11px,0) scale(1.04); }
  41% { transform: translate3d(2px,-9px,0) scale(1.035); }
  54% { transform: translate3d(-2px,7px,0) scale(1.028); }
  68% { transform: translate3d(1px,-4px,0) scale(1.02); }
  82% { transform: translate3d(-1px,2px,0) scale(1.012); }
}
#vignette { z-index: 6; }
#textbox { z-index: 10; }
#textbox.arrive { animation: textbox-arrive .35s ease-out both; }
@keyframes textbox-arrive { from { opacity: 0; transform: translate(-50%,20px); } to { opacity: 1; transform: translate(-50%,0); } }
#nametag.arrive { animation: name-arrive .25s ease-out both; }
@keyframes name-arrive { from { opacity: 0; transform: translate3d(-12px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
#choices { z-index: 12; }
#choices button { width: 650px; animation: choice-arrive .3s ease-out var(--delay,0ms) both; }
@keyframes choice-arrive { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.choice-reveal { display: none; }
.fake-choice:hover .choice-mask, .fake-choice:focus-visible .choice-mask { display: none; }
.fake-choice:hover .choice-reveal, .fake-choice:focus-visible .choice-reveal { display: inline; }
#minigame, #nameinput { z-index: 15; }
#mg-words button { animation: word-arrive .3s ease-out var(--delay,0ms) both; }
@keyframes word-arrive { from { opacity: 0; transform: scale(.86) translate3d(0,6px,0); } to { opacity: 1; transform: scale(1) translate3d(0,0,0); } }
#fade { z-index: 18; }
#title { z-index: 20; }
.title-inner { position: relative; z-index: 5; }
#title h1 { position: relative; overflow: hidden; margin-bottom: 22px; font-size: 68px; animation: logo-arrive .85s cubic-bezier(.2,.65,.25,1) both; }
#title h1 { line-height: 1.22; padding: 4px 10px 12px; }
#title h1::after { content: ""; position: absolute; inset: -20px -50%; background: linear-gradient(105deg,transparent 42%,rgba(235,255,240,.25) 48%,rgba(235,255,240,.5) 50%,transparent 57%); transform: translate3d(-70%,0,0); animation: logo-shimmer 9s ease-in-out 1s infinite; pointer-events: none; }
@keyframes logo-arrive { from { opacity: 0; transform: translate3d(0,24px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes logo-shimmer { 0%,68% { opacity: 0; transform: translate3d(-70%,0,0); } 73% { opacity: .75; } 93%,100% { opacity: 0; transform: translate3d(70%,0,0); } }
#title nav { gap: 9px; }
#title nav .btn { animation: choice-arrive .38s ease-out both; }
#title nav .btn:nth-child(1) { animation-delay: .15s; }
#title nav .btn:nth-child(2) { animation-delay: .22s; }
#title nav .btn:nth-child(3) { animation-delay: .29s; }
#title nav .btn:nth-child(4) { animation-delay: .36s; }
#title nav .btn:nth-child(5) { animation-delay: .43s; }
.footnote { margin-top: 20px; }
#title-sequel { margin: 12px 0 0; font: 500 20px/1.2 "Cormorant Garamond","PP Noto UI Symbols",serif; color: #c7b995; }
#title.ending-seen .footnote { margin-top: 8px; }

/* ---------- Cinematics, chapter cards, credits ---------- */
#movie, #chapter-card, #credits { position: absolute; inset: 0; z-index: 30; background: #07110d; color: #eef1ee; }
#movie-player { position: absolute; inset: 0; width: 1280px; height: 720px; object-fit: contain; }
.skip-hint { position: absolute; bottom: 24px; right: 30px; padding: 8px 16px; border: 1px solid rgba(217,221,224,.35); border-radius: 7px; color: #eef1ee; background: rgba(7,17,13,.75); font: 700 18px "Cormorant Garamond","PP Noto UI Symbols",serif; cursor: pointer; z-index: 4; }
.skip-hint:hover, .skip-hint:focus-visible { color: #e4c78e; border-color: #e4c78e; }
#chapter-card { display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at center,#153e29,#050d09 75%); overflow: hidden; }
.chapter-ornament { color: var(--gold); font-size: 38px; margin-bottom: 22px; animation: card-number .55s ease-out both; }
#chapter-number { margin: 0 0 18px; color: #c7b995; font: 22px "Cormorant Garamond","PP Noto UI Symbols",serif; text-transform: uppercase; letter-spacing: .32em; animation: card-number .55s ease-out .12s both; }
#chapter-title { margin: 0; font: 700 62px var(--display-font, "Cinzel Decorative"),"Cormorant Garamond","PP Noto UI Symbols",serif; max-width: 1100px; text-align: center; animation: card-title .75s cubic-bezier(.16,.7,.25,1) .25s both; }
.chapter-rule { margin-top: 34px; height: 1px; width: 320px; background: linear-gradient(90deg,transparent,var(--gold),transparent); transform-origin: center; animation: card-rule .6s ease-out .45s both; }
.sequel-card #chapter-number { display: none; }
.sequel-card .chapter-ornament, .sequel-card #chapter-title, .sequel-card .chapter-rule { animation: none; }
@keyframes card-number { from { opacity: 0; transform: translate3d(0,9px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes card-title { from { opacity: 0; transform: translate3d(0,22px,0) scale(.975); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes card-rule { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
#credits { overflow: hidden; background: radial-gradient(ellipse at 50% 45%,#143122,#050d09 80%); }
#credits-window { position: absolute; inset: 0 0 92px; overflow: hidden; }
#credits-roll { position: absolute; width: 100%; padding: 50px 130px; text-align: center; font: 24px/1.65 "Cormorant Garamond","PP Noto UI Symbols",serif; animation: credits-crawl 28s linear forwards; will-change: transform; }
#credits-roll h1 { font: 700 48px/1.3 var(--display-font, "Cinzel Decorative"),"Cormorant Garamond","PP Noto UI Symbols",serif; color: #e4d5ae; margin: 10px 0 34px; }
#credits-roll h2 { font-size: 28px; color: #c9a45c; margin: 45px 0 14px; }
#credits-roll p { margin: 10px 0; }
#credits-roll .credits-ending { text-transform: uppercase; letter-spacing: .25em; font-size: 18px; color: #b9cfbd; }
@keyframes credits-crawl { from { transform: translate3d(0,620px,0); } to { transform: translate3d(0,var(--credits-end,-1680px),0); } }
.corrupted { color: #7a0f1f; animation: textglitch .22s steps(2) infinite; }
.bad-credits .credits-player { color: #d5a6be; }
.bad-credits .credits-player::after { content: attr(data-name); display: block; font-size: 18px; color: #81a790; transform: scaleX(-1); opacity: .4; }
#stage.glitch .sprite-focus { animation: scene-glitch .18s steps(2) infinite; }
#stage.glitch .bg-layer { animation: scene-glitch .18s steps(2) infinite; }
@keyframes scene-glitch { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-8px,3px,0) skewX(.7deg); } 100% { transform: translate3d(6px,-2px,0); } }

/* ---------- Saves and extras ---------- */
#panel { z-index: 40; }
#toast { z-index: 50; }
.slot { display: flex; flex-direction: column; gap: 7px; width: 100%; margin: 12px 0; padding: 15px 20px; border: 2px solid #8b9f82; border-radius: 8px; text-align: left; background: #fff9eb; color: var(--ink); font: 20px "Cormorant Garamond","PP Noto UI Symbols",serif; }
.slot b { font-size: 24px; color: var(--emerald); }
.slot span { white-space: pre-line; }
.slot:hover:not(:disabled) { background: #e8efd9; border-color: var(--emerald); }
.slot:disabled { opacity: .55; cursor: default; }
#panel.carryover-panel .parchment.wide { max-height: 680px; padding: 16px 28px 18px; }
#panel.carryover-panel h2 { font-size: 30px; }
#panel.carryover-panel #panel-body { margin: 8px 0 12px; }
#panel.carryover-panel .slot {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: max(80px, var(--touch-hit, 44px)); margin: 8px 0; padding: 10px 12px;
}
#panel.carryover-panel .slot b { font-size: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.gallery-tile { min-height: 140px; padding: 16px; background: #264e38 center / cover; border: 2px solid #bca373; border-radius: 8px; color: #f6ebd0; text-transform: capitalize; font: 700 24px "Cormorant Garamond","PP Noto UI Symbols",serif; display: flex; align-items: end; justify-content: center; }
.gallery-tile:disabled { background: #26352e; color: #7f9589; cursor: default; border-color: #8d8c76; }
.gallery-full { width: 100%; display: block; border-radius: 6px; }
#panel-body h3 { font-size: 25px; color: var(--emerald); }
.settings-tip { font-size: 17px; }
.save-backup { border-top: 1px solid #b9a782; margin-top: 24px; padding-top: 12px; }
.save-backup h3 { margin: 0 0 8px; }
.backup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#panel .backup-actions .btn, #panel #backup-select, #panel #backup-load-code {
  min-width: 0; min-height: max(44px, var(--touch-hit, 44px)); padding: 10px 12px;
  white-space: normal; overflow-wrap: anywhere;
}
.backup-code {
  display: block; width: 100%; min-height: 120px; max-height: 240px; margin: 14px 0;
  padding: 12px; resize: vertical; font: 16px/1.5 monospace; color: var(--ink);
  background: #fffaf0; border: 2px solid #b9a782; border-radius: 8px;
  overflow-wrap: anywhere; word-break: break-all; -webkit-user-select: text; user-select: text;
}
.backup-code:focus { outline: 2px solid var(--emerald); outline-offset: 2px; }
.backup-status { color: var(--emerald); font-weight: 700; }
.backup-status:empty { display: none; }
.backup-warning { font-weight: 700; }
.backup-slots { padding-left: 24px; }
.backup-slots li { margin: 8px 0; }
#panel.backup-confirm-panel .parchment.wide { max-height: 680px; padding: 16px 28px 18px; transition-property: none; }
#panel.backup-confirm-panel h2 { font-size: 30px; }
#panel.backup-confirm-panel #panel-body { margin: 8px 0 12px; }
#panel.backup-confirm-panel #panel-body p { margin: 8px 0; }
#panel.backup-confirm-panel .backup-slots { margin: 8px 0; }
#panel.backup-confirm-panel .backup-slots li { margin: 4px 0; }

/* Preference turns off all spatial/loop motion, including glitch and particles.
   Opacity cuts remain brief so expression/scene changes are still legible. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition-duration: .01s !important; }
.reduce-motion .bg-layer { transform: none; }
.reduce-motion #ambient { display: none; }
.reduce-motion #credits-window { overflow-y: auto; scrollbar-gutter: stable; }
.reduce-motion #credits-roll { position: relative; padding-top: 30px; transform: none; }
.reduce-motion #credits .skip-hint { position: absolute; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.slot, .btn, .gallery-tile, #choices button, #mg-words button { line-height: 1.3; overflow-wrap: anywhere; }
.slot:focus-visible, .gallery-tile:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.gallery-tile:disabled { color: #c2d0c5; }
.footnote { opacity: 1; color: #c3cdc6; }
#toast { max-width: 1100px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }

/* The register lives outside the scaled stage so a software keyboard cannot
   scroll the scene or shrink the input. JS fits it to the visual viewport. */
#nameinput {
  position: fixed; right: auto; bottom: auto; z-index: 60;
  padding: 18px; overflow: auto; font-family: "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
#nameinput .parchment { width: min(460px, 100%); }
#name-field { user-select: text; -webkit-user-select: text; }
#rotate-device { display: none; }

@media (pointer: coarse) {
  #textbox { width: 1120px; height: 266px; padding: 26px 64px calc(var(--touch-hit) + 44px) 32px; }
  #text { inset: 26px 64px calc(var(--touch-hit) + 44px) 32px; --dialogue-size: 26px; font-size: var(--dialogue-size); }
  #quickmenu { bottom: 0; gap: 0; padding: 0 8px; }
  #quickmenu button {
    /* Short viewports (e.g. iPhone landscape under browser toolbars) inflate --touch-hit;
       share the box width instead so eleven buttons never spill past its edges. */
    flex: 1; min-width: 0; min-height: var(--touch-hit);
    padding: 8px 2px; font-size: 18px; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #quickmenu .speaker-button, #quickmenu .voice-button { padding: 8px 2px; }
  .speaker-button svg, .voice-button svg, .fullscreen-button svg { width: 26px; height: 26px; }
  #ctc { bottom: calc(var(--touch-hit) + 4px); }
  #voice-skip-hint { bottom: calc(var(--touch-hit) + 4px); font-size: 22px; }
  #choices button, #mg-words button, #title .btn, #panel .btn, .skip-hint {
    min-height: var(--touch-hit);
  }
  #choices { bottom: 310px; }
  #choices button { padding: 14px 20px; }
  /* Five invitations need more room above the touch dialogue box. Widen the
     buttons to keep translated labels readable without changing smaller menus. */
  #choices:has(> button:nth-child(4)) {
    bottom: 286px; gap: 6px; justify-content: center; overflow: hidden;
  }
  #choices:has(> button:nth-child(4)) > button {
    width: 1040px; max-width: calc(100% - 40px); min-height: var(--touch-hit);
    flex-shrink: 0; padding: 6px 20px; font-size: 23px;
  }
  /* Six or more options (rare route-lock menus) become a two-column grid so
     every option fits on a phone without a scrolling frame. */
  #choices:has(> button:nth-child(5)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
    align-content: center; justify-items: stretch; gap: 8px 10px; padding: 6px 20px;
  }
  #choices:has(> button:nth-child(5)) > button {
    width: auto; max-width: none; min-height: var(--touch-hit); padding: 4px 14px; font-size: 21px; line-height: 1.2;
  }
  #choices:has(> button:nth-child(5)) > button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  #title nav { gap: 6px; }
  #title h1 { font-size: 60px; margin-bottom: 16px; }
  #title .footnote { margin-top: 16px; }
  #title.ending-seen h1 { font-size: 52px; }
  #title-sequel { margin-top: 8px; }
  #panel .slot { min-height: var(--touch-hit); }
  #panel-body label { min-height: var(--touch-hit); margin: 4px 0; }
  #panel-body input[type=range] { min-height: var(--touch-hit); }
  #nameinput .btn, #name-field { min-height: 44px; font-size: 22px; }
}

@media (max-height: 420px) {
  #nameinput { padding: 10px 18px; }
  #nameinput .parchment { padding: 14px 24px; }
  #nameinput h2 { font-size: 27px; }
  #nameinput .hint { margin-bottom: 8px; }
  #name-field { margin-bottom: 10px; padding: 7px 12px; }
}
#nameinput.keyboard-open { place-items: start center; padding: 6px 18px; }
#nameinput.keyboard-open .parchment { padding: 10px 20px; }
#nameinput.keyboard-open h2, #nameinput.keyboard-open .hint { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-device {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px; text-align: center;
    background: #07100b; color: var(--silver); font-family: "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif;
  }
  #rotate-device span { font-size: 72px; color: var(--gold); }
  #rotate-device p { font-size: 24px; font-weight: 800; margin: 18px 0 12px; }
  #rotate-device small { font-size: 16px; line-height: 1.5; }
}

#title h1::after { top: 0; bottom: 0; }
/* Disabled title buttons: the arrive animation pins opacity to 1, so dim with colour/filter instead. */
#title nav .btn:disabled {
  background: #1a2a22; color: rgba(217, 221, 224, .45); border-color: rgba(217, 221, 224, .25);
  filter: saturate(.35); box-shadow: none; cursor: not-allowed; transform: none;
}

/* Locale controls stay available while a module owns the story's input. */
/* Native popup fits short phone viewports; it is independent of stage scale. */
.language-toggle { display: none; position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 25; font: 600 16px/1.4 "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif; }
body:has(#title:not(.hidden)) .language-toggle { display: block; }
body:has(#panel:not(.hidden), #nameinput:not(.hidden)) .language-toggle { display: none; }
/* Draw our own chevron inside the button: the browser's native arrow sat outside it on iOS. */
.language-toggle select { width: 204px; max-width: calc(100vw - 24px); min-height: 36px; padding: 5px 30px 5px 10px; border: 1px solid var(--gold); border-radius: 6px; background: #102b21 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e2c27a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 12px 8px; color: #f2dfb8; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.language-toggle select:focus-visible { outline: 2px solid #f2dfb8; outline-offset: 2px; }
@media (pointer: coarse) { .language-toggle select { min-height: 44px; } }
/* Label-only subsets keep every native name readable in the OS-owned popup.
   These selectors deliberately override the active dialogue language's face. */
.language-toggle select, #panel-body #language-setting {
  font-family: "Nunito","PP Picker JP","PP Picker SC","PP Picker KR","PP Picker TH","Cormorant Garamond","PP Noto UI Symbols",sans-serif;
  font-style: normal; line-height: 1.65;
}
#language-setting option, #title-language option { font: inherit; }
.minigame-settings { display: none; position: absolute; right: 18px; bottom: 8px; z-index: 19; padding: 5px 12px; border: 1px solid #c9a45c; border-radius: 6px; background: #102b21; color: #f3ead6; font-size: 14px; }
.minigame-active .minigame-settings { display: block; }
#stage:has(#minigame-root:is([data-minigame="brew"], [data-minigame="waltz"], [data-minigame="dust"], [data-minigame="sabotage"], [data-minigame="rune"])) .minigame-settings { top: 0; bottom: auto; padding-block: 3px; }
#stage:has(#minigame-root[data-minigame="dust"]) .minigame-settings { right: 150px; padding-block: 1px; }
/* Brewing has free space left of its Pause button. */
#stage:has(#minigame-root[data-minigame="brew"]) .minigame-settings { right: 140px; }

html[lang=ja], .log-line:lang(ja) { --cjk-sans: "PP Noto Sans JP"; --cjk-serif: "PP Noto Serif JP"; --cjk-word-break: normal; }
html[lang=zh-Hans], .log-line:lang(zh) { --cjk-sans: "PP Noto Sans SC"; --cjk-serif: "PP Noto Serif SC"; --cjk-word-break: normal; }
html[lang=ko], .log-line:lang(ko) { --cjk-sans: "PP Noto Sans KR"; --cjk-serif: "PP Noto Serif KR"; --cjk-word-break: keep-all; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) { word-break: var(--cjk-word-break, normal); line-break: strict; font-synthesis: weight; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #stage, html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #nameinput, html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #rotate-device,
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root * { font-family: var(--cjk-sans),"PP Noto UI Symbols",sans-serif; font-style: normal; word-break: var(--cjk-word-break, normal); line-break: strict; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(h1,h2,h3,blockquote),
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) :is(.parchment, .btn, #nametag, .slot, .gallery-tile, .skip-hint),
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title :is(h1,.kicker,.footnote),
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) :is(#chapter-number,#chapter-title,#credits-roll,#credits-roll h1,#name-field) { font-family: var(--cjk-serif),"PP Noto UI Symbols",serif; font-style: normal; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #text { line-height: 1.55; word-break: var(--cjk-word-break, normal); line-break: strict; overflow-wrap: normal; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #text.narration { font-style: normal; color: #665845; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) :is(#choices button,#mg-words button,#panel-body,.slot,.btn,#toast) { line-height: 1.5; overflow-wrap: normal; word-break: var(--cjk-word-break, normal); line-break: strict; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #mg-words button { font-family: var(--cjk-serif),"PP Noto UI Symbols",serif; font-style: normal; font-size: 22px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title h1 { font-size: 64px; line-height: 1.4; margin-top: 16px; margin-bottom: 28px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title .kicker { font-size: 18px; letter-spacing: .08em; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title .footnote { font-size: 14px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #chapter-title { font-size: 54px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #nametag { font-size: 22px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #quickmenu { gap: 10px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #panel-body { font-size: 18px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #panel-body label { font-size: 19px; margin: 9px 0; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) .settings-tip { font-size: 14px; line-height: 1.75; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #credits-roll { font-size: 21px; line-height: 1.8; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(p,blockquote) { line-height: 1.45; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.brew-card h2,.dust-card h2,.ru-card h2,.sab-card h2) { font-size: 40px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.brew-card p,.dust-instruction,.ru-instruction,.sab-card p) { font-size: 24px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.brew-how p,.dust-how li,.ru-lesson,.sab-how-step p) { font-size: 22px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.brew-card small,.dust-card small,.ru-fine,.sab-card small) { font-size: 21px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.brew-card-quote,.dust-card blockquote,.ru-card blockquote,.sab-card blockquote) { font-size: 26px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-card h2 { font-size: 38px; margin-bottom: 7px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-demo-step :is(b,span) { font-size: 20px; line-height: 1.4; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-controls { font-size: 21px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-caption { font-size: 20px; line-height: 1.45; margin-top: 8px; }
.log-line:is(:lang(ja), :lang(zh), :lang(ko)) { font-family: var(--cjk-sans),"PP Noto UI Symbols",sans-serif; line-height: 1.65; word-break: var(--cjk-word-break, normal); line-break: strict; }

/* Existing Latin body/serif faces cover all Cyrillic and Vietnamese marks.
   Consistent Cormorant display subsets replace the incomplete Cinzel face. */
html[lang=ru] { --display-font: "PP Cormorant RU"; }
html[lang=vi] { --display-font: "PP Cormorant VI"; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=vi], [lang=id]) {
  word-break: normal; line-break: auto;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=vi], [lang=id]) #minigame-root * {
  font-family: "Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=vi], [lang=id]) #minigame-root :is(h1,h2,h3,blockquote) {
  font-family: "Cormorant Garamond","PP Noto UI Symbols",serif;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=id]) :is(#text,#panel-body,.settings-tip,.log-line) { hyphens: auto; }
html[lang=vi] :is(#text,#panel-body,.settings-tip,.log-line), .log-line:lang(vi) { line-height: 1.55; }
/* Thai stacks need taller line boxes and dictionary word segmentation. Never
   use anywhere/break-all or add word spaces to Thai sentences. */
html[lang=th] { font-synthesis: weight; word-break: normal; line-break: auto; }
html[lang=th] :is(#stage,#nameinput,#rotate-device),
html[lang=th] #minigame-root * {
  font-family: "PP Noto Sans TH","Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif;
  font-style: normal; word-break: normal; overflow-wrap: normal; line-break: auto; letter-spacing: normal;
}
html[lang=th] #minigame-root :is(h1,h2,h3,blockquote),
html[lang=th] :is(.parchment,.btn,#nametag,.slot,.gallery-tile,.skip-hint,#chapter-number,#chapter-title,#credits-roll,#credits-roll h1,#name-field,#title-sequel,#register-roster,#register-logo),
html[lang=th] #title :is(h1,.kicker,.footnote) {
  font-family: "PP Noto Serif TH","Cormorant Garamond","PP Noto UI Symbols",serif; font-style: normal; letter-spacing: normal;
}
html[lang=th] #text { --dialogue-size: 22px; line-height: 1.65; word-break: normal; line-break: auto; overflow-wrap: normal; }
html[lang=th] #text.narration { font-style: normal; }
html[lang=th] :is(#choices button,#mg-words button,#panel-body,.slot,.btn,#toast,#minigame-root p,#minigame-root blockquote) { line-height: 1.65; word-break: normal; overflow-wrap: normal; line-break: auto; }
html[lang=th] #title h1 { font-size: 58px; line-height: 1.45; margin-block: 10px 26px; }
html[lang=th] #title .kicker { font-size: 18px; line-height: 1.65; }
html[lang=th] #title .footnote { font-size: 14px; line-height: 1.65; }
html[lang=th] #nametag { font-size: 22px; line-height: 1.65; }
html[lang=th] #chapter-title { font-size: 48px; line-height: 1.65; }
html[lang=th] #panel-body { font-size: 18px; }
html[lang=th] #panel-body label { font-size: 19px; margin: 9px 0; }
html[lang=th] .settings-tip { font-size: 14px; line-height: 1.7; }
.log-line:lang(th) { font-family: "PP Noto Sans TH","Nunito","Cormorant Garamond","PP Noto UI Symbols",sans-serif; font-style: normal; line-height: 1.65; word-break: normal; overflow-wrap: normal; line-break: auto; }
#text .reveal-tail { visibility: hidden; }
@media (pointer: coarse) {
  /* Translated labels need widths proportional to their text while preserving
     44px physical touch targets for every control in the scaled stage. */
  html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #quickmenu button {
    flex: 1 1 auto; min-width: var(--touch-hit); font-size: 16px; padding-inline: 4px;
  }
  html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #quickmenu :is(.speaker-button,.voice-button,.fullscreen-button) {
    flex: 0 0 var(--touch-hit);
  }
}

/* CJK glyph metrics need explicit line boxes in the fixed 1280×720 stage. */
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .sab-jar img { height: 120px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .sab-jar-name { height: 60px; font-size: 20px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .sab-stat { font-size: 22px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .sab-stat strong { font-size: 30px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .sab-time > div { line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-percent { line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-kicker { font-size: 20px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-quote { top: 528px; font-size: 22px; line-height: 1.5; padding: 8px 22px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-quote-label { font-size: 20px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-plaque { top: 540px; font-size: 20px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .dust-footer { left: 32px; font-size: 18px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .brew-directions { font-size: 20px; line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .brew-footer { right: 148px; font-size: 21px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .brew-combo { top: 465px; z-index: 2; font-size: 23px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-stat span { line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root :is(.wz-stat strong,.wz-result-stats strong,.wz-countdown b) { line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .wz-countdown span { line-height: 1.5; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-side { padding-top: 8px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-side h2 { font-size: 32px; margin-bottom: 6px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-step { font-size: 22px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-quote { font-size: 23px; line-height: 1.5; height: 116px; padding-top: 8px; margin-bottom: 6px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-status { font-size: 20px; line-height: 1.5; height: 90px; margin-bottom: 6px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-steady { min-height: 72px; font-size: 24px; padding: 8px 18px; }

html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-seals { margin-bottom: 4px; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #minigame-root .ru-meter { margin-bottom: 6px; }

@media (pointer: coarse) {
  html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #quickmenu { gap: 0; }
  html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #quickmenu button { font-size: 16px; }
  html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #quickmenu button[data-act=title] { flex: 1.65; }
  html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title h1 { font-size: 52px; margin-top: 8px; margin-bottom: 12px; }
  html:is([lang=ja], [lang=zh-Hans], [lang=ko]) #title .title-inner { transform: translateY(10px); }
}

/* Year Two keeps both six-chapter runs within the original stage. */
#title nav { display: grid; grid-template-columns: repeat(2, 300px); gap: 12px 20px; justify-content: center; }
#title .title-inner { max-width: 1120px; }
#register-roster { position: absolute; top: 28px; left: 35px; z-index: 7; max-width: 650px; padding: 14px 22px; border: 2px solid var(--gold); border-radius: 6px; background: var(--parchment); font: 24px/1.4 "Cormorant Garamond","PP Noto UI Symbols",serif; }
#register-roster b, #register-roster span { display: block; }
#register-logo { position: absolute; inset: 110px 90px auto; z-index: 17; padding: 20px; background: #07110dee; border: 1px solid var(--gold); color: var(--silver); text-align: center; font: 700 58px/1.4 var(--display-font, "Cinzel Decorative"),"Cormorant Garamond","PP Noto UI Symbols",serif; pointer-events: none; }
html:is([lang=ja], [lang=zh-Hans], [lang=ko]) :is(#register-roster,#register-logo) { font-family: var(--cjk-serif),serif; }
#stage:has(#minigame-root:is([data-minigame=catch],[data-minigame=ink])) .minigame-settings { top: 0; bottom: auto; padding-block: 3px; }
#stage:has(#minigame-root[data-minigame=catch]) .minigame-settings { padding-block: 1px; }
/* Reserve full font line boxes for the two new modules and their result cards. */
#minigame-root .ct-heading h1 { font-size: 44px; line-height: 1.5; }
#minigame-root .ct-stat b, #minigame-root .ct-result-stats b { line-height: 1.5; }
#minigame-root .ct-card h2, #minigame-root .ct-result-heading .ct-stars { line-height: 1.5; }
#minigame-root .ct-card h2 { font-size: 40px; }
#minigame-root .ct-result .ct-quip { line-height: 1.4; }
#minigame-root .ik-brand h1 { font-size: 40px; line-height: 1.5; }
#minigame-root .ik-header { height: 96px; }
#minigame-root .ik-register-head h2 { font-size: 26px; line-height: 1.5; }
#minigame-root .ik-readings { line-height: 1.5; }
#minigame-root .ik-lens-caption { top: 318px; font-size: 22px; line-height: 1.5; }
#minigame-root .ik-card h2 { line-height: 1.5; }
#minigame-root .ik-how p { line-height: 1.5; }
#minigame-root .ik-stars { line-height: 1.5; }
#minigame-root .ik-board:has(>.ik-findings)>:not(.ik-findings) { visibility: hidden; }
#minigame-root .ik-findings p { line-height: 1.5; margin-block: 8px; }

/* Spanish copy needs room within the native mini-games' fixed stage. */
html[lang=es] #minigame-root .sab h1 { font-size: 37px; white-space: nowrap; }
html[lang=es] #minigame-root .sab-header { gap: 12px; }
html[lang=es] #minigame-root .sab-stat { font-size: 20px; min-width: 140px; }
html[lang=es] #minigame-root .sab-stat strong { font-size: 30px; }
html[lang=es] #minigame-root .sab-time > div { font-size: 18px; }
html[lang=es] #minigame-root .dust-combo { font-size: 23px; }
html[lang=es] #minigame-root .dust-combo small { font-size: 21px; }
html[lang=es] #minigame-root .dust-card h2 { font-size: 46px; }
html[lang=es] #minigame-root .dust-result-stat { font-size: 23px; }
html[lang=es] #minigame-root .dust-card small { font-size: 22px; }
html[lang=es] #minigame-root .brew-directions { font-size: 20px; line-height: 1.35; }
html[lang=es] #minigame-root .brew-tutorial { font-size: 21px; }
html[lang=es] #minigame-root .brew-shelf-title { font-size: 27px; }
html[lang=es] #minigame-root .brew-keyhint { font-size: 22px; margin-top: 10px; }
html[lang=es] #minigame-root .brew-stir-info { padding: 12px; min-height: 200px; }
html[lang=es] #minigame-root .brew-stir-info p { font-size: 22px; }
html[lang=es] #minigame-root .brew-quench { padding: 10px; font-size: 24px; margin-top: 10px; }
html[lang=es] #minigame-root .brew-quench small { font-size: 20px; }
html[lang=es] #minigame-root .ru-quote { font-size: 24px; }
html[lang=zh-Hans] #minigame-root .brew-hint-arrow { top: 8px; line-height: 1; }
html[lang=ko] #minigame-root .brew-hint-arrow { top: 8px; line-height: 1; }
html[lang=es] #minigame-root .wz-feedback { font-size: 22px; }
/* Keep Korean words intact, with an emergency wrap for words wider than their box. */
html[lang=ko] :is(#text, #choices button, #mg-words button, #panel-body, .log-line:lang(ko)),
html[lang=ko] #minigame-root * { overflow-wrap: anywhere; }
@media (pointer: coarse) {
  html[lang=es] #quickmenu button[data-act=title] { flex: 1.65; }
}
html[lang=es] #minigame-root .dust-quote { top: 528px; font-size: 23px; line-height: 1.4; padding: 8px 22px; }
@media (pointer: coarse) and (max-height: 320px) {
  html[lang=ko] #text { white-space: normal; }
}
html[lang=es] #minigame-root .brew-hint-arrow { top: 8px; line-height: 1; }
/* Keep Spanish instruction cards and secondary counters inside the stage. */
html[lang=es] #minigame-root .brew-how b { font-size: 24px; line-height: 1.3; }
html[lang=es] #minigame-root .brew-how p { font-size: 22px; }
html[lang=es] #minigame-root .brew-card small { font-size: 22px; }
html[lang=es] #minigame-root .sab-intro h2 { font-size: 44px; }
html[lang=es] #minigame-root .sab-intro .sab-how-art { height: 65px; }
html[lang=es] #minigame-root .sab-intro .sab-how-step p { font-size: 23px; }
html[lang=es] #minigame-root .sab-intro .sab-controls { font-size: 23px; }
html[lang=es] #minigame-root .sab-intro small { font-size: 22px; }
html[lang=es] #minigame-root .ru-intro h2 { font-size: 48px; margin-block: 8px; }
html[lang=es] #minigame-root .ru-intro .ru-lesson { font-size: 22px; }
html[lang=es] #minigame-root .ru-intro .ru-lesson svg { height: 60px; }
html[lang=es] #minigame-root .ru-intro blockquote { font-size: 28px; }
html[lang=es] #minigame-root .ru-intro .ru-fine { font-size: 22px; }
html[lang=es] #minigame-root .ik-combo { font-size: 18px; }

/* Final-catalog fit for the six added locales. The mini-games use fixed stage
   coordinates, so reserve separate space for translated instructions/status. */
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root {
  --localized-copy: 22px; --localized-leading: 1.4;
}
html[lang=th] #minigame-root { --localized-copy: 20px; --localized-leading: 1.65; }
html[lang=vi] #minigame-root { --localized-leading: 1.55; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.sab-card,.dust-card,.brew-card,.ru-card) {
  padding: 14px 30px;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.sab-card h2,.dust-card h2,.brew-card h2,.ru-card h2) {
  font-size: 42px; line-height: 1.4; margin-block: 6px 10px;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.sab-how-step p,.sab-controls,.sab-card small,.dust-how li,.dust-controls-row,.dust-card small,.dust-result-stat,.brew-how p,.brew-controls,.brew-card small,.brew-card .brew-card-instruction,.ru-lesson,.ru-fine) {
  font-size: var(--localized-copy); line-height: var(--localized-leading);
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.sab-intro blockquote,.dust-card blockquote,.brew-card .brew-card-quote,.ru-card blockquote) {
  font-size: 27px; line-height: var(--localized-leading); margin-block: 8px;
}
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.sab-how-art,.ru-lesson svg) { height: 58px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-header { gap: 12px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-header h1 { font-size: 35px; white-space: nowrap; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-stat { font-size: 20px; min-width: 130px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-stat strong { font-size: 28px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-jar img { height: 116px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-jar-name { height: 68px; font-size: 20px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-hint { font-size: 19px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .dust-plaque { top: 540px; font-size: 20px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .dust-quote { top: 528px; padding: 8px 22px; font-size: 23px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-directions { font-size: 18px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-tutorial { font-size: 19px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-signature { font-size: 20px; margin-top: 5px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-keyhint { font-size: 19px; margin-top: 8px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-stir-info { padding: 10px; min-height: 180px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-stir-info p { font-size: 21px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-quench { padding: 8px; margin-top: 8px; font-size: 23px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-quench small { font-size: 19px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-clock { font-size: 20px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .wz-foot-hint { font-size: 19px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root :is(.wz-controls,.wz-caption) { font-size: 20px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .wz-feedback { font-size: 22px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ru-quote { height: 108px; font-size: 22px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ru-status { height: 58px; font-size: 20px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ct-pause { width: auto; min-width: 150px; padding-inline: 12px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ct-controls { font-size: 20px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ct-coach-line { font-size: 23px; line-height: var(--localized-leading); }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ik-pause { width: 165px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ik-trait { font-size: 18px; line-height: var(--localized-leading); overflow-wrap: normal; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ik-combo { top: 12px; font-size: 18px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .ik-quip { line-height: var(--localized-leading); }

/* Noto Thai's stacked marks exceed the original Latin heading/number boxes.
   Apply full line boxes to each nested text run as well as its paragraph. */
html[lang=th] #minigame-root :is(h1,h2,h3,b,strong,span,small) { line-height: 1.65; }
html[lang=th] #title-sequel { line-height: 1.65; }
html[lang=th] #minigame-root :is(h1,h2,h3) { font-size: 34px; }
html[lang=th] #minigame-root :is(.sab-stat strong,.wz-stat strong,.ct-stat b) { font-size: 25px; }
html[lang=th] #minigame-root :is(.sab-kicker,.brew-eyebrow,.ru-kicker) { font-size: 18px; line-height: 1.65; }
html[lang=th] #minigame-root .sab-test { font-size: 19px; line-height: 1.65; }
html[lang=th] #minigame-root .dust-edition { font-size: 18px; }
html[lang=th] #minigame-root .dust-quote { font-size: 20px; }
html[lang=th] #minigame-root .brew-heat-panel { padding: 10px; }
html[lang=th] #minigame-root .brew-heat-panel p { font-size: 20px; margin-bottom: 8px; }
html[lang=th] #minigame-root .brew-heat-label { font-size: 20px; line-height: 1.65; margin-bottom: 8px; }
html[lang=th] #minigame-root .brew-heat-track { margin-top: 22px; }
html[lang=th] #minigame-root .brew-flame { min-height: 90px; font-size: 23px; padding: 10px; }
html[lang=th] #minigame-root .brew-quality { font-size: 20px; line-height: 1.65; margin-top: 10px; }
html[lang=th] #minigame-root :is(.ct-cue,.ct-controls,.ik-combo) { line-height: 1.65; }
html[lang=th] #minigame-root .ct-quip { font-size: 25px; line-height: 1.65; }
html[lang=th] #minigame-root .ru-name { font-size: 32px; margin-bottom: 4px; }
html[lang=th] #minigame-root .ru-step { font-size: 21px; }
html[lang=th] #minigame-root .ru-quote { font-size: 20px; height: 108px; }
html[lang=th] #minigame-root .ru-status { font-size: 18px; height: 64px; }
html[lang=th] #minigame-root .ru-steady { font-size: 22px; min-height: 78px; padding: 8px; }

html[lang=ru] #minigame-root .sab-jar-name { font-size: 18px; }
html[lang=ru] #minigame-root .sab-recipe li { font-size: 19px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .dust-combo { font-size: 23px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .dust-combo small { font-size: 19px; line-height: var(--localized-leading); }
html[lang=fr] #minigame-root .dust-status { font-size: 22px; }
html[lang=fr] #minigame-root .wz-demo-step span { font-size: 18px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .brew-hint-arrow { top: 8px; line-height: 1; }
html[lang=ru] #minigame-root .brew-heat-panel { padding: 10px; }
html[lang=ru] #minigame-root .brew-heat-panel p { font-size: 20px; margin-bottom: 8px; }
html[lang=ru] #minigame-root .brew-heat-track { margin-top: 22px; }
html[lang=ru] #minigame-root .brew-heat-label { font-size: 20px; margin-bottom: 8px; }
html[lang=ru] #minigame-root .brew-flame { min-height: 90px; padding: 10px; font-size: 23px; }
html[lang=ru] #minigame-root .brew-quality { margin-top: 10px; font-size: 20px; }
html[lang=fr] #minigame-root .dust-measure span:last-child { font-size: 22px; }
html[lang=vi] #minigame-root .brew-directions { font-size: 18px; }
html[lang=vi] #minigame-root .brew-recipe li { min-height: 36px; }
html[lang=vi] #minigame-root .brew-recipe ol { gap: 3px; }
html[lang=vi] #minigame-root .ru-quote { height: 118px; font-size: 21px; }
html[lang=vi] #minigame-root .ru-status { height: 65px; font-size: 19px; }
html[lang=id] #minigame-root .brew-quality { font-size: 20px; margin-top: 10px; }
html[lang=id] #minigame-root .wz-result .wz-caption { font-size: 20px; }
html[lang=th] #credits-roll h1 { line-height: 1.65; }
html[lang=th] #register-roster :is(b,span) { line-height: 1.65; }
html[lang=fr] #minigame-root .dust-entry span { font-size: 22px; }
html[lang=ru] #minigame-root .sab-jar-name { max-width: 100%; overflow-wrap: anywhere; }
html[lang=ru] #minigame-root .sab-recipe b { font-size: 22px; }
html[lang=ru] #minigame-root .sab-hint { font-size: 18px; }
html[lang=vi] #minigame-root .ru-steady { font-size: 22px; min-height: 78px; padding: 8px; }
html[lang=id] #minigame-root .brew-heat-panel { padding: 10px; }
html[lang=id] #minigame-root .brew-heat-panel p { font-size: 22px; margin-bottom: 8px; }
html[lang=id] #minigame-root .brew-heat-label { font-size: 22px; margin-bottom: 10px; }
html[lang=id] #minigame-root .brew-heat-track { margin-top: 24px; }
html[lang=id] #minigame-root .wz-caption { font-size: 18px; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .wz-result-quip { font-size: 27px; line-height: var(--localized-leading); }
html[lang=id] #minigame-root .wz-result .wz-caption { font-size: 18px; margin-top: 8px; }
html[lang=th] #minigame-root :is(.sab-card h2,.dust-card h2,.brew-card h2,.ru-card h2) { font-size: 34px; line-height: 1.65; }
html[lang=th] #minigame-root .sab-test b { width: 112px; font-size: 20px; }
html[lang=th] #minigame-root .sab-recipe li { font-size: 18px; line-height: 1.65; }
html[lang=th] #minigame-root .sab-recipe b { font-size: 20px; }
html[lang=th] #minigame-root .sab-hint { font-size: 18px; }
html[lang=th] #minigame-root .dust-edition { top: 10px; }
html[lang=th] #minigame-root .dust-reaction blockquote { font-size: 24px; }
html[lang=th] #minigame-root .dust-stars { font-size: 44px; }
html[lang=th] #minigame-root .brew-recipe li span { height: 40px; line-height: 38px; }
html[lang=th] #minigame-root .wz-seal b { font-size: 32px; }
html[lang=th] #minigame-root .wz-seal span { font-size: 20px; }
html[lang=th] #stage .minigame-settings { font-size: 14px; line-height: 1.65; }
html[lang=th] #stage:has(#minigame-root[data-minigame=rune]) .minigame-settings { right: 128px; }
/* Keep the animated tutorial arrow inside its illustration in every locale. */
#minigame-root .brew-hint-arrow { top: 8px; line-height: 1; }
html[lang=fr] #minigame-root .dust-entry { padding-block: 8px; margin-bottom: 8px; }
html[lang=vi] #minigame-root .ru-quote { height: 112px; }
html[lang=id] #minigame-root .wz-result-quip { font-size: 24px; }
html[lang=th] #minigame-root .brew-phase-title { font-size: 28px; line-height: 1.65; }
html[lang=th] #minigame-root .brew-phase-hint { font-size: 20px; }
html[lang=th] #minigame-root .brew-jar b { font-size: 19px; min-height: 64px; }
html[lang=th] #minigame-root .brew-jar .brew-icon { height: 106px; }
html[lang=th] #stage:has(#minigame-root[data-minigame=waltz]) .minigame-settings { right: 145px; }
html[lang=th] #stage:has(#minigame-root[data-minigame=waltz]) .minigame-settings { right: 185px; }
html[lang=id] #minigame-root .wz-reaction { margin-block: 4px; }
html[lang=id] #minigame-root .wz-result-stats { margin-block: 6px; }
html[lang=id] #minigame-root .wz-result h2 { font-size: 36px; line-height: 1.3; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-how-art .sab-ghost { font-size: 38px; line-height: 1; }
html:is([lang=fr], [lang=pt-BR], [lang=ru], [lang=th], [lang=vi], [lang=id]) #minigame-root .sab-how-art img { max-height: 100%; }
html[lang=id] #minigame-root .dust-entry { padding-block: 6px; margin-bottom: 6px; }
html[lang=id] #minigame-root .dust-entry span { font-size: 22px; }

/* Native-review copy: reserve room for longer labels and live feedback. */
html[lang=es] #minigame-root .ik-trait { font-size: 21px; }
html[lang=fr] #minigame-root .brew-jar .brew-icon { width: 100px; height: 100px; flex-shrink: 0; }
html[lang=fr] #minigame-root .brew-jar b { font-size: 20px; min-height: 80px; }
html[lang=fr] #minigame-root .brew-recipe li { font-size: 22px; }
html[lang=fr] #minigame-root .brew-recipe ol { gap: 4px; }
html:is([lang=pt-BR], [lang=ru], [lang=vi], [lang=id]) #minigame-root .dust-note {
  font-size: 22px; line-height: 1.4; margin-top: 6px;
}
html[lang=vi] #minigame-root .dust-time { font-size: 20px; line-height: 1.5; }
html[lang=vi] #minigame-root .dust-time > span:last-child { white-space: nowrap; flex-shrink: 0; }
html[lang=ru] #minigame-root .ik-hint { top: 618px; }
html[lang=ru] #minigame-root .ik-hint p { font-size: 28px; line-height: 1.35; }
html[lang=id] #minigame-root .brew-feedback { font-size: 22px; padding: 6px; }
html[lang=ru] #minigame-root .ru-footer { font-size: 22px; align-items: flex-end; }
html[lang=ru] #minigame-root .ru-time { font-size: 20px; white-space: nowrap; flex-shrink: 0; }

/* ---------- Game feel: parallax, input feedback, entrances (all off under Reduce motion) ---------- */
/* Parallax uses the independent `translate` property so it composes with the existing transform animations.
   --px/--py run from -1 to 1 and are eased by the engine from the pointer or the phone's tilt. */
#bg { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -9px); }
#sprites { translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 4px); }
#cg .cg-layer:not([data-camera]) { translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -4px); }
#title { background-size: auto, 108% auto; background-position: center, calc(50% + var(--px, 0) * -16px) calc(50% + var(--py, 0) * -10px); }
#title .title-inner { translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px); }
.reduce-motion :is(#bg, #sprites, #title .title-inner, #cg .cg-layer) { translate: none; }
.reduce-motion #title { background-position: center, center; }

/* New backgrounds and CGs come into focus instead of simply fading. */
.bg-layer { filter: blur(7px); transition: opacity .6s ease, filter .9s ease; }
.bg-layer.visible { filter: none; }
#cg .cg-layer:not([data-camera]) { transform: scale(1.035); transition: opacity .6s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
#cg .cg-layer.visible:not([data-camera]) { transform: scale(1); }

/* Characters slide in from their own side and settle; an expression change gives a small lift. */
.character[data-at=left] { --enter-x: -48px; }
.character[data-at=right] { --enter-x: 48px; }
.sprite-focus { transform: translate3d(var(--enter-x, 0px),18px,0) scale(.98); transition: transform .45s cubic-bezier(.22,.9,.3,1.1), opacity .28s ease; }
.expression.pop { animation: expression-pop .34s cubic-bezier(.3,1.5,.5,1); }
@keyframes expression-pop { 0% { transform: translate3d(0,5px,0) scale(.988); } 55% { transform: translate3d(0,-4px,0) scale(1.01); } 100% { transform: none; } }

/* Tap feedback: a soft ring where the player clicks, and the dialogue box answers when a line advances. */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; overflow: clip; }
.tap-ring { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 3px solid rgba(240,215,150,.95); box-shadow: 0 0 16px rgba(232,205,140,.7), inset 0 0 10px rgba(232,205,140,.35);
  animation: tap-ring .6s cubic-bezier(.2,.7,.3,1) forwards; }
.tap-spark { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #f4e3b2;
  box-shadow: 0 0 6px #f4e3b2; animation: tap-spark .55s ease-out forwards; }
@keyframes tap-ring { from { opacity: 1; transform: scale(.25); } 40% { opacity: .85; } to { opacity: 0; transform: scale(1.35); } }
@keyframes tap-spark { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(var(--dx),var(--dy),0) scale(.3); } }
#textbox.nudge { animation: textbox-nudge .26s ease-out; }
@keyframes textbox-nudge { 0% { box-shadow: 0 0 0 3px rgba(232,205,140,.95), 0 10px 30px rgba(0,0,0,.5); } 100% { box-shadow: 0 0 0 3px rgba(217,221,224,.7), 0 10px 30px rgba(0,0,0,.5); } }

/* Buttons press in; title buttons get a light sheen and arrive one after another. */
#quickmenu button { transition: color .15s, transform .12s; }
#quickmenu button:active { transform: scale(.92); }
/* The sheen is a background gradient, so the button never clips its own text. */
.btn { flex-shrink: 0; background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,240,.28) 50%, transparent 60%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; transition: background-color .15s, background-position 0s, transform .15s; }
.btn:hover:not(:disabled) { background-color: #216342; background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,240,.28) 50%, transparent 60%);
  background-position: 0 0; transition: background-color .15s, background-position .6s ease, transform .15s; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
#title nav .btn { animation: choice-arrive .45s ease-out both; }
#title nav .btn:nth-child(1) { animation-delay: .35s; } #title nav .btn:nth-child(2) { animation-delay: .42s; }
#title nav .btn:nth-child(3) { animation-delay: .49s; } #title nav .btn:nth-child(4) { animation-delay: .56s; }
#title nav .btn:nth-child(5) { animation-delay: .63s; } #title nav .btn:nth-child(6) { animation-delay: .7s; }
#choices button:active { transform: scale(.97); }
#choices button.choice-chosen { background: #fff8e8; border-color: var(--gold); animation: choice-chosen .32s ease-out both; }
#choices button.choice-dismissed { animation: choice-dismissed .26s ease-in both; pointer-events: none; }
@keyframes choice-chosen { 0% { transform: scale(.97); } 45% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(232,205,140,.8), 0 0 26px rgba(232,205,140,.7); } 100% { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(232,205,140,.5), 0 4px 14px rgba(0,0,0,.4); } }
@keyframes choice-dismissed { to { opacity: 0; transform: translate3d(0,10px,0) scale(.97); } }
.reduce-motion #fx { display: none; }