:root {
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --ink: #2d2442;
  --muted: #756b8c;
  --panel: rgba(255, 255, 255, .9);
  --line: rgba(78, 54, 109, .16);
  --accent: #8f58db;
  --accent2: #e48a4d;
  --mint: #4eaf91;
  --gold: #f2b83d;
  --danger: #d8485c;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0, #fff0c4, transparent 30%),
    radial-gradient(circle at 86% 8%, #ffd9ef, transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(143, 88, 219, .24), transparent 34%),
    linear-gradient(145deg, #fbf7ff, #efe6ff 62%, #fff4e8);
  overscroll-behavior: none;
}

button,
a,
select { font: inherit; }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.hidden { display: none !important; }

.pair-app { min-height: 100svh; }

.home-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.home-card {
  width: min(1240px, 100%);
  padding: clamp(18px, 4vw, 38px);
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 250, 244, .86)),
    var(--panel);
  box-shadow: 0 30px 80px rgba(73, 46, 93, .17);
  backdrop-filter: blur(18px);
}

.top-row,
.play-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.small-btn,
.secondary-btn {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}

.reset-btn {
  border-color: rgba(216, 72, 92, .2);
  background: #fff5f6;
  color: #9d3a49;
}

.primary-btn {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(143, 88, 219, .25);
}

.brand-lockup {
  display: grid;
  place-items: center;
  margin: 18px 0 8px;
}

.brand-lockup img {
  width: 88px;
  height: 88px;
  border-radius: 25px;
  box-shadow: 0 14px 30px rgba(97, 58, 162, .24);
}

.brand-lockup span {
  margin-top: 10px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-card h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(2.6rem, 7vw, 5.3rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.lead {
  max-width: 850px;
  margin: 14px auto 12px;
  color: var(--muted);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.17rem);
  line-height: 1.5;
}

.device-note {
  width: min(760px, 100%);
  margin: 0 auto 18px;
  padding: 10px 14px;
  border: 1px solid rgba(78, 175, 145, .2);
  border-radius: 999px;
  background: rgba(241, 251, 245, .82);
  color: #4a7d68;
  text-align: center;
  font-size: .88rem;
  font-weight: 900;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px auto 18px;
  width: min(980px, 100%);
}

.mode-card {
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, .9), transparent 34%),
    linear-gradient(145deg, #fff, #f6edff);
  box-shadow: 0 16px 38px rgba(62, 42, 86, .11);
  color: var(--ink);
  text-align: left;
  display: grid;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mode-card:hover,
.mode-card.active {
  transform: translateY(-3px);
  border-color: rgba(143, 88, 219, .35);
  box-shadow: 0 22px 50px rgba(82, 51, 124, .16);
}

.mode-card.active { background: linear-gradient(145deg, #fbf4ff, #fff1df); }
.mode-icon { font-size: 2.1rem; }
.mode-card strong { font-size: 1.2rem; letter-spacing: -.03em; }
.mode-card small { color: var(--muted); font-size: .88rem; line-height: 1.4; }

.progress-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 18px 0;
}

.progress-strip div,
.stat-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.progress-strip span,
.stat-grid span {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.progress-strip strong,
.stat-grid strong { display: block; margin-top: 4px; font-size: 1.24rem; }

.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(143, 88, 219, .16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0, rgba(242, 184, 61, .22), transparent 34%),
    rgba(255, 255, 255, .58);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.feature-panel h2 { margin: 0 0 5px; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.04em; }
.feature-panel p:last-child { margin: 0; color: var(--muted); line-height: 1.45; }

.showcase-tray {
  position: relative;
  width: 236px;
  min-height: 132px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .95), transparent 28%),
    linear-gradient(145deg, rgba(143, 88, 219, .16), rgba(228, 138, 77, .18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .76), 0 16px 36px rgba(68, 45, 96, .12);
  overflow: hidden;
}

.showcase-tray::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 16px;
  border-radius: 999px;
  background: rgba(83, 54, 103, .14);
}

.showcase-card {
  position: absolute;
  width: 58px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #8f58db, #e48a4d);
  box-shadow: 0 12px 24px rgba(68, 45, 96, .19);
  color: white;
  font-size: 1.65rem;
  transform: rotate(-8deg);
}

.showcase-card:first-child { left: 22px; top: 25px; }
.showcase-card.open { left: 88px; top: 16px; background: linear-gradient(145deg, #fff, #f7edff); color: var(--ink); transform: rotate(4deg); animation: gentleFloat 2.4s ease-in-out infinite alternate; }
.showcase-card.delay { left: 148px; top: 29px; transform: rotate(10deg); animation-delay: -.75s; }
.showcase-cat { position: absolute; left: 98px; bottom: 13px; z-index: 1; font-size: 2.25rem; animation: catBob .9s ease-in-out infinite alternate; }

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.promise-grid div {
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(78, 54, 109, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 10px 26px rgba(74, 49, 91, .07);
}

.promise-grid strong,
.promise-grid span { display: block; }
.promise-grid strong { font-size: .94rem; }
.promise-grid span { margin-top: 5px; color: var(--muted); font-size: .8rem; line-height: 1.35; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.level-card {
  position: relative;
  min-height: 202px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 246, 236, .9));
  box-shadow: 0 12px 32px rgba(76, 52, 92, .1);
  overflow: hidden;
  text-align: left;
}

.level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--room-a, #8f58db), var(--room-b, #e48a4d));
}

.level-card.daily-card {
  grid-column: 1 / -1;
  min-height: 224px;
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at 88% 16%, rgba(242, 184, 61, .28), transparent 26%),
    radial-gradient(circle at 14% 80%, rgba(143, 88, 219, .18), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 246, 236, .92));
}

.level-card.locked { opacity: .55; filter: grayscale(.15); cursor: not-allowed; }
.level-card .num { display: inline-block; padding: 6px 9px; border-radius: 999px; background: #f1e8ff; color: #6a43ad; font-size: .68rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.level-card .icon { display: block; margin: 12px 0 7px; font-size: 2.45rem; }
.level-card h3 { margin: 0; font-size: 1.12rem; }
.level-card p { margin: 7px 0 16px; color: var(--muted); font-size: .86rem; line-height: 1.36; }
.level-card .card-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; color: #a26826; font-size: .82rem; font-weight: 950; }

.play-screen {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.play-header {
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 22px;
  background: rgba(255, 250, 246, .94);
  box-shadow: 0 12px 30px rgba(74, 49, 91, .12);
}

.room-title { min-width: 0; text-align: center; }
.room-title strong,
.room-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title span { color: var(--muted); font-size: .78rem; }

.helper-btn:not(:disabled) {
  border-color: rgba(224, 125, 98, .35);
  background: #fff3e4;
  color: #714426;
}

.play-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 10px;
}

.side-panel,
.table-wrap {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 26px;
  background: rgba(255, 250, 246, .94);
  box-shadow: 0 16px 42px rgba(74, 49, 91, .13);
  overflow: hidden;
}

.side-panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }

.audio-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.audio-controls .small-btn {
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .76);
  font-size: .74rem;
}

.small-btn[aria-pressed="false"] {
  background: rgba(78, 54, 109, .08);
  color: #776a89;
}

.cat-meter {
  padding: 11px;
  border: 1px solid rgba(78, 175, 145, .24);
  border-radius: 17px;
  background: #f1fbf5;
}

.cat-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.cat-stack { display: flex; min-width: 55px; }
.cat-stack b { display: block; font-size: 1.45rem; line-height: 1; animation: catBob .8s ease-in-out infinite alternate; }
.cat-stack b + b { margin-left: -7px; animation-delay: -.35s; }
.cat-copy strong,
.cat-copy small { display: block; }
.cat-copy strong { font-size: .82rem; }
.cat-copy small { margin-top: 2px; color: var(--muted); font-size: .67rem; line-height: 1.25; }
.meter-track { height: 9px; margin-top: 9px; border-radius: 999px; overflow: hidden; background: rgba(67, 42, 79, .11); }
.meter-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--gold), var(--danger)); transition: width .25s ease; }

.cat-coach {
  padding: 11px;
  border: 1px solid rgba(143, 88, 219, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0, rgba(242, 184, 61, .24), transparent 34%),
    #fbf4ff;
  color: #5b4384;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cat-coach img {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  box-shadow: 0 9px 18px rgba(80, 50, 111, .16);
}

.cat-coach strong,
.cat-coach small { display: block; }
.cat-coach strong { font-size: .82rem; }
.cat-coach small { margin-top: 3px; color: #77618f; font-size: .73rem; line-height: 1.28; }

.cat-coach.pop { animation: coachPop .34s ease; }

.helper-box {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 17px;
  background: #fff1df;
  color: #7b5429;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.helper-box > span:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: white;
  font-size: 1.4rem;
}

.helper-box strong,
.helper-box small,
.pantry-tip strong,
.pantry-tip span { display: block; }
.helper-box small { margin-top: 2px; color: #8b6b49; font-size: .72rem; line-height: 1.25; }

.collection-strip {
  padding: 11px;
  border: 1px solid rgba(78, 54, 109, .12);
  border-radius: 17px;
  background: rgba(255, 255, 255, .68);
}

.collection-strip strong {
  display: block;
  margin-bottom: 8px;
  color: #6b5a83;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#collectionStrip {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#collectionStrip span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f6edff);
  box-shadow: 0 7px 14px rgba(63, 42, 86, .1);
  font-size: 1.18rem;
}

#collectionStrip span.empty {
  background: rgba(86, 60, 114, .08);
  box-shadow: inset 0 0 0 1px rgba(86, 60, 114, .07);
  color: transparent;
}

.pantry-tip {
  margin-top: auto;
  padding: 13px;
  border-radius: 18px;
  background: #f5eaff;
  color: #60449b;
}

.pantry-tip span { margin-top: 5px; color: #756b8c; font-size: .8rem; line-height: 1.35; }

.table-wrap { padding: 10px; background: linear-gradient(145deg, #f8e9ff, #fff4df); }

.pantry-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  border: 5px solid rgba(255, 255, 255, .84);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .55), transparent 24%),
    linear-gradient(180deg, var(--room-a, #f2dcff), var(--room-b, #ffe6c6));
  box-shadow: inset 0 0 0 2px rgba(99, 65, 134, .08);
}

.shelf-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shelf-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 31%;
  background: linear-gradient(180deg, rgba(145, 86, 55, .26), rgba(100, 62, 46, .36));
  border-top: 5px solid rgba(255, 255, 255, .5);
}
.shelf-scene::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 9%;
  height: 16px;
  border-radius: 999px;
  background: rgba(103, 65, 50, .22);
  box-shadow: 0 88px rgba(103, 65, 50, .16), 0 176px rgba(103, 65, 50, .12);
}

.shelf-label {
  position: absolute;
  left: 4%;
  top: 4%;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #6a4e83;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pantry-cat,
.rolling-yarn {
  position: absolute;
  z-index: 1;
  bottom: 7%;
  line-height: 1;
  filter: drop-shadow(0 8px 5px rgba(65, 44, 75, .24));
}
.pantry-cat { font-size: 4rem; }
.pantry-cat-one { left: 4%; animation: pantryCatOne 7s ease-in-out infinite alternate; }
.pantry-cat-two { right: 7%; transform: scaleX(-1); animation: pantryCatTwo 6.2s ease-in-out infinite alternate; }
.rolling-yarn { left: 45%; font-size: 2.1rem; animation: yarnRoll 4.5s ease-in-out infinite alternate; }

.card-board {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(82px, 1fr));
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
  gap: clamp(9px, 1.6vw, 16px);
  align-content: stretch;
  padding: clamp(18px, 3vw, 38px);
}

.pair-card {
  position: relative;
  width: min(100%, 260px);
  height: auto;
  min-height: 0;
  max-height: 170px;
  aspect-ratio: 5 / 3;
  justify-self: center;
  align-self: center;
  border: 0;
  border-radius: 20px;
  background: transparent;
  perspective: 900px;
  touch-action: manipulation;
}

.card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}

.pair-card.flipped .card-inner,
.pair-card.matched .card-inner,
.pair-card.peek .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  backface-visibility: hidden;
  box-shadow: 0 14px 28px rgba(51, 35, 70, .18);
  overflow: hidden;
}

.card-back {
  border: 1px solid rgba(255, 255, 255, .84);
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, .85), transparent 22%),
    linear-gradient(145deg, #8f58db, #e48a4d);
}

.card-back::before {
  content: "🐾";
  width: 54%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  background: rgba(255, 255, 255, .22);
  color: white;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
}

.card-front {
  transform: rotateY(180deg);
  border: 1px solid rgba(255, 255, 255, .86);
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .9), transparent 30%),
    linear-gradient(145deg, #fffaf4, #f3eaff);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.card-front span {
  display: grid;
  place-items: center;
  width: min(62%, 86px);
  aspect-ratio: 1;
  border-radius: 28%;
  background: white;
  box-shadow: 0 8px 18px rgba(63, 42, 86, .13);
  font-size: clamp(1.85rem, 4vw, 3rem);
}

.card-front small {
  position: static;
  display: block;
  max-width: 100%;
  color: #6a547d;
  font-size: clamp(.58rem, 1.4vw, .76rem);
  font-weight: 950;
  text-align: center;
  line-height: 1.15;
}

.pair-card.matched .card-face {
  box-shadow: 0 0 0 4px rgba(78, 175, 145, .22), 0 12px 24px rgba(51, 35, 70, .12);
}
.pair-card.matched .card-front { background: linear-gradient(145deg, #f1fbf5, #fff8df); }
.pair-card.mismatch .card-inner { animation: cardNope .42s ease; }
.pair-card.peek .card-face { box-shadow: 0 0 0 5px rgba(242, 184, 61, .25), 0 14px 28px rgba(51, 35, 70, .18); }
.card-board.sparkle .pair-card.matched:last-child .card-front { animation: matchGlow .62s ease; }
.pantry-stage.celebrate .pantry-cat { animation-duration: .34s; }
.pantry-stage.annoyed { animation: roomBump .34s ease; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(39, 28, 55, .58);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(560px, 100%);
  max-height: calc(100svh - 36px);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0, #fff0bf, transparent 34%),
    linear-gradient(145deg, #fffaf4, #f8edff);
  text-align: center;
  box-shadow: 0 30px 80px rgba(41, 25, 18, .35);
}

.modal-face { font-size: 3.35rem; }
.modal-card h2 { margin: 4px 0; font-size: clamp(1.8rem, 5vw, 2.7rem); letter-spacing: -.045em; }
.modal-card p { color: var(--muted); line-height: 1.45; }
.how-list { display: grid; gap: 8px; margin: 16px 0 20px; padding: 0; list-style: none; text-align: left; }
.how-list li { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 9px 10px; border: 1px solid rgba(78, 54, 109, .12); border-radius: 15px; background: rgba(255, 255, 255, .74); color: #58496f; font-weight: 850; line-height: 1.3; }
.how-list li::before { content: "🐾"; }
.stars { min-height: 34px; color: var(--gold); font-size: 1.9rem; letter-spacing: .07em; filter: drop-shadow(0 2px 1px rgba(111, 61, 19, .2)); }
.result-badge { margin: 12px 0; padding: 12px; border-radius: 18px; background: #f3eaff; color: #5f438e; font-weight: 900; }
.modal-actions { display: flex; gap: 9px; justify-content: center; }
.modal-actions button { min-width: 160px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70;
  transform: translate(-50%, 18px);
  opacity: 0;
  max-width: calc(100vw - 28px);
  padding: 10px 15px;
  border-radius: 999px;
  background: #35283f;
  color: white;
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  transition: .18s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes catBob { to { transform: translateY(-3px) rotate(5deg); } }
@keyframes gentleFloat { to { transform: translateY(-6px) rotate(7deg); } }
@keyframes coachPop { 40% { transform: scale(1.025); } }
@keyframes pantryCatOne { 0% { transform: translateX(0) rotate(-3deg); } 45% { transform: translateX(120px) translateY(-10px) rotate(5deg); } 100% { transform: translateX(220px) rotate(-1deg); } }
@keyframes pantryCatTwo { 0% { transform: scaleX(-1) translateX(0) rotate(2deg); } 55% { transform: scaleX(-1) translateX(95px) translateY(-8px) rotate(-4deg); } 100% { transform: scaleX(-1) translateX(190px) rotate(3deg); } }
@keyframes yarnRoll { 0% { transform: translateX(-100px) rotate(0); } 100% { transform: translateX(120px) rotate(360deg); } }
@keyframes cardNope { 30% { transform: translateX(-6px); } 65% { transform: translateX(6px); } }
@keyframes matchGlow { 50% { box-shadow: 0 0 0 8px rgba(78, 175, 145, .24), 0 18px 34px rgba(51, 35, 70, .14); } }
@keyframes roomBump { 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }

@media (max-width: 1020px) {
  .mode-grid,
  .level-grid { grid-template-columns: 1fr 1fr; }
  .play-screen { height: 100svh; overflow: hidden; }
  .play-layout { height: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .side-panel { order: 1; max-height: 28svh; overflow: auto; }
  .table-wrap { order: 2; min-height: 0; height: 100%; }
  .card-board { grid-template-columns: repeat(var(--cols-tablet, var(--cols, 4)), minmax(70px, 1fr)); grid-template-rows: repeat(var(--rows-tablet, var(--rows, 3)), minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .home-card { border-radius: 24px; padding: 16px; }
  .top-row { align-items: flex-start; }
  .top-actions { flex-direction: column; align-items: stretch; }
  .small-btn { min-height: 38px; padding: 7px 9px; font-size: .72rem; }
  .brand-lockup img { width: 72px; height: 72px; border-radius: 20px; }
  .home-card h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); }
  .lead { font-size: .92rem; }
  .device-note { border-radius: 16px; font-size: .78rem; }
  .mode-grid,
  .level-grid,
  .progress-strip,
  .feature-panel { grid-template-columns: 1fr; }
  .mode-card { min-height: 0; }
  .feature-panel { text-align: center; }
  .showcase-tray { justify-self: center; width: min(236px, 100%); }
  .promise-grid { grid-template-columns: 1fr; }
  .play-screen { height: 100svh; min-height: 0; overflow: hidden; gap: 6px; grid-template-rows: auto minmax(0, 1fr); padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .play-header { min-height: 50px; }
  .room-title span { display: none; }
  .play-layout { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .side-panel { max-height: none; overflow: visible; padding: 6px; gap: 5px; border-radius: 17px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .stat-grid div { padding: 6px 2px; border-radius: 10px; }
  .stat-grid span { font-size: .45rem; letter-spacing: .04em; }
  .stat-grid strong { font-size: .78rem; }
  .audio-controls { gap: 5px; }
  .audio-controls .small-btn { min-height: 34px; font-size: .65rem; padding: 5px 6px; }
  .cat-meter,
  .collection-strip,
  .pantry-tip { display: none; }
  .cat-coach,
  .helper-box { border-radius: 13px; padding: 7px; }
  .cat-coach { display: none; }
  .helper-box { min-height: 42px; grid-template-columns: auto 1fr; }
  .helper-box > span:first-child { width: 30px; height: 30px; border-radius: 10px; font-size: 1rem; }
  .helper-box strong { font-size: .72rem; }
  .cat-copy small,
  .cat-coach small,
  .helper-box small,
  .pantry-tip span { font-size: .62rem; }
  .cat-coach { grid-template-columns: 38px minmax(0, 1fr); }
  .cat-coach img { width: 38px; height: 38px; border-radius: 12px; }
  #collectionStrip span { width: 28px; height: 28px; border-radius: 9px; font-size: .95rem; }
  .table-wrap { min-height: 0; height: 100%; padding: 4px; border-radius: 18px; }
  .pantry-stage { border-width: 3px; border-radius: 17px; }
  .shelf-label { font-size: .52rem; }
  .pantry-cat { font-size: 2.55rem; }
  .rolling-yarn { font-size: 1.45rem; }
  .card-board { grid-template-columns: repeat(var(--cols-phone, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-phone, 3), minmax(0, 1fr)); gap: 5px; padding: 17px 6px 6px; }
  .pair-card { width: 100%; height: 100%; max-height: 78px; aspect-ratio: auto; border-radius: 12px; }
  .card-front { padding: 6px; }
  .card-front span { width: 58%; max-width: 44px; font-size: clamp(1.35rem, 8vw, 2.35rem); }
  .card-front small { display: none; }
  .modal-card { padding: 18px; }
  .modal-actions { flex-direction: column; }
  .modal-actions button { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .play-header .small-btn { font-size: .64rem; padding: 5px 6px; }
  .room-title strong { font-size: .78rem; }
  .card-board { grid-template-columns: repeat(var(--cols-small, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-small, 3), minmax(0, 1fr)); gap: 4px; padding: 15px 5px 5px; }
  .pair-card { max-height: 68px; border-radius: 11px; }
  .card-front span { font-size: clamp(1.15rem, 7vw, 2rem); }
}

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