:root {
  --cream: #fff1df;
  --paper: #fffaf3;
  --ink: #4c1746;
  --muted: #80616f;
  --purple: #68205d;
  --purple-dark: #4c1746;
  --purple-soft: #e9c9e4;
  --teal: #a9dfc9;
  --teal-dark: #347f6d;
  --peach: #ffad8f;
  --peach-soft: #ffd9c5;
  --line: rgba(76, 23, 70, 0.48);
  --shadow: 0 18px 45px rgba(112, 57, 67, 0.16);
  --radius-lg: 30px;
  --radius-md: 20px;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }

html { min-width: 280px; background: var(--cream); }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 190, 145, 0.28) 0 70px, transparent 71px),
    radial-gradient(circle at 93% 18%, rgba(183, 224, 201, 0.3) 0 92px, transparent 93px),
    repeating-linear-gradient(0deg, rgba(130, 76, 62, 0.025) 0 1px, transparent 1px 5px),
    var(--cream);
}

body.is-dragging {
  cursor: grabbing;
  user-select: none;
  touch-action: none;
}

button { font: inherit; }

.app-shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 40px 24px 28px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 12px;
  text-align: center;
}

.eyebrow, .section-kicker {
  margin: 0 0 6px;
  color: #b36f45;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; color: var(--purple-dark); font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.055em; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.72); }
h2 { margin-bottom: 0; font-size: clamp(1.25rem, 2.7vw, 1.7rem); letter-spacing: -0.035em; }
.hero-brand { min-width: 0; }
.game-logo { display: block; width: min(100%, 510px); height: auto; max-height: 120px; object-fit: contain; object-position: left center; }

.hero-badge {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 5px solid var(--paper);
  border-radius: 35% 65% 58% 42%;
  background: var(--purple-soft);
  box-shadow: 0 12px 22px rgba(91, 75, 155, 0.18);
  transform: rotate(8deg);
}
.badge-star { position: absolute; top: 10px; left: 19px; color: var(--peach); font-size: 2.3rem; }
.badge-dot { position: absolute; right: 15px; bottom: 18px; width: 29px; height: 29px; border: 5px solid var(--paper); border-radius: 50%; background: var(--teal); }
.badge-dot-small { right: 12px; bottom: 49px; width: 12px; height: 12px; border-width: 3px; background: var(--peach); }

.game-card {
  padding: clamp(22px, 4vw, 40px);
  border: 2px solid rgba(255,255,255,0.86);
  border-radius: var(--radius-lg);
  background: rgba(255, 248, 238, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.game-card__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.hint { margin: 2px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; text-align: right; }

.board-area { display: flex; justify-content: center; padding: 58px 0 34px; }
.board-shell { position: relative; width: min(100%, 760px); }
.grid-wrap { position: relative; width: min(78vw, 640px); max-width: calc(100% - 62px); margin-left: 54px; }
.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(91, 75, 155, 0.36);
  border-radius: 17px;
  background: #fff9f0;
  box-shadow: 0 12px 0 rgba(179, 111, 69, 0.09), 0 18px 30px rgba(69, 57, 97, 0.1);
  touch-action: none;
  user-select: none;
}
.cell {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(255, 250, 242, 0.42);
  cursor: crosshair;
  touch-action: none;
}
.cell:nth-child(odd) { background: rgba(255, 255, 255, 0.62); }
.cell:focus-visible { outline: 3px solid var(--peach); outline-offset: -4px; }

.selection {
  position: absolute;
  z-index: 3;
  border: 3px solid #3f9e7a;
  border-radius: 11px;
  background: rgba(143, 221, 187, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 8px 15px rgba(52,127,109,0.16);
  pointer-events: none;
  transition: left 80ms linear, top 80ms linear, width 80ms linear, height 80ms linear;
}
.selection__result {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 94%;
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.resize-handle {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 7px solid var(--paper);
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 3px 0 rgba(203, 107, 72, 0.35), 0 5px 12px rgba(69,57,97,0.2);
  pointer-events: auto;
  cursor: nwse-resize;
  touch-action: none;
}
.resize-handle::after { content: ""; position: absolute; inset: 6px; border: 2px dotted rgba(255,255,255,0.95); border-radius: 50%; }
.resize-handle:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

.axis-corner { position: absolute; left: 11px; top: -2px; color: var(--purple); font-size: 1.7rem; font-weight: 900; }
.axis-label {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--purple-dark);
  background: #b9dfd2;
  box-shadow: 0 4px 10px rgba(91,75,155,0.1);
  font-size: 0.77rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
.axis-label--top { top: 9px; transform: translateX(-50%); }
.axis-label--side { left: 0; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }

.equation-card { margin: 0 auto; padding: 18px 20px; border-radius: var(--radius-md); background: #fff0d7; text-align: center; }
.equation { margin-bottom: 4px; color: var(--ink); font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 900; letter-spacing: 0.02em; }
.explanation { margin-bottom: 0; color: #795c58; font-size: clamp(0.92rem, 2vw, 1.08rem); }
.controls { display: flex; justify-content: center; gap: 12px; padding-top: 22px; }
.control-button { min-height: 48px; padding: 11px 18px; border: 0; border-radius: 999px; color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 rgba(69,57,97,0.13); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.control-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(69,57,97,0.13); }
.control-button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(69,57,97,0.13); }
.control-button:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.control-button--secondary { background: var(--peach); }
.control-button--primary { color: var(--purple-dark); background: #a9dfc9; }
.keyboard-note { margin: 16px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.footer-note { padding: 22px 0 0; color: var(--muted); font-size: 0.84rem; text-align: center; }

.selection.is-rotating { animation: swap-pop 360ms ease both; }
@keyframes swap-pop { 0% { opacity: 0.65; transform: scale(0.97); } 55% { transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 620px) {
  .app-shell { padding: 24px 12px 20px; }
  .hero { padding: 0 5px; }
  .hero-badge { width: 68px; height: 68px; border-width: 4px; }
  .badge-star { top: 7px; left: 13px; font-size: 1.7rem; }
  .badge-dot { right: 10px; bottom: 12px; width: 23px; height: 23px; border-width: 4px; }
  .badge-dot-small { right: 9px; bottom: 38px; width: 10px; height: 10px; border-width: 2px; }
  .game-card__topline { display: block; }
  .hint { margin-top: 10px; text-align: left; }
  .board-area { padding-top: 52px; }
  .grid-wrap { margin-left: 48px; max-width: calc(100% - 54px); }
  .axis-label { font-size: 0.67rem; padding: 3px 7px; }
  .axis-label--side { left: -4px; }
  .controls { flex-direction: column; }
  .control-button { width: 100%; }
}

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

/* Shared navigation and the collector-album pair mode. */
[hidden] { display: none !important; }
.hero { justify-content: space-between; text-align: left; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mode-tabs { display: inline-flex; gap: 4px; padding: 5px; border: 2px solid rgba(255,255,255,0.88); border-radius: 999px; background: rgba(255,250,243,0.7); box-shadow: 0 5px 12px rgba(112,57,67,0.1); }
.mode-tab, .sound-button { min-height: 44px; border: 0; border-radius: 999px; color: var(--purple-dark); background: transparent; font-weight: 900; cursor: pointer; }
.mode-tab { padding: 8px 16px; }
.mode-tab.is-active { color: var(--purple-dark); background: #b9dfd2; box-shadow: 0 3px 0 rgba(52,127,109,0.16); }
.mode-tab:focus-visible, .sound-button:focus-visible, .difficulty-card:focus-visible, .pair-card:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.sound-button { padding: 8px 13px; background: #ffe0cc; box-shadow: 0 4px 0 rgba(203,107,72,0.18); }

.pair-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 2px dashed rgba(104,32,93,0.18); }
.pair-instruction { margin: 8px 0 0; color: var(--muted); font-size: 1rem; }
.pair-status-block { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.round-badge, .progress-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 13px; border-radius: 999px; font-size: 0.84rem; font-weight: 900; white-space: nowrap; }
.round-badge { color: var(--purple-dark); background: #e9c9e4; }
.progress-badge { color: #2f715d; background: #b9dfd2; }
.pair-start { position: relative; max-width: 680px; margin: 38px auto 6px; padding: 28px; border-radius: 24px; background: rgba(255,242,225,0.8); text-align: center; }
.pair-start h3, .pair-complete h3 { margin: 0 0 9px; color: var(--purple-dark); font-size: clamp(1.45rem, 3vw, 2.1rem); }
.pair-start > p:not(.section-kicker) { max-width: 540px; margin: 0 auto; color: var(--muted); line-height: 1.5; }
.start-sticker { position: absolute; top: 15px; right: 22px; color: var(--peach); font-size: 2.4rem; transform: rotate(13deg); }
.difficulty-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.difficulty-card { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 13px 16px; border: 2px solid rgba(255,255,255,0.88); border-radius: 18px; color: var(--purple-dark); background: #fffaf3; box-shadow: 0 6px 0 rgba(104,32,93,0.1); text-align: left; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
.difficulty-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(104,32,93,0.1); }
.difficulty-card__icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--purple); font-size: 1.3rem; }
.difficulty-card:nth-child(2) .difficulty-card__icon { color: var(--purple-dark); background: var(--teal); }
.difficulty-card strong, .difficulty-card small { display: block; }
.difficulty-card strong { font-size: 1rem; }
.difficulty-card small { margin-top: 4px; color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.pair-game { padding-top: 28px; }
.pair-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 46px); max-width: 800px; margin: 0 auto; }
.pair-column { min-width: 0; }
.pair-column h3 { margin: 0 0 12px; color: var(--purple-dark); font-size: 1rem; text-align: center; }
.pair-cards { display: grid; gap: 12px; }
.pair-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 10px 18px; border: 2px solid rgba(104,32,93,0.13); border-radius: 19px; color: var(--ink); background: #fffaf3; box-shadow: 0 7px 0 rgba(104,32,93,0.1), 0 10px 18px rgba(112,57,67,0.07); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 900; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.pair-card:hover:not(:disabled) { transform: translateY(-2px); }
.pair-card.is-selected { border-color: var(--purple); background: #f0d9ed; box-shadow: 0 10px 0 rgba(104,32,93,0.16), 0 12px 20px rgba(104,32,93,0.12); transform: translateY(-4px); }
.pair-card.is-solved { border-color: #68b996; color: #286a57; background: #c8efd9; box-shadow: 0 5px 0 rgba(52,127,109,0.16); cursor: default; }
.pair-card.is-wrong { border-color: #e5925e; background: #ffe0c7; }
.pair-card.is-animating { animation: pair-correct 390ms ease both; }
.pair-card.is-wrong { animation: pair-wrong 400ms ease both; }
.pair-card:disabled { opacity: 1; }
.card-check { position: absolute; right: 12px; color: #378a6b; font-size: 1.3rem; }
.pair-feedback { min-height: 30px; padding-top: 20px; color: var(--purple-dark); font-size: 1rem; font-weight: 800; text-align: center; }
.pair-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.pair-actions .control-button { min-height: 48px; }
.control-button--hint { color: var(--purple-dark); background: #e9c9e4; }
.pair-reset-button { font-size: 0.86rem; }
.pair-complete { display: flex; align-items: center; justify-content: center; gap: 34px; max-width: 780px; margin: 30px auto 0; padding: 28px; border-radius: 24px; background: linear-gradient(145deg, #fff0d7, #f4e2f3); }
.complete-copy { flex: 1 1 350px; }
.complete-total, .complete-first-try { color: var(--muted); font-size: 1.08rem; }
.complete-total strong, .complete-first-try strong { color: var(--purple-dark); }
.completion-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
.maya-character-image { display: block; object-fit: contain; object-position: center center; filter: drop-shadow(0 8px 6px rgba(76,23,70,0.14)); }
.pair-maya-feedback-image { width: 106px; height: 112px; margin: 5px auto 0; }
.maya-result-sticker { display: grid; flex: 0 0 225px; width: 225px; height: 220px; place-items: center; overflow: visible; background: transparent; }
.maya-result-sticker .maya-character-image { width: 225px; height: 220px; }

.hint-dialog-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(76,23,70,0.32); }
.hint-dialog { position: relative; width: min(100%, 430px); padding: 28px; border: 3px solid #fffaf3; border-radius: 28px; background: #fff7e9; box-shadow: 0 20px 60px rgba(76,23,70,0.24); text-align: center; }
.hint-dialog h2 { margin-bottom: 18px; color: var(--purple-dark); }
.dialog-close { position: absolute; top: 11px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--purple-dark); background: #ffd9c5; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mini-hint-board { display: grid; gap: 3px; width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto 15px; padding: 5px; border: 2px solid #3f9e7a; border-radius: 15px; background: #fffaf3; }
.mini-hint-board span { border: 1px solid rgba(76,23,70,0.3); border-radius: 3px; background: #a9dfc9; }
.mini-hint-label { margin-bottom: 5px; color: var(--muted); font-size: 0.96rem; }
.mini-hint-equation { margin-bottom: 0; color: var(--purple-dark); font-size: 1.65rem; font-weight: 900; }

@keyframes pair-correct { 0%, 100% { transform: translateY(-4px) scale(1); } 45% { transform: translateY(-8px) scale(1.045) rotate(-1deg); } 70% { transform: translateY(-3px) scale(0.99) rotate(1deg); } }
@keyframes pair-wrong { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

@media (max-width: 720px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: space-between; }
  .mode-tabs { flex: 1 1 auto; }
  .mode-tab { flex: 1 1 50%; }
  .pair-header { flex-direction: column; }
  .pair-status-block { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .pair-complete { align-items: center; flex-direction: column; text-align: center; }
  .completion-actions { justify-content: center; }
}

@media (max-width: 520px) {
  .difficulty-buttons { grid-template-columns: 1fr; }
  .pair-board { gap: 10px; }
  .pair-card { min-height: 64px; padding-inline: 8px; font-size: 1.22rem; }
  .card-check { right: 7px; }
  .pair-actions { flex-direction: column; }
  .pair-actions .control-button { width: 100%; }
  .maya-result-sticker { flex-basis: 165px; width: 165px; height: 170px; }
  .maya-result-sticker .maya-character-image { width: 165px; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .pair-card.is-animating, .pair-card.is-wrong { animation: none; }
}

/* Collection, packet opening and exchanges. */
.collection-tab { position: relative; }
.unopened-count { display: inline-grid; min-width: 21px; height: 21px; margin-left: 4px; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-size: 0.7rem; vertical-align: middle; }
.collection-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px dashed rgba(104,32,93,0.18); }
.collection-header-actions { display: flex; align-items: center; gap: 12px; }
.collection-sparkle { color: var(--peach); font-size: 2.5rem; transform: rotate(12deg); }
.collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 26px; }
.collection-card { min-width: 0; padding: 10px; border: 2px solid rgba(104,32,93,0.12); border-radius: 20px; color: var(--purple-dark); background: #fffaf3; box-shadow: 0 6px 0 rgba(104,32,93,0.1); cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
.collection-card.rarity-common { border-color: #7dc8a6; }
.collection-card.rarity-uncommon { border-color: #8c78cc; }
.collection-card.rarity-rare { border-color: #e7a447; }
.collection-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(104,32,93,0.12); }
.collection-card strong, .collection-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-card strong { margin-top: 5px; font-size: 0.9rem; }
.collection-card small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.rarity-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin: 4px auto 0; padding: 3px 8px; border: 2px solid currentColor; border-radius: 999px; font-size: 0.68rem; font-weight: 900; line-height: 1; }
.collection-card .rarity-badge { font-size: 0.62rem; }
.rarity-common { color: #398d67; }
.rarity-uncommon { color: #6d55ad; }
.rarity-rare { color: #bd741f; }
.collection-card.is-unknown { background: #f7e9f4; }
.collection-card.is-unknown strong { color: #956a91; }
.creature-image { display: block; object-fit: contain; object-position: center center; }
.collection-art { width: 100%; height: 150px; border-radius: 14px; }
.unknown-art { display: grid; width: 100%; aspect-ratio: 1; place-items: center; border-radius: 14px; color: rgba(104,32,93,0.48); background: #d8bdd8; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; }
.collection-detail-backdrop, .exchange-dialog-backdrop, .reward-dialog-backdrop { position: fixed; z-index: 25; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(76,23,70,0.34); }
.reward-dialog-backdrop { z-index: 30; }
.collection-detail-dialog, .exchange-dialog, .reward-dialog { position: relative; width: min(100%, 470px); max-height: min(90vh, 700px); overflow: auto; padding: 28px; border: 3px solid #fffaf3; border-radius: 30px; background: #fff7e9; box-shadow: 0 20px 60px rgba(76,23,70,0.24); text-align: center; }
.detail-art { width: min(100%, 280px); height: 280px; margin: 0 auto 14px; border-radius: 22px; }
.detail-phrase { margin: 8px auto; max-width: 360px; color: var(--muted); line-height: 1.45; }
.detail-count { color: var(--purple-dark); font-weight: 900; }
.collection-detail-dialog .control-button { margin-top: 8px; }
.reward-dialog { overflow: hidden; min-height: 420px; }
.reward-sparkles { color: var(--peach); font-size: 1.8rem; letter-spacing: 0.1em; }
.reward-envelope { position: relative; display: grid; width: 180px; height: 218px; margin: 24px auto 14px; place-items: center; border: 5px solid #fffaf3; border-radius: 22px 22px 31px 31px; color: #fff3ff; background: linear-gradient(145deg, #9b69c3, #6e3d98); box-shadow: inset 0 -17px 0 rgba(63,26,100,0.13), 0 11px 0 rgba(104,32,93,0.18); cursor: pointer; transform: rotate(-3deg); }
.reward-envelope::before { content: "✦"; position: absolute; top: 22px; left: 27px; color: #ffd866; font-size: 2rem; }
.reward-envelope::after { content: "✧"; position: absolute; right: 24px; bottom: 23px; color: #b9dfd2; font-size: 2rem; }
.reward-envelope span { display: grid; width: 86px; height: 86px; place-items: center; border: 4px solid rgba(255,255,255,0.65); border-radius: 50%; color: var(--purple-dark); background: #fff1f8; font-size: 4.5rem; font-weight: 900; line-height: 1; }
.reward-envelope.is-opening { animation: envelope-open 410ms ease both; }
.reward-instruction { color: var(--purple-dark); font-weight: 900; }
.reward-result { animation: reward-rise 380ms ease both; }
.reward-art { width: 230px; height: 230px; margin: -10px auto 3px; border-radius: 22px; }
.reward-label { display: inline-flex; margin: 6px 0; padding: 5px 13px; border-radius: 999px; color: var(--purple-dark); background: #b9dfd2; font-weight: 900; }
.reward-result h2 { color: var(--purple-dark); }
.reward-phrase { max-width: 350px; margin: 5px auto; color: var(--muted); line-height: 1.4; }
.reward-count { margin-bottom: 12px; color: var(--purple-dark); font-weight: 900; }
.exchange-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 310px; overflow: auto; padding: 10px 2px; }
.exchange-target { min-width: 0; padding: 6px; border: 2px solid rgba(104,32,93,0.12); border-radius: 13px; color: var(--purple-dark); background: #fffaf3; cursor: pointer; }
.exchange-target.is-selected { border-color: var(--purple); background: #eed7eb; box-shadow: 0 4px 0 rgba(104,32,93,0.15); }
.exchange-target strong { display: block; overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.exchange-art { display: block; width: 100%; height: 72px; border-radius: 9px; }
.exchange-summary { min-height: 25px; color: var(--purple-dark); font-weight: 900; }
.exchange-actions { display: flex; justify-content: center; gap: 10px; }
.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 13px 17px; border: 2px solid #fffaf3; border-radius: 16px; color: var(--purple-dark); background: #b9dfd2; box-shadow: 0 8px 20px rgba(76,23,70,0.16); font-weight: 900; opacity: 0; pointer-events: none; transform: translateY(15px); transition: opacity 160ms ease, transform 160ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.reward-ready { margin: 5px 0 14px; color: var(--teal-dark); font-weight: 900; }
@keyframes envelope-open { 0% { transform: rotate(-3deg) scale(1); } 35% { transform: rotate(3deg) scale(1.04); } 70% { transform: rotate(-2deg) scale(0.98); } 100% { transform: rotate(0) scale(0.94); opacity: 0.15; } }
@keyframes reward-rise { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 720px) {
  .collection-header { flex-direction: column; }
  .collection-header-actions { width: 100%; justify-content: space-between; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 520px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-header-actions .control-button { flex: 1; }
  .exchange-target-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exchange-actions { flex-direction: column; }
  .exchange-actions .control-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-envelope.is-opening, .reward-result { animation: none; }
}

/* Multiplication lesson states. The old interactive grid stays in the DOM for backwards compatibility. */
.legacy-grid-explorer[hidden] { display: none !important; }
.lesson-mode { display: grid; gap: 22px; padding: 10px 4px 0; }
.lesson-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.lesson-task-counter { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 17px; border: 2px solid rgba(104,32,93,0.12); border-radius: 999px; color: var(--purple-dark); background: #e8dcf3; font-weight: 900; }
.lesson-progress-dots { display: flex; gap: 7px; margin-top: 10px; }
.lesson-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: #ead7e6; box-shadow: inset 0 0 0 2px rgba(104,32,93,0.08); }
.lesson-progress-dot.is-current { background: #a27bc5; box-shadow: 0 0 0 3px rgba(162,123,197,0.18); }
.lesson-progress-dot.is-solved { background: #82cda9; }
.lesson-reward-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.8rem; font-weight: 800; line-height: 1.15; text-align: left; }
.lesson-packet-icon { display: grid; width: 44px; height: 50px; place-items: center; border: 3px solid #fffaf3; border-radius: 9px 9px 13px 13px; color: #fff2ff; background: linear-gradient(145deg, #a274c9, #7550a4); box-shadow: 0 5px 0 rgba(104,32,93,0.13); font-size: 1.65rem; font-weight: 900; transform: rotate(-5deg); }
.lesson-question-card { padding: clamp(20px, 4vw, 34px); border: 3px solid #fffaf3; border-radius: 32px; background: linear-gradient(145deg, #fff5e8, #fffaf4); box-shadow: 0 9px 0 rgba(104,32,93,0.09); text-align: center; }
.lesson-prompt { display: inline-flex; margin: 0 auto 10px; padding: 8px 18px; border-radius: 999px; color: var(--purple-dark); background: #f7c4b0; font-weight: 900; }
.lesson-equation { margin: 0 0 23px; color: var(--purple-dark); font-size: clamp(2.5rem, 8vw, 5.2rem); font-weight: 950; letter-spacing: 0.02em; line-height: 1; }
.lesson-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 620px; margin: 0 auto; }
.lesson-answer { position: relative; display: grid; min-height: 84px; place-items: center; padding: 12px 42px 12px 15px; border: 3px solid #bca1d6; border-radius: 22px; color: var(--purple-dark); background: #e8dcf3; box-shadow: 0 6px 0 rgba(104,32,93,0.12); cursor: pointer; font: inherit; font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 950; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease; }
.lesson-answer:hover:not(:disabled), .lesson-answer:focus-visible:not(:disabled) { border-color: #8f68b6; outline: none; transform: translateY(-2px); box-shadow: 0 8px 0 rgba(104,32,93,0.14); }
.lesson-answer:focus-visible:not(:disabled) { outline: 4px solid rgba(127,201,170,0.55); outline-offset: 3px; }
.lesson-answer.is-correct { border-color: #4da47d; background: #b9dfd2; box-shadow: 0 6px 0 rgba(56,128,98,0.18); }
.lesson-answer.is-wrong { border-color: #e5967a; color: #8c4a4a; background: #ffd4c0; box-shadow: 0 6px 0 rgba(190,103,79,0.14); cursor: default; }
.lesson-answer:disabled { opacity: 1; }
.lesson-answer-mark { position: absolute; top: 50%; right: 16px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fff; background: #459873; font-size: 1.25rem; line-height: 1; transform: translateY(-50%); }
.lesson-maya-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 4vw, 30px); min-height: 224px; }
.lesson-maya-image { flex: 0 0 172px; width: 172px; height: 220px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 0 rgba(104,32,93,0.08)); }
.lesson-feedback-bubble { position: relative; width: min(100%, 500px); min-height: 76px; padding: 18px 22px; border: 3px solid #fffaf3; border-radius: 24px; color: var(--purple-dark); background: #f2e5f2; box-shadow: 0 7px 0 rgba(104,32,93,0.1); font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 900; line-height: 1.25; text-align: center; }
.lesson-feedback-bubble::before { content: ""; position: absolute; left: -15px; bottom: 24px; width: 24px; height: 24px; border-left: 3px solid #fffaf3; border-bottom: 3px solid #fffaf3; background: inherit; transform: rotate(45deg); }
.lesson-feedback-bubble.is-success { border-color: #70b995; background: #c9eadc; }
.lesson-feedback-bubble.is-hint { border-color: #c2a6d9; background: #eee1f3; }
.lesson-feedback-bubble span { display: block; margin-top: 7px; color: #5d3a66; font-size: 0.88em; font-weight: 800; }
.lesson-hint { padding-top: 8px; color: var(--purple-dark) !important; font-size: 0.82em !important; }
.lesson-actions { display: flex; justify-content: center; min-height: 48px; }
.lesson-actions .control-button { min-width: 170px; }

@media (max-width: 620px) {
  .lesson-mode { gap: 16px; padding-inline: 0; }
  .lesson-progress-row { align-items: flex-start; }
  .lesson-reward-note { font-size: 0.72rem; }
  .lesson-packet-icon { width: 36px; height: 42px; font-size: 1.35rem; }
  .lesson-question-card { padding: 20px 14px; border-radius: 25px; }
  .lesson-equation { margin-bottom: 18px; font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .lesson-answer-grid { gap: 10px; }
  .lesson-answer { min-height: 68px; border-radius: 17px; font-size: clamp(1.25rem, 8vw, 1.8rem); }
  .lesson-maya-row { align-items: center; min-height: 184px; gap: 8px; }
  .lesson-maya-image { flex-basis: 120px; width: 120px; height: 170px; }
  .lesson-feedback-bubble { min-height: 70px; padding: 14px 12px; font-size: 0.93rem; }
  .lesson-feedback-bubble::before { left: -11px; width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-answer { transition: none; }
}

/* Four clearly separated exercise choices; the collection remains outside this block. */
.navigation-groups { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; }
.task-navigation { min-width: 0; }
.navigation-label { margin: 0 0 5px 8px; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.task-navigation .mode-tabs { display: grid; grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 5px; padding: 5px; border-radius: 22px; }
.task-navigation .mode-tab { display: flex; min-width: 0; min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 9px 11px; border-radius: 17px; text-align: left; }
.mode-tab strong { color: inherit; font-size: 0.84rem; line-height: 1.05; }
.mode-tab small { color: var(--muted); font-size: 0.65rem; font-weight: 700; line-height: 1.15; }
.mode-tab.is-active small { color: #397866; }
.mode-tab--soon { position: relative; border: 2px dashed rgba(104,32,93,0.18); background: rgba(255,250,243,0.62); cursor: not-allowed; opacity: 0.78; }
.mode-tab--soon strong { color: #80616f; }
.soon-badge { position: absolute; top: 5px; right: 6px; padding: 2px 5px; border-radius: 999px; color: #80616f; background: #ead7e6; font-size: 0.58rem; font-weight: 900; }
.collection-tab { display: flex; min-height: 64px; align-items: center; gap: 5px; padding: 10px 14px; border: 2px solid rgba(255,255,255,0.88); border-radius: 18px; background: #e9c9e4; box-shadow: 0 4px 0 rgba(104,32,93,0.12); text-align: left; }
.collection-tab strong { font-size: 0.82rem; line-height: 1.05; }
.collection-tab .unopened-count { margin-left: 0; }

@media (max-width: 900px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: space-between; }
  .navigation-groups { width: 100%; align-items: stretch; justify-content: space-between; }
  .task-navigation { flex: 1 1 auto; }
  .collection-tab { flex: 0 0 auto; }
}

@media (max-width: 620px) {
  .top-actions { align-items: stretch; flex-direction: column; }
  .navigation-groups { align-items: stretch; flex-direction: column; }
  .task-navigation .mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-navigation .mode-tab { min-height: 68px; }
  .collection-tab { justify-content: center; }
}

/* Header hierarchy: collection is aligned with the title, while exercises stay in their own row. */
.top-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; width: auto; }
.hero-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.task-navigation { width: min(100%, 620px); }
.lesson-reward-note { max-width: 330px; padding: 8px 12px; border: 2px dashed rgba(104,32,93,0.14); border-radius: 14px; color: var(--muted); background: rgba(255,250,243,0.65); font-size: 0.72rem; line-height: 1.25; }
.lesson-result { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 52px); min-height: 390px; padding: clamp(20px, 4vw, 38px); border-radius: 28px; background: linear-gradient(145deg, #fff0d7, #f4e2f3); }
.lesson-result-copy { flex: 1 1 520px; }
.lesson-result h2 { margin: 0 0 18px; color: var(--purple-dark); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.lesson-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lesson-result-stats p { min-height: 74px; margin: 0; padding: 12px; border: 2px solid rgba(104,32,93,0.11); border-radius: 17px; color: var(--muted); background: rgba(255,250,243,0.84); font-size: 0.82rem; font-weight: 800; line-height: 1.25; }
.lesson-result-stats strong { display: block; margin-top: 6px; color: var(--purple-dark); font-size: 1.35rem; }
.lesson-result-comment { min-height: 48px; margin: 18px 0 12px; color: var(--purple-dark); font-size: 1.08rem; font-weight: 900; line-height: 1.35; }
.lesson-result-reward { display: grid; gap: 4px; margin-bottom: 16px; padding: 13px 16px; border-radius: 17px; color: var(--teal-dark); background: #c9eadc; line-height: 1.3; }
.lesson-result-reward strong { color: var(--purple-dark); }
.lesson-result-reward span { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.lesson-result-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.lesson-result-actions .control-button { flex: 1 1 150px; min-height: 47px; }
.lesson-result-maya { flex: 0 0 210px; width: 210px; height: 250px; }

@media (max-width: 900px) {
  .top-actions { width: 100%; align-items: stretch; }
  .hero-top-actions { justify-content: flex-end; }
  .task-navigation { width: 100%; }
}

@media (max-width: 620px) {
  .hero-top-actions { justify-content: space-between; }
  .lesson-reward-note { max-width: 100%; }
  .lesson-result { align-items: center; flex-direction: column-reverse; min-height: 0; text-align: center; }
  .lesson-result-maya { flex-basis: 190px; width: 170px; height: 190px; }
  .lesson-result-stats { grid-template-columns: 1fr; }
  .lesson-result-stats p { min-height: 0; }
  .lesson-result-actions { flex-direction: column; }
  .lesson-result-actions .control-button { width: 100%; }
}

/* Choice-mode navigation is a separate row below Maya and her speech bubble. */
.lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; margin-top: 24px; padding-top: 0; }
.lesson-actions .control-button { flex: 0 0 auto; min-width: 170px; }
.lesson-actions .control-button[hidden] { display: none; }

@media (max-width: 620px) {
  .lesson-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .lesson-actions .control-button { width: 100%; min-width: 0; padding-inline: 8px; }
}

/* Five exercise choices, including the active number-entry mode and the future blitz mode. */
.task-menu { margin-bottom: 24px; }
.task-menu h2 { margin-bottom: 18px; }
.task-menu-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.task-menu-card { position: relative; display: flex; min-height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 13px; border: 2px solid rgba(104,32,93,0.13); border-radius: 18px; color: var(--purple-dark); background: #fffaf3; box-shadow: 0 5px 0 rgba(104,32,93,0.1); cursor: pointer; text-align: left; }
.task-menu-card strong { font-size: 0.88rem; line-height: 1.1; }
.task-menu-card small { color: var(--muted); font-size: 0.68rem; line-height: 1.2; }
.task-menu-card:hover:not(:disabled), .task-menu-card:focus-visible:not(:disabled) { border-color: #8f68b6; outline: none; transform: translateY(-2px); }
.task-menu-card.is-soon { border-style: dashed; color: #80616f; background: rgba(255,250,243,0.62); cursor: not-allowed; opacity: 0.78; }
.task-menu-card.is-soon span { position: absolute; top: 7px; right: 8px; padding: 2px 6px; border-radius: 999px; background: #ead7e6; font-size: 0.58rem; font-weight: 900; }

.input-start-view { max-width: 620px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); border-radius: 28px; background: linear-gradient(145deg, #fff0d7, #f4e2f3); text-align: center; }
.input-start-view h2 { margin-bottom: 12px; color: var(--purple-dark); font-size: clamp(1.7rem, 4vw, 2.5rem); }
.input-start-copy { max-width: 430px; margin: 0 auto 22px; color: var(--muted); line-height: 1.45; }
.input-question-card { padding: clamp(18px, 4vw, 32px); border: 3px solid #fffaf3; border-radius: 32px; background: linear-gradient(145deg, #fff5e8, #fffaf4); box-shadow: 0 9px 0 rgba(104,32,93,0.09); text-align: center; }
.input-answer-field { display: block; width: min(100%, 260px); height: 70px; margin: 0 auto 16px; padding: 8px 16px; border: 3px solid #bca1d6; border-radius: 20px; color: var(--purple-dark); background: #e8dcf3; box-shadow: 0 6px 0 rgba(104,32,93,0.12); font: inherit; font-size: 2.4rem; font-weight: 950; outline: none; text-align: center; }
.input-answer-field:focus-visible { outline: 4px solid rgba(127,201,170,0.55); outline-offset: 3px; }
.input-answer-field.is-correct { border-color: #4da47d; background: #b9dfd2; }
.input-answer-field.is-wrong { border-color: #e5967a; background: #ffd4c0; }
.input-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 360px); margin: 0 auto; }
.input-key { min-height: 52px; border: 2px solid #bca1d6; border-radius: 16px; color: var(--purple-dark); background: #e8dcf3; box-shadow: 0 5px 0 rgba(104,32,93,0.11); cursor: pointer; font: inherit; font-size: 1.35rem; font-weight: 900; }
.input-key:hover:not(:disabled), .input-key:focus-visible:not(:disabled) { border-color: #8f68b6; outline: 3px solid rgba(127,201,170,0.45); outline-offset: 2px; }
.input-key--utility { color: var(--purple-dark); background: #ffd9c5; }
.input-key--ok { color: #285d4c; border-color: #70b995; background: #b9dfd2; }
.input-key:disabled { cursor: not-allowed; opacity: 0.55; }
.input-maya-row { margin-top: 4px; }

.collection-version-progress { margin: 5px 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.35; }
.version-strip { display: flex; justify-content: center; gap: 7px; margin-top: 7px; }
.version-chip { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 0.72rem; font-weight: 900; }
.version-chip--common > span { color: #398d67; }
.version-chip--rare > span { color: #6d55ad; }
.version-chip--legendary > span { color: #bd741f; }
.upgrade-mark { display: block; margin-top: 6px; color: var(--teal-dark); font-size: 0.64rem; font-style: normal; font-weight: 900; }
.collection-art.rarity-rare { filter: drop-shadow(0 0 7px rgba(109,85,173,0.45)); }
.collection-art.rarity-legendary { filter: drop-shadow(0 0 9px rgba(189,116,31,0.62)); }
.detail-art.rarity-rare, .reward-art.rarity-rare { filter: drop-shadow(0 0 9px rgba(109,85,173,0.5)); }
.detail-art.rarity-legendary, .reward-art.rarity-legendary { filter: drop-shadow(0 0 12px rgba(189,116,31,0.68)); }
.detail-versions { display: grid; gap: 9px; margin: 18px auto 6px; text-align: left; }
.detail-version-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 2px solid rgba(104,32,93,0.12); border-radius: 16px; background: #fffaf3; }
.detail-version-row.is-locked { opacity: 0.62; }
.detail-version-art { width: 58px; height: 58px; }
.detail-version-art.rarity-rare, .upgrade-art.rarity-rare { filter: drop-shadow(0 0 6px rgba(109,85,173,0.5)); }
.detail-version-art.rarity-legendary, .upgrade-art.rarity-legendary { filter: drop-shadow(0 0 8px rgba(189,116,31,0.65)); }
.detail-version-copy { min-width: 0; }
.detail-version-copy strong, .detail-version-copy span, .detail-version-copy small { display: block; }
.detail-version-copy strong { color: var(--purple-dark); font-size: 0.86rem; }
.detail-version-copy span { margin-top: 3px; color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.detail-version-copy small { margin-top: 3px; color: var(--teal-dark); font-size: 0.66rem; font-weight: 900; }
.detail-upgrade-button { min-height: 38px; padding: 7px 10px; font-size: 0.72rem; }
.upgrade-dialog-backdrop { position: fixed; z-index: 27; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(76,23,70,0.34); }
.upgrade-dialog { position: relative; width: min(100%, 440px); padding: 28px; border: 3px solid #fffaf3; border-radius: 30px; background: #fff7e9; box-shadow: 0 20px 60px rgba(76,23,70,0.24); text-align: center; }
.upgrade-dialog h2 { margin-bottom: 14px; color: var(--purple-dark); }
.upgrade-preview { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px auto 12px; }
.upgrade-preview > div { display: grid; justify-items: center; gap: 4px; }
.upgrade-preview strong { color: var(--purple-dark); font-size: 0.8rem; }
.upgrade-art { width: 100px; height: 100px; }
.upgrade-arrow { color: var(--purple); font-size: 2rem; font-weight: 900; }
.upgrade-copy { margin: 0 0 16px; color: var(--muted); font-weight: 800; }
.upgrade-actions { display: flex; justify-content: center; gap: 10px; }

@media (max-width: 900px) {
  .task-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .task-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-version-row { grid-template-columns: 48px minmax(0, 1fr); }
  .detail-version-art { width: 48px; height: 48px; }
  .detail-upgrade-button { grid-column: 2; justify-self: start; }
  .upgrade-preview { gap: 3px; }
  .upgrade-art { width: 82px; height: 82px; }
  .upgrade-actions { flex-direction: column; }
  .upgrade-actions .control-button { width: 100%; }
}