:root {
  --clay: #b7573f;
  --mortar: #858585;
  --gold: #d7a83f;
  --ink: #44352e;
  --soft-ink: #6b5a4d;
  --paper: #eadfcf;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: ui-rounded, "sf pro rounded", "avenir next", system-ui, -apple-system, blinkmacsystemfont, "segoe ui", sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

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

button {
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

button:active,
.pressing {
  transform: scale(0.97);
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

.splash-screen,
.screen,
.onboarding-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.splash-screen {
  display: grid;
  place-items: center;
  background: #eadfcf;
  transition: opacity 0.45s ease;
}

.splash-screen img {
  width: min(84vw, 430px);
  max-height: 84vh;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgb(98 70 47 / 0.16));
}

.nav-title {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 900;
  color: rgb(57 45 39 / 0.76);
  letter-spacing: 0;
  pointer-events: none;
}

.tab-bar {
  position: absolute;
  left: 50%;
  bottom: max(10px, var(--safe-bottom));
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(430px, calc(100vw - 22px));
  padding: 8px;
  gap: 4px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 0.36);
  border-radius: 24px;
  background: rgb(250 245 234 / 0.78);
  box-shadow: 0 18px 34px rgb(52 39 31 / 0.18);
  backdrop-filter: blur(18px);
}

.tab-button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 48px;
  border-radius: 18px;
  color: #675248;
  font-size: 11px;
  font-weight: 900;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.tab-button .tab-icon {
  font-size: 18px;
  line-height: 1;
}

.tab-button.active {
  color: #4c342b;
  background: rgb(127 81 61 / 0.16);
}

.toast-stack {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.toast {
  max-width: calc(100vw - 28px);
  padding: 11px 16px;
  border-radius: 999px;
  color: #4a342d;
  font-size: 15px;
  font-weight: 900;
  background: rgb(250 247 239 / 0.78);
  box-shadow: 0 16px 30px rgb(0 0 0 / 0.14);
  backdrop-filter: blur(18px);
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sky-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgb(255 255 255 / 0.38), transparent 230px),
    linear-gradient(#8ec7ed 0%, #c7e5ee 52%, #f4d7b0 73%, #7fb56c 73%, #4f8f4e 88%, #356e3d 100%);
}

.sky-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 220px;
  height: 2px;
  background: rgb(255 255 255 / 0.22);
  filter: blur(1px);
}

.cloud {
  position: absolute;
  width: 165px;
  height: 72px;
  opacity: 0.86;
  filter: blur(0.4px);
  animation: cloud-drift 22s ease-in-out infinite alternate;
}

.cloud::before,
.cloud::after,
.cloud .puff {
  content: "";
  position: absolute;
  display: block;
  background: rgb(255 255 255 / 0.82);
}

.cloud::before {
  left: 8px;
  bottom: 2px;
  width: 150px;
  height: 46px;
  border-radius: 999px;
}

.cloud::after {
  left: 54px;
  top: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
}

.cloud .puff {
  left: 0;
  top: 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.cloud .puff:nth-child(2) {
  left: 118px;
  top: 25px;
  width: 54px;
  height: 54px;
  opacity: 0.85;
}

.cloud-a {
  left: calc(50% - 225px);
  top: 96px;
  transform: scale(1.1);
}

.cloud-b {
  left: calc(50% + 46px);
  top: 154px;
  transform: scale(0.78);
  animation-duration: 28s;
}

.cloud-c {
  left: calc(50% - 24px);
  top: 42px;
  transform: scale(1.35);
  opacity: 0.64;
  animation-duration: 32s;
}

@keyframes cloud-drift {
  from {
    translate: -15px 4px;
  }
  to {
    translate: 18px -5px;
  }
}

.wall-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.inventory-dock {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  z-index: 35;
  display: flex;
  gap: 12px;
  padding: 10px;
  transform: translateX(-50%);
  border-radius: 22px;
  background: rgb(252 247 238 / 0.58);
  box-shadow: 0 18px 32px rgb(0 0 0 / 0.14);
  backdrop-filter: blur(18px);
}

.inventory-dock.lesson {
  bottom: calc(12px + var(--safe-bottom));
}

.dock-item {
  display: grid;
  gap: 7px;
  justify-items: center;
}

.dock-label {
  color: #675248;
  font-size: 12px;
  font-weight: 900;
}

.pallet {
  position: relative;
  width: 148px;
  height: 74px;
  border-radius: 12px;
  background: #b98d64;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}

.pallet::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 4px;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #806047 0 38px, transparent 38px 56px, #806047 56px 94px);
}

.pallet-grid {
  position: absolute;
  inset: 10px 11px;
  display: grid;
  grid-template-columns: repeat(4, 29px);
  grid-auto-rows: 15px;
  gap: 5px;
}

.pallet-slot {
  width: 29px;
  height: 15px;
  border: 1px solid rgb(122 91 67 / 0.26);
  border-radius: 3px;
}

.brick-token {
  position: relative;
  border-radius: 5px;
  background: var(--brick-color, var(--clay));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.13);
}

.brick-token::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
}

.brick-token.gold {
  background: linear-gradient(135deg, #b98025, #f3d46f 55%, #c6912e);
}

.brick-token.gold::before {
  background: rgb(255 255 255 / 0.34);
}

.bucket {
  position: relative;
  width: 92px;
  height: 74px;
}

.bucket-shell,
.bucket-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  height: 74px;
  clip-path: polygon(16% 12%, 84% 12%, 72% 95%, 28% 95%);
}

.bucket-shell {
  background: #c8d0d1;
  box-shadow: inset 0 0 0 3px #627170;
}

.bucket-fill {
  height: var(--fill-height, 0px);
  background: var(--mortar-color, var(--mortar));
  transition: height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bucket-fill::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 2px;
  height: 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
}

.bucket-rim {
  position: absolute;
  left: 9px;
  top: 11px;
  width: 74px;
  height: 7px;
  border-radius: 5px;
  background: #71807d;
}

.bucket-bubbles {
  position: absolute;
  left: 30px;
  bottom: 32px;
  display: flex;
  gap: 8px;
}

.bucket-bubbles i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}

.drag-preview {
  position: fixed;
  z-index: 100;
  width: 88px;
  height: 42px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.24));
}

.mortar-drag {
  width: 84px;
  height: 28px;
  border-radius: 12px;
  background: var(--mortar-color, var(--mortar));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.09);
}

.mortar-drag::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.28);
}

.pending-controls {
  position: fixed;
  z-index: 45;
  display: flex;
  gap: 12px;
  transform: translate(-50%, -100%);
}

.round-action {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #6b4d43;
  font-size: 22px;
  font-weight: 900;
  background: rgb(255 255 255 / 0.62);
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.16);
  backdrop-filter: blur(16px);
}

.round-action.confirm {
  width: 52px;
  height: 52px;
  color: #fff;
  background: #6d8f54;
}

.lesson-card {
  position: absolute;
  top: calc(var(--safe-top) + 24px);
  left: 50%;
  z-index: 42;
  width: min(360px, calc(100vw - 32px));
  padding: 12px 18px;
  transform: translateX(-50%);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 14px 24px rgb(0 0 0 / 0.1);
  text-align: center;
  backdrop-filter: blur(18px);
}

.lesson-card h2 {
  margin: 0 0 6px;
  color: #4c392f;
  font-size: 20px;
  font-weight: 900;
}

.lesson-card p {
  margin: 0;
  color: #5d6d5b;
  font-size: 14px;
  font-weight: 900;
}

.brick-game-bg,
.shop-bg,
.mortar-bg {
  position: absolute;
  inset: 0;
}

.brick-game-bg {
  background:
    radial-gradient(circle at 22% 78%, rgb(109 63 49 / 0.2), transparent 210px),
    linear-gradient(#f0d5af, #d9a672 55%, #a66145);
}

.brick-game-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: radial-gradient(#7d4c35 1.2px, transparent 1.2px);
  background-size: 21px 29px;
  mix-blend-mode: multiply;
}

.mortar-bg {
  background:
    radial-gradient(circle at 10% 10%, rgb(243 232 207 / 0.28), transparent 190px),
    linear-gradient(#d2d8d2, #8fa093 56%, #5f7669);
}

.shop-bg {
  background:
    radial-gradient(circle at 88% 8%, rgb(255 255 255 / 0.28), transparent 180px),
    linear-gradient(#e9ddcb, #d6c3aa 58%, #9fb989);
}

.content-screen {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: calc(var(--safe-top) + 12px) 16px calc(82px + var(--safe-bottom));
}

.content-screen.brick-game {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.3vh, 13px);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--safe-top) + 8px) 14px calc(78px + var(--safe-bottom));
}

.brick-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brick-header .pallet {
  flex: 0 0 auto;
  transform: scale(0.88);
  transform-origin: left center;
}

.screen-heading {
  margin: 0;
  color: #6f4334;
  font-size: clamp(22px, 3.8vh, 28px);
  font-weight: 1000;
}

.word-board {
  flex: 0 1 auto;
  display: grid;
  gap: clamp(4px, 0.8vh, 6px);
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 0 2px;
}

.word-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(4px, 1vw, 7px);
}

.word-tile {
  display: grid;
  place-items: center;
  height: clamp(28px, 5svh, 44px);
  min-width: 0;
  border: 1.4px solid rgb(185 148 115 / 0.36);
  border-radius: 7px;
  color: #5e4438;
  font-size: clamp(16px, 3.1svh, 23px);
  font-weight: 1000;
  background: rgb(255 255 255 / 0.48);
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.03);
  transition: transform 0.18s ease, background 0.18s ease;
}

.word-tile.absent {
  color: #fff;
  border-color: rgb(0 0 0 / 0.08);
  background: #8f8375;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.12);
}

.word-tile.present {
  color: #fff;
  border-color: rgb(0 0 0 / 0.08);
  background: #c9974c;
}

.word-tile.correct {
  color: #fff;
  border-color: rgb(0 0 0 / 0.08);
  background: #7e9659;
}

.keyboard {
  flex: 0 0 auto;
  display: grid;
  gap: clamp(5px, 0.9vh, 8px);
  margin-top: auto;
  padding-bottom: 2px;
}

.keyboard-row {
  display: flex;
  gap: clamp(3px, 0.9vw, 5px);
  justify-content: center;
}

.key {
  flex: 1 1 0;
  height: clamp(34px, 5.4svh, 46px);
  min-width: 0;
  border-radius: 9px;
  color: #4f382e;
  font-size: clamp(12px, 2.1svh, 15px);
  font-weight: 1000;
  background: #d7bea1;
}

.key.command {
  flex: 1.55 0 52px;
  font-size: 12px;
  background: #b89470;
}

.key.absent {
  color: #fff;
  background: #8f8375;
}

.key.present {
  color: #fff;
  background: #c9974c;
}

.key.correct {
  color: #fff;
  background: #7e9659;
}

.fresh-brick {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 80;
  width: 172px;
  height: 84px;
  transform: translate(-50%, -50%);
  animation: fresh-brick 1.55s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  pointer-events: none;
  filter: drop-shadow(0 20px 24px rgb(0 0 0 / 0.26));
}

@keyframes fresh-brick {
  0% {
    opacity: 0.15;
    transform: translate(-50%, calc(-50% + 54px)) scale(0.72) rotate(3.5deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 78px)) scale(1.08) rotate(-1.5deg);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 78px)) scale(1.08) rotate(-1.5deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 118px)) scale(0.88) rotate(-1.5deg);
  }
}

.failure-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgb(0 0 0 / 0.22);
}

.failure-card {
  width: min(360px, 100%);
  padding: 22px;
  border: 1.4px solid rgb(255 255 255 / 0.34);
  border-radius: 22px;
  background: linear-gradient(135deg, #f5dcc0, #ddb085);
  box-shadow: 0 28px 38px rgb(91 49 40 / 0.28);
  text-align: center;
  animation: pop-in 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.failure-card h2 {
  margin: 8px 0 5px;
  color: #694031;
  font-size: 24px;
  font-weight: 1000;
}

.failure-card p {
  margin: 0;
  color: #85614e;
  font-size: 13px;
  font-weight: 900;
}

.failure-card .answer {
  margin: 2px 0 18px;
  color: #4f352b;
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: 3px;
}

.primary-button {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  color: #fff3df;
  font-size: 18px;
  font-weight: 1000;
  background: #9f5a3f;
  box-shadow: 0 12px 18px rgb(125 62 47 / 0.22);
}

.crumbled {
  position: relative;
  width: 188px;
  height: 92px;
  margin: 0 auto;
}

.crumbled i {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: linear-gradient(135deg, #bf6747, #8f4335);
  box-shadow: 0 3px 5px rgb(0 0 0 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.mixer-wrap {
  position: relative;
  width: min(320px, 94vw);
  height: 416px;
  margin: 16px auto 8px;
}

.mixer-drum {
  position: absolute;
  left: 50%;
  top: 0;
  width: 288px;
  height: 296px;
  transform: translateX(-50%);
}

.mixer-stand {
  position: absolute;
  left: 28px;
  top: 158px;
  width: 232px;
  height: 132px;
  border-bottom: 10px solid #52615f;
}

.mixer-stand::before,
.mixer-stand::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 124px;
  border-radius: 999px;
  background: #52615f;
  transform-origin: bottom;
}

.mixer-stand::before {
  left: 40px;
  transform: rotate(25deg);
}

.mixer-stand::after {
  right: 40px;
  transform: rotate(-25deg);
}

.drum-outer {
  position: absolute;
  left: 32px;
  top: 30px;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #a8b3ad, #6d7975 52%, #42514e);
  box-shadow: 0 14px 22px rgb(0 0 0 / 0.24), inset 0 0 0 4px rgb(37 51 47 / 0.28);
  transform: rotate(-8deg);
}

.drum-outer.boosted {
  box-shadow: 0 14px 22px rgb(0 0 0 / 0.24), 0 0 0 7px rgb(232 219 157 / 0.86);
}

.drum-wheel {
  position: absolute;
  left: 50px;
  top: 48px;
  width: 188px;
  height: 188px;
  border: 5px solid #27332f;
  border-radius: 50%;
  overflow: hidden;
  background: #777b72;
  transform: rotate(var(--rotation, 0deg)) rotate(-8deg);
  transition: transform var(--spin-duration, 0ms) cubic-bezier(0.12, 0.82, 0.12, 1);
}

.drum-wheel.spinning .sludge {
  animation-duration: 4s;
}

.sludge {
  position: absolute;
  inset: 0;
  background: #4f5650;
  opacity: 0.88;
  clip-path: polygon(0 72%, 10% 68%, 22% 72%, 35% 66%, 49% 71%, 63% 67%, 78% 72%, 91% 68%, 100% 72%, 100% 100%, 0 100%);
  animation: sludge-wave 7.5s ease-in-out infinite;
}

@keyframes sludge-wave {
  from {
    transform: translateX(-5px) rotate(var(--sludge-tilt, 0deg));
  }
  to {
    transform: translateX(6px) rotate(var(--sludge-tilt, 0deg));
  }
}

.drum-rib {
  position: absolute;
  left: 83px;
  top: 0;
  width: 22px;
  height: 188px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
}

.slot-mark {
  position: absolute;
  left: 80px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  border-radius: 999px;
  color: #dde0d7;
  font-size: 11px;
  font-weight: 1000;
  background: rgb(197 201 189 / 0.34);
  transform-origin: 14px 86px;
}

.slot-mark.respin {
  background: rgb(102 115 110 / 0.62);
}

.slot-mark.spill {
  color: #f1ded0;
  background: rgb(125 81 72 / 0.72);
}

.slot-mark.multiplier {
  color: #f3dd87;
}

.slot-mark.selected {
  box-shadow: 0 0 0 2.5px rgb(255 240 191 / 0.95), 0 0 10px rgb(255 240 191 / 0.45);
  scale: 1.08;
}

.slot-mark.popped {
  animation: winner-pop 0.44s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes winner-pop {
  0%,
  100% {
    scale: 1.08;
  }
  45% {
    scale: 1.28;
  }
}

.mixer-pointer {
  position: absolute;
  left: 123px;
  top: 6px;
  width: 42px;
  height: 54px;
  clip-path: polygon(50% 100%, 10% 0, 90% 0);
  background: #f5ead7;
  filter: drop-shadow(0 4px 7px rgb(0 0 0 / 0.18));
}

.mixer-pointer::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 100%, 10% 0, 90% 0);
  box-shadow: inset 0 0 0 3px #33413d;
}

.drain-pour {
  position: absolute;
  left: 94px;
  top: 232px;
  width: 132px;
  height: 184px;
  pointer-events: none;
}

.drain-spout {
  position: absolute;
  left: 46px;
  top: 0;
  width: 40px;
  height: 28px;
  clip-path: polygon(18% 0, 82% 0, 66% 100%, 34% 100%);
  background: #4e5a56;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.14);
  transform: translateY(-56px);
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.drain-pour.active .drain-spout {
  transform: translateY(38px);
}

.pour-stream {
  position: absolute;
  left: 62px;
  top: 58px;
  width: 8px;
  height: 56px;
  border-radius: 999px;
  background: var(--mortar-color, #858585);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.drain-pour.active.flowing .pour-stream {
  opacity: 0.42;
  transform: translateY(38px);
}

.fall-drop {
  position: absolute;
  left: 62px;
  top: 62px;
  width: 8px;
  height: 15px;
  border-radius: 999px;
  background: var(--mortar-color, #858585);
  opacity: 0;
}

.drain-pour.flowing .fall-drop {
  animation: drop-fall 0.82s ease-in forwards;
}

@keyframes drop-fall {
  0% {
    opacity: 0.96;
    transform: translateY(38px);
  }
  100% {
    opacity: 0.1;
    transform: translateY(96px);
  }
}

.mixer-bucket {
  position: absolute;
  left: 96px;
  top: 304px;
  width: 128px;
  height: 104px;
  display: grid;
  place-items: center;
}

.mixer-copy {
  position: relative;
  z-index: 1;
  margin: 0 auto 14px;
  color: #ece7dc;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}

.mixer-action {
  display: block;
  width: calc(100% - 56px);
  max-width: 380px;
  margin: 0 auto;
  padding: 17px 18px;
  border-radius: 18px;
  color: #f7f0e4;
  font-size: 19px;
  font-weight: 1000;
  background: linear-gradient(135deg, #657b73, #435e59);
  box-shadow: 0 18px 24px rgb(38 57 54 / 0.26);
}

.mixer-action.mixing {
  background: linear-gradient(135deg, #8a8e88, #6c716f);
}

.shop-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: calc(var(--safe-top) + 16px) 16px calc(92px + var(--safe-bottom));
}

.stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.stat-pill {
  flex: 1;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.58);
}

.stat-pill span {
  display: block;
  min-height: 30px;
  color: #6b5a4d;
  font-size: 12px;
  font-weight: 900;
}

.stat-pill strong {
  color: #44352e;
  font-size: 28px;
  font-weight: 1000;
}

.color-section {
  margin-bottom: 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  color: #44352e;
  font-size: 19px;
  font-weight: 1000;
}

.cost-pill {
  padding: 6px 10px;
  border-radius: 999px;
  color: #6b5a4d;
  font-size: 13px;
  font-weight: 900;
  background: rgb(255 255 255 / 0.54);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.swatch {
  position: relative;
  height: 46px;
  border-radius: 8px;
  background: var(--swatch-color);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.62);
}

.swatch.brick {
  background: linear-gradient(135deg, var(--swatch-color), color-mix(in srgb, var(--swatch-color) 78%, black));
}

.swatch.mortar {
  border-radius: 18px;
}

.swatch.selected {
  box-shadow: 0 4px 11px rgb(0 0 0 / 0.18), inset 0 0 0 3px #4d3429;
}

.swatch.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.22);
}

.swatch.locked::before {
  content: "lock";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
}

.swatch.selected:not(.locked)::before {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #3d2f28;
  font-size: 16px;
  font-weight: 1000;
}

.info-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 18px) 22px calc(var(--safe-bottom) + 22px);
  text-align: center;
}

.info-page h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 1000;
}

.info-page p {
  margin: 0;
  max-width: 330px;
  font-size: 16px;
  font-weight: 900;
}

.info-button {
  width: min(360px, 100%);
  padding: 16px;
  border-radius: 18px;
  color: #fff5e6;
  font-size: 18px;
  font-weight: 1000;
  background: linear-gradient(135deg, #825744, #5f4238);
  box-shadow: 0 16px 24px rgb(61 44 38 / 0.24);
}

.word-demo {
  width: min(340px, 100%);
  padding: 16px;
  border: 1.2px solid rgb(255 255 255 / 0.28);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.28);
  box-shadow: 0 18px 28px rgb(107 63 50 / 0.16);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #5d4438;
  font-size: 13px;
  font-weight: 1000;
  background: rgb(255 255 255 / 0.32);
}

.chip i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--chip-color);
}

.onboarding-resource {
  display: flex;
  align-items: center;
  gap: 14px;
}

.onboarding-resource .brick-token {
  width: 92px;
  height: 44px;
  filter: drop-shadow(0 8px 12px rgb(109 63 49 / 0.22));
}

.wobble {
  animation: wobble 0.24s linear;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(7px);
  }
  75% {
    transform: translateX(-4px);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 760px) {
  .tab-bar {
    width: 460px;
  }

  .content-screen,
  .shop-scroll {
    left: 50%;
    width: min(720px, 100%);
    transform: translateX(-50%);
  }

  .wall-canvas {
    cursor: grab;
  }

  .wall-canvas:active {
    cursor: grabbing;
  }
}