:root {
  --ink: #302851;
  --pink: #ed7e9f;
  --deep-pink: #d84d7c;
  --lav: #a79add;
  --shadow: 0 10px 28px #8e668c30;
  --intensity: 1;
}

@media (min-width: 521px) and (max-height: 760px) {
  .start-screen { padding: 8px; }
  .start-stage { min-height: 0; height: 100%; }
  .start-stage .start-content { padding: 8px 18px; }
  .start-stage .sankichi-start { height: 130px; }
  .difficulty-help { font-size: .68rem; line-height: 1.1; }
  .start-stage .primary-button { min-height: 48px; padding-block: 10px; }
}

@media (max-width: 520px) {
  .result-screen { display: flex; flex-direction: column; justify-content: center; gap: 0; }
  .result-screen .result-decor { position: absolute; }
  .result-screen .logo-result, .result-screen .sankichi-result,
  .result-screen h1, .result-screen .result-lead,
  .result-screen .result-review, .result-screen .result-review-pager,
  .result-screen .result-stats, .result-screen > .primary-button,
  .result-screen > .secondary-button { flex: 0 0 auto; }
  .result-screen .result-review { max-height: 140px; }
  .result-screen .result-review-pager { min-height: 44px; }
  .result-screen .result-review-pager .secondary-button { margin-top: 0; padding: 6px 14px; }
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #f7eaed;
  color: var(--ink);
  font-family: "Trebuchet MS", "Yu Gothic", sans-serif;
}
body {
  min-height: 100dvh;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.app {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
}
.screen {
  min-height: 100dvh;
  position: relative;
}
.screen[hidden] {
  display: none;
}
.start-screen,
.result-screen {
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(
    circle at 50% 20%,
    #fffdf7 0,
    #f8e6ea 63%,
    #e8d8ef 100%
  );
}
.start-content,
.result-screen > * {
  position: relative;
  z-index: 2;
}
.start-content {
  text-align: center;
  max-width: 520px;
}
.logo {
  object-fit: contain;
}
.logo-start {
  width: min(70vw, 300px);
}
.logo-small {
  width: 112px;
  height: 36px;
}
.logo-result {
  width: min(70vw, 330px);
}
.tagline {
  font-size: clamp(1.1rem, 4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}
.intro {
  font-weight: 600;
  line-height: 1.55;
  margin: 4px auto 8px;
}
.sankichi {
  object-fit: contain;
}
.sankichi-start {
  display: block;
  width: min(60vw, 220px);
  height: 175px;
  margin: 0 auto;
}
.primary-button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #e96c96, #ba83c7);
  box-shadow:
    0 7px 0 #a34e86,
    0 12px 22px #ae688950;
  color: #fff;
  padding: 14px 46px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  min-height: 52px;
}
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 10px;
}
.mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px auto 10px; max-width: 430px; }
.mode-button { min-height: 44px; border: 1px solid #caa7c8; border-radius: 999px; background: #fff8f5c9; font-size: 0.78rem; font-weight: 800; }
.mode-button.is-selected { background: #d8c8ef; border-color: #a37fb5; box-shadow: inset 0 -2px #a37fb5; }
.picker-label { margin: 4px 0 3px; font-size: .82rem; font-weight: 800; }
.difficulty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 430px; margin: 0 auto; }
.difficulty-button { min-height: 44px; border: 1px solid #caa7c8; border-radius: 12px; background: #fff8f5c9; font-size: .76rem; font-weight: 800; }
.difficulty-button.is-selected { background: #f2abc1; border-color: #d84d7c; box-shadow: inset 0 -2px #d84d7c; }
.difficulty-button[data-difficulty="auto"] { grid-column: 1 / -1; }
.difficulty-help, .difficulty-count { margin: 3px auto; font-size: .72rem; font-weight: 700; }
.game-difficulty { margin-left: 5px; padding: 3px 8px; border-radius: 999px; background: #f4d8e5; font-size: .68rem; font-weight: 800; }
.promotion-message { margin: 0 auto 12px; color: var(--deep-pink); font-weight: 800; }
.small-button,
.icon-button {
  border: 1px solid #caa7c8;
  background: #fff8f5c9;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 700;
}
.small-button[aria-pressed="true"],
.icon-button[aria-pressed="true"] {
  background: #c8bbeb;
}
.icon-button {
  width: auto;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
}
.decor {
  pointer-events: none;
}
.start-decor {
  position: absolute;
  width: 230px;
  opacity: 0.8;
}
.decor-left {
  left: -55px;
  top: 8%;
  transform: rotate(-18deg);
}
.decor-right {
  right: -65px;
  bottom: 8%;
  transform: rotate(18deg);
}
.start-stage {
  position: relative;
  width: min(500px, 100%);
  min-width: 0;
  min-height: min(760px, calc(100dvh - 32px));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 12px 36px #8e668c25;
  background: #fff7f0;
}
.start-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.start-stage .start-content {
  width: min(100%, 430px);
  padding: 18px 22px;
  z-index: 1;
}
.game-screen {
  padding: 10px max(10px, env(safe-area-inset-right)) 18px
    max(10px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7eaed;
}
.game-toolbar {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}
.question-count {
  font-weight: 800;
  font-size: 0.95rem;
  margin-right: auto;
}
.course-progress {
  color: #765576;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.round-progress { color: #765576; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.finish-button { color: #765576; }
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.progress {
  width: min(760px, 100%);
  height: 9px;
  border-radius: 9px;
  background: #eadbe8;
  overflow: hidden;
  margin: 2px 0 9px;
}
.progress span {
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ec88a8, #b1a0e1);
  transition: width 0.45s ease;
}
.stage {
  isolation: isolate;
  position: relative;
  width: min(500px, 100%);
  height: auto;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fdf6ed;
  transform-origin: 50% 45%;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.hype-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 20; pointer-events: none; opacity: min(0.94, calc(0.32 + var(--hype-intensity, 1) * 0.052)); }
.hype-popups { position: fixed; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.hype-popup { position: absolute; top: clamp(86px, 14vh, 150px); left: 50%; display: block; opacity: 0; transform: translate(-50%, 12px) rotate(-3deg) scale(.62); padding: 7px 18px 6px; border: 3px solid #fff; border-radius: 999px; color: #fff; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(1.15rem, 5vw, 2.35rem); letter-spacing: .08em; line-height: 1; text-shadow: 0 3px 0 #8d266a, 0 0 12px #ffb8e7; box-shadow: 0 5px 0 #8d266a, 0 0 22px #ff68bbcc; white-space: nowrap; }
.hype-popup-combo { background: linear-gradient(135deg, #ed3e96, #873be6 58%, #ffb72e); }
.hype-popup-speed { top: clamp(126px, 20vh, 205px); margin-left: clamp(82px, 23vw, 180px); background: linear-gradient(135deg, #ffb51f, #ff5b8e); transform: translate(-50%, 12px) rotate(5deg) scale(.62); font-size: clamp(.9rem, 3.5vw, 1.55rem); }
.hype-popup[data-active="1"] { opacity: 1; }
.hype-popup.is-pop { animation: hype-pop .62s cubic-bezier(.16,1.4,.35,1) both; }
.score-popups { position: fixed; inset: 0; z-index: 24; pointer-events: none; overflow: hidden; }
.answer-burst-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.answer-burst-core {
  position: absolute;
  width: clamp(140px, 24vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  transform: translate(-50%, -50%) scale(.15);
  background-color: transparent;
  box-shadow: 0 0 18px #fff8, 0 0 46px #ff70c8, 0 0 90px #ffb9e8;
  animation: answer-burst-core .58s cubic-bezier(.15,1.35,.3,1) both;
}
.answer-burst-core.is-wrong {
  border-radius: 50%;
  box-shadow: 0 0 16px #e3cfff, 0 0 46px #996bff, 0 0 82px #6350d6aa;
  filter: saturate(1.35);
}
@keyframes answer-burst-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-12deg); }
  10% { opacity: .98; transform: translate(-50%, -50%) scale(.58) rotate(0deg); }
  25% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(5deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16) rotate(18deg); }
}
.answer-burst-piece { position: absolute; width: var(--burst-size); height: var(--burst-size); background-size: 200% 200%; background-repeat: no-repeat; transform: translate(-50%, -50%) scale(.35) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 5px #fff8) drop-shadow(0 0 9px #ff70c8); animation: answer-burst-piece var(--burst-duration, .72s) cubic-bezier(.16,1.25,.3,1) var(--burst-delay) both; }
.answer-burst-piece.is-correct { filter: saturate(1.35) brightness(1.18) drop-shadow(0 0 5px #fff9c7) drop-shadow(0 0 11px #ff6fc7); }
.answer-burst-piece.is-wrong { filter: saturate(1.2) brightness(1.04) drop-shadow(0 0 5px #c9a7ff) drop-shadow(0 0 10px #8d5cff); animation-name: answer-burst-piece-wrong; }
@keyframes answer-burst-piece { 0% { transform: translate(-50%, -50%) scale(.35) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 62% { transform: translate(calc(-50% + var(--burst-x) * .72), calc(-50% + var(--burst-y) * .72)) scale(1.08) rotate(calc(var(--burst-rotation) * .6)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.72) rotate(var(--burst-rotation)); opacity: 0; } }
@keyframes answer-burst-piece-wrong { 0% { transform: translate(-50%, -50%) scale(.5) rotate(0deg); opacity: 0; } 16% { opacity: 1; } 58% { transform: translate(calc(-50% + var(--burst-x) * .68), calc(-50% + var(--burst-y) * .68)) scale(1.12) rotate(calc(var(--burst-rotation) * .6)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.55) rotate(var(--burst-rotation)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .answer-burst-piece { animation: none; opacity: .88; transform: translate(-50%, -50%) scale(1); } }
.manual-reduced-motion .answer-burst-piece { animation: none; opacity: .88; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 390px), (max-height: 700px) {
  .answer-burst-core { width: clamp(140px, 56vw, 200px); }
}
@media (prefers-reduced-motion: reduce) {
  .answer-burst-core { animation: none; opacity: .42; transform: translate(-50%, -50%) scale(.66); }
}
.manual-reduced-motion .answer-burst-core { animation: none; opacity: .42; transform: translate(-50%, -50%) scale(.66); }
.score-popup { position: absolute; left: 50%; top: 38%; transform: translate(-50%, 18px) scale(.72) rotate(-4deg); opacity: 0; color: #fff5a8; font-size: clamp(1.7rem, 5vw, 3.8rem); font-weight: 1000; text-shadow: 0 3px 0 #8e2d78, 0 0 18px #ff6ca8; white-space: nowrap; transition: transform .42s cubic-bezier(.16,1.35,.3,1), opacity .18s ease; }
.score-popup.is-live { transform: translate(-50%, -18px) scale(1); opacity: 1; }
.score-popup[data-milestone="1"] { color: #fff; font-size: clamp(2rem, 6vw, 4.8rem); text-shadow: 0 4px 0 #a02a7e, 0 0 26px #ffdf62; }
.music-caption {
  position: fixed;
  z-index: 26;
  min-height: 28px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid #fff9;
  border-radius: 999px;
  padding: 5px 12px;
  background: linear-gradient(90deg, #6d3d88e8, #b84f9ee8);
  box-shadow: 0 3px 12px #5c2f7040;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .16s ease;
}
.music-caption.is-visible { opacity: 1; }
.music-caption-text { display: inline-block; min-width: 100%; }
.music-caption.is-scrolling .music-caption-text { animation: music-caption-scroll 5.2s linear both; }
@keyframes music-caption-scroll {
  0%, 14% { transform: translateX(0); }
  88%, 100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .music-caption.is-scrolling .music-caption-text { animation: none; }
}
.manual-reduced-motion .music-caption.is-scrolling .music-caption-text { animation: none; }
@media (max-width: 390px), (max-height: 700px) {
  .music-caption {
    height: 20px;
    min-height: 20px;
    padding: 1px 8px;
    font-size: .7rem;
    line-height: 16px;
  }
}
.hype-hud #score-value.is-score-pulse { animation: score-pulse .55s cubic-bezier(.2,1.3,.3,1); }
@keyframes score-pulse { 45% { transform: scale(1.35); color: #fff29a; } }
.hype-hud { position: relative; z-index: 7; display: flex; justify-content: center; gap: 5px; min-height: 34px; margin: 2px auto 4px; max-width: 100%; pointer-events: none; }
.hype-hud span { display: grid; gap: 1px; min-width: 64px; padding: 4px 7px; border: 1px solid #fff8; border-radius: 10px; background: #563d7b9c; color: #fff; box-shadow: 0 2px 7px #50356830; text-align: center; }
.hype-hud b { font-size: .68rem; line-height: 1.1; white-space: nowrap; }
.hype-hud small { font-size: .55rem; opacity: .82; white-space: nowrap; }
.hype-hud span:last-child b { font-variant-numeric: tabular-nums; }
.hype-hud #score-value { color: #ffe28a; font-size: clamp(.95rem, 3.2vw, 1.45rem); font-weight: 1000; line-height: 1; }
.stage[data-combo="0"] .hype-hud { opacity: .66; }
.stage[data-combo="0"] .hype-canvas { opacity: .1; }
.stage[data-combo]:not([data-combo="0"]) { transform: scale(calc(1 + min(0.018, var(--hype-intensity, 1) * 0.001))); filter: saturate(calc(1 + var(--hype-intensity, 1) * .035)); }
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: calc((var(--intensity) - 1) * 0.035);
  transition: opacity 0.45s ease;
}
.stage::before {
  background: radial-gradient(circle at 18% 22%, #ffe66d80, transparent 24%),
    radial-gradient(circle at 84% 72%, #7ddcff70, transparent 27%);
  mix-blend-mode: screen;
}
.stage::after {
  background: radial-gradient(circle at 50% 45%, transparent 45%, #f06b9b30 100%);
  mix-blend-mode: multiply;
}
.stage-background,
.stage-decor,
.finale-burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.stage-decor {
  object-fit: contain;
  transform: scale(calc(1 + var(--intensity) * 0.018))
    translateY(calc(var(--intensity) * -1px));
  opacity: calc(0.18 + var(--intensity) * 0.018);
  mix-blend-mode: multiply;
}
.finale-burst {
  opacity: calc(0.04 + var(--intensity) * 0.018);
  transform: scale(calc(0.92 + var(--intensity) * 0.012));
  object-fit: cover;
  mix-blend-mode: multiply;
}
.problem-area {
  position: relative;
  padding: 24px 0 20px;
  display: block;
}
.problem-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 8px 8px #9e739c30);
}
.paper-layout {
  position: relative;
  z-index: 4;
  width: min(76%, 430px);
  height: auto;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 4px;
  min-height: 0;
}
.paper-content {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  min-height: 0;
}
.stage[data-kind="divide"] {
  min-height: 460px;
}
.question-label {
  margin: 0;
  color: #8a6b96;
  font-size: 0.85rem;
  font-weight: 800;
}
.direction-badge { margin: 4px 0 0; padding: 4px 10px; border-radius: 999px; background: #e4d8f4; color: #6e568c; font-weight: 800; font-size: 0.78rem; }
.review-badge { margin: 5px 0 0; padding: 4px 10px; border-radius: 999px; background: #fff0b8; color: #785b27; font-size: 0.75rem; font-weight: 800; }
.vocab-prompt { width: 100%; margin: 14px 0 4px; text-align: center; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.vocab-instruction { margin: 0; font-size: 0.95rem; font-weight: 700; color: #806a93; }
.equation {
  font-size: clamp(1.8rem, 5.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 12px 0 2px;
  color: var(--ink);
  text-align: center;
}
.work-area {
  display: grid;
  grid-template-columns: repeat(var(--board-columns, 4), 1fr);
  width: 100%;
  align-items: center;
  justify-items: center;
  line-height: 1;
  color: #665278;
  font-size: clamp(1.35rem, 4.8vw, 1.85rem);
  flex: 0 1 auto;
}
.work-area[data-kind="divide"] {
  height: 220px;
  grid-template-rows: 32px 36px 28px 6px 30px 36px 6px 28px;
}
.work-area[data-kind="add"],
.work-area[data-kind="subtract"] {
  height: 174px;
  grid-template-rows: 38px 36px 36px 6px 38px;
}
.board-cell {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
}
.board-cell.role-input {
  min-width: 1.45em;
  min-height: 0;
  justify-self: stretch;
  border: 2px dashed var(--pink);
  border-radius: 7px;
  background: #fff4f6b8;
  color: var(--ink);
  padding: 2px 5px;
  text-align: right;
}
.work-area[data-kind="divide"] .board-cell.role-input {
  min-height: 32px;
  height: 32px;
}
.work-area[data-kind="add"] .board-cell.role-input,
.work-area[data-kind="subtract"] .board-cell.role-input {
  min-height: 34px;
  height: 34px;
}
.board-cell.role-rule {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}
.board-cell.role-bracket {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border-top: 3px solid var(--ink);
  border-left: 3px solid var(--ink);
  border-radius: 8px 0 0;
}
.board-cell.role-muted {
  color: #ac9baa;
}
.board-cell.role-muted:not(:empty) {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.board-cell.role-work {
  font-weight: 800;
  color: var(--ink);
}
.board-cell[data-cell^="borrow"],
.board-cell[data-cell^="carry"] {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  min-height: 1.1em;
}
.input-hint {
  width: auto;
  min-height: 2.5em;
  margin: 0;
  align-self: center;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.stage.is-wrong .input-hint { visibility: hidden; }
.character-region {
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: 20px;
  overflow: visible;
}
.paper-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  min-height: 150px;
  gap: 8px;
}
.sankichi-play {
  position: relative;
  width: clamp(120px, 30vw, 150px);
  height: clamp(120px, 30vw, 150px);
  max-width: 100%;
  max-height: none;
  animation: breathe calc(3.5s - var(--intensity) * 0.2s) ease-in-out infinite;
}
.stage.is-correct .sankichi-play {
  animation: jump 0.5s ease forwards;
}
.stage.is-wrong .sankichi-play {
  animation: ouch 0.4s ease;
}
.stage.is-recover .sankichi-play { animation: breathe 1.1s ease-in-out; }
.stage.is-wrong .wrong-feedback { opacity: 1; animation: wrong-drop 1.25s ease-out both; }
.wrong-feedback {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  color: #5b4a78;
  text-align: center;
}
.wrong-face {
  padding: 7px 15px;
  border: 2px solid #cbb9df;
  border-radius: 999px 999px 45% 45%;
  background: linear-gradient(160deg, #e9e2f5, #d6d4ef);
  box-shadow: 0 5px 0 #a69ac6, 0 9px 18px #5b4a7838;
  font-size: clamp(0.95rem, 3vw, 1.25rem);
  font-weight: 900;
}
.wrong-tip {
  color: #735b83;
  font-size: clamp(0.72rem, 2.4vw, 0.9rem);
  font-weight: 800;
}
.wrong-puff {
  position: absolute;
  top: 37%;
  width: 26px;
  height: 17px;
  border-radius: 50%;
  background: #b9b0d8b8;
  filter: blur(1px);
}
.wrong-puff-left { margin-left: -190px; transform: rotate(-18deg); }
.wrong-puff-right { margin-left: 190px; transform: rotate(18deg); }
.stage.is-correct .problem-paper {
  animation: paper-bounce 0.5s ease;
}
.stage.is-entering .problem-area {
  animation: stage-enter 0.48s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.stage.is-input-pulse .role-input {
  animation: input-pulse 0.18s ease-out;
}
.celebration-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}
.celebration-burst,
.celebration-ribbon {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  pointer-events: none;
}
.celebration-burst {
  mix-blend-mode: screen;
  opacity: 0.82;
}
.celebration-ribbon {
  object-fit: contain;
  opacity: 0.72;
  mix-blend-mode: multiply;
}
.effect-badge {
  position: absolute;
  left: 50%;
  top: 37%;
  transform: translate(-50%, -50%) rotate(-4deg) scale(0.7);
  padding: 7px 17px;
  border: 2px solid #fff7d6;
  border-radius: 999px;
  background: #e9699bdf;
  box-shadow: 0 4px 0 #a94e83, 0 8px 18px #8e668c55;
  color: #fff;
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.celebration-hero {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 56%;
  height: 56%;
  object-fit: contain;
  transform: translate(-50%, 32%) scale(0.8);
  opacity: 0;
  pointer-events: none;
}
.stage.is-celebrating[data-energy="calm"] .celebration-burst {
  opacity: 0.2;
}
.stage.is-celebrating[data-energy="calm"] .celebration-ribbon {
  opacity: 0;
}
.stage.is-celebrating[data-energy="sparkle"] .celebration-burst {
  opacity: 0.4;
}
.stage.is-celebrating[data-energy="sparkle"] .celebration-ribbon {
  opacity: 0.2;
}
.stage.is-celebrating[data-energy="party"] .celebration-burst {
  opacity: 0.7;
  transform: scale(1.12);
}
.stage.is-celebrating[data-energy="party"] .celebration-ribbon {
  opacity: 0.45;
  transform: scale(1.12) rotate(3deg);
}
.stage.is-celebrating[data-energy="finale"] .celebration-burst {
  opacity: 0.9;
  transform: scale(1.22);
}
.stage.is-celebrating[data-energy="finale"] .celebration-ribbon {
  opacity: 0.65;
  transform: scale(1.18) rotate(-4deg);
}
.stage.is-finale .celebration-overlay {
  animation-duration: 0.95s;
}
.stage.is-celebrating.is-finale .celebration-overlay {
  animation-duration: 0.95s;
}
.stage.is-finale .celebration-hero {
  animation: hero-rise 0.95s cubic-bezier(0.18, 0.8, 0.28, 1) both;
}
.stage.is-finale .effect-badge {
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}
.celebration-particle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(16px, 4vw, 28px);
  height: clamp(16px, 4vw, 28px);
  background: url("assets/decor-ribbon-sparkles.png") center/contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
}
.stage[data-energy="sparkle"] .particle-1,
.stage[data-energy="sparkle"] .particle-2,
.stage[data-energy="party"] .celebration-particle,
.stage[data-energy="finale"] .celebration-particle {
  opacity: 0;
}
.stage.is-celebrating[data-energy="sparkle"] .particle-1,
.stage.is-celebrating[data-energy="sparkle"] .particle-2,
.stage.is-celebrating[data-energy="party"] .celebration-particle,
.stage.is-celebrating[data-energy="finale"] .celebration-particle {
  animation: particle-fly 0.62s ease-out both;
}
.stage.is-celebrating[data-energy="party"] .particle-5,
.stage.is-celebrating[data-energy="party"] .particle-6,
.stage.is-celebrating[data-energy="party"] .particle-7,
.stage.is-celebrating[data-energy="party"] .particle-8 {
  animation-delay: 0.07s;
}
.stage.is-celebrating[data-energy="finale"] .celebration-particle {
  animation-duration: 0.9s;
}
.stage.is-celebrating[data-energy="finale"] .particle-5,
.stage.is-celebrating[data-energy="finale"] .particle-6,
.stage.is-celebrating[data-energy="finale"] .particle-7,
.stage.is-celebrating[data-energy="finale"] .particle-8 {
  animation-delay: 0.12s;
}
.particle-1 { --particle-x: clamp(-150px, -30vw, -90px); --particle-y: clamp(-120px, -22vw, -70px); }
.particle-2 { --particle-x: clamp(90px, 30vw, 150px); --particle-y: clamp(-120px, -22vw, -70px); }
.particle-3 { --particle-x: clamp(-180px, -38vw, -110px); --particle-y: clamp(-30px, -5vw, -15px); }
.particle-4 { --particle-x: clamp(110px, 38vw, 180px); --particle-y: clamp(-30px, -5vw, -15px); }
.particle-5 { --particle-x: clamp(-150px, -32vw, -95px); --particle-y: clamp(70px, 18vw, 120px); }
.particle-6 { --particle-x: clamp(95px, 32vw, 150px); --particle-y: clamp(70px, 18vw, 120px); }
.particle-7 { --particle-x: clamp(-80px, -18vw, -55px); --particle-y: clamp(-160px, -30vw, -95px); }
.particle-8 { --particle-x: clamp(55px, 18vw, 80px); --particle-y: clamp(-160px, -30vw, -95px); }
.stage.is-partial-success .celebration-overlay {
  opacity: 1;
  animation: partial-burst 0.42s ease-out both;
}
.stage.is-celebrating .celebration-overlay {
  opacity: 1;
  animation: finale-burst-in 0.72s ease-out both;
}
.stage.is-partial-success .celebration-burst {
  opacity: 0.38;
}
.stage.is-partial-success .celebration-ribbon {
  opacity: 0.2;
}
.stage.is-finale .sankichi-play {
  animation: finale-pose 0.8s ease-out both;
}
.keypad {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 11px;
}
.choice-grid { width: min(620px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px auto 0; }
.choice-button { position: relative; min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid #e7a0b7; border-radius: 18px; background: linear-gradient(145deg, #fff9f3, #f8e6ed); box-shadow: 0 4px 0 #c9789a, 0 7px 14px #8e668c25; font-size: clamp(0.9rem, 2.5vw, 1.1rem); font-weight: 800; text-align: left; overflow-wrap: anywhere; }
.choice-text { min-width: 0; overflow-wrap: anywhere; }
.choice-mark { position: absolute; right: 8px; bottom: 5px; min-width: 0; max-width: calc(100% - 16px); font-size: 0.68rem; line-height: 1; font-weight: 900; white-space: nowrap; text-align: right; pointer-events: none; }
.choice-button:has(.choice-mark:not(:empty)) .choice-text { padding-bottom: 0.72rem; }
.choice-button:disabled { cursor: default; }
.choice-number { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #d9c9ee; color: #5e4779; }
.choice-button.is-correct { background: #d9f1d4; border-color: #79b87c; box-shadow: 0 4px 0 #5d9a68; }
.choice-button.is-wrong { background: #f6d4dd; border-color: #d86a86; box-shadow: 0 4px 0 #b94b6c; }
.choice-button.is-selected { transform: translateY(2px); }
.key {
  position: relative;
  min-height: clamp(48px, 8vh, 67px);
  border: 0;
  background: url("assets/keycap.png") center/100% 100% no-repeat transparent;
  font-weight: 800;
  font-size: clamp(0.72rem, 2.6vw, 0.9rem);
  transition:
    transform 0.12s,
    filter 0.12s;
  filter: drop-shadow(0 3px 2px #88668733);
}
.key:disabled {
  opacity: 0.7;
  cursor: default;
}
.key:active,
.key.pressed {
  transform: translateY(3px) scale(0.97);
}
.key.erase,
.key.answer {
  font-size: clamp(0.82rem, 2.7vw, 1rem);
  letter-spacing: 0.04em;
}
.key.answer {
  color: #fff;
  background-image: linear-gradient(#e8789a, #d55d87);
  border-radius: 17px;
}
.key.erase {
  color: #54416f;
}
.status-message {
  height: 22px;
  margin: 5px 0 0;
  font-weight: 800;
  color: var(--deep-pink);
}
.result-screen {
  text-align: center;
}
.result-decor {
  position: absolute;
  width: min(800px, 130vw);
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.sankichi-result {
  width: min(60vw, 280px);
  height: 190px;
  margin: 0 auto -10px;
}
.result-screen h1 {
  font-size: clamp(1.9rem, 7vw, 3rem);
  margin: 4px 0 8px;
}
.result-lead {
  font-weight: 600;
  margin: 0 0 20px;
}
.result-review { width: min(620px, 100%); max-height: min(38vh, 360px); overflow-y: auto; margin: 0 auto 22px; padding: 0 4px; list-style: none; display: grid; gap: 5px; }
.result-review li { padding: 7px 12px; border-radius: 12px; background: #fff8f3b8; font-weight: 700; }
.result-stats {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 24px);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.result-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-stats strong {
  font-size: 1.8rem;
  color: var(--deep-pink);
}
.result-stats span {
  font-size: 0.82rem;
  font-weight: 700;
}
.result-stats .score-result-hero { flex: 1 0 100%; align-items: center; gap: 1px; margin-bottom: 2px; }
.result-stats .score-result-hero strong { font-size: clamp(1.8rem, 6vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #fff, 0 0 15px #ff75ae88; }
.result-stats .score-result-hero span { color: #8d2f72; font-size: clamp(1rem, 3.5vw, 1.6rem); font-weight: 1000; }
.secondary-button { margin-top: 16px; border: 1px solid #caa7c8; border-radius: 999px; background: #fff8f5c9; padding: 10px 24px; font-weight: 800; }
@keyframes breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(calc(-2px * var(--intensity)))
      scale(calc(1 + var(--intensity) * 0.004));
  }
}
@keyframes jump {
  0% {
    transform: translateY(0) rotate(0) scale(1);
  }
  45% {
    transform: translateY(calc(-12px - var(--intensity) * 2px)) rotate(-5deg)
      scale(calc(1.03 + var(--intensity) * 0.008));
  }
  100% {
    transform: translateY(0) rotate(0) scale(1);
  }
}
@keyframes ouch {
  35% {
    transform: translateX(-12px) rotate(-10deg) scaleX(1.18);
  }
  70% {
    transform: translateX(10px) rotate(8deg) scaleX(0.9);
  }
}
@keyframes wrong-drop {
  0% { opacity: 0; transform: translateY(-10px) scale(.8); }
  28% { opacity: 1; transform: translateY(4px) scale(1.04); }
  60% { transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(.96); }
}
@keyframes paper-bounce {
  45% {
    transform: translateY(-9px) scale(1.015);
  }
  75% {
    transform: translateY(3px);
  }
}
@keyframes stage-enter {
  0% { opacity: 1; transform: translateY(6px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hype-pop {
  0% { opacity: 0; transform: translate(-50%, 16px) rotate(-8deg) scale(.45); }
  28% { opacity: 1; transform: translate(-50%, -5px) rotate(-2deg) scale(1.12); }
  62% { opacity: .98; transform: translate(-50%, 0) rotate(-3deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) rotate(-3deg) scale(.94); }
}
@keyframes input-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); box-shadow: 0 0 0 4px #f4a3bf55; }
  100% { transform: scale(1); }
}
@keyframes partial-burst {
  0% { transform: scale(0.94); opacity: 0; }
  35% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes finale-burst-in {
  0% { transform: scale(0.78); opacity: 0; }
  28% { transform: scale(1.06); opacity: 1; }
  72% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.02); opacity: 0; }
}
@keyframes particle-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-10deg); }
  35% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(1) rotate(18deg); }
}
@keyframes finale-pose {
  0% { transform: scale(1); }
  38% { transform: scale(1.14) translateY(-8px) rotate(-3deg); }
  100% { transform: scale(1.05); }
}
@keyframes hero-rise {
  0% { opacity: 0; transform: translate(-50%, 32%) scale(0.8); }
  35% { opacity: 1; transform: translate(-50%, -4%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -18%) scale(1); }
}
@media (max-width: 520px) {
  .game-toolbar {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas:
      "logo count difficulty"
      "coverage coverage coverage"
      "actions actions actions";
    display: grid;
    gap: 6px 10px;
    align-items: center;
  }
  .game-toolbar .logo-small { grid-area: logo; }
  .game-toolbar .question-count {
    grid-area: count;
    margin: 0;
    white-space: nowrap;
  }
  .game-toolbar .game-difficulty {
    grid-area: difficulty;
    margin-left: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .game-toolbar .course-progress {
    grid-area: coverage;
    justify-self: end;
    font-size: .62rem;
  }
  .game-toolbar .round-progress {
    grid-area: coverage;
    justify-self: start;
    font-size: .62rem;
  }
  .game-toolbar .toolbar-actions {
    grid-area: actions;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: stretch;
  }
  .game-toolbar .toolbar-actions .icon-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .paper-footer {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
  .sankichi-play {
    width: 120px;
    height: 120px;
  }
  .start-screen {
    padding: 12px 0;
  }
  .start-stage {
    width: 100%;
    border-radius: 0;
    min-height: 100dvh;
  }
  .start-stage .start-content {
    width: 100%;
    padding: 16px 16px;
  }
  .start-stage .sankichi-start {
    width: min(62vw, 220px);
    height: 170px;
  }
  .start-decor {
    width: 180px;
  }
}
@media (max-width: 380px) {
  .stage {
    height: auto;
    min-height: 330px;
  }
  .stage[data-kind="divide"] {
    min-height: 340px;
  }
  .stage[data-kind="divide"] .problem-area {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .stage[data-kind="divide"] .paper-footer {
    min-height: 80px;
    grid-template-columns: minmax(0, 1fr) 110px;
  }
  .stage[data-kind="divide"] .sankichi-play {
    width: 70px;
    height: 70px;
  }
  .problem-area {
    padding: 10px 0;
  }
  .paper-content {
    padding-top: 4px;
  }
  .equation {
    margin-top: 6px;
  }
  .work-area[data-kind="divide"] {
    height: 190px;
    grid-template-rows: 28px 31px 25px 6px 26px 31px 6px 25px;
  }
  .work-area[data-kind="add"],
  .work-area[data-kind="subtract"] {
    height: 150px;
    grid-template-rows: 32px 32px 32px 6px 32px;
  }
  .input-hint {
    width: auto;
    font-size: 0.82rem;
  }
  .sankichi-play {
    width: 120px;
    height: 120px;
  }
  .paper-footer {
    grid-template-columns: minmax(0, 1fr) 130px;
    min-height: 100px;
  }
  .sankichi-play {
    width: 90px;
    height: 90px;
  }
  .equation {
    font-size: 1.8rem;
  }
}
@media (min-width: 700px) {
  .stage {
    height: auto;
  }
  .equation {
    font-size: 2.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.manual-reduced-motion .stage.is-entering .problem-area,
.manual-reduced-motion .stage.is-input-pulse .role-input,
.manual-reduced-motion .stage.is-partial-success .celebration-overlay,
.manual-reduced-motion .stage.is-celebrating .celebration-overlay {
  animation: none;
  opacity: 1;
  transform: none;
}
.manual-reduced-motion .celebration-burst,
.manual-reduced-motion .celebration-ribbon,
.manual-reduced-motion .celebration-particle,
.manual-reduced-motion .celebration-hero {
  display: none;
}
.manual-reduced-motion .stage.is-wrong .wrong-feedback { animation: none; opacity: 1; }
.manual-reduced-motion .wrong-puff { display: none; }
.manual-reduced-motion .hype-canvas { display: none; }
.manual-reduced-motion .hype-popups { display: none; }
.manual-reduced-motion .score-popups { display: none; }
.manual-reduced-motion .hype-hud { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hype-canvas, .hype-popups { display: none; } }

/* Keep interactive game states inside the viewport while preserving the stage art. */
/* Start and result screens use the viewport as a real layout boundary at every size. */
.start-screen,
.result-screen {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.start-stage {
  height: 100%;
  min-height: 0;
}
.start-stage .start-content {
  max-height: 100%;
}
.result-screen {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  align-content: center;
  gap: 0;
}
.result-review {
  min-height: 0;
  max-height: min(24vh, 220px);
  overflow: hidden;
}
.result-review-page {
  display: grid;
  gap: 5px;
}
.result-review-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.result-review-pager button { min-height: 44px; min-width: 44px; }

@media (min-height: 520px) {
  .game-screen { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  .game-screen .stage { flex: 1 1 0; min-height: 0; height: auto; }
  .game-screen .choice-grid { flex: 0 0 auto; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .game-screen { padding-top: 6px; padding-bottom: 6px; }
  .game-toolbar { gap: 4px 8px; }
  .progress { margin: 1px 0 4px; height: 7px; }
  .hype-hud { min-height: 28px; margin: 0 auto 2px; }
  .hype-hud span { min-width: 58px; padding: 3px 5px; }
  .stage { border-radius: 20px; }
  .problem-area { padding-top: 8px; padding-bottom: 6px; }
  .vocab-prompt { margin-top: 7px; font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .vocab-instruction { font-size: .82rem; }
  .paper-footer { min-height: 82px; grid-template-columns: minmax(0, 1fr) 108px; }
  .sankichi-play { width: 82px; height: 82px; }
  .choice-grid { gap: 6px; margin-top: 6px; }
  .choice-button { min-height: 52px; padding: 7px 10px; border-radius: 14px; }
  .choice-number { flex-basis: 26px; height: 26px; }
  .status-message { height: 18px; margin-top: 2px; font-size: .88rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .start-screen, .result-screen { padding: 6px 10px; }
  .start-stage { width: 100%; border-radius: 18px; }
  .start-stage .start-content {
    display: grid;
    grid-template-columns: minmax(120px, .72fr) minmax(330px, 1.28fr);
    grid-template-rows: auto auto auto auto auto;
    align-items: center;
    gap: 2px 12px;
    width: min(720px, 100%);
    height: 100%;
    padding: 6px 14px;
  }
  .logo-start { grid-column: 1; grid-row: 1 / 3; width: min(25vw, 175px); justify-self: center; }
  .tagline { grid-column: 2; grid-row: 1; font-size: 1.15rem; margin: 0; }
  .sankichi-start { grid-column: 1; grid-row: 3 / 6; width: min(25vw, 150px); height: 120px; margin: 0 auto; }
  .settings-row { grid-column: 2; grid-row: 2; margin: 0; }
  .mode-picker { grid-column: 2; grid-row: 3; margin: 0 auto; width: 100%; }
  .difficulty-picker { grid-column: 2; grid-row: 4; width: 100%; }
  .start-content > .primary-button { grid-column: 2; grid-row: 5; justify-self: center; min-height: 44px; padding: 9px 34px; }
  .difficulty-help, .difficulty-count { display: none; }
  .result-screen {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(330px, 1.3fr);
    grid-template-rows: auto auto auto auto auto;
    align-content: center;
    column-gap: 12px;
    text-align: center;
  }
  .result-screen .result-decor { grid-column: 1 / -1; }
  .logo-result { grid-column: 1; grid-row: 1; width: min(25vw, 180px); justify-self: center; }
  .sankichi-result { grid-column: 1; grid-row: 2 / 5; width: min(25vw, 150px); height: 120px; justify-self: center; }
  .result-screen h1, .result-lead, .promotion-message, .result-review, .result-review-pager,
  .result-stats, .result-screen > .primary-button, .result-screen > .secondary-button { grid-column: 2; }
  .result-screen h1 { grid-row: 1; margin: 0; }
  .result-lead { grid-row: 2; margin: 0; }
  .promotion-message { grid-row: 3; margin: 0; }
  .result-review { grid-row: 4; max-height: 30vh; margin: 0 auto; width: 100%; }
  .result-stats { grid-row: 5; margin: 2px 0; }
  .result-screen > .primary-button { grid-row: 6; justify-self: center; }
  .result-screen > .secondary-button { grid-row: 7; justify-self: center; margin-top: 2px; }
  .result-review-pager { grid-row: 5; min-height: 44px; }
  .result-review-pager .secondary-button { margin-top: 0; padding: 6px 14px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-screen { height: 100dvh; min-height: 100dvh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-items: stretch; column-gap: 10px; padding: 4px 10px 5px; }
  .game-toolbar, .game-screen > .progress, .game-screen > .hype-hud, .game-screen > .status-message { grid-column: 1 / -1; }
  .game-toolbar { padding: 0; }
  .game-toolbar .toolbar-actions { flex-wrap: nowrap; }
  .game-toolbar .icon-button { min-height: 38px; height: 38px; font-size: .72rem; }
  .progress { margin: 1px 0 2px; height: 6px; }
  .hype-hud { min-height: 24px; margin: 0 auto 2px; }
  .hype-hud span { min-width: 58px; padding: 2px 5px; }
  .stage { grid-column: 1; grid-row: 4; width: 100%; min-height: 0; height: auto; border-radius: 18px; }
  .problem-area { padding: 4px 0; }
  .paper-layout { width: 88%; }
  .question-label { font-size: .7rem; }
  .direction-badge, .review-badge { margin-top: 1px; padding: 2px 7px; font-size: .62rem; }
  .vocab-prompt { margin: 3px 0 1px; font-size: clamp(1.25rem, 5vw, 2rem); }
  .vocab-instruction { font-size: .7rem; }
  .paper-footer { min-height: 48px; grid-template-columns: minmax(0, 1fr) 70px; gap: 3px; }
  .input-hint { font-size: .68rem; min-height: 1.4em; }
  .sankichi-play { width: 54px; height: 54px; }
  .choice-grid { grid-column: 2; grid-row: 4; width: 100%; align-self: center; gap: 6px; margin: 0; }
  .choice-button { min-height: 44px; padding: 5px 8px; border-radius: 12px; font-size: .78rem; }
  .choice-number { flex-basis: 24px; height: 24px; }
  .status-message { grid-row: 5; height: 18px; margin: 1px 0 0; font-size: .78rem; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .start-screen, .result-screen { height: 100dvh; min-height: 100dvh; overflow: hidden; padding: 8px; }
  .start-stage { min-height: 100%; border-radius: 22px; }
  .start-stage .start-content { padding: 8px 14px; }
  .logo-start { width: min(52vw, 220px); }
  .start-stage .sankichi-start { width: min(42vw, 150px); height: 112px; }
  .settings-row { flex-wrap: nowrap; gap: 5px; }
  .settings-row .small-button { min-width: 0; flex: 1 1 0; padding-inline: 5px; font-size: .72rem; white-space: nowrap; }
  .settings-row .small-button { min-height: 44px; }
  .mode-picker { margin: 3px auto 5px; }
  .difficulty-picker .picker-label { margin: 2px 0; }
  .difficulty-help { display: none; }
  .difficulty-count { margin: 1px auto; }
  .result-screen > * { max-width: 100%; }
  .logo-result { width: min(48vw, 230px); }
  .sankichi-result { width: min(38vw, 170px); height: 108px; margin-bottom: -8px; }
  .result-screen h1 { font-size: clamp(1.45rem, 7vw, 2rem); margin: 2px 0 4px; }
  .result-lead { margin-bottom: 6px; }
  .result-review { max-height: 22vh; margin-bottom: 8px; }
  .result-stats { margin-bottom: 6px; gap: 22px; }
  .secondary-button { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-entering .problem-area,
  .stage.is-input-pulse .role-input,
  .stage.is-partial-success .celebration-overlay,
  .stage.is-celebrating .celebration-overlay {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .celebration-burst,
  .celebration-ribbon,
  .celebration-particle,
  .celebration-hero { display: none; }
  .stage.is-wrong .wrong-feedback { animation: none; opacity: 1; }
  .wrong-puff { display: none; }
}
.manual-reduced-motion *,
.manual-reduced-motion *::before,
.manual-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (min-width: 521px) and (max-height: 760px) {
  .start-screen { padding: 8px; }
  .start-stage { min-height: 0; height: 100%; }
  .start-stage .start-content { padding: 8px 18px; }
  .start-stage .sankichi-start { height: 130px; }
  .difficulty-help { font-size: .68rem; line-height: 1.1; }
  .start-stage .primary-button { min-height: 48px; padding-block: 10px; }
}
@media (max-width: 520px) {
  .result-screen { display: flex; flex-direction: column; justify-content: center; gap: 0; }
  .result-screen .result-decor { position: absolute; }
  .result-screen .logo-result, .result-screen .sankichi-result, .result-screen h1, .result-screen .result-lead, .result-screen .result-review, .result-screen .result-review-pager, .result-screen .result-stats, .result-screen > .primary-button, .result-screen > .secondary-button { flex: 0 0 auto; }
  .result-screen .result-review { max-height: 140px; }
  .result-screen .result-review-pager { min-height: 44px; }
  .result-screen .result-review-pager .secondary-button { margin-top: 0; padding: 6px 14px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .result-screen { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: repeat(8, auto); align-content: center; column-gap: 10px; }
  .result-screen .logo-result { grid-column: 1; grid-row: 1; width: 150px; height: auto; justify-self: center; }
  .result-screen .sankichi-result { grid-column: 1; grid-row: 2 / 9; width: 130px; height: 100px; justify-self: center; }
  .result-screen h1 { grid-column: 2; grid-row: 1; font-size: 1.4rem; line-height: 1.1; margin: 0; }
  .result-screen .result-lead { grid-column: 2; grid-row: 2; font-size: .82rem; line-height: 1.2; margin: 0; }
  .result-screen .promotion-message { grid-column: 2; grid-row: 3; margin: 0; }
  .result-screen .result-review { grid-column: 2; grid-row: 4; max-height: 66px; margin: 0 auto; }
  .result-screen .result-review-pager { grid-column: 2; grid-row: 5; min-height: 44px; }
  .result-screen .result-stats { grid-column: 2; grid-row: 6; margin: 0; }
  .result-screen > .primary-button { grid-column: 2; grid-row: 7; min-height: 44px; }
  .result-screen > .secondary-button { grid-column: 2; grid-row: 8; min-height: 44px; margin: 0; }
  .result-screen .result-review-pager .secondary-button { margin: 0; }
}
@media (max-width: 520px) and (orientation: portrait) {
  .result-screen .logo-result { width: 230px; height: auto; }
  .result-screen .sankichi-result { width: 150px; height: 100px; }
  .result-screen h1 { font-size: 1.8rem; line-height: 1.1; margin: 2px 0; }
  .result-screen .result-lead { font-size: .9rem; line-height: 1.2; margin: 0 0 4px; }
  .result-screen .result-review { max-height: 120px; }
  .result-screen .result-review li { padding: 5px 8px; font-size: .72rem; line-height: 1.2; }
  .result-screen .result-stats { margin: 2px 0; }
  .result-screen .result-stats strong { font-size: 1.4rem; }
  .result-screen > .secondary-button { min-height: 44px; margin-top: 0; }
}

/* The desktop start card is shorter than the natural content stack at
   720–768px viewport heights. Give each block a real row so the primary
   action remains inside the card instead of being clipped below it. */
@media (min-width: 521px) and (min-height: 521px) and (max-height: 800px) {
  .start-stage { min-height: 0; height: 100%; }
  .start-stage .start-content {
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 72px 54px 92px 42px 44px 1fr 48px;
    align-content: center;
    gap: 4px;
    padding: 8px 18px;
  }
  .start-stage .logo-start { width: 210px; height: 70px; object-fit: contain; justify-self: center; }
  .start-stage .tagline { margin: 0; }
  .start-stage .tagline .start-tagline-art { width: 300px; max-height: 54px; }
  .start-stage .sankichi-start { width: 125px; height: 92px; margin: 0 auto; }
  .start-stage .settings-row { margin: 0; }
  .start-stage .mode-picker { margin: 0 auto; }
  .start-stage .difficulty-picker { min-height: 0; align-self: stretch; overflow: hidden; }
  .start-stage .difficulty-picker .difficulty-grid { gap: 4px; }
  .start-stage .difficulty-picker .difficulty-button { min-height: 44px; padding-block: 4px; }
  .start-stage .difficulty-help, .start-stage .difficulty-count { margin: 1px auto; font-size: .66rem; line-height: 1.05; }
  .start-stage .primary-button { min-height: 44px; height: 48px; padding-block: 7px; justify-self: center; }
}

/* Landscape phones/tablets have only a few hundred CSS pixels of height;
   keep the picker and CTA in the right column's measured grid area. */
@media (min-width: 521px) and (max-height: 520px) {
  .start-stage .start-content {
    box-sizing: border-box;
    height: 100%;
    grid-template-rows: 42px 36px 36px minmax(0, 1fr) 44px;
    gap: 2px 10px;
    padding: 4px 10px;
  }
  .start-stage .logo-start { width: 130px; height: 42px; }
  .start-stage .tagline .start-tagline-art { width: 260px; max-height: 38px; }
  .start-stage .sankichi-start { height: 80px; }
  .start-stage .difficulty-picker { min-height: 0; overflow: hidden; align-self: stretch; }
  .start-stage .difficulty-picker .difficulty-grid { gap: 3px; }
  .start-stage .difficulty-picker .difficulty-button { min-height: 44px; padding: 2px 4px; font-size: .68rem; }
  .start-stage .primary-button { min-height: 44px; height: 44px; padding: 6px 24px; }
}

/* Keep every result row in the track it owns, including the compact landscape
   layout where implicit grid rows previously let review text intrude into score. */
.result-screen:not([hidden]) { grid-template-rows: auto auto auto auto auto auto auto auto !important; }
@media (max-height: 520px) {
  .result-screen:not([hidden]) .result-title-art { max-height: 72px; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: 2rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size: 1rem !important; }
  .result-screen:not([hidden]) .result-stats { gap: 2px 12px; }
}

@media (min-width: 521px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }
  .result-screen:not([hidden]) .result-actions button {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 64px;
    height: 64px;
  }
  .result-screen:not([hidden]) .result-actions button .button-art {
    height: 60px;
    transform: scale(1);
  }
}

.start-stage .primary-button.has-generated-art {
  width: min(220px, 100%);
  padding-inline: 0;
}

@media (max-width: 520px) and (max-height: 650px) and (orientation: portrait) {
  .start-stage .sankichi-start { height: 100px; }
}
@media (max-width: 520px) and (min-height: 651px) and (max-height: 700px) and (orientation: portrait) {
  .result-screen:not([hidden]) .result-actions button { height: 56px; min-height: 56px; }
  .result-screen:not([hidden]) .result-actions button .button-art { height: 50px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .start-screen { height: 100dvh; min-height: 0; overflow: hidden; }
  .start-stage { height: 100%; min-height: 0; overflow: hidden; }
  .start-stage .start-content { height: 100%; min-height: 0; overflow: hidden; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
}
@media (min-width: 521px) {
  .result-screen { grid-template-rows: repeat(9, auto); align-content: center; }
  .result-screen .logo-result { grid-row: 1; }
  .result-screen .sankichi-result { grid-row: 2; }
  .result-screen h1 { grid-row: 3; }
  .result-screen .result-lead { grid-row: 4; }
  .result-screen .result-review { grid-row: 5; }
  .result-screen .result-review-pager { grid-row: 6; min-height: 44px; }
  .result-screen .result-stats { grid-row: 7; }
  .result-screen > .primary-button { grid-row: 8; }
  .result-screen > .secondary-button { grid-row: 9; margin-top: 0; }
  .result-screen .result-review-pager .secondary-button { margin-top: 0; }
}

/* Result layout owns one explicit action row so button shadows cannot collide with
   the review pager or with one another at compact viewport heights. */
.result-screen:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto;
  align-content: center;
  gap: 6px;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(8px, 2vh, 18px) clamp(10px, 3vw, 28px);
}
.result-screen:not([hidden]) .result-decor { position: absolute; inset: 0; pointer-events: none; }
.result-screen:not([hidden]) .logo-result { grid-row: 1; width: min(34vw, 190px); height: auto; justify-self: center; }
.result-screen:not([hidden]) .sankichi-result { grid-row: 2; width: min(30vw, 150px); height: auto; max-height: 90px; justify-self: center; }
.result-screen:not([hidden]) .result-title-wrap { grid-row: 3; display: grid; place-items: center; min-height: 40px; }
.result-screen:not([hidden]) .result-title-wrap h1 { grid-area: 1 / 1; margin: 0; line-height: 1.1; }
.result-title-art { grid-area: 1 / 1; display: none; width: min(92vw, 420px); max-height: 120px; object-fit: contain; }
.result-screen[data-title-art="paused"] .result-title-art,
.result-screen[data-title-art="complete"] .result-title-art,
.result-screen[data-title-art="normal"] .result-title-art { display: block; }
.result-screen[data-title-art] .result-title-wrap.has-generated-art h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.button-art, .start-tagline-art { display: none; max-width: 100%; object-fit: contain; pointer-events: none; }
.has-generated-art.button { position: relative; }
.has-generated-art .button-art { display: block; width: 100%; height: 100%; transform: scale(1.1); }
button.has-generated-art { height: 64px; min-height: 44px; background: transparent; border: 0; box-shadow: none; padding: 0; }
button.has-generated-art .button-art { height: 56px; }
.has-generated-art .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tagline.has-generated-art .start-tagline-art { display: block; width: min(72vw, 360px); max-height: 82px; margin: 0 auto; }
.tagline.has-generated-art .static-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.result-screen:not([hidden]) .result-lead { grid-row: 4; margin: 0; min-height: 0; }
.result-screen:not([hidden]) .promotion-message { grid-row: 5; margin: 0; min-height: 0; }
.result-screen:not([hidden]) .result-review { grid-row: 6; min-height: 0; max-height: min(18vh, 150px); overflow: hidden; margin: 0; width: 100%; }
.result-screen:not([hidden]) .result-review-pager { grid-row: 7; min-height: 44px; margin: 0; }
.result-screen:not([hidden]) .result-stats { grid-row: 8; min-height: 0; margin: 0; }
.result-screen:not([hidden]) .result-actions { grid-row: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 44px; padding: 2px 0; }
.result-actions button { min-height: 44px; margin: 0; flex: 1 1 170px; max-width: 280px; }

@media (min-width: 760px) {
  .result-screen:not([hidden]) { grid-template-columns: minmax(130px, .36fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; column-gap: clamp(12px, 3vw, 34px); }
  .result-screen:not([hidden]) .logo-result { grid-column: 1; grid-row: 1 / 3; width: min(20vw, 210px); align-self: center; }
  .result-screen:not([hidden]) .sankichi-result { grid-column: 1; grid-row: 3 / 8; width: min(18vw, 170px); max-height: 150px; align-self: center; }
  .result-screen:not([hidden]) .result-title-wrap, .result-screen:not([hidden]) .result-lead, .result-screen:not([hidden]) .promotion-message, .result-screen:not([hidden]) .result-review, .result-screen:not([hidden]) .result-review-pager, .result-screen:not([hidden]) .result-stats, .result-screen:not([hidden]) .result-actions { grid-column: 2; }
  .result-screen:not([hidden]) .result-title-wrap { grid-row: 1; }
  .result-screen:not([hidden]) .result-lead { grid-row: 2; }
  .result-screen:not([hidden]) .promotion-message { grid-row: 3; }
  .result-screen:not([hidden]) .result-review { grid-row: 4; max-height: min(24vh, 190px); }
  .result-screen:not([hidden]) .result-review-pager { grid-row: 5; }
  .result-screen:not([hidden]) .result-stats { grid-row: 6; }
  .result-screen:not([hidden]) .result-actions { grid-row: 7; }
}
@media (max-height: 520px) {
  .result-screen:not([hidden]) { gap: 3px; padding: 5px 10px; }
  .result-screen:not([hidden]) .result-title-art { max-height: 110px; }
  .result-screen:not([hidden]) .logo-result { width: min(18vw, 150px); }
  .result-screen:not([hidden]) .sankichi-result { max-height: 82px; }
  .result-screen:not([hidden]) .result-review { max-height: 66px; }
  .result-screen:not([hidden]) .result-review li { padding: 4px 8px; font-size: .72rem; line-height: 1.1; }
  .result-screen:not([hidden]) .result-actions { gap: 10px; padding: 0; }
  .result-actions button { min-height: 44px; padding: 5px 10px; }
  button.has-generated-art { height: 44px; }
  button.has-generated-art .button-art { height: 36px; transform: scale(1); }
}
@media (max-width: 520px) and (min-height: 521px) {
  .result-screen:not([hidden]) .result-actions { flex-direction: column; align-items: center; gap: 10px; }
  .result-screen:not([hidden]) .result-actions button { width: min(280px, 100%); flex: 0 0 auto; }
}
@media (min-height: 521px) {
  .result-screen[data-review-empty="1"]:not([hidden]) { grid-template-rows: auto auto auto auto auto auto auto; align-content: center; }
  .result-screen[data-review-empty="1"]:not([hidden]) .result-review,
  .result-screen[data-review-empty="1"]:not([hidden]) .result-review-pager { display: none; }
  .result-screen[data-review-empty="1"]:not([hidden]) .result-stats { grid-row: 6; }
  .result-screen[data-review-empty="1"]:not([hidden]) .result-actions { grid-row: 7; }
}

/* Final result hierarchy: score/rating precede the optional review list. */
.result-screen:not([hidden]) .result-stats {
  grid-row: 5 !important;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px clamp(10px, 3vw, 24px);
}
.result-screen:not([hidden]) .result-stats .score-result-hero {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.result-screen:not([hidden]) .result-stats .score-result-hero strong {
  font-size: clamp(2rem, 8vw, 4rem) !important;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.result-screen:not([hidden]) .result-stats .score-result-hero span {
  font-size: clamp(1.1rem, 4vw, 1.8rem) !important;
  line-height: 1;
}
.result-screen:not([hidden]) .result-stats .score-result-hero small {
  color: #8d2f72;
  font-size: clamp(.62rem, 2vw, .82rem);
  font-weight: 800;
  line-height: 1;
}
.result-screen:not([hidden]) .result-review { grid-row: 6 !important; }
.result-screen:not([hidden]) .result-review-pager { grid-row: 7 !important; }
.result-screen:not([hidden]) .result-actions { grid-row: 8 !important; }
.result-screen[data-review-empty="1"]:not([hidden]) .result-stats { grid-row: 6 !important; }
.result-screen[data-review-empty="1"]:not([hidden]) .result-actions { grid-row: 7 !important; }
@media (min-width: 760px) {
  .result-screen:not([hidden]) .result-stats { grid-column: 2; grid-row: 3 !important; }
  .result-screen:not([hidden]) .result-title-wrap { grid-column: 2; grid-row: 1 !important; }
  .result-screen:not([hidden]) .result-lead { grid-column: 2; grid-row: 2 !important; }
  .result-screen:not([hidden]) .result-review { grid-column: 2; grid-row: 4 !important; }
  .result-screen:not([hidden]) .result-review-pager { grid-column: 2; grid-row: 5 !important; }
  .result-screen:not([hidden]) .result-actions { grid-column: 2; grid-row: 6 !important; }
}
@media (min-width: 521px) and (max-height: 520px) {
  .result-screen:not([hidden]) { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: repeat(7, auto); align-content: start; column-gap: 10px; }
  .result-screen:not([hidden]) .logo-result { grid-column: 1; grid-row: 1; width: 150px; }
  .result-screen:not([hidden]) .sankichi-result { grid-column: 1; grid-row: 2 / 8; width: 130px; max-height: 100px; }
  .result-screen:not([hidden]) .result-title-wrap { grid-column: 2; grid-row: 1; }
  .result-screen:not([hidden]) .result-lead { grid-column: 2; grid-row: 2; }
  .result-screen:not([hidden]) .promotion-message { grid-column: 2; grid-row: 3; }
  .result-screen:not([hidden]) .result-review { grid-column: 2; grid-row: 4; max-height: 66px; }
  .result-screen:not([hidden]) .result-review-pager { grid-column: 2; grid-row: 5; }
  .result-screen:not([hidden]) .result-stats { grid-column: 2; grid-row: 6; }
  .result-screen:not([hidden]) .result-actions { grid-column: 2; grid-row: 7; }
}

/* Compact result overrides must be last so legacy landscape rules cannot
   restore the old title size or implicit rows. */
.result-screen:not([hidden]) { grid-template-rows: auto auto auto auto auto auto auto auto !important; }
@media (max-height: 520px) {
  .result-screen:not([hidden]) .result-title-art { max-height: 72px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: 2rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size: 1rem !important; }
  .result-screen:not([hidden]) .result-stats { gap: 2px 12px; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size: 1rem !important; line-height: 1 !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size: .62rem !important; line-height: 1 !important; }
  .result-screen:not([hidden]) .result-actions button { height: 58px; min-height: 58px; }
  .result-screen:not([hidden]) .result-actions button .button-art { height: 54px; }
}
@media (max-width: 520px) and (min-height: 521px) {
  .result-screen:not([hidden]) .result-stats { margin-top: 20px; }
  .result-screen:not([hidden]) .result-actions { transform: none; }
}
@media (max-width: 520px) and (max-height: 650px) and (orientation: portrait) {
  .result-screen:not([hidden]) .result-title-art { max-height: 86px !important; }
  .result-screen:not([hidden]) .result-actions { transform: none; gap: 12px; margin-top: 20px !important; }
  .result-screen:not([hidden]) .result-actions button { height: 52px; min-height: 52px; }
  .result-screen:not([hidden]) .result-actions button .button-art { height: 48px; }
}

/* Compact local progression summaries. They stay secondary to the question,
   score hero, and primary actions on short screens. */
.progression-summary, .growth-summary, .trophy-summary {
  width: min(620px, 100%);
  margin: 2px auto;
  color: #684d72;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.25;
}
.progression-open { display: block; min-height: 44px; margin: 3px auto 0; padding: 6px 16px; border: 2px solid #d98ab9; border-radius: 14px; background: #fff7fc; color: #713b70; font-weight: 950; }
.progression-panel { width: min(92vw, 560px); max-height: min(88dvh, 600px); padding: 0; border: 0; border-radius: 22px; background: transparent; color: #503d68; }
.progression-panel::backdrop { background: #2c1d4d99; backdrop-filter: blur(3px); }
.progression-panel-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: min(88dvh, 600px); padding: 14px; border: 3px solid #f5b4d5; border-radius: 22px; background: linear-gradient(145deg, #fffaff, #fff0f8); box-shadow: 0 12px 40px #27154055; }
.progression-panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.progression-panel-head h2 { margin: 0; font-size: 1.25rem; color: #a33179; }
.progression-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 8px 0; }
.progression-tabs button { min-height: 44px; padding: 4px 3px; border: 1px solid #e5a0c8; border-radius: 10px; background: #fff; color: #704875; font-size: .72rem; font-weight: 900; }
.progression-tabs button[aria-selected="true"] { background: #ffcde7; box-shadow: inset 0 -3px #c34c91; }
.progression-panel-content { min-height: 0; overflow: hidden; display: grid; align-content: center; gap: 7px; font-size: .78rem; font-weight: 800; }
.progression-panel-content .panel-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff8f4cc; }
.progression-panel-content .panel-row strong { color: #a63878; }
.progression-panel-content .panel-note { text-align: center; color: #795b84; }
.collection-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.collection-slot { min-height: 58px; padding: 5px; border: 2px solid #e3b0ca; border-radius: 12px; background: #fff; text-align: left; font-weight: 850; }
.collection-slot[aria-pressed="true"] { border-color: #ca3d8a; background: #ffe0ef; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc67a7; }
body[data-reward="rainbow"] .audience-layer { filter: saturate(1.35) hue-rotate(10deg); }
body[data-reward="mint"] .audience-layer { filter: saturate(1.15) hue-rotate(45deg); }
body[data-reward="confetti"] .audience-layer { filter: saturate(1.5) contrast(1.06); }
body[data-reward="sunset"] .audience-layer { filter: saturate(1.2) hue-rotate(-18deg); }
body[data-reward="stars"] .audience-layer { filter: brightness(1.12) saturate(1.25); }
.collection-slot-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-bottom:5px; }
.collection-slot-tab { min-height:44px; padding:3px 2px; border:1px solid #e5a0c8; border-radius:9px; background:#fff; color:#704875; font-size:.65rem; font-weight:900; }
.collection-slot-tab[aria-pressed="true"] { background:#ffcde7; box-shadow:inset 0 -2px #c34c91; }
.progression-panel-content [data-use-pass] { min-height:44px; padding:6px 10px; }
.game-toolbar #finish-button { min-height:44px; }

/* Keep compact result content in separate painted rows. The score stats must
   never share the row occupied by the optional promotion/review content. */
@media (max-width: 759px) {
  .result-screen:not([hidden]) { grid-template-rows: auto auto auto auto auto auto auto auto auto !important; }
  .result-screen:not([hidden]) .result-lead { grid-row: 4 !important; }
  .result-screen:not([hidden]) .promotion-message { grid-row: 5 !important; }
  .result-screen:not([hidden]) .result-stats { grid-row: 6 !important; margin-top: 0 !important; }
  .result-screen:not([hidden]) .result-review { grid-row: 7 !important; }
  .result-screen:not([hidden]) .result-review-pager { grid-row: 8 !important; }
  .result-screen:not([hidden]) .result-actions { grid-row: 9 !important; transform: none !important; }
  .result-screen[data-review-empty="1"]:not([hidden]) { grid-template-rows: auto auto auto auto auto auto auto !important; }
  .result-screen[data-review-empty="1"]:not([hidden]) .result-stats { grid-row: 6 !important; }
  .result-screen[data-review-empty="1"]:not([hidden]) .result-actions { grid-row: 7 !important; }
}
body[data-audience-reward="rainbow"] .audience-layer { filter:saturate(1.3) hue-rotate(8deg); }
body[data-background-reward="mint"] .stage, body[data-background-reward="mint"] .game-stage { filter:hue-rotate(18deg) saturate(1.08); }
body[data-confetti-reward="confetti"] .hype-canvas { filter:saturate(1.18) brightness(1.04); }
body[data-finale-reward="sunset"] .result-screen { --result-accent:#e4864c; }
body[data-finale-reward="stars"] .result-screen { --result-accent:#735cc7; }
.progression-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; }
.progression-summary strong, .progression-summary small { flex-basis: 100%; text-align: center; }
.progression-summary button { min-height: 44px; border: 1px solid #d98ab9; border-radius: 10px; background: #fff; color: #713b70; font-size: .65rem; font-weight: 900; padding: 3px 8px; }
.progression-summary span.is-done { color: #bd3b86; }
.growth-summary { display: grid; gap: 2px; padding: 4px 10px; border-radius: 12px; background: #fff7f2cc; }
.growth-summary strong { color: #b13a79; }
.trophy-summary { text-align: center; }
.reward-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(620px, 100%); margin: 2px auto; }
.reward-controls button { min-height: 44px; border: 2px solid #e5a0c8; border-radius: 12px; background: #fff8fc; color: #67406e; font-size: .68rem; font-weight: 900; padding: 4px 8px; }
.reward-controls button[aria-pressed="true"] { background: #ffd5ec; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e35ca3; }
body[data-reward="rainbow"] .audience-layer { filter: saturate(1.35) hue-rotate(10deg); }
body[data-reward="mint"] .audience-layer { filter: saturate(1.15) hue-rotate(45deg); }
body[data-reward="confetti"] .audience-layer { filter: saturate(1.5) contrast(1.06); }
body[data-reward="sunset"] .audience-layer { filter: saturate(1.2) hue-rotate(-18deg); }
body[data-reward="stars"] .audience-layer { filter: brightness(1.12) saturate(1.25); }
@media (max-height: 700px) {
  .progression-summary { font-size: .64rem; gap: 1px 6px; }
  .progression-summary span { white-space: nowrap; }
  .growth-summary, .trophy-summary { font-size: .62rem; }
  .progression-open { margin-top: 1px; }
}
@media (max-height: 430px) {
  .progression-panel { max-height: calc(100dvh - 8px); }
  .progression-panel-card { max-height: calc(100dvh - 8px); padding: 8px; }
  .progression-panel-content { gap: 3px; font-size: .7rem; }
  .progression-panel-content .panel-row { padding: 4px 7px; }
}
@media (max-width: 420px) and (max-height: 650px) {
  #progression-open { transform: translateY(-5px); }
}
@media (max-width: 390px) {
  .progression-panel { width: calc(100vw - 18px); }
  .progression-panel-card { padding: 9px; }
  .progression-tabs { gap: 3px; }
  .progression-tabs button { font-size: .62rem; }
}
@media (min-width: 521px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-actions { transform: translateY(4px); }
}

/* Progression entry remains a real 44px target on compact start cards. */
#progression-open { display:block !important; min-height:44px !important; height:44px !important; padding:6px 12px !important; line-height:1.2; }
@media (max-width:420px) and (min-height:700px) { #progression-open { margin-top:-12px !important; } }

/* Optional progression outfit overlay: generated parts are cropped independently. */
.character-region { position:relative; }
.outfit-overlay { position:absolute; z-index:2; pointer-events:none; width:145%; height:145%; max-width:none; left:50%; top:44%; transform:translate(-50%,-50%); }
.outfit-piece { position:absolute; overflow:hidden; display:block; }
.outfit-piece img { position:absolute; max-width:none; width:205%; height:auto; }
.outfit-crown { left:3%; top:0; width:58%; height:52%; }
.outfit-crown img { left:-1%; top:-1%; }
.outfit-ribbon { right:-2%; bottom:-2%; width:76%; height:70%; }
.outfit-ribbon img { left:-34%; top:-31%; }
.collection-slot[data-reward="outfit-crown-ribbon"] { display:flex; align-items:center; gap:6px; }
.collection-preview { width:58px; height:42px; object-fit:contain; flex:0 0 auto; }
body[data-outfit-reward="outfit-crown-ribbon"] .outfit-overlay { display:block; }
@media (max-width:420px) { .outfit-overlay { width:150%; height:150%; } }

.progression-pager { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:6px; margin-top:4px; text-align:center; }
.progression-pager button { min-height:44px; border:1px solid #e5a0c8; border-radius:9px; background:#fff; font-weight:900; }
.progression-pager button:disabled { opacity:.45; }

@media (max-width:380px) and (max-height:700px) and (orientation:portrait) {
  .start-stage .start-content { padding-top:4px; padding-bottom:0; }
  .start-stage .sankichi-start { height:56px; }
  .start-stage .intro { margin-top:1px; margin-bottom:3px; }
}

@media (max-width:380px) and (max-height:700px) and (orientation:portrait) {
  #start-button.has-generated-art { height:52px; min-height:44px; }
  #start-button.has-generated-art .button-art { height:46px; }
}

@media (max-width:380px) and (max-height:700px) and (orientation:portrait) { #start-button.has-generated-art { transform:translateY(-3px); } }

.audience-layer[data-reward="rainbow"] .audience-member:nth-of-type(2) { filter:hue-rotate(28deg) saturate(1.35); transform:scale(1.18); z-index:2; }
.audience-layer[data-reward="rainbow"] .audience-member:nth-of-type(2) .audience-sprite { box-shadow:0 0 18px #ffd34fbb; border-radius:28%; }
body[data-confetti-reward="confetti"] .hype-canvas { mix-blend-mode:screen; filter:saturate(1.65) contrast(1.12); }
body[data-finale-reward="sunset"] .result-screen { background:radial-gradient(circle at 50% 12%, #ffd68d 0%, #fff2d8 28%, #fff7fb 72%); border-color:#e4864c; }
body[data-finale-reward="sunset"] .result-screen .result-title-wrap, body[data-finale-reward="sunset"] .result-screen .score-result-hero { color:#b95336; }
body[data-finale-reward="stars"] .result-screen { background:radial-gradient(circle at 18% 18%, #fff2a8 0 1.5px, transparent 2px),radial-gradient(circle at 78% 28%, #d9c8ff 0 1.5px, transparent 2px),linear-gradient(145deg,#332657,#6c4b94 58%,#fff0fa); background-size:90px 80px,120px 100px,auto; border-color:#735cc7; }
body[data-finale-reward="stars"] .result-screen .result-title-wrap, body[data-finale-reward="stars"] .result-screen .score-result-hero { color:#fff; text-shadow:0 2px 8px #26153f; }

/* Final result layout: one predictable flow prevents summaries and actions from
   competing for implicit grid rows on compact screens. */
.result-screen:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  padding: 5px 10px !important;
  box-sizing: border-box;
}
.result-screen:not([hidden]) > .result-decor { position: absolute; inset: 0; pointer-events: none; }
.result-screen:not([hidden]) [hidden] { display: none !important; }
.result-screen:not([hidden]) > *,
.result-screen:not([hidden]) .result-title-wrap,
.result-screen:not([hidden]) .result-actions,
.result-screen:not([hidden]) .result-stats { top: auto !important; transform: none !important; }
.result-screen:not([hidden]) .logo-result,
.result-screen:not([hidden]) .sankichi-result { margin: 0 !important; }
.result-screen:not([hidden]) .logo-result { position: relative; width: min(28vw, 130px); max-height: 42px; object-fit: contain; flex: 0 0 auto; }
.result-screen:not([hidden]) .sankichi-result { position: relative; width: min(26vw, 110px); max-height: 54px; object-fit: contain; flex: 0 0 auto; }
.result-screen:not([hidden]) .result-title-wrap { position: relative; display: grid; place-items: center; min-height: 42px; max-height: 62px; flex: 0 0 auto; }
.result-screen:not([hidden]) .result-title-art { grid-area: 1 / 1; width: min(86vw, 360px); max-height: 58px !important; object-fit: contain; }
.result-screen:not([hidden]) .result-title-wrap h1 { grid-area: 1 / 1; margin: 0; font-size: clamp(1.2rem, 5vw, 1.8rem); line-height: 1.05; }
.result-screen:not([hidden]) .result-lead,
.result-screen:not([hidden]) .promotion-message { flex: 0 0 auto; margin: 0; min-height: 0; line-height: 1.15; font-size: .75rem; }
.result-screen:not([hidden]) .growth-summary,
.result-screen:not([hidden]) .trophy-summary { flex: 0 0 auto; width: min(100%, 620px); max-height: 38px; overflow: hidden; margin: 0; line-height: 1.1; font-size: .68rem; }
.result-screen:not([hidden]) .result-review { flex: 0 0 auto; width: min(100%, 620px); max-height: 58px; overflow: hidden; margin: 0; padding: 0 3px; gap: 3px; }
.result-screen:not([hidden]) .result-review li { padding: 3px 7px; font-size: .68rem; line-height: 1.05; }
.result-screen:not([hidden]) .result-review-pager { flex: 0 0 44px; min-height: 44px; margin: 0; }
.result-screen:not([hidden]) .result-stats { flex: 0 0 auto; width: min(100%, 620px); margin: 0; gap: 3px 10px; }
.result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: 1.65rem !important; }
.result-screen:not([hidden]) .result-stats .score-result-hero span { font-size: .85rem !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size: .95rem !important; line-height: 1 !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size: .6rem !important; line-height: 1 !important; }
.result-screen:not([hidden]) .result-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 620px); flex: 0 0 auto; gap: 5px !important; margin: 0 !important; padding: 0; }
.result-screen:not([hidden]) .result-actions button { min-height: 44px !important; height: 44px !important; min-width: 44px; width: 100%; margin: 0 !important; padding: 2px 5px; }
.result-screen:not([hidden]) .result-actions .result-progression-open { grid-column: 1 / -1; }
.result-screen:not([hidden]) .result-actions button .button-art { height: 40px; max-height: 40px; object-fit: contain; }
@media (min-width: 700px) {
  .result-screen:not([hidden]) { gap: 6px !important; padding: 10px 18px !important; }
  .result-screen:not([hidden]) .logo-result { width: 170px; max-height: 52px; }
  .result-screen:not([hidden]) .sankichi-result { width: 150px; max-height: 72px; }
  .result-screen:not([hidden]) .result-title-art { max-height: 72px !important; }
  .result-screen:not([hidden]) .growth-summary,
  .result-screen:not([hidden]) .trophy-summary { max-height: 48px; font-size: .78rem; }
  .result-screen:not([hidden]) .result-review { max-height: 78px; }
  .result-screen:not([hidden]) .result-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .result-screen:not([hidden]) .result-actions .result-progression-open { grid-column: auto; }
}

/* Outfit pieces share a dedicated mascot image box, so the footer column never
   becomes the positioning reference. Each generated crop stays in normal flow
   inside its piece and follows the same animation wrapper as the mascot. */
.character-region { position:relative; display:flex; align-items:flex-end; justify-content:center; }
.mascot-box { position:relative; flex:0 0 clamp(120px, 30vw, 150px); width:clamp(120px, 30vw, 150px); aspect-ratio:1; }
.mascot-box .sankichi-play { width:100%; height:100%; max-width:none; max-height:none; }
.outfit-overlay { position:absolute; inset:0; width:100%; height:100%; max-width:none; left:0; top:0; transform:none; }
.outfit-piece { position:absolute; overflow:hidden; display:block; line-height:0; }
.outfit-piece img { position:static; display:block; width:100%; height:auto; max-width:none; }
/* The generated sheet is split into two transparent crops; anchor each to the
   same mascot image box so the face stays clear while the pieces move with it. */
.outfit-crown { left:32.5%; top:5%; width:35%; height:auto; }
.outfit-ribbon { left:40%; top:48%; width:25%; height:auto; }
/* Animate the shared box rather than the bare mascot image: generated crown
   and ribbon then follow breathe/jump/ouch as one unit. */
.mascot-box { animation:breathe calc(3.5s - var(--intensity) * 0.2s) ease-in-out infinite; }
.mascot-box .sankichi-play { animation:none !important; }
.stage.is-correct .mascot-box { animation:jump 0.5s ease forwards; }
.stage.is-wrong .mascot-box { animation:ouch 0.4s ease; }
.stage.is-recover .mascot-box { animation:breathe 1.1s ease-in-out; }

/* Final compact result row ownership: keep stats above actions in short landscape. */
@media (min-width: 521px) and (max-width: 759px) and (max-height: 520px) {
  .result-screen:not([hidden]) {
    grid-template-rows: repeat(9, auto) !important;
    align-content: start !important;
    row-gap: 4px !important;
  }
  .result-screen:not([hidden]) .result-stats { grid-row: 6 !important; }
  .result-screen:not([hidden]) .result-review-pager { grid-row: 8 !important; }
  .result-screen:not([hidden]) .result-actions { grid-row: 9 !important; margin: 0 !important; }
}
@media (min-width: 521px) and (max-width: 759px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-review-pager:not(:has(button)) { display:none !important; }
  .result-screen:not([hidden]) .result-actions { position:relative; top:46px; gap:6px !important; }
  .result-screen:not([hidden]) .result-actions button { min-height:52px; height:52px; }
}
@media (min-width: 521px) and (max-width: 759px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-actions { top:10px; gap:4px !important; }
  .result-screen:not([hidden]) .result-actions button { min-height:48px; height:48px; }
}
@media (min-width: 521px) and (max-width: 759px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-actions { top:10px; gap:2px !important; }
  .result-screen:not([hidden]) .result-actions button { min-height:44px; height:44px; }
}
@media (min-width: 521px) and (max-width: 759px) and (max-height: 520px) {
  .result-screen:not([hidden]) .result-actions { top:5px; }
}

/* Result layout final override: keep a single normal-flow contract after legacy rules. */
.result-screen:not([hidden]) {
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:flex-start !important; gap:3px !important; height:100dvh !important;
  min-height:100dvh !important; overflow:hidden !important; padding:4px 10px !important;
  box-sizing:border-box !important; grid-template-columns:none !important; grid-template-rows:none !important;
}
.result-screen:not([hidden]) [hidden] { display:none !important; }
.result-screen:not([hidden]) > * { position:relative !important; top:auto !important; transform:none !important; grid-column:auto !important; grid-row:auto !important; margin-top:0 !important; margin-bottom:0 !important; }
.result-screen:not([hidden]) > .result-decor { position:absolute !important; inset:0 !important; }
.result-screen:not([hidden]) .logo-result { width:min(26vw,120px) !important; max-height:36px !important; object-fit:contain; }
.result-screen:not([hidden]) .sankichi-result { width:min(23vw,96px) !important; max-height:42px !important; object-fit:contain; }
.result-screen:not([hidden]) .result-title-wrap { display:grid !important; place-items:center !important; min-height:42px !important; max-height:52px !important; }
.result-screen:not([hidden]) .result-title-art { grid-area:1/1 !important; width:min(82vw,340px) !important; max-height:50px !important; }
.result-screen:not([hidden]) .result-title-wrap h1 { grid-area:1/1 !important; margin:0 !important; font-size:clamp(1.1rem,4.5vw,1.7rem) !important; }
.result-screen:not([hidden]) .result-lead,.result-screen:not([hidden]) .promotion-message { flex:0 0 auto !important; min-height:0 !important; line-height:1.05 !important; font-size:.7rem !important; }
.result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { flex:0 0 auto !important; width:min(100%,620px) !important; max-height:34px !important; overflow:hidden !important; margin:0 !important; font-size:.64rem !important; line-height:1.05 !important; }
.result-screen:not([hidden]) .result-review { flex:0 0 auto !important; width:min(100%,620px) !important; max-height:52px !important; overflow:hidden !important; margin:0 !important; }
.result-screen:not([hidden]) .result-review-pager { flex:0 0 44px !important; min-height:44px !important; margin:0 !important; }
.result-screen:not([hidden]) .result-stats { flex:0 0 auto !important; width:min(100%,620px) !important; margin:0 !important; min-height:0 !important; gap:2px 8px !important; }
.result-screen:not([hidden]) .result-stats { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-template-rows:auto auto !important; align-items:center !important; justify-items:center !important; }
.result-screen:not([hidden]) .result-stats .score-result-hero { grid-column:1 / -1 !important; min-width:0 !important; width:100% !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) { min-width:0 !important; width:100% !important; min-height:2.8em !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; line-height:1.12 !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong,.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { white-space:nowrap !important; }
.result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:1.45rem !important; }
.result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:.76rem !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size:.82rem !important; line-height:1 !important; }
.result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size:.56rem !important; line-height:1 !important; }
.result-screen:not([hidden]) .result-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:min(100%,620px) !important; flex:0 0 auto !important; gap:3px !important; margin:0 !important; padding:0 !important; }
.result-screen:not([hidden]) .result-actions button { display:flex !important; min-width:44px !important; width:100% !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:1px 3px !important; }
.result-screen:not([hidden]) .result-actions .result-progression-open { grid-column:1/-1 !important; }
.result-screen:not([hidden]) .result-actions button .button-art { height:38px !important; max-height:38px !important; }
@media (min-width:700px) {
 .result-screen:not([hidden]) { gap:4px !important; padding:6px 14px !important; }
 .result-screen:not([hidden]) .logo-result { width:150px !important; max-height:44px !important; }
 .result-screen:not([hidden]) .sankichi-result { width:125px !important; max-height:56px !important; }
 .result-screen:not([hidden]) .result-title-art { max-height:60px !important; }
 .result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { max-height:42px !important; font-size:.72rem !important; }
 .result-screen:not([hidden]) .result-review { max-height:62px !important; }
 .result-screen:not([hidden]) .result-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
 .result-screen:not([hidden]) .result-actions .result-progression-open { grid-column:auto !important; }
}
@media (min-width:600px) and (max-height:430px) {
  .result-screen:not([hidden]) { gap:2px !important; padding-top:3px !important; padding-bottom:3px !important; }
  .result-screen:not([hidden]) .logo-result { max-height:30px !important; width:110px !important; }
  .result-screen:not([hidden]) .sankichi-result { max-height:34px !important; width:86px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height:42px !important; max-height:44px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height:42px !important; }
  .result-screen:not([hidden]) .result-lead { font-size:.64rem !important; }
  .result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { max-height:28px !important; font-size:.6rem !important; }
  .result-screen:not([hidden]) .result-stats { gap:1px 7px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:1.25rem !important; }
}
/* Result readability: restore generous sizing when vertical space permits. */
@media (min-height:600px) {
  .result-screen:not([hidden]) { justify-content:center !important; gap:6px !important; }
  .result-screen:not([hidden]) .logo-result { width:min(32vw,160px) !important; max-height:52px !important; }
  .result-screen:not([hidden]) .sankichi-result { width:min(28vw,120px) !important; max-height:64px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height:58px !important; max-height:72px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height:70px !important; }
  .result-screen:not([hidden]) .result-lead,.result-screen:not([hidden]) .promotion-message { font-size:.86rem !important; line-height:1.15 !important; }
  .result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { max-height:none !important; overflow:visible !important; font-size:.74rem !important; line-height:1.15 !important; }
  .result-screen:not([hidden]) .result-review { max-height:84px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:2.1rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:1rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size:1rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size:.75rem !important; }
}
.result-screen:not([hidden]) .result-actions button { max-width:none !important; justify-content:center !important; text-align:center !important; }

/* Sharing actions stay compact on result screens and fit the existing grid. */
.share-score-button {
  min-height: 44px;
  margin-top: 6px;
  padding: 6px 14px;
  border: 2px solid #f6c44f;
  border-radius: 999px;
  color: #5a225f;
  background: linear-gradient(135deg, #fff5a8, #ffb5d8 55%, #d8b5ff);
  font: inherit;
  font-weight: 900;
  box-shadow: 0 3px 0 #b85f9c;
  cursor: pointer;
}
.share-score-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b85f9c; }
.share-dialog {
  width: min(92vw, 480px);
  max-height: min(88dvh, 620px);
  padding: 0;
  border: 3px solid #f6c44f;
  border-radius: 22px;
  color: #54275d;
  background: #fff8fc;
  box-shadow: 0 18px 70px #5c246c55;
}
.share-dialog::backdrop { background: #351b4a88; }
.share-dialog-card { display: grid; gap: 10px; padding: 20px; }
.share-dialog-card h2, .share-dialog-card p { margin: 0; }
.share-dialog-card h2 { color: #b72d80; font-size: clamp(1.25rem, 5vw, 1.8rem); }
.share-dialog-card textarea {
  width: 100%; min-height: 205px; resize: vertical; box-sizing: border-box;
  padding: 12px; border: 2px solid #e5a6cb; border-radius: 12px;
  color: #45204e; background: #fff; font: 600 1rem/1.55 sans-serif;
}
.share-status { min-height: 1.4em; color: #9c2673; font-weight: 800; }
.share-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.share-dialog-actions button {
  width: 100%; min-width: 0; height: 48px; min-height: 44px; margin: 0;
  padding: 8px 10px; font-size: .95rem; line-height: 1.2; white-space: nowrap;
}

  .share-score-button { width: 100%; font-size: .9rem; }
  .share-dialog-card { padding: 8px 12px; }
  .share-dialog-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
/* Keep the intentionally compact landscape treatment separate from portrait sizing. */
@media (min-width:600px) and (max-height:430px) {
  .result-screen:not([hidden]) { justify-content:flex-start !important; gap:2px !important; }
  .result-screen:not([hidden]) .result-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .result-screen:not([hidden]) .result-actions .result-progression-open { grid-column:auto !important; }
  .result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { max-height:30px !important; overflow:hidden !important; }
}
@media (max-width:599px) and (min-height:600px) {
  .result-screen[data-title-art="complete"]:not([hidden]) { gap:3px !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .logo-result { max-height:30px !important; width:100px !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .sankichi-result { max-height:38px !important; width:86px !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .result-title-wrap { min-height:44px !important; max-height:48px !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .result-title-art { max-height:46px !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .result-lead,.result-screen[data-title-art="complete"]:not([hidden]) .promotion-message { font-size:.68rem !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .growth-summary,.result-screen[data-title-art="complete"]:not([hidden]) .trophy-summary { font-size:.62rem !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .result-stats .score-result-hero strong { font-size:1.7rem !important; }
  .result-screen[data-title-art="complete"]:not([hidden]) .result-review { max-height:48px !important; }
}

/* Score spotlight: the number is the primary feedback while the game is active.
   These rules intentionally come last so the legacy result-grid overrides above
   cannot shrink the score back into a secondary statistic. */
.hype-hud span:last-child {
  position: relative;
  flex: 1.45 1 0;
  min-width: 0;
  padding: 7px 9px 6px;
  border: 2px solid #ffe38b;
  border-radius: 14px;
  background: linear-gradient(145deg, #5b2d78e8, #b33786d9 55%, #f3a72ed9);
  box-shadow: 0 3px 0 #6c2e70, 0 0 17px #ffd45c99, inset 0 0 14px #fff4a633;
  overflow: visible;
}
.hype-hud span:last-child::before {
  content: "✦";
  position: absolute;
  right: 5px;
  top: -10px;
  color: #fff4a4;
  font-size: 1rem;
  text-shadow: 0 0 10px #fff;
  pointer-events: none;
}
.hype-hud #score-value {
  display: block;
  min-width: 0;
  color: #fff5a8;
  font-size: clamp(2.25rem, 8.5vw, 3rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-shadow: 0 3px 0 #6b296c, 0 0 12px #fff0a0, 0 0 24px #ff72bb;
  overflow: visible;
}
.hype-hud span:last-child small { color: #fff8db; font-size: .62rem; font-weight: 900; }
.hype-hud span:not(:last-child) { min-width: 0; flex: 1 1 0; padding-left: 4px; padding-right: 4px; }
.hype-hud span:last-child { flex: 0 0 42%; }
.hype-hud #score-value[data-wide="1"] { font-size: clamp(1.5rem, 6vw, 2.35rem); letter-spacing: -.075em; }
.stage[data-combo="0"] .hype-hud span:last-child { filter: saturate(.8); }
.stage[data-combo="0"] .hype-hud { opacity: 1; }
.stage[data-combo]:not([data-combo="0"]) .hype-hud span:last-child { border-color: #ffe36e; }
.stage[data-combo^="1"] .hype-hud span:last-child,
.stage[data-combo^="2"] .hype-hud span:last-child { background: linear-gradient(145deg, #6b307e, #bd3c89 55%, #f6ad31); }
.stage[data-combo="10"] .hype-hud span:last-child,
.stage[data-combo="20"] .hype-hud span:last-child,
.stage[data-combo="30"] .hype-hud span:last-child { background: linear-gradient(120deg, #5d2c9c, #de3b9b 48%, #ffd348); box-shadow: 0 3px 0 #652d83, 0 0 24px #ffd84dbb, inset 0 0 18px #ffffff55; }
.stage[data-combo="10"] .hype-hud #score-value,
.stage[data-combo="20"] .hype-hud #score-value,
.stage[data-combo="30"] .hype-hud #score-value { color: #fffbd0; }
.stage[data-hype-stage="4"] .hype-hud span:last-child,
.stage[data-hype-stage="5"] .hype-hud span:last-child,
.stage[data-hype-stage="6"] .hype-hud span:last-child { background: linear-gradient(120deg, #4d2c9e, #e93d9d 46%, #ffe05d); box-shadow: 0 4px 0 #5a2b82, 0 0 30px #ffd84dcc, inset 0 0 20px #ffffff66; }
.stage[data-hype-stage="5"] .hype-hud #score-value,
.stage[data-hype-stage="6"] .hype-hud #score-value { color: #fffde1; text-shadow: 0 3px 0 #65215f, 0 0 18px #fff, 0 0 32px #ff6dc9; }
.hype-hud[data-combo="0"] { opacity: 1; }
.hype-hud[data-hype-stage="4"] span:last-child,
.hype-hud[data-hype-stage="5"] span:last-child,
.hype-hud[data-hype-stage="6"] span:last-child { background: linear-gradient(120deg, #4d2c9e, #e93d9d 46%, #ffe05d); box-shadow: 0 4px 0 #5a2b82, 0 0 30px #ffd84dcc, inset 0 0 20px #ffffff66; }
.hype-hud[data-hype-stage="5"] #score-value,
.hype-hud[data-hype-stage="6"] #score-value { color: #fffde1; text-shadow: 0 3px 0 #65215f, 0 0 18px #fff, 0 0 32px #ff6dc9; }
.hype-hud[data-hype-stage="4"] span:last-child { background: linear-gradient(145deg, #632d91, #d34498 55%, #f7bb3d); }
.hype-hud[data-hype-stage="5"] span:last-child { background: linear-gradient(120deg, #4f2a9c, #e93c9c 50%, #ffd45a); }
.hype-hud[data-hype-stage="6"] span:last-child { background: linear-gradient(120deg, #4324a0, #f33b9e 42%, #ffe66a); box-shadow: 0 5px 0 #54277f, 0 0 36px #ffe45ddd, inset 0 0 22px #fff; }

.score-popup {
  top: 34%;
  z-index: 1;
  min-width: 4.5ch;
  padding: .08em .28em .14em;
  border: 3px solid #fff4ae;
  border-radius: 22px;
  background: linear-gradient(135deg, #812c94e8, #e23b91e8 55%, #ffb62de8);
  color: #fffbe0;
  font-size: clamp(2.8rem, 11vw, 5rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-align: center;
  box-shadow: 0 6px 0 #702866, 0 0 30px #ffbe58aa, inset 0 0 16px #fff5a955;
  transition: transform .46s cubic-bezier(.16,1.35,.3,1), opacity .2s ease;
  text-shadow: 0 4px 0 #70256e, 0 0 14px #fff0a0, 0 0 28px #ff62c8;
}
.score-popup.is-live { transform: translate(-50%, -22px) scale(1.06) rotate(-2deg); }
.score-popup.is-static { opacity: 1; transform: translate(-50%, -10px) scale(1); transition: none; }
.score-popup[data-milestone="1"] { font-size: clamp(3.1rem, 13vw, 6rem); background: linear-gradient(120deg, #5e2c9e, #ef3d99 48%, #ffd84d); }
.hype-hud #score-value.is-score-pulse { animation: score-pulse-hero .62s cubic-bezier(.16,1.35,.3,1); }
@keyframes score-pulse-hero {
  0% { transform: scale(.92) rotate(0); }
  42% { transform: scale(1.24) rotate(-2deg); color: #fffbd2; }
  72% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* A result score remains readable for long BigInt labels such as "41京 1782兆". */
.result-screen:not([hidden]) .result-stats .score-result-hero {
  padding: 5px 12px 7px !important;
  border: 2px solid #ffe18c;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff2fbcc, #ffd8edb8 56%, #ffeaa8aa);
  box-shadow: 0 4px 0 #be6caa66, 0 0 22px #ff91c966, inset 0 0 14px #fff;
}
.result-screen:not([hidden]) .result-stats .score-result-hero strong {
  display: block;
  max-width: 100%;
  color: #79236f;
  font-size: clamp(2.9rem, 10vw, 4.5rem) !important;
  line-height: .94;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-shadow: 0 3px 0 #fff, 0 0 16px #ff8cc4;
}

/* Completed results keep the readable score floor used by partial results;
   the title-art selector otherwise wins on compact portrait screens. */
.result-screen[data-title-art="complete"]:not([hidden]) .result-stats .score-result-hero strong {
  font-size: clamp(2.25rem, 8vw, 4.8rem) !important;
}
.result-screen:not([hidden]) .result-stats .score-result-hero small { font-size: .8rem; font-weight: 900; color: #7d3b74; }
.result-screen:not([hidden]) .result-stats .score-result-hero span { font-size: clamp(1rem, 3.4vw, 1.55rem) !important; }

@media (min-width: 700px) {
  .game-screen .hype-hud { width: min(760px, 100%); }
  .game-screen .hype-hud span:not(:last-child) { flex: 0 0 80px; }
  .game-screen .hype-hud span:last-child { flex: 1 1 auto; }
  .hype-hud #score-value { font-size: clamp(3.2rem, 5vw, 4.5rem); }
  .hype-hud #score-value[data-wide="1"] { font-size: clamp(3.2rem, 4vw, 4.5rem); }
  .hype-hud span:last-child { flex-basis: 58%; }
  .hype-hud span:last-child { padding: 9px 14px 8px; }
  .score-popup { font-size: clamp(4rem, 6vw, 6rem); }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: clamp(3.8rem, 5vw, 4.8rem) !important; }
}
@media (min-width: 600px) and (max-height: 430px) {
  .hype-hud #score-value { font-size: clamp(2.3rem, 5.8vw, 3rem); }
  .hype-hud #score-value[data-wide="1"] { font-size: 1.5rem; }
  /* The 667x375 result has a short vertical budget; keep the score prominent
     while leaving room for stats, review pager, and all three CTAs. */
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: clamp(2.45rem, 5.8vw, 2.7rem) !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero { padding: 2px 8px 3px !important; }
}
@media (min-width: 600px) and (max-height: 430px) {
  /* Landscape phones have a short vertical budget. Keep every result block in
     normal flow and reserve the saved height for the readable 44px actions. */
  .result-screen:not([hidden]) { gap: 0 !important; padding: 0 6px !important; }
  .result-screen:not([hidden]) .logo-result { width: 82px !important; max-height: 22px !important; }
  .result-screen:not([hidden]) .sankichi-result { width: 68px !important; max-height: 25px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height: 30px !important; max-height: 32px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height: 31px !important; }
  .result-screen:not([hidden]) .result-lead { font-size: .58rem !important; line-height: 1 !important; }
  .result-screen:not([hidden]) .growth-summary,
  .result-screen:not([hidden]) .trophy-summary { font-size: .58rem !important; line-height: 1 !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero { padding: 1px 7px 2px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size: 2.3rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero small { font-size: .58rem; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size: .78rem !important; }
  .result-screen:not([hidden]) .result-actions { margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .score-popup { transition: none !important; }
  .hype-hud #score-value.is-score-pulse { animation: none !important; }
}
.manual-reduced-motion .score-popups { display: block !important; }
.manual-reduced-motion .score-popup { opacity: 1; transform: translate(-50%, -10px) scale(1) !important; transition: none !important; animation: none !important; }

/* On portrait phones the score is a separate hero row. Keeping it out of the
   three compact telemetry cells prevents long Japanese BigInt labels from
   being squeezed or clipped. */
@media (max-width: 599px) {
  .game-screen .hype-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 4px;
    width: 100%;
    min-height: 92px;
    margin: 0 auto 3px;
  }
  .game-screen .hype-hud span:not(:last-child) {
    grid-row: 2;
    min-width: 0;
    width: auto;
    padding: 3px 3px;
  }
  .game-screen .hype-hud span:last-child {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 6px 10px 7px;
  }
  .game-screen .hype-hud #score-value,
  .game-screen .hype-hud #score-value[data-wide="1"] {
    font-size: clamp(2.25rem, 10vw, 3.1rem) !important;
    letter-spacing: -.045em;
  }
  .game-screen .hype-hud span:last-child small { font-size: .62rem; }
  .game-screen .problem-area { padding-top: 3px; padding-bottom: 3px; }
}
@media (min-width: 600px) and (max-width: 759px) and (max-height: 430px) {
  .game-screen .hype-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 3px;
    min-height: 76px;
    width: 100%;
  }
  .game-screen .hype-hud span:not(:last-child) { grid-row: 2; min-width: 0; padding: 2px 3px; }
  .game-screen .hype-hud span:last-child { grid-column: 1 / -1; grid-row: 1; width: 100%; padding: 4px 8px 5px; }
  .game-screen .hype-hud #score-value,
  .game-screen .hype-hud #score-value[data-wide="1"] { font-size: 2.25rem !important; letter-spacing: -.045em; }
}

/* Four result actions fit the existing compact two-column grid. On wider
   screens they share one row, freeing the score card from CTA height. */
.result-screen:not([hidden]) .result-actions .result-progression-open,
.result-screen:not([hidden]) .result-actions .share-score-button {
  grid-column: auto !important;
}
@media (min-width: 700px) {
  .result-screen:not([hidden]) .result-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 600px) and (max-height: 430px) {
  .result-screen:not([hidden]) .result-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Final result alignment override: keep this contract last in the cascade. */
.result-screen:not([hidden]) > .result-decor { width:100% !important; max-width:none !important; height:100% !important; object-fit:cover !important; object-position:center !important; }
.result-screen:not([hidden]) .result-stats { order:5 !important; }
.result-screen:not([hidden]) .result-review { order:7 !important; }
.result-screen:not([hidden]) .result-review-pager { order:8 !important; }
.result-screen:not([hidden]) .result-actions { order:9 !important; }
@media (min-width:760px) and (min-height:601px) {
  .result-screen:not([hidden]) .logo-result { width:220px !important; max-height:64px !important; }
  .result-screen:not([hidden]) .sankichi-result { width:150px !important; max-height:82px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height:64px !important; max-height:86px !important; }
  .result-screen:not([hidden]) .result-title-art { width:min(52vw,520px) !important; max-height:84px !important; }
  .result-screen:not([hidden]) .result-lead,.result-screen:not([hidden]) .promotion-message { font-size:1rem !important; line-height:1.25 !important; }
  .result-screen:not([hidden]) .growth-summary,.result-screen:not([hidden]) .trophy-summary { max-height:none !important; overflow:visible !important; width:min(100%,900px) !important; font-size:.9rem !important; line-height:1.25 !important; }
  .result-screen:not([hidden]) .result-stats { width:min(100%,980px) !important; gap:8px 28px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:clamp(3.2rem,5vw,5.2rem) !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:1.35rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size:1.35rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size:.9rem !important; }
  .result-screen:not([hidden]) .result-review { width:min(100%,980px) !important; max-height:150px !important; overflow:visible !important; }
  .result-screen:not([hidden]) .result-review li { font-size:.9rem !important; line-height:1.25 !important; }
  .result-screen:not([hidden]) .result-actions { width:min(100%,980px) !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; }
  .result-screen:not([hidden]) .result-actions button { height:52px !important; min-height:44px !important; font-size:1rem !important; }
}
@media (min-width:1200px) and (min-height:900px) {
  .result-screen:not([hidden]) .logo-result { width:280px !important; max-height:78px !important; }
  .result-screen:not([hidden]) .sankichi-result { width:180px !important; max-height:100px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height:82px !important; max-height:104px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height:100px !important; }
}
@media (max-width:759px) and (min-height:600px) {
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:clamp(2.25rem,9vw,3.4rem) !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:1rem !important; }
}

/* Short landscape results use a compact header row so every result block and
   all four actions remain inside the viewport without clipping. */
@media (min-width:521px) and (max-width:759px) and (max-height:520px) {
  .result-screen:not([hidden]) {
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:2px !important;
    padding:3px 8px !important;
    overflow:hidden !important;
  }
  .result-screen:not([hidden]) .logo-result {
    position:absolute !important; left:8px !important; top:4px !important;
    width:100px !important; max-height:28px !important;
  }
  .result-screen:not([hidden]) .sankichi-result {
    position:absolute !important; left:112px !important; top:3px !important;
    width:72px !important; max-height:38px !important;
  }
  .result-screen:not([hidden]) .result-title-wrap {
    position:absolute !important; right:8px !important; top:3px !important;
    width:calc(100% - 196px) !important; min-height:38px !important; max-height:42px !important;
  }
  .result-screen:not([hidden]) .result-title-art { max-height:40px !important; }
  .result-screen:not([hidden]) .result-lead { margin-top:42px !important; font-size:.72rem !important; line-height:1.05 !important; }
  .result-screen:not([hidden]) .growth-summary,
  .result-screen:not([hidden]) .trophy-summary,
  .result-screen:not([hidden]) .promotion-message { max-height:24px !important; overflow:hidden !important; font-size:.62rem !important; line-height:1.05 !important; }
  .result-screen:not([hidden]) .result-stats { width:100% !important; gap:1px 7px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:2.3rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:.78rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size:.9rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size:.58rem !important; }
  .result-screen:not([hidden]) .result-review { max-height:28px !important; overflow:hidden !important; width:100% !important; }
  .result-screen:not([hidden]) .result-review li { padding:2px 6px !important; font-size:.62rem !important; line-height:1 !important; }
  .result-screen:not([hidden]) .result-review-pager { flex-basis:40px !important; min-height:40px !important; }
  .result-screen:not([hidden]) .result-actions { width:100% !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:4px !important; }
  .result-screen:not([hidden]) .result-actions button { height:44px !important; min-height:44px !important; font-size:.72rem !important; padding:1px !important; }
  .result-screen:not([hidden]) .result-actions button .button-art { height:38px !important; }
}

/* Desktop-width windows with short vertical budgets use the same compact
   normal flow as landscape phones; this prevents metric labels or actions
   from painting below the viewport. */
@media (min-width:760px) and (max-height:520px) {
  .result-screen:not([hidden]) { gap:2px !important; padding:3px 10px !important; }
  .result-screen:not([hidden]) .logo-result { width:110px !important; max-height:30px !important; }
  .result-screen:not([hidden]) .sankichi-result { width:86px !important; max-height:38px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height:42px !important; max-height:44px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height:42px !important; }
  .result-screen:not([hidden]) .result-lead,
  .result-screen:not([hidden]) .promotion-message { font-size:.65rem !important; line-height:1 !important; }
  .result-screen:not([hidden]) .growth-summary,
  .result-screen:not([hidden]) .trophy-summary { max-height:24px !important; overflow:hidden !important; font-size:.62rem !important; line-height:1 !important; }
  .result-screen:not([hidden]) .result-stats { gap:1px 7px !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero strong { font-size:2.25rem !important; }
  .result-screen:not([hidden]) .result-stats .score-result-hero span { font-size:.78rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) strong { font-size:.9rem !important; }
  .result-screen:not([hidden]) .result-stats > div:not(.score-result-hero) span { font-size:.58rem !important; }
  .result-screen:not([hidden]) .result-review { max-height:28px !important; overflow:hidden !important; }
  .result-screen:not([hidden]) .result-review li { padding:2px 6px !important; font-size:.62rem !important; line-height:1 !important; }
  .result-screen:not([hidden]) .result-review-pager { flex-basis:40px !important; min-height:40px !important; }
  .result-screen:not([hidden]) .result-actions { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:4px !important; }
  .result-screen:not([hidden]) .result-actions button { height:44px !important; min-height:44px !important; font-size:.72rem !important; padding:1px !important; }
  .result-screen:not([hidden]) .logo-result { position:absolute !important; left:8px !important; top:3px !important; width:110px !important; max-height:30px !important; }
  .result-screen:not([hidden]) .sankichi-result { position:absolute !important; left:122px !important; top:2px !important; width:86px !important; max-height:38px !important; }
  .result-screen:not([hidden]) .result-title-wrap { position:absolute !important; right:8px !important; top:2px !important; width:calc(100% - 220px) !important; min-height:40px !important; max-height:42px !important; }
  .result-screen:not([hidden]) .result-lead { margin-top:42px !important; }
}

/* ImageGen HUD skin: keep live labels/numbers in the DOM while using the
   transparent jewel assets as compact decorative surfaces. */
.game-screen .hype-hud {
  width: min(860px, 100%);
  gap: clamp(4px, .8vw, 10px);
  align-items: stretch;
  min-height: 58px;
  margin: 4px auto 6px;
}
.game-screen .hype-hud > span {
  box-sizing: border-box;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px 7px;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/ui-hud/status-medallion-v1.png") center / 100% 100% no-repeat;
  color: #59336f;
  filter: drop-shadow(0 3px 3px #70427233);
  text-shadow: 0 1px #fff;
}
.game-screen .hype-hud > span:not(:last-child) {
  flex: 1 1 0;
}
.game-screen .hype-hud > span:last-child {
  flex: 0 1 47%;
  min-width: 190px;
  min-height: 68px;
  padding: 10px 18px 8px;
  background-image: url("assets/ui-hud/score-plaque-v1.png");
  filter: drop-shadow(0 4px 4px #70427244);
}
.game-screen .hype-hud b,
.game-screen .hype-hud small {
  color: #59336f;
}
.game-screen .hype-hud b {
  font-size: clamp(.72rem, 1.2vw, 1rem);
  font-weight: 950;
}
.game-screen .hype-hud small {
  font-size: clamp(.56rem, .85vw, .72rem);
  opacity: .9;
}
.game-screen .hype-hud #score-value {
  color: #7b2e93;
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 1000;
  letter-spacing: -.035em;
  text-shadow: 0 2px 0 #fff, 0 0 10px #f58dca88;
}
.game-screen .hype-hud[data-hype-stage="4"] > span:not(:last-child),
.game-screen .hype-hud[data-hype-stage="5"] > span:not(:last-child),
.game-screen .hype-hud[data-hype-stage="6"] > span:not(:last-child) {
  filter: drop-shadow(0 3px 5px #f5a22b66) saturate(1.14);
}
.game-screen .hype-hud[data-hype-stage="5"] #score-value,
.game-screen .hype-hud[data-hype-stage="6"] #score-value {
  color: #c52c8f;
  text-shadow: 0 2px 0 #fff, 0 0 15px #ffd45dcc;
}
.game-screen .toolbar-actions .icon-button,
.start-screen .settings-row .small-button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/ui-hud/control-ribbon-v1.png") center / 100% 100% no-repeat;
  color: #55316e;
  text-shadow: 0 1px #fff;
  filter: drop-shadow(0 2px 2px #70427233);
}
.game-screen .toolbar-actions #motion-toggle,
.start-screen .settings-row #start-motion {
  background-image: url("assets/ui-hud/motion-star-v1.png"), url("assets/ui-hud/control-ribbon-v1.png");
  background-position: right 5px center, center;
  background-size: 28px 28px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.game-screen .toolbar-actions .icon-button:focus-visible,
.start-screen .settings-row .small-button:focus-visible {
  outline: 3px solid #f3ad36;
  outline-offset: 2px;
}
@media (max-width: 680px) {
  .game-screen .hype-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "combo speed fever" "score score score";
    min-height: 108px;
    gap: 2px 4px;
  }
  .game-screen .hype-hud > span:nth-child(1) { grid-area: combo; }
  .game-screen .hype-hud > span:nth-child(2) { grid-area: speed; }
  .game-screen .hype-hud > span:nth-child(3) { grid-area: fever; }
  .game-screen .hype-hud > span:last-child {
    grid-area: score;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 5px 12px 4px;
  }
  .game-screen .hype-hud > span:not(:last-child) { min-height: 48px; padding: 6px 3px 5px; }
  .game-screen .hype-hud #score-value { font-size: clamp(1.55rem, 8vw, 2.25rem); }
  .game-screen .hype-hud b { font-size: clamp(.62rem, 2.5vw, .82rem); }
  .game-screen .hype-hud small { font-size: clamp(.5rem, 1.9vw, .62rem); }
  .game-screen .toolbar-actions .icon-button { min-height: 44px; }
  .start-screen .settings-row { flex-wrap: wrap; }
  .start-screen .settings-row .small-button { flex: 1 1 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .game-screen .hype-hud > span,
  .game-screen .toolbar-actions .icon-button,
  .start-screen .settings-row .small-button { transition: none; }
}
/* Keep live control labels on one line over the decorative ribbon. */
.game-screen .toolbar-actions .icon-button,
.start-screen .settings-row .small-button {
  white-space: nowrap;
  font-size: clamp(.72rem, 1.8vw, .95rem);
  padding-left: 8px;
  padding-right: 8px;
}
/* Tiny portrait start cards retain 44px controls while making the full CTA reachable. */
@media (max-width:380px) and (max-height:700px) and (orientation:portrait) {
  .start-stage .start-content { padding-top:2px; padding-bottom:0; row-gap:1px; }
  .start-stage .logo-start { width:150px; height:48px; }
  .start-stage .tagline .start-tagline-art { width:220px; max-height:34px; }
  .start-stage .sankichi-start { height:34px; }
  .start-stage .intro { margin:0 0 1px; }
  .start-stage .settings-row { margin:0; }
  .start-stage .mode-picker { margin:0 auto; }
  .start-stage .difficulty-picker { gap:1px; }
  .start-stage .difficulty-help { display:none; }
  .start-stage .difficulty-count { margin:0; font-size:.58rem; line-height:1; }
  /* Keep the two always-present daily values on one readable line.  A
     progression notice may take a second line, but must never clip or push
     the primary CTA outside the browser-visible viewport. */
  .start-stage #daily-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    row-gap: 1px;
    min-height: 22px;
    max-height: none;
    overflow: visible;
    font-size: clamp(.65rem, 2.1vw, .8rem);
    line-height: 1.15;
  }
  .start-stage #daily-summary > strong,
  .start-stage #daily-summary > small:not(.progression-notice) {
    flex: 0 1 auto;
    white-space: nowrap;
  }
  .start-stage #daily-summary > .progression-notice {
    flex: 0 1 100%;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .start-stage #progression-open { margin-top:0; }
  .start-stage #start-button { height:44px; min-height:44px; }
}
/* Motion preference and manual switch share the same static readable surface. */
.manual-reduced-motion .game-screen .hype-hud > span,
.manual-reduced-motion .game-screen .toolbar-actions .icon-button,
.manual-reduced-motion .start-screen .settings-row .small-button { transition: none; }
.game-screen .toolbar-actions #motion-toggle,
.start-screen .settings-row #start-motion { padding-right: 30px; }
.start-screen .settings-row .small-button {
  box-sizing: border-box;
  background-size: 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  text-align: center;
}
.start-screen .settings-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(3px, 1vw, 8px); }
.start-screen .settings-row .small-button { width: 100%; min-width: 0; flex: none; padding-inline: 4px; }
.start-screen .settings-row #start-motion { padding-right: 4px; }
.result-screen .result-actions .has-generated-art .button-art { width: 100%; max-width: 100%; object-fit: contain; }
.result-screen .result-actions .has-generated-art { overflow: hidden; }
.result-celebration {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.result-celebration span {
  position: absolute;
  left: var(--result-x);
  top: -8%;
  color: #f44a9c;
  font-size: clamp(1rem, 3vw, 2.2rem);
  line-height: 1;
  text-shadow: 0 2px 0 #fff7d6, 0 0 12px #ffb4e6;
  opacity: .9;
  animation: result-heart-fall var(--result-duration, 4.8s) cubic-bezier(.2,.7,.3,1) var(--result-delay) infinite;
}
.result-celebration .result-spark { color: #ffd451; animation-name: result-sparkle-fall; }
.result-celebration[data-tier="high"] span { color: #b34ce4; }
.result-celebration[data-tier="perfect"] span { color: #ff3f9e; font-size: clamp(1.1rem, 3.5vw, 2.8rem); }
.result-celebration[data-tier="perfect"] .result-spark { color: #fff0a8; font-size: clamp(1.2rem, 4vw, 3rem); }
.result-burst { position: absolute; left: var(--burst-x); top: var(--burst-y); width: var(--burst-size, 4rem); aspect-ratio: 1; border: 3px solid rgba(255, 215, 92, .8); border-radius: 50%; box-shadow: 0 0 18px rgba(255, 141, 221, .75), inset 0 0 12px rgba(255, 249, 210, .75); transform: translate(-50%, -50%) scale(.18); animation: result-burst var(--burst-duration, 2.2s) ease-out var(--burst-delay) infinite; }
@keyframes result-heart-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(var(--result-rotate)) scale(.55); opacity: 0; }
  14% { opacity: 1; }
  60% { transform: translate3d(var(--result-drift), 58vh, 0) rotate(calc(var(--result-rotate) + 90deg)) scale(var(--result-scale)); }
  100% { transform: translate3d(calc(var(--result-drift) * -1), 112vh, 0) rotate(calc(var(--result-rotate) + 180deg)) scale(.8); opacity: 0; }
}
@keyframes result-sparkle-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0) scale(.2); opacity: 0; }
  18% { opacity: 1; }
  55% { transform: translate3d(var(--result-drift), 48vh, 0) rotate(180deg) scale(1.25); }
  100% { transform: translate3d(calc(var(--result-drift) * -1), 108vh, 0) rotate(360deg) scale(.4); opacity: 0; }
}
@keyframes result-burst {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  22% { opacity: .88; transform: translate(-50%, -50%) scale(1); }
  68% { opacity: .2; transform: translate(-50%, -50%) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .result-celebration span, .result-burst { animation: none; top: auto; bottom: 8%; opacity: .72; transform: none; }
}
.manual-reduced-motion .result-celebration span, .manual-reduced-motion .result-burst {
  animation: none;
  top: auto;
  bottom: 8%;
  opacity: .72;
}
.result-screen:not([hidden]) > .result-celebration { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; }
.result-screen:not([hidden]) > :not(.result-celebration) { position: relative; z-index: 2; }
.round-finale-fx { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; contain: layout paint; }
.round-finale-fx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 235, 181, .72), rgba(237, 128, 226, .24) 38%, rgba(91, 42, 131, .42) 100%); animation: finale-spotlight 2.5s ease-out both; }
.round-finale-fx span { position: absolute; left: 50%; top: 50%; color: #ffe36d; font-size: clamp(1.2rem, 4vw, 3rem); text-shadow: 0 0 14px #ff83cf, 0 2px 0 #fff8dc; animation: finale-burst-out var(--burst-duration, 1.9s) cubic-bezier(.16,.72,.22,1) var(--burst-delay) both; }
.round-finale-fx-high span { color: #c969ff; font-size: clamp(1.4rem, 5vw, 3.7rem); }
.round-finale-fx-perfect span { color: #ff4eae; font-size: clamp(1.6rem, 6vw, 4.5rem); }
@keyframes finale-burst-out { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--burst-angle)) translateY(0) scale(.15); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--burst-angle)) translateY(calc(-1 * var(--burst-distance))) scale(1); } }
.finale-wave { position: absolute; left: 50%; top: 50%; width: min(72vw, 70vh); aspect-ratio: 1; border: clamp(2px, .45vw, 7px) solid rgba(255, 215, 93, .74); border-radius: 50%; box-shadow: 0 0 34px rgba(255, 126, 205, .55); animation: finale-wave-out 1.7s ease-out var(--wave-delay) both; }
.round-finale-fx-title { position: absolute; left: 50%; top: 50%; max-width: 90vw; color: #fff5b0; font-size: clamp(2.2rem, 8vw, 7rem); line-height: 1; text-align: center; white-space: nowrap; text-shadow: 0 4px 0 #8b3c9e, 0 0 24px #ff6cc8; transform: translate(-50%, -50%) scale(.55); animation: finale-title-pop 2.2s cubic-bezier(.18,.8,.22,1) both; }
.round-finale-fx-subtitle { position: absolute; left: 50%; top: calc(50% + clamp(2rem, 8vw, 5rem)); color: #fff9dd; font-size: clamp(.9rem, 2.2vw, 1.6rem); font-weight: 800; text-shadow: 0 2px 0 #7c3a91; transform: translateX(-50%); animation: finale-subtitle-in 2.5s ease-out both; }
.round-finale-fx-mascot { position: absolute; top: 62%; width: clamp(68px, 14vw, 180px); height: auto; filter: drop-shadow(0 5px 8px rgba(66, 24, 91, .35)); animation: finale-mascot-in 1.1s cubic-bezier(.18,.8,.22,1) both; }
.round-finale-fx-mascot.left { left: 4vw; transform: translate(-120%, -50%) rotate(-12deg); }
.round-finale-fx-mascot.right { right: 4vw; transform: translate(120%, -50%) scaleX(-1) rotate(-12deg); animation-delay: .12s; }
@keyframes finale-wave-out { from { opacity: .9; transform: translate(-50%, -50%) scale(.12); } to { opacity: 0; transform: translate(-50%, -50%) scale(var(--wave-scale, 1.25)); } }
@keyframes finale-title-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 72% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes finale-spotlight { 0% { opacity: 0; } 14% { opacity: 1; } 72% { opacity: .78; } 100% { opacity: 0; } }
@keyframes finale-subtitle-in { 0%, 18% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes finale-mascot-in { 0% { opacity: 0; } 18% { opacity: 1; transform: translate(0, -50%) rotate(-3deg) scale(1); } 70% { opacity: 1; transform: translate(0, -50%) rotate(3deg) scale(1.04); } 100% { opacity: 0; transform: translate(0, 42%) rotate(8deg) scale(.86); } }
.round-finale-fx-mascot.left { transform: translate(-120%, -50%) rotate(-12deg); }
.round-finale-fx-mascot.right { transform: translate(120%, -50%) scaleX(-1) rotate(-12deg); }
.round-finale-static { position: fixed; left: 50%; top: 50%; z-index: 100; transform: translate(-50%, -50%); color: #fff5b0; font-size: clamp(1.5rem, 5vw, 4rem); font-weight: 900; text-shadow: 0 3px 0 #8b3c9e, 0 0 18px #ff6cc8; pointer-events: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .round-finale-fx { display: none; } }
.manual-reduced-motion .round-finale-fx { display: none; }
.result-celebration[data-motion="off"] span:nth-of-type(n + 5), .result-celebration[data-motion="off"] .result-burst { display: none; }
.result-celebration[data-motion="off"] span { animation: none; top: auto; bottom: 7%; opacity: .72; }
.result-celebration[data-paused="1"], .round-finale-fx[data-paused="1"] { visibility: hidden; }
.result-celebration[data-paused="1"] *, .round-finale-fx[data-paused="1"] * { animation-play-state: paused !important; }
.game-screen .game-difficulty,
.game-screen .round-progress,
.game-screen .course-progress { white-space: nowrap; }
/* Final HUD asset alignment: live text stays inside the quiet center of each image. */
.game-screen .hype-hud > span,
.game-screen .hype-hud > span:last-child,
.game-screen .hype-hud[data-hype-stage="4"] > span,
.game-screen .hype-hud[data-hype-stage="5"] > span,
.game-screen .hype-hud[data-hype-stage="6"] > span {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("assets/ui-hud/status-medallion-v1.png") !important;
}
.game-screen .hype-hud > span:last-child {
  flex: 0 1 320px;
  width: min(320px, 42%);
  min-width: 230px;
  min-height: 88px;
  height: 88px;
  padding: 12px 22px 10px;
  background-image: url("assets/ui-hud/score-plaque-v1.png") !important;
}
.game-screen .hype-hud > span::before,
.game-screen .hype-hud > span::after,
.game-screen .hype-hud > span:last-child::before,
.game-screen .hype-hud > span:last-child::after { display: none !important; content: none !important; }
.game-screen .hype-hud > span b,
.game-screen .hype-hud > span small,
.game-screen .hype-hud > span:last-child b,
.game-screen .hype-hud > span:last-child small {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  color: #59336f !important;
  opacity: 1;
  line-height: 1.1;
  white-space: nowrap;
}
.game-screen .hype-hud > span b { font-size: clamp(.7rem, 1.25vw, 1rem) !important; }
.game-screen .hype-hud > span small { font-size: clamp(.58rem, .9vw, .72rem) !important; }
.game-screen .hype-hud > span:last-child #score-value {
  font-size: clamp(2rem, 3.6vw, 3.25rem) !important;
  line-height: .95;
  color: #7b2e93 !important;
  text-shadow: 0 2px 0 #fff, 0 0 10px #f58dca88;
}
.game-screen .game-toolbar { flex-wrap: wrap; align-items: center; }
.game-screen .game-toolbar .question-count { white-space: nowrap; flex: 0 0 auto; }
.game-screen .game-toolbar .game-difficulty,
.game-screen .game-toolbar .round-progress,
.game-screen .game-toolbar .course-progress { flex: 0 0 auto; white-space: nowrap; }
.game-screen .game-toolbar .toolbar-actions { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; }
.game-screen .game-toolbar .toolbar-actions .icon-button { padding-left: 12px; padding-right: 12px; }
.game-screen .game-toolbar .toolbar-actions #motion-toggle { text-indent: -9999px; font-size: 0; color: transparent; padding: 0; width: 52px; }
.start-screen .settings-row { width: 100%; flex-wrap: nowrap; gap: 6px; }
.start-screen .settings-row .small-button { flex: 1 1 0; min-width: 0; min-height: 52px; height: 54px; font-size: clamp(.76rem, 1.5vw, .9rem); padding-left: 8px; padding-right: 8px; }
.start-screen .settings-row #start-motion { text-indent: 0; font-size: clamp(.76rem, 1.5vw, .9rem); color: #55316e; padding-right: 4px; }
@media (max-width: 680px) {
  .game-screen .hype-hud { min-height: 132px; }
  .game-screen .hype-hud > span:not(:last-child) { min-height: 54px; height: 54px; }
  .game-screen .hype-hud > span:last-child { width: 100%; min-width: 0; height: 72px; min-height: 72px; padding: 8px 16px; }
  .game-screen .hype-hud > span:last-child #score-value { font-size: clamp(2rem, 9vw, 2.75rem) !important; }
  .game-screen .game-toolbar { gap: 4px 7px; }
  .game-screen .game-toolbar .toolbar-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  .game-screen .game-toolbar .toolbar-actions .icon-button { min-width: 44px; padding-left: 9px; padding-right: 9px; }
  .game-screen .game-toolbar .toolbar-actions #motion-toggle { width: 48px; }
  .start-screen .settings-row .small-button { min-height: 52px; height: 54px; font-size: .78rem; }
}
@media (max-width: 380px) {
  .start-screen .settings-row { gap: 3px; }
  .start-screen .settings-row .small-button { font-size: .72rem; padding-left: 4px; padding-right: 4px; }
}
/* Asset-aware final geometry corrections. */
.game-screen .hype-hud > span:last-child {
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 14px;
}
.game-screen .hype-hud > span:last-child #score-value {
  font-size: clamp(2.25rem, 3.2vw, 3rem) !important;
  line-height: .9;
  transform: translateY(-2px);
}
.game-screen .hype-hud > span:last-child small {
  font-size: 10px !important;
  line-height: 1;
  transform: translateY(-1px);
}
.game-screen .hype-hud > span:last-child #score-value[data-wide="1"] {
  font-size: clamp(1.65rem, 2.7vw, 2.25rem) !important;
  letter-spacing: -.04em;
}
.game-screen .game-toolbar .toolbar-actions #motion-toggle {
  background-image: url("assets/ui-hud/motion-star-v1.png") !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 48px;
  min-width: 44px;
}
@media (max-width: 680px) {
  .game-screen .game-toolbar .toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px minmax(92px, 1.3fr);
    gap: 4px;
    width: 100%;
  }
  .game-screen .game-toolbar .toolbar-actions .icon-button { width: 100%; min-width: 0; padding: 0 5px; font-size: .72rem; }
  .game-screen .game-toolbar .toolbar-actions #motion-toggle { width: 48px; padding: 0; }
  .game-screen .game-toolbar .toolbar-actions #finish-button { min-width: 92px; font-size: .68rem; padding: 0 2px; }
  .game-screen .hype-hud > span:last-child { min-height: 72px; height: 72px; padding-top: 3px; padding-bottom: 12px; }
  .game-screen .hype-hud > span:last-child #score-value { font-size: 2rem !important; }
  .game-screen .hype-hud > span:last-child #score-value[data-wide="1"] { font-size: 1.6rem !important; }
}
@media (max-width: 520px) and (min-height: 700px) {
  .start-screen #start-button { height: 56px !important; min-height: 44px !important; }
  .start-screen #start-button .button-art { height: 50px !important; }
}
@media (max-width: 380px) {
  .game-screen .game-toolbar .toolbar-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px minmax(88px, 1.2fr); }
  .game-screen .game-toolbar .toolbar-actions .icon-button { font-size: .68rem; }
  .game-screen .game-toolbar .toolbar-actions #finish-button { min-width: 88px; font-size: .64rem; }
}
/* Landscape phones have enough width for one compact HUD row. */
@media (min-width:600px) and (max-height:520px) and (orientation:landscape) {
  .game-screen .hype-hud {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 82px;
    height: 82px;
    gap: 4px;
    align-items: center;
  }
  .game-screen .hype-hud > span:not(:last-child) {
    flex: 0 1 108px;
    width: 108px;
    min-width: 92px;
    min-height: 54px;
    height: 54px;
  }
  .game-screen .hype-hud > span:last-child {
    flex: 0 1 250px;
    width: 250px;
    min-width: 210px;
    height: 80px;
    min-height: 80px;
    padding: 4px 14px 12px;
  }
  .game-screen .hype-hud > span:last-child #score-value { font-size: 2.25rem !important; }
  .game-screen .hype-hud > span:last-child #score-value[data-wide="1"] { font-size: 1.7rem !important; }
}

/* Keep the score numeral in the plaque milk center; place its label in the
   transparent lower margin so long values never reach the crest. */
.game-screen .hype-hud > span:last-child {
  position: relative;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}
.game-screen .hype-hud > span:last-child #score-value {
  transform: none;
  line-height: 1;
  font-size: clamp(2.25rem, 3.2vw, 3rem) !important;
}
.game-screen .hype-hud > span:last-child small {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 13px);
  font-size: 10px !important;
  line-height: 1;
  transform: none;
}
.game-screen .hype-hud > span:last-child #score-value[data-wide="1"] {
  font-size: clamp(1.65rem, 2.7vw, 2.25rem) !important;
}
@media (max-width: 680px) {
  .game-screen .hype-hud > span:last-child #score-value { font-size: 2rem !important; }
  .game-screen .hype-hud > span:last-child #score-value[data-wide="1"] { font-size: 1.6rem !important; }
}
@media (min-width: 600px) and (max-height: 520px) and (orientation: landscape) {
  .game-screen .hype-hud > span:last-child { padding-top: 0; padding-bottom: 0; }
}

/* Mobile start layout: use the smallest browser-visible viewport so every
   selector and the primary CTA remain reachable with the address bar open. */
@media (max-width: 520px) and (orientation: portrait) {
  .start-screen {
    height: 100svh;
    min-height: 100svh;
    padding: 4px 8px;
    overflow: hidden;
  }

  .start-stage {
    height: 100%;
    min-height: 0;
    border-radius: 20px;
  }

  .start-stage .start-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows:
      minmax(0, clamp(48px, 10svh, 84px))
      minmax(0, clamp(30px, 5.5svh, 48px))
      minmax(0, clamp(62px, 16svh, 130px))
      44px
      44px
      minmax(155px, 28svh)
      auto
      44px
      48px;
    align-content: stretch;
    gap: 2px;
    padding: 4px 10px;
  }

  .start-stage .logo-start {
    width: min(52vw, 220px);
    height: 100%;
    min-height: 0;
    justify-self: center;
  }

  .start-stage .tagline {
    min-height: 0;
    margin: 0;
  }

  .start-stage .tagline.has-generated-art .start-tagline-art {
    width: min(72vw, 300px);
    max-height: 100%;
  }

  .start-stage .sankichi-start {
    width: min(42vw, 150px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
  }

  .start-stage .settings-row,
  .start-stage .mode-picker,
  .start-stage .difficulty-picker,
  .start-stage #progression-open,
  .start-stage #start-button {
    margin: 0;
  }

  .start-stage .settings-row {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .start-stage .settings-row .small-button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 4px 3px;
    font-size: clamp(.75rem, 2.4vw, .8rem);
    white-space: nowrap;
  }

  .start-stage .mode-picker {
    gap: 3px;
  }

  .start-stage .mode-button {
    min-height: 44px;
    padding: 3px 2px;
    font-size: clamp(.75rem, 2.35vw, .8rem);
    white-space: nowrap;
  }

  .start-stage .difficulty-picker {
    min-height: 0;
    align-self: stretch;
  }

  .start-stage .difficulty-picker .picker-label {
    margin: 0 0 1px;
    font-size: clamp(.66rem, 2.2vw, .78rem);
    line-height: 1;
  }

  .start-stage .difficulty-picker .difficulty-grid {
    gap: 3px;
  }

  .start-stage .difficulty-picker .difficulty-button {
    min-height: 44px;
    padding: 3px 2px;
    font-size: clamp(.75rem, 2.15vw, .8rem);
    line-height: 1.05;
  }

  .start-stage .difficulty-help {
    display: none;
  }

  .start-stage .difficulty-count,
  .start-stage .progression-summary {
    margin: 0;
    font-size: clamp(.6rem, 1.9vw, .72rem);
    line-height: 1.05;
  }

  .start-stage #progression-open {
    min-height: 44px;
    height: 44px;
    padding: 5px 10px;
  }

  .start-stage #start-button,
  .start-stage #start-button.has-generated-art {
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(100%, 220px);
    min-height: 48px;
    height: 48px;
    padding: 0;
  }

  .start-stage #start-button .button-art {
    width: 100%;
    height: 46px;
    object-fit: contain;
    object-position: center;
  }
}

/* Dense portrait results still keep every review line and 44px action
   reachable when the browser-visible height is below 600px. */
@media (max-width: 599px) and (max-height: 599px) and (orientation: portrait) {
  .result-screen:not([hidden]) {
    gap: 1px !important;
    padding: 2px 6px !important;
  }
  .result-screen:not([hidden]) .logo-result { width: 92px !important; max-height: 26px !important; }
  .result-screen:not([hidden]) .sankichi-result { width: 76px !important; max-height: 32px !important; }
  .result-screen:not([hidden]) .result-title-wrap { min-height: 36px !important; max-height: 40px !important; }
  .result-screen:not([hidden]) .result-title-art { max-height: 38px !important; }
  .result-screen:not([hidden]) .result-lead,
  .result-screen:not([hidden]) .promotion-message { font-size: .62rem !important; line-height: 1.05 !important; }
  .result-screen:not([hidden]) .growth-summary,
  .result-screen:not([hidden]) .trophy-summary {
    max-height: none !important;
    overflow: visible !important;
    font-size: .6rem !important;
    line-height: 1.05 !important;
  }
  .result-screen:not([hidden]) .result-review {
    max-height: 46px !important;
    overflow: visible !important;
  }
  .result-screen:not([hidden]) .result-review li {
    padding: 1px 5px !important;
    font-size: .6rem !important;
    line-height: 1 !important;
  }
  .result-screen:not([hidden]) .result-review-pager { min-height: 44px !important; flex-basis: 44px !important; }
  .result-screen:not([hidden]) .result-actions { gap: 2px !important; }
}

/* Start controls share one centered axis and leave room for generated art. */
.start-stage .mode-picker,
.start-stage .difficulty-picker {
  width: min(100%, 430px) !important;
  justify-self: center;
  margin-inline: auto !important;
}
.start-stage .mode-picker {
  height: 48px;
  min-height: 48px;
  margin: 0 !important;
  align-self: start;
}
.start-stage .difficulty-picker { margin: 0 !important; }
.start-stage .difficulty-picker .picker-label {
  text-align: center;
  margin: 6px 0 !important;
}
.start-stage .mode-button,
.start-stage .difficulty-button,
.start-stage .progression-open {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.start-stage .mode-button .button-label,
.start-stage .difficulty-button .button-label { display: block; width: 100%; }
.start-stage .mode-button.has-generated-art,
.start-stage .difficulty-button.has-generated-art,
.start-stage .progression-open.has-generated-art {
  height: 48px;
  min-height: 44px;
  padding: 0 1px;
  overflow: hidden;
}
.start-stage .mode-button.has-generated-art .button-art,
.start-stage .difficulty-button.has-generated-art .button-art,
.start-stage .progression-open.has-generated-art .button-art {
  width: 100%;
  height: 48px;
  max-height: 48px;
  object-fit: contain;
  transform: none;
}
.difficulty-label { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.difficulty-label-art { display: none; width: min(110px, 30vw); height: 24px; object-fit: contain; pointer-events: none; }
.difficulty-label.has-generated-art .difficulty-label-art { display: block; }
.difficulty-label.has-generated-art .static-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mode-button.has-generated-art,
.difficulty-button.has-generated-art {
  filter: saturate(.84) brightness(.96);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.mode-button.has-generated-art.is-selected,
.difficulty-button.has-generated-art.is-selected {
  filter: saturate(1.08) brightness(1.06);
  outline: none !important;
  box-shadow: none !important;
  position: relative;
}
.mode-button.has-generated-art.is-selected .button-art,
.difficulty-button.has-generated-art.is-selected .button-art {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #e56b9bcc);
}
.mode-button.has-generated-art.is-selected::after,
.difficulty-button.has-generated-art.is-selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 2;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d84d7c;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.mode-button.has-generated-art:focus-visible,
.difficulty-button.has-generated-art:focus-visible {
  outline: 2px solid #6c3d9a !important;
  outline-offset: 2px;
}
.mode-button.has-generated-art .button-art,
.difficulty-button.has-generated-art .button-art { width: 100%; height: 100%; object-fit: contain; transform: none; }
.idle-hype-message:empty,
.idle-hype-message[hidden] { display: none !important; }

/* Difficulty roadmap: one continuous six-level rail with an independent auto row. */
.start-stage .difficulty-picker {
  position: relative;
  width: min(100%, 760px) !important;
  max-width: 760px;
  margin-inline: auto !important;
}
.start-stage .difficulty-picker::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 21px;
  left: 0;
  right: 0;
  height: 26px;
  background: center / 100% 100% no-repeat url("assets/brand/difficulty-roadmap/rail.png");
  opacity: .82;
  pointer-events: none;
}
.difficulty-roadmap {
  display: none;
}
.start-stage .difficulty-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  grid-template-rows: 72px 52px;
  gap: 6px 4px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-items: center;
}
.start-stage .difficulty-grid .difficulty-button {
  position: relative;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 68px;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
.start-stage .difficulty-grid .difficulty-button[data-difficulty="auto"] {
  grid-column: 1 / -1;
  width: min(100%, 210px);
  justify-self: center;
  height: 48px;
  margin-top: 2px;
}
.roadmap-node-art {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background: center / 100% 100% no-repeat url("assets/brand/difficulty-roadmap/node-open.png");
  opacity: 1;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.difficulty-button.is-selected .roadmap-node-art {
  background-image: url("assets/brand/difficulty-roadmap/node-selected.png");
  opacity: 1;
  filter: drop-shadow(0 0 5px #f08bb9aa);
  transform: translateX(-50%) scale(1.04);
}
.difficulty-button.is-locked .roadmap-node-art {
  background-image: url("assets/brand/difficulty-roadmap/node-locked.png");
  opacity: 1;
  filter: grayscale(.15);
}
.difficulty-button[data-difficulty="auto"] .roadmap-node-art {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 16px;
  background: center / contain no-repeat url("assets/brand/difficulty-roadmap/auto-frame.png");
  opacity: .9;
}
.difficulty-button[data-difficulty="auto"].is-selected .roadmap-node-art {
  filter: drop-shadow(0 0 5px #f08bb9cc);
  opacity: 1;
}
.difficulty-button[data-difficulty="auto"].is-selected::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 3;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #d84d7c;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}
.difficulty-lock-message {
  min-height: 18px;
  margin: 4px auto 0;
  color: #5a347b;
  font-size: .75rem;
  line-height: 1.2;
  text-align: center;
}
.start-stage .difficulty-grid .difficulty-button[aria-disabled="true"] {
  cursor: not-allowed;
}
.start-stage .difficulty-grid .difficulty-button[aria-disabled="true"] .roadmap-node-art { opacity: 1; }
.start-stage .difficulty-grid .difficulty-button:focus-visible {
  outline: 3px solid #6c3d9a !important;
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .start-stage .difficulty-picker { width: min(100%, 390px) !important; }
  .difficulty-roadmap { height: 24px; margin-bottom: -17px; }
  .start-stage .difficulty-picker::before { top: 52px; height: 22px; }
  .start-stage .difficulty-grid { grid-template-rows: 48px 48px; gap: 4px 2px !important; }
  .start-stage .difficulty-grid .difficulty-button { height: 46px; }
  .start-stage .difficulty-grid .difficulty-button[data-difficulty="auto"] { height: 44px; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .start-stage .mode-button.has-generated-art,
  .start-stage .difficulty-button.has-generated-art,
  .start-stage .progression-open.has-generated-art {
    height: 44px;
  }
  .start-stage .mode-button.has-generated-art .button-art,
  .start-stage .difficulty-button.has-generated-art .button-art,
  .start-stage .progression-open.has-generated-art .button-art {
    height: 44px;
    max-height: 44px;
  }
}

/* Final roadmap ownership: labels stay below the node artwork and auto stays inside its frame. */
.start-stage .difficulty-grid .difficulty-button .button-label {
  position: absolute !important;
  inset: auto 0 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  z-index: 3;
  color: #4b286d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 2px #fff, 0 0 3px #fff;
}
.start-stage .difficulty-grid .difficulty-button[data-difficulty="auto"] .button-label {
  inset: 0 !important;
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: #4b286d;
  font-size: 14px;
}
.start-stage .difficulty-grid .difficulty-button.is-selected .button-label {
  color: #9b245d;
}
.start-stage .difficulty-grid .difficulty-button[aria-disabled="true"] .roadmap-node-art {
  opacity: 1;
}
@media (max-width: 520px) {
  .start-stage .difficulty-grid { grid-template-rows: 66px 48px; }
  .start-stage .difficulty-grid .difficulty-button { height: 64px; }
  .roadmap-node-art { width: 56px; height: 56px; }
  .start-stage .difficulty-grid .difficulty-button .button-label { font-size: 13px; }
  .start-stage .difficulty-picker::before { top: 22px; height: 20px; }
}
@media (min-width: 521px) and (min-height: 521px) and (max-height: 800px) {
  .start-stage .start-content {
    grid-template-rows: 72px 54px 92px 42px 52px minmax(0, 1fr) 44px 48px;
  }
}
@media (max-width: 520px) and (orientation: portrait) {
  .start-stage .start-content {
    grid-template-rows:
      minmax(0, clamp(48px, 10svh, 84px))
      minmax(0, clamp(30px, 5.5svh, 48px))
      minmax(0, clamp(62px, 16svh, 130px))
      44px
      52px
      minmax(168px, 30svh)
      auto
      44px
      48px;
  }
}

/* Desktop game presentation: use the surrounding viewport as a decorated stage
   while keeping the question card readable and the main mascot visible. */
@media (min-width: 900px) {
  .game-screen {
    position: relative;
    isolation: isolate;
    background: #f7eaed url("assets/backgrounds/game-celebration-wide.webp") center / cover fixed;
  }
  .game-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 28%, #fff8 0 9%, transparent 25%),
      radial-gradient(circle at 88% 68%, #f5c8e688 0 10%, transparent 28%);
  }
  .game-screen .stage {
    width: min(640px, 52vw);
    overflow: visible;
  }
  .game-screen .stage-background,
  .game-screen .stage-decor,
  .game-screen .finale-burst {
    border-radius: 28px;
  }
  .game-screen .character-region {
    position: static;
  }
  .game-screen .mascot-box {
    position: absolute;
    z-index: 8;
    left: clamp(-460px, -26vw, -245px);
    top: clamp(72px, 10vh, 110px);
    bottom: auto;
    width: clamp(190px, 18vw, 330px);
    height: clamp(190px, 18vw, 330px);
    flex: 0 0 auto;
    pointer-events: none;
  }
}

/* Keep the main mascot visible without crossing the answer hit areas at
   compact desktop widths or short phone viewports. */
@media (min-width: 900px) and (max-width: 1050px) {
  .game-screen .mascot-box {
    top: 20px;
    width: 150px;
    height: 150px;
  }
  .game-screen .choice-grid {
    width: min(620px, 52vw);
  }
}
@media (max-width: 899px) {
  .game-screen .character-region {
    position: static;
  }
  .game-screen .mascot-box {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: auto;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    pointer-events: none;
  }
}