:root {
  color-scheme: light;
  --navy-950: #10233d;
  --navy-900: #172e4f;
  --navy-800: #213b5e;
  --navy-700: #2c496e;
  --cream-50: #fffaf0;
  --cream-100: #f9efd9;
  --cream-200: #eedcbc;
  --honey-300: #f3be70;
  --honey-500: #d88d3e;
  --ink: #17304f;
  --muted: #69768a;
  --shadow: 0 18px 48px rgba(34, 39, 53, 0.18);
  --soft-shadow: 0 10px 24px rgba(38, 49, 63, 0.13);
  font-family: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 18%, rgba(147, 209, 196, 0.55), transparent 28rem),
    radial-gradient(circle at 88% 78%, rgba(242, 190, 112, 0.5), transparent 30rem),
    #f4ead7;
  color: var(--ink);
  overscroll-behavior: none;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

button:focus-visible,
.board-cell:focus-visible {
  outline: 4px solid #4faed8;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.app-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.screen {
  position: relative;
  display: none;
  min-height: 100svh;
  overflow: hidden auto;
}

.screen.is-active {
  display: flex;
}

.eyebrow,
.chapter-label {
  margin: 0;
  color: var(--honey-500);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

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

h1,
h2,
h3,
button,
.brand-lockup,
.level-pill,
.score-pill {
  font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

.primary-button,
.secondary-button {
  min-height: 54px;
  padding: 0.85rem 1.45rem;
  border-radius: 18px;
  font-weight: 800;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.primary-button {
  color: white;
  background: linear-gradient(145deg, #efaa57, #d77a36);
  box-shadow: 0 8px 0 #a95829, 0 15px 24px rgba(165, 87, 40, 0.26);
}

.secondary-button {
  color: var(--navy-900);
  background: rgba(255, 250, 240, 0.85);
  box-shadow: inset 0 0 0 2px rgba(28, 54, 86, 0.09), var(--soft-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover,
  .secondary-button:hover,
  .icon-button:hover,
  .back-button:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
  }
}

.primary-button:active,
.secondary-button:active {
  filter: brightness(0.97);
  transform: translateY(1px);
}

/* Splash */

.screen--splash {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  text-align: center;
  color: var(--cream-50);
  background:
    linear-gradient(rgba(17, 39, 68, 0.78), rgba(17, 39, 68, 0.93)),
    url("public/cozy-bg.webp") center 38% / cover;
}

.screen--splash::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 245, 209, 0.8) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.13;
}

.splash-glow {
  position: absolute;
  width: min(80vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 192, 111, 0.26), transparent 67%);
}

.universe-mark,
.screen--splash > *:not(.splash-glow) {
  position: relative;
  z-index: 1;
}

.universe-mark {
  display: grid;
  width: 78px;
  height: 78px;
  margin-bottom: 1rem;
  place-items: center;
}

.universe-orbit {
  position: absolute;
  inset: 5px;
  border: 3px solid rgba(255, 245, 218, 0.5);
  border-top-color: var(--honey-300);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(0.62);
}

.universe-paw {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  color: var(--navy-900);
  background: var(--honey-300);
  box-shadow: 0 6px 18px rgba(243, 190, 112, 0.24);
  place-items: center;
}

.screen--splash .eyebrow {
  color: #f8d39b;
  font-size: clamp(0.74rem, 2vw, 0.92rem);
  letter-spacing: 0.32em;
}

.screen--splash h1 {
  margin: 1rem 0 0.75rem;
  font-size: clamp(3.1rem, 11vw, 7rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  text-shadow: 0 7px 0 rgba(0, 0, 0, 0.12);
}

.screen--splash h1 span,
.home-copy h2 span {
  color: var(--honey-300);
}

.tagline {
  margin-bottom: 2rem;
  color: rgba(255, 250, 240, 0.8);
  font-size: clamp(1rem, 3vw, 1.28rem);
  font-weight: 700;
}

.screen--splash .primary-button {
  min-width: 208px;
}

.prototype-note {
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Shared navigation */

.topbar,
.page-header,
.game-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) 1rem;
}

.icon-button,
.back-button {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  place-items: center;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: var(--soft-shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.back-button {
  font-family: sans-serif;
  font-size: 2.25rem;
  line-height: 1;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.65rem;
  letter-spacing: 0.11em;
}

.brand-lockup strong {
  margin-top: 0.12rem;
  color: var(--honey-500);
  font-size: 0.95rem;
}

.currency {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0 0.8rem;
  border-radius: 15px;
  color: var(--navy-900);
  background: rgba(255, 250, 240, 0.82);
  box-shadow: var(--soft-shadow);
}

.currency span {
  color: #d98433;
}

/* Home */

.screen--home {
  flex-direction: column;
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.98) 0%, rgba(255, 250, 240, 0.8) 45%, rgba(255, 250, 240, 0.28) 100%),
    var(--world-scenery) center 31% / cover;
}

.home-hero {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 6vw, 5.5rem) 5.5rem;
}

.home-copy {
  position: relative;
  z-index: 2;
}

.home-copy h2 {
  margin: 0.75rem 0 1.2rem;
  color: var(--navy-950);
  font-size: clamp(3rem, 7.5vw, 6.3rem);
  line-height: 0.83;
  letter-spacing: -0.065em;
}

.home-copy > p:not(.chapter-label) {
  max-width: 430px;
  color: #4d5b6b;
  font-size: clamp(1rem, 2.1vw, 1.24rem);
  font-weight: 700;
  line-height: 1.55;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
}

.progress-summary {
  margin: 1.1rem 0 0;
  color: #8b7256 !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
}

.primary-button--large {
  min-width: 172px;
}

.duke-stage {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 520px);
  height: min(72vh, 680px);
}

.duke-stage::before {
  position: absolute;
  right: 4%;
  bottom: 7%;
  width: 80%;
  height: 36%;
  border-radius: 50%;
  content: "";
  background: rgba(45, 116, 126, 0.2);
  filter: blur(15px);
}

.duke-stage img {
  position: absolute;
  right: -5%;
  bottom: -4%;
  width: 110%;
  height: 102%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 22px rgba(32, 39, 48, 0.26));
  transition: opacity 160ms ease, transform 220ms ease;
}

.duke-stage img.is-switching,
.duke-coach img.is-switching {
  opacity: 0.35;
  transform: scale(0.96);
}

.speech-bubble {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 0;
  max-width: 210px;
  padding: 0.8rem 1rem;
  border-radius: 18px 18px 6px 18px;
  color: var(--navy-900);
  background: rgba(255, 250, 240, 0.92);
  box-shadow: var(--soft-shadow);
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-weight: 700;
}

.bottom-nav {
  position: absolute;
  z-index: 5;
  right: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.3rem;
  width: min(92%, 460px);
  padding: 0.55rem;
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.92);
  box-shadow: var(--shadow);
  transform: translateX(50%);
  backdrop-filter: blur(14px);
}

.bottom-nav button {
  display: flex;
  flex: 1;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 15px;
  color: #768095;
  background: transparent;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.bottom-nav button span {
  font-size: 1.2rem;
}

.bottom-nav button.is-current {
  color: var(--cream-50);
  background: var(--navy-900);
}

/* Story and worlds */

.screen--story,
.screen--worlds {
  flex-direction: column;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) max(2rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 92% 8%, rgba(102, 184, 184, 0.28), transparent 23rem),
    linear-gradient(145deg, #fffaf1, #f0e0c6);
}

.page-header {
  width: min(960px, 100%);
  margin: 0 auto 1.6rem;
}

.page-header > div {
  flex: 1;
  padding: 0 1rem;
  text-align: center;
}

.page-header h2 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
}

.header-paw,
.world-progress {
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  place-items: center;
  color: white;
  background: #75bbb2;
  box-shadow: var(--soft-shadow);
}

.world-progress {
  width: auto;
  min-width: 62px;
  padding: 0 0.6rem;
  color: var(--navy-900);
  background: rgba(255, 250, 240, 0.86);
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
}

.story-scroll,
.world-list {
  display: grid;
  width: min(960px, 100%);
  margin: auto;
  gap: 1rem;
}

.story-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 2px solid rgba(30, 53, 80, 0.08);
  border-radius: 25px;
  background: rgba(255, 252, 246, 0.82);
  box-shadow: var(--soft-shadow);
}

.story-card--first {
  color: #fffaf0;
  border-color: transparent;
  background:
    linear-gradient(110deg, rgba(22, 48, 81, 0.96), rgba(34, 70, 98, 0.85)),
    url("public/cozy-bg.webp") center 36% / cover;
}

.story-card--first p:not(.chapter-label) {
  color: rgba(255, 250, 240, 0.75);
}

.story-number {
  color: rgba(216, 141, 62, 0.52);
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
}

.story-card h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.story-card p:last-child {
  margin: 0;
  color: #667285;
  font-weight: 700;
  line-height: 1.55;
}

.story-next {
  align-self: center;
  margin-top: 1.35rem;
}

.world-list {
  align-content: center;
}

.world-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 94px;
  padding: 1rem clamp(1rem, 3vw, 1.6rem);
  overflow: hidden;
  border-radius: 24px;
  text-align: left;
  box-shadow: var(--soft-shadow);
  transition: transform 160ms ease;
}

.world-card:hover {
  transform: translateY(-3px);
}

.world-card.is-locked {
  filter: saturate(0.42);
  opacity: 0.68;
}

.world-card.is-locked:hover {
  transform: none;
}

/* Each world shares its scenery between gameplay and its journey card. */
.app-shell { --world-scenery: url("public/cozy-bg.webp"); }
.app-shell[data-world="1"], .world-card--home { --world-scenery: url("public/cozy-bg.webp"); }
.app-shell[data-world="2"], .world-card--garden { --world-scenery: url("public/backgrounds/garden.webp"); }
.app-shell[data-world="3"], .world-card--bakery { --world-scenery: url("public/backgrounds/bakery.webp"); }
.app-shell[data-world="4"], .world-card--moon { --world-scenery: url("public/backgrounds/moon.webp"); }
.app-shell[data-world="5"], .world-card--palace { --world-scenery: url("public/backgrounds/palace.webp"); }
.world-card {
  min-height: 120px;
  color: #fff7e8;
  background: linear-gradient(90deg, rgba(12, 31, 51, .90), rgba(12, 31, 51, .62) 65%, rgba(12, 31, 51, .30)), var(--world-scenery) center 25% / cover;
  border: 1px solid rgba(244, 197, 130, .5);
}
.world-card.is-locked { filter: saturate(.65); opacity: 1; }

.world-index {
  color: rgba(255, 255, 255, 0.54);
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
}

.world-copy {
  display: flex;
  flex-direction: column;
}

.world-copy b {
  font-size: 1.2rem;
}

.world-copy small {
  margin-top: 0.18rem;
  opacity: 0.72;
  font-weight: 800;
}

.world-stars {
  font-weight: 900;
  letter-spacing: 0.09em;
}

/* Playable board */

.screen--game {
  flex-direction: column;
  min-height: 100svh;
  padding: max(0.75rem, env(safe-area-inset-top)) clamp(0.65rem, 2vw, 1.5rem) max(1rem, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(255, 247, 232, .12), rgba(255, 247, 232, .20)), var(--world-scenery) center top / cover;
}

.game-header {
  width: min(900px, 100%);
  margin: 0 auto 0.6rem;
  gap: 0.55rem;
}

.level-pill,
.score-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 0.9rem;
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: var(--soft-shadow);
}

.level-pill {
  flex: 1;
  max-width: 180px;
}

.level-pill small,
.score-pill small {
  color: #8a7157;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.level-pill b,
.score-pill b {
  color: var(--navy-900);
  font-size: 1rem;
}

.score-pill {
  min-width: 84px;
}

.mission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(620px, 100%);
  margin: 0.1rem auto 0.7rem;
  padding: 0.55rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.67);
}

.mission-copy {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
}

.paw-token {
  display: grid;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  color: #6a441c;
  background: #f3bd70;
  place-items: center;
}

.mission-dots {
  display: flex;
  gap: 0.35rem;
}

.mission-dots span {
  width: 12px;
  height: 12px;
  border: 2px solid #8ca3ad;
  border-radius: 50%;
  background: transparent;
  transition: transform 220ms ease, background 220ms ease;
}

.mission-dots span.is-lit {
  border-color: #d98a38;
  background: #f1b45d;
  box-shadow: 0 0 12px rgba(239, 170, 87, 0.7);
  transform: scale(1.18);
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(100px, 170px) minmax(290px, 580px);
  align-items: end;
  justify-content: center;
  width: min(900px, 100%);
  margin: 0 auto;
}

.duke-coach {
  position: relative;
  height: min(45vw, 330px);
  min-height: 150px;
  pointer-events: none;
}

.duke-coach img {
  position: absolute;
  right: -2rem;
  bottom: -0.75rem;
  width: 145%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 12px 15px rgba(33, 42, 52, 0.2));
  transition: opacity 140ms ease, transform 200ms ease;
}

.coach-bubble {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -1rem;
  width: 150px;
  padding: 0.65rem 0.75rem;
  border-radius: 15px 15px 4px 15px;
  color: var(--navy-900);
  background: white;
  box-shadow: var(--soft-shadow);
  font-size: 0.72rem;
  font-weight: 800;
}

.board-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(8px, 1.6vw, 16px);
  border: clamp(5px, 1vw, 9px) solid #d8944b;
  border-radius: clamp(18px, 3vw, 30px);
  background: linear-gradient(145deg, #f1bd76 0 47%, #bb6d35 48% 100%);
  box-shadow:
    0 14px 0 #9b572e,
    0 24px 36px rgba(65, 47, 34, 0.22),
    inset 0 0 0 3px rgba(255, 222, 165, 0.68);
}

.board {
  display: grid;
  aspect-ratio: 1;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(2px, 0.45vw, 5px);
  padding: clamp(5px, 1vw, 10px);
  border-radius: clamp(10px, 2vw, 17px);
  background: var(--navy-950);
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.38), inset 0 0 0 2px rgba(76, 104, 135, 0.2);
}

.board-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 5px;
  background: rgba(58, 84, 117, 0.24);
  box-shadow: inset 0 0 0 1px rgba(115, 144, 174, 0.06);
}

.board-cell.is-filled::before,
.piece-cell.is-filled::before {
  position: absolute;
  inset: 5%;
  border-radius: 14%;
  content: "";
  background: var(--block-face);
  box-shadow:
    inset 0.12em 0.12em 0 var(--block-light),
    inset -0.13em -0.13em 0 var(--block-dark),
    inset 0 0 0 1px rgba(35, 51, 67, 0.13),
    0 0.1em 0.12em rgba(1, 19, 38, 0.28);
}

.board-cell.is-filled::after,
.piece-cell.is-filled::after {
  position: absolute;
  inset: 24%;
  border-radius: 10%;
  content: "";
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

.app-shell[data-block-theme="paw"] :is(.board-cell, .piece-cell).is-filled::after,
.app-shell[data-block-theme="leaf"] :is(.board-cell, .piece-cell).is-filled::after,
.app-shell[data-block-theme="daisy"] :is(.board-cell, .piece-cell).is-filled::after,
.app-shell[data-block-theme="moon"] :is(.board-cell, .piece-cell).is-filled::after,
.app-shell[data-block-theme="heart"] :is(.board-cell, .piece-cell).is-filled::after {
  display: grid;
  inset: 10%;
  place-items: center;
  color: rgba(25, 52, 82, 0.38);
  background: none;
  font-size: clamp(0.45rem, 2.2vw, 0.9rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, 0.32);
}

.app-shell[data-block-theme="paw"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 20%;
  content: "";
  transform: translateY(8%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(25, 52, 82, 0.42) 0 25%, transparent 27%),
    radial-gradient(circle at 18% 28%, rgba(25, 52, 82, 0.42) 0 12%, transparent 14%),
    radial-gradient(circle at 40% 12%, rgba(25, 52, 82, 0.42) 0 12%, transparent 14%),
    radial-gradient(circle at 62% 12%, rgba(25, 52, 82, 0.42) 0 12%, transparent 14%),
    radial-gradient(circle at 84% 28%, rgba(25, 52, 82, 0.42) 0 12%, transparent 14%);
}
.app-shell[data-block-theme="leaf"] :is(.board-cell, .piece-cell).is-filled::after { content: "◒"; transform: rotate(-42deg); }
.app-shell[data-block-theme="daisy"] :is(.board-cell, .piece-cell).is-filled::after { content: "✿"; color: rgba(255, 255, 255, 0.86); }
.app-shell[data-block-theme="moon"] :is(.board-cell, .piece-cell).is-filled::after { content: "☾"; }
.app-shell[data-block-theme="heart"] :is(.board-cell, .piece-cell).is-filled::after { content: "♥"; }

.app-shell[data-block-theme="wood"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 13%;
  background: repeating-linear-gradient(8deg, transparent 0 15%, rgba(72, 42, 22, 0.18) 16% 21%, transparent 22% 34%);
  border: 1px solid rgba(86, 47, 26, 0.15);
  border-radius: 22% 45% 25% 48%;
}

.app-shell[data-block-theme="biscuit"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 17%;
  background: radial-gradient(circle, rgba(82, 48, 24, 0.48) 0 14%, transparent 15%) 0 0 / 50% 50%;
}

.app-shell[data-block-theme="stripe"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 9%;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 18%, transparent 19% 42%);
}

.app-shell[data-block-theme="mosaic"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 10%;
  border-radius: 6%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.36) 1px, transparent 1px) 0 0 / 33.33% 33.33%;
}

.app-shell[data-block-theme="jewel"] :is(.board-cell, .piece-cell).is-filled::after {
  inset: 31%;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(25, 52, 82, 0.16));
}

[data-color="coral"] {
  --block-face: #e87567;
  --block-light: #f6a394;
  --block-dark: #bd504a;
}

[data-color="sky"] {
  --block-face: #62aedd;
  --block-light: #95cef0;
  --block-dark: #3e83b7;
}

[data-color="mint"] {
  --block-face: #6dc5a3;
  --block-light: #a1e3c7;
  --block-dark: #459a7d;
}

[data-color="lilac"] {
  --block-face: #a580d3;
  --block-light: #cdb0ea;
  --block-dark: #7755aa;
}

[data-color="honey"] {
  --block-face: #e8a95e;
  --block-light: #f5cd8e;
  --block-dark: #bd7436;
}

[data-color="cream"] {
  --block-face: #ead9ba;
  --block-light: #fff0d2;
  --block-dark: #c1a77e;
}

.board-cell.is-hint {
  animation: hint-pulse 850ms ease-in-out infinite alternate;
}

@keyframes hint-pulse {
  from { box-shadow: inset 0 0 0 2px rgba(242, 190, 112, 0.5), 0 0 0 rgba(242, 190, 112, 0); }
  to { box-shadow: inset 0 0 0 3px rgba(255, 218, 139, 1), 0 0 13px rgba(242, 190, 112, 0.9); }
}

.piece-tray {
  position: relative;
  z-index: 3;
  width: min(620px, calc(100% - 0.5rem));
  min-height: 132px;
  margin: 0.8rem auto 0;
  padding: 0.6rem 0.8rem 0.85rem;
  border: 3px solid rgba(205, 140, 72, 0.5);
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.88);
  box-shadow: var(--soft-shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.tray-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.tray-heading h3 {
  margin: 0;
  font-size: 0.9rem;
}

.tray-heading p {
  margin: 0;
  color: #7a8290;
  font-size: 0.65rem;
  font-weight: 700;
}

.tray-pieces {
  display: grid;
  min-height: 84px;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.piece-button {
  display: grid;
  min-height: 80px;
  padding: 0.4rem;
  border: 2px solid transparent;
  border-radius: 15px;
  place-items: center;
  background: rgba(229, 216, 191, 0.38);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
  touch-action: none;
}

.piece-button:hover,
.piece-button.is-selected {
  border-color: #d79347;
  background: #fff8e9;
  transform: translateY(-3px);
}

.piece-button.is-used {
  opacity: 0.28;
  pointer-events: none;
}

.piece-grid {
  display: grid;
  gap: 3px;
  width: min(74px, 18vw);
  aspect-ratio: var(--piece-ratio, 1);
}

.piece-cell {
  position: relative;
  aspect-ratio: 1;
}

.game-tools {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  width: min(620px, 100%);
  margin: 0.75rem auto 0;
}

.game-tools button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 43px;
  border-radius: 14px;
  color: var(--navy-900);
  background: rgba(255, 250, 240, 0.72);
  box-shadow: inset 0 0 0 1px rgba(30, 52, 77, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
}

.game-tools button:disabled {
  cursor: default;
  opacity: 0.38;
}

.game-tools #rescue-button {
  color: #fffaf0;
  background: #d3695f;
  box-shadow: 0 5px 0 #a74d47;
}

.result-modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  padding: 1.5rem;
  place-items: center;
  background: rgba(11, 28, 50, 0.72);
  backdrop-filter: blur(10px);
}

.result-card {
  width: min(390px, 100%);
  padding: 2rem;
  border: 5px solid #e1a45e;
  border-radius: 30px;
  text-align: center;
  background: #fffaf0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.result-paw {
  display: grid;
  width: 76px;
  height: 76px;
  margin: -4rem auto 1rem;
  border: 5px solid #fffaf0;
  border-radius: 26px;
  color: #6a431c;
  background: #f0b763;
  box-shadow: var(--soft-shadow);
  place-items: center;
  font-size: 1.5rem;
}

.result-duke {
  display: block;
  width: min(54%, 190px);
  height: 175px;
  margin: -1.15rem auto -0.1rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(32, 39, 48, 0.18));
  animation: duke-celebrate 520ms cubic-bezier(0.2, 0.9, 0.35, 1.25) both;
}

@keyframes duke-celebrate {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.82) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

.result-card h2 {
  margin: 0.35rem 0 0.5rem;
  font-size: 2rem;
}

.result-stars {
  margin: 0.25rem 0 0.9rem;
  color: #e4a044;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 0 #b96f32;
}

.result-card > p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 700;
}

.result-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.25rem 0;
  padding: 0.8rem 1rem;
  border-radius: 15px;
  background: #f3ead9;
}

.reward-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -0.6rem 0 1.25rem;
  padding: 0 1rem;
  color: #827360;
  font-size: 0.75rem;
  font-weight: 900;
}

.reward-line b {
  color: #bd6f30;
  font-size: 1rem;
}

.result-score span {
  color: #827360;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.result-score b {
  font-size: 1.35rem;
}

.result-card .primary-button,
.result-card .secondary-button,
.text-button {
  width: 100%;
}

.result-replay {
  min-height: 48px;
  margin-top: 0.75rem;
}

.text-button {
  margin-top: 0.65rem;
  padding: 0.8rem;
  color: #667285;
  background: transparent;
  font-weight: 800;
}

/* Level picker, settings and saved-game feedback */

.sheet-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  padding: 1rem;
  place-items: center;
  background: rgba(11, 28, 50, 0.68);
  backdrop-filter: blur(10px);
}

.sheet-card {
  width: min(560px, 100%);
  max-height: min(86svh, 720px);
  padding: clamp(1rem, 4vw, 1.7rem);
  overflow: hidden auto;
  border: 4px solid #dfa15b;
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.sheet-header h2 {
  margin: 0.15rem 0 0;
  font-size: 1.8rem;
}

.close-button {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: var(--navy-900);
  background: #efe4d2;
  place-items: center;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
}

.level-button {
  display: flex;
  min-height: 68px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(26, 50, 80, 0.1);
  border-radius: 16px;
  color: var(--navy-900);
  background: #f4ead9;
  box-shadow: 0 4px 0 #d7c6ab;
}

.level-button b {
  font-size: 1rem;
}

.level-button small {
  min-height: 1em;
  margin-top: 0.15rem;
  color: #dda04a;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

.level-button.is-current {
  color: #fffaf0;
  border-color: #2d5576;
  background: var(--navy-900);
  box-shadow: 0 4px 0 #0c1b2f;
}

.level-button.is-locked {
  color: #aaa295;
  background: #ece7dd;
  box-shadow: none;
  opacity: 0.66;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(30, 52, 78, 0.09);
}

.setting-row > span {
  display: flex;
  flex-direction: column;
}

.setting-row b {
  color: var(--navy-900);
}

.setting-row small {
  margin-top: 0.14rem;
  color: #7d8490;
  font-weight: 700;
}

.setting-row input {
  width: 48px;
  height: 27px;
  flex: 0 0 auto;
  accent-color: #d9893d;
}

.settings-action {
  width: 100%;
  margin-top: 1.2rem;
}

.reset-progress {
  color: #a65852;
}

.settings-note {
  margin: 0.35rem 0 0;
  color: #858a92;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: #fffaf0;
  background: var(--navy-900);
  box-shadow: var(--shadow);
  transform: translateX(50%);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 700px) {
  .screen--home {
    background:
      linear-gradient(rgba(255, 250, 240, 0.78), rgba(255, 250, 240, 0.95)),
      var(--world-scenery) center 31% / cover;
  }

  .home-hero {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 1.2rem 1.2rem 6rem;
    text-align: center;
  }

  .home-copy {
    z-index: 3;
  }

  .home-copy h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .home-copy > p:not(.chapter-label) {
    margin-right: auto;
    margin-left: auto;
  }

  .home-actions {
    justify-content: center;
    margin-top: 1.1rem;
  }

  .duke-stage {
    width: min(100%, 390px);
    height: min(43vh, 390px);
    margin: -1.2rem auto 0;
  }

  .duke-stage img {
    right: -5%;
    width: 110%;
  }

  .speech-bubble {
    top: 8%;
    left: 3%;
    max-width: 150px;
    font-size: 0.75rem;
  }

  .page-header--compact .eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .story-card {
    grid-template-columns: 48px 1fr;
  }

  .game-layout {
    display: block;
    width: min(620px, 100%);
  }

  .duke-coach {
    position: absolute;
    z-index: 5;
    top: 8.6rem;
    left: 0.6rem;
    width: 84px;
    height: 98px;
  }

  .duke-coach img {
    right: auto;
    left: -1rem;
    width: 120px;
  }

  .coach-bubble {
    top: -0.4rem;
    right: -7.3rem;
    width: 132px;
    padding: 0.48rem 0.6rem;
    font-size: 0.61rem;
  }

  .board-frame {
    margin-top: 1.2rem;
  }
}

@media (max-width: 430px) {
  .topbar {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }

  .currency {
    font-size: 0.75rem;
  }

  .screen--game {
    padding-right: 0.45rem;
    padding-left: 0.45rem;
  }

  .game-header .back-button,
  .game-header .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .level-pill,
  .score-pill {
    min-height: 42px;
    padding: 0 0.55rem;
  }

  .level-pill b,
  .score-pill b {
    font-size: 0.85rem;
  }

  .piece-tray {
    min-height: 120px;
  }

  .tray-heading p {
    display: none;
  }

  .game-tools {
    gap: 0.35rem;
  }

  .game-tools button {
    gap: 0.18rem;
    padding: 0.35rem;
    font-size: 0.61rem;
  }

  .game-tools button span {
    font-size: 0.72rem;
  }

  .level-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
  }

  .level-button {
    min-height: 57px;
    border-radius: 13px;
  }
}

@media (max-height: 740px) and (min-width: 701px) {
  .screen--game {
    overflow: auto;
  }

  .board-frame {
    width: min(55vh, 500px);
  }

  .piece-tray {
    min-height: 105px;
  }
}

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

/* Gameplay uses a single flow: Duke, board, tray, then tools. */
.screen--game { gap: 10px; }
.game-header, .mission-row, .game-layout, .piece-tray, .game-tools { width: min(430px, 100%); }
.game-header { margin-bottom: 0; }
.game-layout { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.duke-coach { position: relative; inset: auto; width: 100%; height: 105px; min-height: 0; display: flex; align-items: center; gap: 12px; }
.duke-coach img { position: static; order: -1; width: 112px; height: 105px; object-position: center; flex: 0 0 auto; }
.coach-bubble { position: static; width: auto; flex: 1; font-size: 14px; padding: 10px 12px; }
.mission-row { margin: 0 auto; padding: 8px; flex-wrap: wrap; gap: 8px; }
.mission-copy { font-size: 14px; }
.board-frame { margin: 0; flex-shrink: 0; padding: 6px; border-width: 5px; border-radius: 18px; box-shadow: 0 7px 0 #9b572e, 0 12px 20px #412f3426; }
.board { padding: 4px; gap: 2px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.board-cell { border-radius: 3px; }
.piece-tray { min-height: 0; margin: 10px auto 0; padding: 10px; }
.tray-heading { margin-bottom: 6px; }
.tray-heading h3 { font-size: 14px; }
.tray-heading p { display: none; }
.tray-pieces { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piece-button { min-height: 82px; padding: 4px; }
.piece-grid { --tile-size: clamp(14px, 4.5vw, 20px); width: calc(var(--piece-cols) * var(--tile-size) + (var(--piece-cols) - 1) * 2px); height: calc(var(--piece-rows) * var(--tile-size) + (var(--piece-rows) - 1) * 2px); gap: 2px; }
.game-tools { margin: 0 auto; gap: 6px; flex-wrap: wrap; }
.game-tools button { min-height: 44px; min-width: 60px; font-size: 12px; padding: 8px; }
.game-tools #hint-button { background: #c8e6f7; }
.game-tools #undo-button { background: #f4cf91; }
.game-header .back-button, .game-header .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.level-pill small, .score-pill small { font-size: 11px; letter-spacing: 0; }
.level-pill { min-width: 0; }
.score-pill { min-width: 62px; }
.board-cell.is-preview { background: #79cbd888; outline: 2px solid #b8f6e8; outline-offset: -2px; }
.board-cell.is-invalid-preview { outline: 2px dashed #f68b80; outline-offset: -2px; }
.board-cell.is-invalid-preview::after { content: '×'; position: absolute; inset: 0; z-index: 4; color: #fff; background: #74272b99; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.result-modal { padding: 12px; }
.result-card { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.result-paw { display: none; }
.result-duke { margin: 0 auto; height: 105px; }
@media (max-width: 700px) {
  .screen--game { padding: max(10px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
}
@media (max-height: 740px) {
  .screen--game { gap: 6px; }
  .duke-coach { height: 64px; }
  .duke-coach img { width: 74px; height: 64px; }
  .coach-bubble { font-size: 12px; padding: 8px; }
  .piece-button { min-height: 72px; }
  .piece-tray { padding: 8px; }
}

/* Keep text and controls readable over every illustrated world. */
.screen--game .level-pill,
.screen--game .score-pill,
.screen--game .mission-row,
.screen--game .piece-tray,
.screen--game .game-tools button:not(#hint-button):not(#undo-button):not(#rescue-button),
.screen--game .icon-button { background-color: rgba(255, 247, 232, .96); }
.screen--game .game-tools #rescue-button { background: #a33b36; color: #fff; }

/* Approved warm-home composition: separate scenery, character, toys and controls. */
.screen--home { min-height:100svh; background:#dfad6a; isolation:isolate; padding:0; }
.home-room { position:absolute; inset:0; z-index:-2; background:url('public/home/room.webp') center 62% / cover; }
.screen--home::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg,rgba(255,235,187,.94),transparent 35%,rgba(72,33,4,.06)); }
.home-content { width:min(100%,480px); min-height:100svh; margin:auto; display:flex; flex-direction:column; align-items:center; padding:max(10px,env(safe-area-inset-top)) 18px max(10px,env(safe-area-inset-bottom)); }
.home-header { width:100%; position:relative; display:flex; justify-content:center; flex-shrink:0; }
.home-header #open-settings { position:absolute; right:0; top:4px; width:44px; height:44px; min-width:44px; background:rgba(255,246,221,.8); color:#744616; box-shadow:0 3px 0 #be8646; }
.home-brand { display:flex; flex-direction:column; align-items:center; width:192px; filter:drop-shadow(0 1px 1px #694013); }
.home-brand img { width:100%; height:auto; display:block; }
.home-brand span { font-size:10px; line-height:1.2; color:#fff0c5; letter-spacing:2px; font-weight:900; }
.home-title { display:flex; flex-direction:column; align-items:center; margin:9px 0 0; font-family:'Fredoka',sans-serif; line-height:.89; transform:rotate(-2deg); filter:drop-shadow(0 5px 0 #78441e) drop-shadow(0 3px 2px #77401b80); z-index:1; flex-shrink:0; }
.home-title-duke { font-size:clamp(78px,22vw,108px); font-weight:700; letter-spacing:-4px; color:#ffcb48; -webkit-text-stroke:2px #183b59; paint-order:stroke fill; text-shadow:0 3px #e69425,0 6px #a65b15,3px 0 #15334e,-3px 0 #15334e; }
.home-title-blocks { display:block; margin-top:9px; padding:4px 8px 7px; border-radius:10px; background:#173953; font-size:clamp(28px,8vw,38px); font-weight:700; color:#60cef8; text-shadow:0 2px #1470a5; white-space:nowrap; }
.home-title-blocks small { font-size:.65em; color:#fff2cf; text-shadow:0 2px #738491; }
.home-character-stage { position:relative; width:100%; height:clamp(240px,44svh,440px); min-height:230px; flex:1 0 230px; display:flex; justify-content:center; align-items:flex-end; }
.home-duke-button { position:relative; width:78%; height:100%; max-height:440px; padding:0 0 20px; background:none; border-radius:35%; transform-origin:50% 94%; -webkit-tap-highlight-color:transparent; }
#home-duke-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; transform-origin:50% 95%; filter:drop-shadow(0 9px 5px #66351440); animation:duke-breathe 4s ease-in-out infinite; }
.home-pawlights { position:absolute; inset:10% 3% 12%; pointer-events:none; }
.home-pawlights i { position:absolute; color:#fff1aa; font-size:23px; text-shadow:0 0 12px #ffb51d; animation:home-glimmer 4s ease-in-out infinite; }
.home-pawlights i:nth-child(1){left:7%;top:40%;}.home-pawlights i:nth-child(2){right:9%;top:15%;animation-delay:1.3s;}.home-pawlights i:nth-child(3){right:0;bottom:20%;animation-delay:2.6s;}
.home-blocks { position:absolute; bottom:0; left:2%; right:2%; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.home-toy { display:grid; grid-template-columns:repeat(3,18px); grid-auto-rows:18px; gap:1px; filter:drop-shadow(0 4px 1px #6e442a55); }
.home-toy i { border-radius:3px; background:#269bc9; box-shadow:inset 2px 2px #ffffff88,inset -2px -3px #07578866; border:1px solid #13749f; }
.toy-l i:nth-child(1){grid-column:1;grid-row:1;}.toy-l i:nth-child(2){grid-column:1;grid-row:2;}.toy-l i:nth-child(3){grid-column:1;grid-row:3;}.toy-l i:nth-child(4){grid-column:2;grid-row:3;}
.toy-t { margin-left:-10px; }.toy-t i{background:#8abb4e;border-color:#61832d;}.toy-t i:last-child{grid-column:2;}
.toy-line{grid-template-columns:repeat(4,18px);transform:rotate(-5deg);}.toy-line i{background:#ffba22;border-color:#b87917;}
.home-footer { width:100%; text-align:center; flex-shrink:0; z-index:2; }
#home-speech { margin:4px 0 7px; min-height:17px; font-size:12px; font-weight:800; color:#593813; text-shadow:0 1px #fff6df; }
.screen--home #continue-button { width:100%; min-height:59px; padding:12px 8px; border:2px solid #ffdf7b; outline:2px solid #c58a29; border-radius:19px; background:linear-gradient(#ffda61,#ffb61a); color:#542b03; font-family:'Fredoka',sans-serif; font-size:clamp(23px,6vw,29px); box-shadow:inset 0 3px 0 #fff4b7,0 5px 0 #a76a1c,0 9px 14px #623b2345; text-shadow:0 1px #ffe498; }
.screen--home #continue-button:focus-visible { outline:4px solid #126fa1; outline-offset:4px; }
.home-world { margin:14px 0 2px; color:#704318; font-weight:900; font-size:16px; }
.home-progress { margin:0 0 10px; font-size:11px; color:#64451f; }
.screen--home .bottom-nav { position:static; transform:none; display:grid; grid-template-columns:repeat(3,1fr); width:100%; margin:0; padding:4px; border:1px solid #f8d294; border-radius:20px; background:linear-gradient(#fff2c7dc,#f7cf88ed); box-shadow:inset 0 2px #fff8dc,0 3px 12px #74481733; }
.screen--home .bottom-nav button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; min-height:52px; border-radius:14px; font-size:12px; color:#77522b; background:none; }
.screen--home .bottom-nav button span { font-size:25px; line-height:1.1; }
.screen--home .bottom-nav button.is-current { color:#60360d; background:#ffe4a9; box-shadow:inset 0 -3px #d19636; }
@keyframes duke-breathe { 0%,100%{transform:translateY(0) rotate(-.5deg);}50%{transform:translateY(-3px) rotate(.5deg);} }
@keyframes home-glimmer { 0%,100%{opacity:.2;transform:scale(.75);}50%{opacity:.9;transform:scale(1);} }
.screen--home:not(.is-active) *, .screen--home.motion-off * { animation-play-state:paused!important; }
.screen--home.motion-off #home-duke-image { animation:none; }
@media (prefers-reduced-motion:reduce) { .screen--home * { animation:none!important; transition:none!important; } }
@media(max-height:700px) { .home-brand{width:154px;}.home-title-duke{font-size:78px;}.home-title-blocks{font-size:29px;}.home-character-stage{min-height:190px;flex-basis:190px;height:32svh;}.home-duke-button{padding-bottom:12px;}.home-toy{grid-template-columns:repeat(3,15px);grid-auto-rows:15px;}.toy-line{grid-template-columns:repeat(4,15px);}.home-header #open-settings{top:0;}#home-speech{margin:2px 0 5px;}.home-world{margin-top:10px;}.home-progress{margin-bottom:6px;}.screen--home #continue-button{min-height:51px;}.screen--home .bottom-nav button{min-height:44px;} }
@media(min-width:700px) { .home-room { background-size:auto 100%; background-repeat:no-repeat; background-color:#b98240; }.screen--home::after{background:linear-gradient(90deg,#5d351744,transparent 28%,transparent 72%,#5d351744);} }
@media(max-height:600px) { .home-brand{width:128px;}.home-title-duke{font-size:62px;}.home-title-blocks{font-size:25px;margin-top:6px;}.home-title{margin-top:5px;}.home-progress{font-size:10px;}.home-world{font-size:14px;} }
/* Reserve headroom for the greeting arc, including iOS safe-area layouts. */
.home-duke-button { padding-top:24px; }

/* Three owner-approved scenes share one Duke and the same saved game. */
.home-scenes { display:flex; justify-content:center; gap:5px; margin:4px 0; }
.home-scenes button { min-height:44px; padding:6px 10px; border:1px solid #b98141; border-radius:12px; background:#fff2dbe8; color:#593813; font-size:11px; font-weight:800; }
.home-scenes button[aria-pressed="true"] { background:#173953; color:#fff0c5; border-color:#ffe5a3; box-shadow:0 0 0 1px #173953; }
.screen--home[data-scene="stage"] .home-room { background-image:url('public/home/stage.webp'); background-color:#07182f; }
.screen--home[data-scene="trail"] .home-room { background-image:url('public/home/trail.webp'); background-color:#07182f; }
.screen--home[data-scene="stage"]::after, .screen--home[data-scene="trail"]::after { background:linear-gradient(0deg,#07182ff5,transparent 42%); }
.screen--home:is([data-scene="stage"],[data-scene="trail"]) :is(#home-speech,.home-world,.home-progress) { color:#fff0cb; text-shadow:0 1px 3px #031020; }
.screen--home:is([data-scene="stage"],[data-scene="trail"]) .bottom-nav { background:#102a49ed; border-color:#607c98; box-shadow:inset 0 1px #718294; }
.screen--home:is([data-scene="stage"],[data-scene="trail"]) .bottom-nav button { color:#b6e3ff; }
.screen--home:is([data-scene="stage"],[data-scene="trail"]) .bottom-nav button.is-current { color:#ffe5a3; background:#21456a; }
.screen--home[data-scene="stage"] .toy-t i { background:#ef7b52; border-color:#a6482b; }
.screen--home[data-scene="trail"] .toy-l i { background:#9c73db; border-color:#64428f; }
@media(max-height:700px) { .home-character-stage { min-height:150px; flex-basis:150px; } .home-scenes button { padding:4px 7px; } }

#home-duke-image { animation:none; }
#home-duke-image[hidden], #home-duke-rig[hidden] { display:none; }
#home-duke-rig { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 5px #66351430); }

.home-duke-button { width:96%; }

.screen--home[data-scene="stage"] .home-room { background-position:center -12svh; background-size:auto 100%; background-repeat:no-repeat; }

/* Explicit stage bounds also constrain replaced canvas elements in iOS WebKit. */
.home-duke-button { position:absolute; inset:24px 0 20px; height:auto; max-height:none; margin:auto; padding:0; display:flex; align-items:flex-end; justify-content:center; }
@media(max-height:700px) { .home-duke-button { top:6px; bottom:12px; } }

/* Anchor all scenery to Duke's contact plane rather than to the screen center. */
.screen--home .home-room { background-size:auto 100%; background-position:center var(--home-bg-y,0px); background-repeat:no-repeat; }
.screen--home[data-scene="stage"] .home-room { background-position:center var(--home-bg-y,0px); }
.home-scenes button { min-width:52px; }
#home-duke-rig { filter:none; }

.screen--home .home-room { mask-image:linear-gradient(#000 65%,transparent 86%); -webkit-mask-image:linear-gradient(#000 65%,transparent 86%); }
.screen--home:is([data-scene="stage"],[data-scene="trail"]) { background:#07182f; }

/* One new surface per level; every piece still consists of rigid beveled squares. */
.app-shell[data-block-theme="checker"] :is(.board-cell,.piece-cell).is-filled::after {
  inset:9%; border-radius:5%; background:conic-gradient(from 90deg,#fff8dcaa 25%,#17345366 0 50%,#fff8dcaa 0 75%,#17345366 0) 0 0/50% 50%;
}
.app-shell[data-block-theme="candy"] :is(.board-cell,.piece-cell).is-filled::after {
  inset:9%; border-radius:8%; background:repeating-linear-gradient(135deg,#ffffff88 0 12%,transparent 13% 32%);
}
.app-shell[data-block-theme="neon"] :is(.board-cell,.piece-cell).is-filled::before {
  background:#17253a; border:2px solid var(--block-face); box-shadow:inset 0 0 4px var(--block-face),0 0 3px var(--block-face);
}
.app-shell[data-block-theme="neon"] :is(.board-cell,.piece-cell).is-filled::after {
  inset:30%; border-radius:0; background:var(--block-face); box-shadow:0 0 5px var(--block-face);
}
.app-shell[data-block-theme="plaid"] :is(.board-cell,.piece-cell).is-filled::after {
  inset:9%; border-radius:5%; background:repeating-linear-gradient(0deg,transparent 0 20%,#17345355 21% 39%,#ffffff99 40% 45%,transparent 46% 62%),repeating-linear-gradient(90deg,transparent 0 22%,#17345355 23% 40%,#ffffff88 41% 46%,transparent 47% 63%);
}
.app-shell[data-block-theme="trainers"] :is(.board-cell,.piece-cell).is-filled::after {
  inset:15%; border-radius:0; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 18V9l8 5 7-1 4 7 5 2v5H4z' fill='%23fff7e8' stroke='%23173453' stroke-width='1.5'/%3E%3Cpath d='M4 24h24M14 15l5 2m-3 1 5 2' fill='none' stroke='%23173453' stroke-width='2'/%3E%3C/svg%3E");
}
.mission-copy { display:grid; grid-template-columns:auto 1fr; gap:2px 6px; }
#mission-board { grid-column:2; font-size:11px; font-weight:700; }
#block-style-name { color:#39526c; font-size:11px; font-weight:800; }
#result-objective { color:#275c47; font-weight:900; font-size:14px; }
.board-frame { position:relative; }
#clear-feedback { position:absolute; z-index:5; top:0; left:50%; transform:translate(-50%,-60%); max-width:96%; width:max-content; padding:6px 10px; border:1px solid #ffdf8c; border-radius:9px; background:#173453ee; color:#fff0bb; font-size:12px; font-weight:900; text-align:center; pointer-events:none; box-shadow:0 3px 8px #0003; }
.screen--game :is(.piece-button,.board-cell) { touch-action:none; transition:transform 55ms ease-out; }
.screen--records { max-width:480px; margin:auto; padding:24px 18px; min-height:100svh; background:#fff7e8; }
.record-card { margin:36px 0 20px; padding:32px 20px; text-align:center; border:2px solid #efc474; border-radius:22px; background:linear-gradient(#fff5d7,#ffdfa0); color:#173453; }
.record-card span { font-size:12px; font-weight:900; letter-spacing:2px; }.record-card strong { display:block; font:700 clamp(38px,12vw,62px) 'Fredoka',sans-serif; margin:12px 0; }.record-card p { font-size:13px; }
.record-details { display:flex; justify-content:space-around; text-align:center; margin-bottom:24px; }.record-details b { display:block; font-size:24px; }.screen--records>.primary-button { width:100%; }
#game-best-score { font-size:clamp(11px,3vw,16px); }
/* Score announcements never intercept the next placement or Undo tap. */
#toast { pointer-events:none; }

/* Reserve room for the complete tray and tools on short phone screens. */
@media (max-height: 740px) {
  .screen--game .board-frame { width:min(100%,calc(100svh - 350px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); align-self:center; }
  .screen--game .duke-coach { height:48px; }
  .screen--game .duke-coach img { height:48px; width:56px; }
  .screen--game .mission-row { padding:6px; }
  .screen--game .piece-tray { margin-top:4px; }
  .screen--game .piece-button { min-height:64px; }
}
@media (max-height:740px) {
  .screen--game .tray-pieces { min-height:64px; }
  .screen--game .board-frame { width:min(100%,calc(100svh - 366px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
}

/* A fixed play surface: gestures move pieces, never the document. */
html.game-is-open, .game-is-open body { height:100%; overflow:hidden; overscroll-behavior:none; }
.game-is-open body { position:fixed; inset:0; width:100%; }
.screen--game.is-active { height:100svh; min-height:0; overflow:hidden; touch-action:none; gap:4px; }
.screen--game .game-layout { flex:none; gap:4px; }
.screen--game .board-frame { width:min(100%,calc(100svh - 354px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); align-self:center; box-shadow:0 3px 0 #9b572e; }
.screen--game .duke-coach { height:64px; }
.screen--game .duke-coach img { width:74px; height:64px; }
.screen--game .piece-tray { margin:0 auto; padding:6px 8px; flex:none; }
.screen--game .tray-pieces { min-height:64px; }
.screen--game .piece-button { min-height:64px; }
.screen--game .piece-button, .screen--game .piece-button * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.screen--game .piece-button.is-dragging { opacity:.25; transform:none; }
.drag-ghost { position:fixed; left:0; top:0; z-index:100; pointer-events:none; margin:0; will-change:transform; filter:drop-shadow(0 4px 3px #0005); }
@media(max-height:740px) {
  .screen--game .duke-coach { height:48px; }
  .screen--game .duke-coach img { height:48px; width:56px; }
}
/* Fit the usable viewport rather than reserving a fixed amount of board space. */
.screen--game.is-active { height:100dvh; }
.screen--game .duke-coach { height:48px; }
.screen--game .duke-coach img { height:48px; width:56px; }
.screen--game .board-frame { max-width:100%; }
.drag-ghost { filter:none; transition:none!important; opacity:1; }
.drag-ghost .piece-cell { transition:none!important; animation:none!important; }
.drag-ghost.can-place .is-filled { outline:2px solid #e8fff6; outline-offset:-2px; }
.drag-ghost.cannot-place .is-filled { outline:3px solid #e74242; outline-offset:-3px; }
.drag-ghost.cannot-place::after { content:'×'; position:absolute; top:-18px; right:-12px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#ad2020; color:white; font:bold 22px/1 sans-serif; }
@media(max-height:700px) {
 .screen--game .mission-row { padding:4px 6px; }
 .screen--game .mission-copy { font-size:12px; }
 .screen--game .duke-coach { height:38px; }
 .screen--game .duke-coach img { height:38px; width:44px; }
 .screen--game .coach-bubble { padding:4px 7px; font-size:11px; }
 .screen--game .piece-tray { padding:4px 6px; }
 .screen--game .tray-heading { margin-bottom:2px; }
}
/* Status text must not move the board after a placement. */
.screen--game .mission-row { height:56px; flex:none; flex-wrap:nowrap; }
.screen--game .mission-copy { min-width:0; flex:1; }
.screen--game #mission-board { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.screen--game .mission-dots { flex:none; }
.screen--game .coach-bubble { max-height:100%; overflow:hidden; }
/* Larger pieces to pick up, with more screen width allocated to the 10×10 grid. */
.screen--game { padding-left:6px; padding-right:6px; }
.screen--game .board-frame { border-width:3px; padding:3px; border-radius:13px; }
.screen--game .board { padding:2px; }
.screen--game .piece-grid { --tile-size:clamp(20px,6.2vw,28px); }
.screen--game .piece-button { min-height:88px; }
.screen--game .tray-pieces { min-height:88px; }
.screen--game .tray-heading { display:none; }
.screen--game .piece-tray { padding:6px; }
@media(max-height:700px) {
 .screen--game .piece-grid { --tile-size:20px; }
 .screen--game .piece-button,.screen--game .tray-pieces { min-height:84px; }
}
/* Board-first play: one toolbar above, tray attached, Duke below. */
.screen--game.is-active { gap:0; padding-top:max(6px,env(safe-area-inset-top)); padding-bottom:max(6px,env(safe-area-inset-bottom)); }
.screen--game .game-header { flex:none; gap:4px; display:flex; align-items:center; margin:0 auto 6px; }
.screen--game .game-header .back-button { width:36px; height:44px; min-width:36px; }
.screen--game .level-pill { padding:0 3px; flex:1; min-height:44px; border-radius:12px; }
.screen--game .score-pill { padding:0 4px; min-width:48px; min-height:44px; border-radius:12px; }
.screen--game #game-best-score { font-size:11px; }
.screen--game .level-pill small { font-size:9px; }
.game-tool { display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; width:40px; height:44px; padding:0; border-radius:12px; background:#fff7e8f5; box-shadow:0 2px 0 #b5855455; }
.game-tool span { font-size:21px; line-height:24px; }
.game-tool small { font-size:9px; line-height:12px; }
.game-tool:disabled { opacity:.42; }
.screen--game .game-layout { gap:0; }
.screen--game .board-frame { border-radius:15px 15px 0 0; box-shadow:none; }
.screen--game .piece-tray { margin:0 auto; border-radius:0 0 18px 18px; border-top:0; }
.screen--game > .duke-coach { width:min(430px,100%); height:88px; flex:none; margin:6px auto 0; gap:8px; }
.screen--game > .duke-coach img { width:94px; height:88px; object-fit:contain; }
.screen--game > .duke-coach .coach-bubble { font-size:13px; padding:10px; border-radius:15px; background:#fff7e8ee; box-shadow:0 3px 9px #36251516; }
#clear-feedback { top:12px; transform:translate(-50%,0); }
@media(max-height:700px) {
 .screen--game > .duke-coach { height:54px; margin-top:4px; }
 .screen--game > .duke-coach img { width:60px; height:54px; }
 .screen--game > .duke-coach .coach-bubble { font-size:12px; padding:6px 8px; }
}
/* A seated, grounded companion; speech appears only after activity. */
.screen--game > .duke-coach { height:clamp(110px,calc(100dvh - 540px),230px); margin:4px auto 0; display:block; position:relative; isolation:isolate; }
.game-duke-greet { position:absolute; left:8%; bottom:0; width:65%; height:100%; padding:0; background:none; border:0; box-shadow:none; display:flex; align-items:flex-end; justify-content:center; touch-action:manipulation; }
.game-duke-greet::before { content:''; position:absolute; width:64%; height:10%; bottom:0; border-radius:50%; background:radial-gradient(ellipse,#61412640,transparent 70%); z-index:-1; }
.screen--game > .duke-coach .game-duke-greet img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
#game-duke-rig { display:block; flex:none; max-width:100%; max-height:100%; }
.screen--game > .duke-coach .coach-bubble { position:absolute; z-index:2; right:0; top:8%; width:52%; max-height:80%; font-size:12px; padding:9px 11px; border:1px solid #d9b987; border-radius:16px 16px 16px 3px; background:#fff9edf5; box-shadow:0 3px 10px #3b230c1c; pointer-events:none; }
/* Duke belongs to the floor scenery beside the bed, not the tray layout. */
.screen--game.is-active { padding-bottom:clamp(130px,calc(100dvh - 530px),245px); }
.screen--game > .duke-coach { position:absolute; left:0; right:0; bottom:28px; width:min(430px,100%); height:clamp(115px,calc(100dvh - 535px),205px); margin:0 auto; pointer-events:none; }
.game-duke-greet { left:0; width:53%; pointer-events:auto; }
.screen--game > .duke-coach .coach-bubble { top:5%; right:2%; width:50%; }
@media(max-height:600px) {
 .screen--game > .duke-coach { bottom:12px; }
}
/* One gold banner, one score group; Settings floats beside it. */
.screen--game .game-header { position:relative; isolation:isolate; height:56px; padding:3px 48px 3px 6px; gap:4px; background:none; border:0; box-shadow:none; }
.screen--game .game-header::before { content:''; position:absolute; z-index:-1; inset:0 44px 0 0; border-radius:17px; border:1px solid #d99a37; background:linear-gradient(115deg,#ffeab0,#f8ce6e 54%,#eab450); box-shadow:inset 0 1px 0 #fff6d9,0 3px 0 #b77b35; }
.screen--game .game-header .back-button,
.screen--game .game-header .game-tool { background:none; border:0; box-shadow:none; color:#513713; width:36px; min-width:36px; padding:0; }
.screen--game .game-header .back-button { display:grid; place-items:center; }
.screen--game .game-score-group { flex:1; min-width:0; display:grid; grid-template-columns:1fr; text-align:center; align-content:center; color:#513713; line-height:1.05; }
.game-score-group #game-style-name { font-size:9px; letter-spacing:1px; font-weight:800; }
.game-score-group #score { font:700 20px/1.1 'Fredoka',sans-serif; font-variant-numeric:tabular-nums; }
.game-score-group #game-best-score { font-size:10px; font-weight:800; white-space:nowrap; }
.screen--game .game-header #open-game-settings { position:absolute; right:0; top:6px; width:40px; height:44px; color:#513713; filter:drop-shadow(0 1px 1px #fff7e8); }
.screen--game #open-game-settings small { display:none; }
/* Aligned banners and a single high-contrast piece surface. */
.screen--game .game-header { padding:3px 6px; }
.screen--game .game-header::before { inset:0; }
.screen--game .game-header #open-game-settings { position:static; width:36px; min-width:36px; height:44px; filter:none; }
.screen--game #open-game-settings small { display:block; }
.screen--game #undo-button { color:#173453; opacity:1; }
.screen--game #undo-button:disabled { color:#79603b; }
.screen--game .piece-tray { background:#172e4f; border:2px solid #eac078; border-top:0; box-shadow:inset 0 1px 0 #ffffff18; }
.screen--game .piece-button,
.screen--game .piece-button:hover,
.screen--game .piece-button.is-selected { border-color:transparent; background:transparent; box-shadow:none; transform:none; }
.screen--game .piece-button .is-filled { outline:1px solid #0b1627; outline-offset:0; }
.screen--game .piece-button.is-selected .is-filled { outline:2px solid #fff7cb; outline-offset:1px; }
.screen--game .piece-button.is-used .piece-grid { visibility:hidden; }
.screen--game .piece-button:focus-visible { outline:2px solid #fff7cb; outline-offset:-2px; }
.screen--game .piece-grid { --tile-size:var(--tray-tile-size,20px); }
/* Compact icon group, crisp drag pieces, and non-obscuring placement feedback. */
.screen--game .game-score-group { text-align:left; padding-left:7px; }
.screen--game .game-header .back-button,.screen--game .game-header .game-tool { width:40px; min-width:40px; }
.screen--game .game-header #open-game-settings { width:40px; min-width:40px; }
.drag-ghost.cannot-place::after { display:none; content:none; }
.drag-ghost { backface-visibility:hidden; }
.board-cell.is-invalid-preview::after { content:none; display:none; }
.board-cell.is-preview { background:transparent; outline:2px solid #fff2b0; outline-offset:-3px; }
.board-cell.is-invalid-preview { outline:2px solid #f38376; outline-offset:-3px; }
/* Lower/right floor placement and a compact, naturally wrapping speech card. */
.game-duke-greet { left:8%; }
.screen--game > .duke-coach { bottom:16px; }
@media(max-height:600px) { .screen--game > .duke-coach { bottom:4px; } }
.screen--game > .duke-coach .coach-bubble { width:clamp(112px,38%,155px); right:1%; top:8%; white-space:normal; overflow-wrap:break-word; line-height:1.35; max-height:none; padding:10px 12px; }
.drag-ghost.cannot-place .is-filled { outline:none; }
.board-fx { position:absolute; inset:6px; pointer-events:none; z-index:6; overflow:hidden; border-radius:6px; }
.place-ring { position:absolute; width:var(--board-cell-share,12.5%); height:var(--board-cell-share,12.5%); border:2px solid #fff4b0; border-radius:3px; }
.clear-beam { position:absolute; left:0; width:100%; height:var(--board-cell-share,12.5%); background:linear-gradient(90deg,#ffd06300,#fff6ba,#ffffff,#fff6ba,#ffd06300); transform-origin:left; }
.clear-beam.vertical { top:0; height:100%; width:var(--board-cell-share,12.5%); background:linear-gradient(#ffd06300,#fff6ba,#fff,#fff6ba,#ffd06300); transform-origin:top; }
.clear-spark { position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:2px; }
.level-transition { position:fixed; z-index:40; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:radial-gradient(circle at 50% 42%,#4d9bdcf2,#173d65f5 62%,#07182bf8); color:#fff8d8; text-align:center; pointer-events:none; contain:layout paint; }
.level-transition[hidden] { display:none; }
.level-transition small { font:700 14px/1 "Fredoka",ui-rounded,sans-serif; letter-spacing:2.4px; }
.level-transition b { font:700 clamp(48px,16vw,78px)/1 "Fredoka",ui-rounded,"Arial Rounded MT Bold",sans-serif; letter-spacing:.02em; color:#ffd95f; text-shadow:0 4px 0 #a45e20,0 0 24px #fff09c; }
.level-transition span { font:600 19px/1.2 "Fredoka",ui-rounded,sans-serif; color:#fff; }
.million-celebration { position:fixed; z-index:11; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px 24px 30vh; color:#fff; text-align:center; pointer-events:none; background:radial-gradient(circle at 50% 35%,#ffdf62ec,#f05a8dec 34%,#6336b9f2 72%,#10233df7); contain:layout paint; overflow:hidden; }
.million-celebration[hidden] { display:none; }
.million-celebration::before { position:absolute; inset:-20%; content:""; opacity:.68; background:radial-gradient(circle,#fff 0 2px,transparent 3px) 0 0/42px 42px,radial-gradient(circle,#7ff8dc 0 3px,transparent 4px) 17px 11px/58px 58px; transform:rotate(12deg); }
.million-celebration > * { position:relative; }
.million-celebration small { font:700 15px/1 "Fredoka",ui-rounded,sans-serif; letter-spacing:3px; }
.million-celebration b { font:700 clamp(48px,15vw,82px)/1 "Fredoka",ui-rounded,sans-serif; color:#fff6a8; text-shadow:0 5px 0 #a74468,0 0 28px #fff; }
.million-celebration span { font:700 clamp(17px,5vw,24px)/1.2 "Fredoka",ui-rounded,sans-serif; }
@media (pointer: coarse) {
  .primary-button:active,.secondary-button:active { transform:none; }
}
.result-modal.is-auto-advance .result-card > :is(button,.text-button) { display:none; }

/* Keep the playing surface clear; Duke visits only for an all-clear. */
.screen--game.is-active { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.screen--game > .duke-coach[hidden] { display:none; }
.screen--game > .duke-coach { position:fixed; z-index:12; bottom:12px; width:min(360px,95%); height:170px; pointer-events:none; }
.screen--game > .duke-coach .game-duke-greet { left:4%; width:55%; pointer-events:none; }
.screen--game > .duke-coach .coach-bubble { top:15%; right:2%; }
.result-duke-stage { position:relative; height:clamp(125px,25dvh,190px); width:100%; display:flex; justify-content:center; align-items:flex-end; }
.result-duke-stage .result-duke { height:100%; width:auto; object-fit:contain; margin:0; }
#result-duke-rig { display:block; max-height:100%; max-width:100%; }
#result-duke-rig[hidden], .result-duke-stage img[hidden] { display:none; }
@media(max-height:600px) {
  .result-card { padding:14px 18px; }
  .result-duke-stage { height:110px; }
  .result-card h2 { font-size:25px; margin:8px 0; }
  .result-card .result-score { margin:12px 0; }
}

/* Larger pickup targets; the held piece never eases behind the pointer. */
.screen--game .piece-button { padding:4px; min-height:120px; }
.screen--game .tray-pieces { gap:6px; min-height:120px; }
.drag-ghost { transition:none!important; filter:none; }
.drag-ghost .is-filled { box-shadow:0 3px 0 #050f20,0 5px 5px #050f2050; }
@media(max-height:600px) {
 .screen--game .piece-button,.screen--game .tray-pieces { min-height:108px; }
}

.screen--game .piece-button { min-width:0; border-width:0; }

.feedback-tests { display:flex; gap:8px; margin:12px 0; }
.feedback-tests button { flex:1; padding:12px 6px; background:#ffe4a0; color:#18334e; border:1px solid #dba74d; border-radius:12px; font-weight:800; }
#feedback-support { margin:8px 0 12px; }

/* A stable landing outline and full-line glow forecast a clear before release. */
.board-cell.is-landing { outline:2px solid #fff3af; outline-offset:-3px; background:#49604f; }
.board-cell.is-clear-ready { outline:2px solid #ffdf72; outline-offset:-2px; box-shadow:inset 0 0 14px #fff4b3,0 0 6px #ffcf58; }
.board-cell.is-clear-ready::after { background:#fff4a8aa!important; opacity:.6; }
/* Transparent Duke cameo: the whole pose and wagging tail remain visible. */
.screen--game > .duke-coach { width:min(340px,95%); height:185px; bottom:6px; }
.screen--game > .duke-coach .game-duke-greet { width:185px; height:185px; left:0; top:0; bottom:auto; clip-path:none; background:none; }
.screen--game > .duke-coach .coach-bubble { top:26px; right:0; }
.screen--game > .duke-coach .game-duke-greet { align-items:flex-end; }
.screen--game > .duke-coach .game-duke-greet::before { display:none; }

/* Compact pieces in the tray grow to the actual board-cell size on pickup. */
.screen--game .piece-button,.screen--game .tray-pieces { min-height:92px; }
.screen--game { padding-left:2px; padding-right:2px; }

.feedback-tests { flex-wrap:wrap; }
.feedback-tests button { flex:1 0 28%; }

#clear-feedback.is-double { color:#36220a; background:linear-gradient(100deg,#ffe99b,#ffd05b,#ffe99b); border:2px solid #fff5c8; box-shadow:0 3px 0 #ad7627,0 0 18px #ffdc7180; font-weight:900; }
.bonus-stars { position:absolute; inset:0; z-index:9; overflow:hidden; pointer-events:none; border-radius:12px; }
.bonus-stars i { position:absolute; top:0; font-style:normal; font-size:22px; text-shadow:0 1px 2px #65480a; }

/* A custom letter-by-letter Duke wordmark, with a warm beveled finish. */
.home-title-duke { display:flex; gap:1px; letter-spacing:-3px; padding:0 8px 8px; }
.home-title-duke b { display:block; font-weight:700; color:#ffcb48; background:linear-gradient(#fff4ab 8%,#ffd451 40%,#f4a624 78%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px #714014; filter:drop-shadow(0 4px 0 #9c5718); text-shadow:none; }
.home-title-duke b:nth-child(1) { transform:rotate(-8deg) translateY(2px); }
.home-title-duke b:nth-child(2) { transform:rotate(3deg) translateY(5px); }
.home-title-duke b:nth-child(3) { transform:rotate(-4deg) translateY(-2px); }
.home-title-duke b:nth-child(4) { transform:rotate(7deg) translateY(2px); }
.home-sound { position:absolute; left:0; top:8px; width:44px; height:44px; border:1px solid #e9c37c; border-radius:50%; background:#173953; color:#ffe6a1; font-size:26px; }

/* Isolate the moving piece from the scenery's paint work. */
.drag-ghost { contain:layout style; }
.game-is-open .game-header, .game-is-open .piece-tray { backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Opening is separate from gameplay and removed after playback. */
#opening { position:fixed; inset:0; z-index:1000; background:#07172c; display:grid; place-items:center; }
#opening[hidden] { display:none; }
#opening-video { width:100%; height:100%; object-fit:contain; }
#opening button { position:absolute; border:1px solid #ffe29a; border-radius:24px; background:#102a49e8; color:#fff4d2; padding:12px 22px; font-weight:800; }
#opening-play { top:48%; }
#opening-skip { right:20px; bottom:calc(24px + env(safe-area-inset-bottom)); }
#clear-feedback.is-double { z-index:15; top:18%; font-size:clamp(18px,5vw,26px); padding:12px 16px; }
.bonus-stars { z-index:12; }
.drag-ghost, .drag-ghost * { pointer-events:none!important; }

/* Mode navigation and a portrait-friendly puzzle map. */
.screen--home .bottom-nav button { min-height:72px; font-size:13px; gap:2px; }
.screen--home .bottom-nav img { width:48px; height:43px; object-fit:contain; }
.home-record-link { color:#ffe4a0; background:none; border:0; font-size:12px; padding:2px 12px 8px; }
.screen--adventure, .screen--records { flex-direction:column; align-items:stretch; width:100%; max-width:540px; padding:calc(20px + env(safe-area-inset-top)) 18px 28px; margin:auto; gap:18px; min-height:100svh; background:linear-gradient(#fff7e8,#ffedc7); }
.screen--adventure.is-active, .screen--records.is-active { display:flex; }
.screen--adventure .page-header, .screen--records .page-header { width:100%; display:flex; gap:12px; align-items:center; }
.screen--adventure .page-header h1 { font-size:34px; }
.adventure-intro { background:#fffaf0; border:1px solid #e8c583; border-radius:22px; padding:18px; color:#173453; }
.adventure-intro h2 { font-size:23px; margin:0 0 8px; }
.adventure-intro p { font-size:15px; line-height:1.5; margin:8px 0; }
.adventure-intro small { display:block; line-height:1.5; }
.adventure-puzzles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.adventure-puzzles button { display:flex; flex-direction:column; gap:5px; align-items:center; background:linear-gradient(#fff6d9,#ffd67b); border:2px solid #e3b367; border-radius:18px; padding:12px 3px; color:#173453; box-shadow:0 3px 0 #c99a55; }
.adventure-puzzles b { font:700 27px Fredoka,sans-serif; }
.adventure-puzzles span { color:#83531c; font-size:19px; }
.adventure-puzzles small { font-size:11px; }
.adventure-puzzles button:disabled { opacity:.48; box-shadow:none; }
.adventure-clock { flex:none; margin:0 auto 6px; text-align:center; color:#19354e; background:#fff2cb; border-radius:12px; padding:5px 14px; font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; }
#adventure-clock[hidden], #adventure-next[hidden] { display:none; }
.result-card #adventure-next { margin-bottom:8px; }
.screen--records .record-card { width:100%; min-height:0; padding:30px 16px; }
@media(max-height:740px){.screen--home .bottom-nav button {min-height:60px}.screen--home .bottom-nav img{width:40px;height:34px}.home-record-link{padding-bottom:3px}}

.opening-replay { display:block; margin:5px auto; padding:8px 16px; border:1px solid #e5bd6b; border-radius:20px; background:#102a49e8; color:#ffe8aa; font:800 13px Nunito,sans-serif; }
#opening-status { position:absolute; top:42%; left:8%; right:8%; text-align:center; color:#fff4d2; background:#102a49dc; padding:12px; border-radius:12px; }
#opening-sound { top:calc(18px + env(safe-area-inset-top)); right:16px; }
#opening [hidden] { display:none; }

/* Tablet composition: use the display instead of a narrow phone-sized column. */
@media (min-width:700px) and (orientation:portrait) {
  .home-content { width:min(94%,900px); padding: max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); }
  .screen--home[data-scene] .home-room { background-size:cover; }
  .home-brand { width:260px; }
  .home-title-duke { font-size:156px; }
  .home-title-blocks { font-size:54px; }
  .home-character-stage { max-height:none; height:auto; min-height:350px; flex:1 0 350px; }
  .home-duke-button { max-height:none; }
  .screen--home #continue-button { min-height:80px; font-size:34px; }
  #home-speech { font-size:18px; margin:8px 0 12px; }
  .home-world { font-size:23px; }
  .home-progress,.home-record-link { font-size:16px; }
  .screen--home .bottom-nav button { min-height:88px; font-size:18px; }
  .screen--game .game-layout { width:min(94vw,900px); }
  .screen--game .game-header { min-height:72px; }
  .screen--game .game-score-group { font-size:20px; }
  .screen--game .game-header .back-button,.screen--game .game-header .game-tool,.screen--game .game-header #open-game-settings { width:62px; min-width:62px; height:60px; }
  .screen--game .game-header .game-tool small { font-size:12px; }
  .screen--game .piece-button,.screen--game .tray-pieces { min-height:150px; }
  .result-card { width:min(78vw,800px); padding:36px; }
  .result-card h2 { font-size:42px; }
  .result-card p { font-size:23px; }
  .result-card button { min-height:66px; font-size:22px; }
  .result-duke-stage { height:270px; }
}

/* Bound the movie to the viewport; grid intrinsic sizing must not overflow iPad. */
#opening-video { position:absolute; inset:0; min-width:0; min-height:0; }
@media(min-width:700px) and (orientation:portrait) { #opening-video { object-fit:cover; } }

/* One-tap sound control beside the existing tools. */
.screen--game .game-header #game-sound-toggle { min-width:44px; width:44px; min-height:44px; }
#game-sound-toggle small { font-size:8px; white-space:nowrap; }
#game-sound-toggle[aria-pressed="false"] { color:#8a392b; }
.home-sound { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:54px; min-height:54px; }
.home-sound small { font-size:8px; white-space:nowrap; }

/* Duke's cozy home: the existing character and controls in a warm, readable room. */
.screen--home[data-scene] .home-room { background-image:url('public/home/room.webp'); background-position:center 55%; background-size:cover; background-color:#e4bb7c; }
.screen--home[data-scene]::after { background:linear-gradient(180deg,#63401b20,transparent 25%,#f4dbab22 55%,#f6e3c1 90%); }
.screen--home .home-content { width:min(100%,480px); min-height:100dvh; padding: max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)); }
.screen--home .home-header { min-height:58px; align-items:center; }
.screen--home .home-brand { width:154px; padding:3px 12px; background:#183c45e8; border:1px solid #e9cb86; border-radius:16px; filter:none; box-shadow:0 3px 7px #452c2520; }
.screen--home .home-header #open-settings { top:4px; border:1px solid #e2be81; background:#fff5e5; color:#173453; border-radius:15px; }
.screen--home .home-sound { top:2px; background:#fff5e5; color:#173453; border:1px solid #e2be81; border-radius:15px; }
.screen--home .home-title { margin:12px 0 0; }
.screen--home .home-title-duke { font-size:clamp(68px,20vw,88px); }
.screen--home .home-title-blocks { font-size:clamp(26px,7vw,32px); }
.screen--home .home-character-stage { height:clamp(220px,34dvh,350px); min-height:220px; flex:1 0 220px; }
.home-door-sign { position:absolute; top:14px; left:0; z-index:2; display:flex; align-items:center; gap:7px; padding:7px 10px; background:#fff7e9f5; border:1px solid #d1a262; border-radius:12px; color:#173453; box-shadow:0 3px 0 #a67643; transform:rotate(-4deg); pointer-events:none; }
.home-door-sign img { width:29px; height:34px; }
.home-door-sign span { font-size:11px; font-weight:900; letter-spacing:.6px; }
.home-door-sign small { display:block; font-size:9px; font-weight:700; letter-spacing:0; color:#6a5b46; }
.screen--home .home-duke-button { inset:32px 0 16px; width:88%; }
.screen--home .home-blocks { left:5%; right:5%; bottom:6px; }
.screen--home .home-footer { padding:10px 12px 8px; border:1px solid #fff8e8; border-radius:25px; background:linear-gradient(145deg,#fffaf1f7,#f8e4bff7); box-shadow:0 6px 20px #5b3c1c25,inset 0 1px #fff; }
.screen--home[data-scene] :is(#home-speech,.home-world,.home-progress) { color:#173453; text-shadow:none; }
.screen--home #home-speech { margin:0 0 9px; font-size:12px; }
.screen--home #continue-button { min-height:53px; font-size:25px; border-radius:16px; }
.screen--home .home-world { margin:12px 0 1px; font-size:15px; }
.screen--home .home-progress { margin-bottom:5px; font-size:10px; }
.screen--home .opening-replay { margin:5px auto 1px; padding:7px 13px; font-size:11px; }
.screen--home .home-record-link { color:#466365; font-size:11px; padding:3px 8px 6px; }
.screen--home[data-scene] .bottom-nav { background:#f0dfbc; border:1px solid #d8c29c; border-radius:16px; box-shadow:none; padding:3px; }
.screen--home[data-scene] .bottom-nav button { color:#37534d; min-height:54px; border-radius:12px; font-size:11px; }
.screen--home[data-scene] .bottom-nav button.is-current { background:#fff8e9; color:#173453; box-shadow:0 2px 4px #63491b20; }
.screen--home .bottom-nav img { width:36px; height:31px; }
@media(max-height:740px) {
 .screen--home .home-content { padding-top:8px; }
 .screen--home .home-header { min-height:50px; }
 .screen--home .home-brand { width:135px; }
 .screen--home .home-title { margin-top:6px; }
 .screen--home .home-title-duke { font-size:64px; }
 .screen--home .home-title-blocks { font-size:25px; margin-top:5px; }
 .screen--home .home-character-stage { min-height:155px; height:24dvh; flex-basis:155px; }
 .home-door-sign { top:7px; padding:5px 7px; }
 .home-door-sign img { width:23px; height:28px; }
 .screen--home .home-duke-button { top:16px; bottom:10px; }
 .screen--home .home-footer { padding:8px 10px 6px; }
 .screen--home #continue-button { min-height:46px; font-size:23px; }
 .screen--home .home-world { margin-top:8px; }
 .screen--home .bottom-nav button { min-height:49px; }
}
@media(max-height:600px) {
 .screen--home .home-character-stage { min-height:130px; height:130px; flex-basis:130px; }
 .screen--home .home-title-duke { font-size:58px; }
 .screen--home .home-title-blocks { font-size:23px; }
 .screen--home .home-footer { padding-top:6px; }
}