/* CPA English Bridge - style.css */
/* Mobile-first (390px baseline), centered up to 480px max-width. */
/* Duolingo-inspired "chunky, cheerful, mascot-driven" visual system. */

:root {
  --navy: #22324A;
  --navy-soft: #34455F;
  --bg: #F7FBFF;
  --card-bg: #FFFFFF;
  --text: #22324A;
  --text-muted: #6B7686;
  --border: #E5EEF7;
  --border-strong: #D8E6F3;
  --green: #58CC02;
  --green-dark: #46A302;
  --green-bg: #DCFCE7;
  --green-text: #2E8B00;
  --red: #FF4B4B;
  --red-dark: #D93030;
  --red-bg: #FFE9E9;
  --amber: #FFC800;
  --amber-dark: #E5A400;
  --blue: #1CB0F6;
  --blue-dark: #0E92D6;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 4px 16px rgba(34, 50, 74, 0.07);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px 20px 40px;
  position: relative;
}

.hidden {
  display: none !important;
}

.view {
  display: none;
}
.view.active {
  display: block;
}
.view.active.view-enter {
  animation: viewEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

button {
  font-family: inherit;
}

/* ---------- Header / Logo ---------- */
.app-header {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EAFBD8;
  border: 2px solid var(--green-dark);
}
.app-logo-text {
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
}

/* ---------- Mascot "ボキ" (shared SVG component) ---------- */
.mascot-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mascot-idle {
  animation: mascotBob 3.2s ease-in-out infinite;
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.mascot-eyelid {
  transform-origin: center top;
  transform: scaleY(0);
  animation: mascotBlink 4.6s ease-in-out infinite;
}
@keyframes mascotBlink {
  0%, 90%, 100% { transform: scaleY(0); }
  93%, 96% { transform: scaleY(1); }
}

/* One-off transient motions layered on mascot wrapper containers by JS. */
.mascot-jump {
  animation: mascotJump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mascotJump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18px) scale(1.06); }
  55% { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}
.mascot-jump-big {
  animation: mascotJumpBig 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mascotJumpBig {
  0% { transform: translateY(0) scale(1) rotate(0); }
  35% { transform: translateY(-34px) scale(1.12) rotate(-4deg); }
  60% { transform: translateY(0) scale(0.94) rotate(3deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* ---------- Home: mascot hero + speech bubble ---------- */
.mascot-hero {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 16px;
}
.mascot-hero-figure {
  width: 96px;
  height: 106px;
  flex-shrink: 0;
}
.speech-bubble {
  position: relative;
  flex: 1;
  background: var(--card-bg);
  border: 2px solid var(--border-strong);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 3px 0 var(--border-strong);
  margin-bottom: 12px;
}
.speech-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 16px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--border-strong);
}
.speech-bubble::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 17px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid var(--card-bg);
}

/* ---------- Buttons (3D chunky) ---------- */
.btn {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.btn-big {
  padding: 18px 20px;
  font-size: 17px;
}
.btn-primary {
  background: var(--green);
  color: #fff;
  border: 2px solid var(--green-dark);
  box-shadow: 0 4px 0 var(--green-dark);
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--green-dark);
}
.btn-secondary {
  background: var(--card-bg);
  color: var(--navy);
  border: 2px solid var(--border-strong);
  box-shadow: 0 4px 0 var(--border-strong);
}
.btn-secondary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--border-strong);
}
.btn-danger {
  display: block;
  width: 100%;
  border: 2px solid var(--red-dark);
  background: var(--red-bg);
  color: var(--red-dark);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--red-dark);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-danger:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--red-dark);
}

/* ---------- Home: streak card ---------- */
.streak-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.streak-flame {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.5));
  animation: flamePulse 1.6s ease-in-out infinite;
}
@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.streak-flame.flame-dim {
  filter: grayscale(1) opacity(0.5);
  animation: none;
}
.flame-bounce-big {
  animation: flameBounceBig 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes flameBounceBig {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.55) translateY(-10px); }
  60% { transform: scale(0.9) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
.streak-count {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}
.streak-label {
  font-size: 13px;
  opacity: 0.9;
}

/* ---------- Home: due card ---------- */
.due-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
  transform-origin: center;
}
.due-card-alert {
  border-color: var(--amber);
  animation: dueWiggle 2.4s ease-in-out infinite;
}
@keyframes dueWiggle {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-1.5deg); }
  88% { transform: rotate(1.5deg); }
  92% { transform: rotate(-1deg); }
  96% { transform: rotate(1deg); }
}
.due-emoji {
  font-size: 28px;
}
.due-count {
  font-size: 15px;
  font-weight: 700;
}
.due-count span {
  color: var(--amber-dark);
  font-size: 18px;
  font-weight: 800;
}
.due-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.home-footnote {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 20px;
}

/* ---------- Session: progress bar ---------- */
.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.progress-bar-track {
  flex: 1;
  height: 12px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  width: 0%;
  position: relative;
  overflow: hidden;
}
.progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: progressShine 1.8s ease-in-out infinite;
}
@keyframes progressShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.progress-bar-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Session: mascot peeking over the card ---------- */
.session-mascot-peek {
  width: 72px;
  height: 78px;
  margin: 0 auto -36px;
  position: relative;
  z-index: 2;
}

/* ---------- Word card (front face) ---------- */
.word-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 24px 24px;
  box-shadow: 0 6px 0 var(--border-strong), var(--shadow);
  text-align: center;
  margin-bottom: 20px;
}
.card-pop {
  animation: cardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardPop {
  0% { transform: scale(0.9); opacity: 0.4; }
  70% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.word-card-band {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.word-card-emoji {
  font-size: 48px;
  margin-bottom: 10px;
}
.word-card-en {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  word-break: break-word;
}
.word-card-jp {
  font-size: 17px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 18px;
}
.word-card-example {
  border-top: 2px solid var(--border);
  padding-top: 14px;
  text-align: left;
}
.example-en {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.5;
}
.example-jp {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Quiz face ---------- */
.quiz-mascot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  position: relative;
}
.quiz-mascot {
  width: 64px;
  height: 70px;
}
.quiz-mascot-bubble {
  background: var(--card-bg);
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 3px 0 var(--border-strong);
  max-width: 90%;
  text-align: center;
}
.quiz-question {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  margin: 10px 0 22px;
  line-height: 1.4;
  position: relative;
}
.quiz-plus-one {
  position: absolute;
  top: -6px;
  right: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--green-dark);
  pointer-events: none;
  opacity: 0;
}
.quiz-plus-one-play {
  animation: plusOneFloat 0.9s ease forwards;
}
@keyframes plusOneFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  25% { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}
.quiz-combo-pop {
  position: absolute;
  top: -10px;
  left: 50%;
  background: linear-gradient(135deg, var(--amber), #FF9500);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #C97C00;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.quiz-combo-pop-play {
  animation: comboPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes comboPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.18); }
  60% { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.choice-btn {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-strong);
  background: var(--card-bg);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-strong);
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.choice-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--border-strong);
}
.choice-btn:disabled {
  cursor: default;
}
.choice-correct {
  background: var(--green-bg);
  border-color: var(--green-dark);
  color: var(--green-text);
  box-shadow: 0 3px 0 var(--green-dark);
}
.choice-wrong {
  background: var(--red-bg);
  border-color: var(--red-dark);
  color: var(--red-dark);
  box-shadow: 0 3px 0 var(--red-dark);
}
.choice-bounce {
  animation: choiceBounce 0.35s ease;
}
@keyframes choiceBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.choice-flash {
  animation: choiceFlash 0.5s ease;
}
@keyframes choiceFlash {
  0% { background: #fff; }
  30% { background: #B9F6CA; }
  100% { background: var(--green-bg); }
}
.choice-shake {
  animation: choiceShakeX 0.4s ease;
}
@keyframes choiceShakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- Result view ---------- */
#view-result {
  text-align: center;
  padding-top: 20px;
}
.result-mascot {
  width: 120px;
  height: 132px;
  margin: 0 auto 4px;
}
.result-emoji {
  font-size: 56px;
  margin-bottom: 8px;
}
.result-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.result-score {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
}
.result-streak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF7ED;
  border: 2px solid #FED7AA;
  color: #B45309;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  margin: 0 auto 26px;
}
.result-streak-flame {
  font-size: 16px;
  display: inline-block;
}

/* ---------- Word list view ---------- */
.list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.btn-back {
  background: var(--card-bg);
  border: 2px solid var(--border-strong);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-back:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--border-strong);
}

/* ---------- Shared: mini close ("×") button for in-session exit ---------- */
.btn-close-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-muted);
  border: 2px solid var(--border-strong);
  box-shadow: 0 3px 0 var(--border-strong);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-close-mini:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--border-strong);
}
.list-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.list-section {
  margin-bottom: 20px;
}
.list-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
}
.list-section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.list-row-emoji {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.list-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.list-row-en {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.list-row-jp {
  font-size: 12px;
  color: var(--text-muted);
}
.list-row-status {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-new {
  background: #F1F5F9;
  color: var(--text-muted);
}
.status-learning {
  background: #FEF3C7;
  color: #B45309;
}
.status-mastered {
  background: var(--green-bg);
  color: var(--green-text);
}

/* ---------- Teaser card ---------- */
.teaser-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: repeating-linear-gradient(135deg, #F1F5F9, #F1F5F9 10px, #E9EEF4 10px, #E9EEF4 20px);
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-top: 10px;
  cursor: pointer;
}
.teaser-lock {
  font-size: 26px;
}
.teaser-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-muted);
}
.teaser-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Locked list rows ---------- */
.list-row-locked {
  cursor: pointer;
  opacity: 0.75;
}
.list-row-jp-locked {
  letter-spacing: 0.5px;
}
.status-locked {
  background: #F1F5F9;
  color: var(--text-muted);
}

/* ---------- Upgrade banner (Home) ---------- */
.upgrade-banner {
  background: linear-gradient(135deg, var(--amber), #B45309);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.upgrade-banner-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}
.upgrade-banner-price {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.btn-upgrade {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: #fff;
  color: #B45309;
  box-shadow: 0 3px 0 #D9950A;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-upgrade:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #D9950A;
}

/* ---------- Home: game mode row ---------- */
.game-mode-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.btn-mode {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--card-bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 var(--border-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: 44px;
}
.btn-mode:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--border-strong);
}
.btn-mode-emoji {
  font-size: 26px;
}
.btn-mode-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
}
.btn-mode-lock {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  display: inline-block;
}
.lock-shake {
  animation: lockShake 0.4s ease;
}
@keyframes lockShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(16deg); }
  60% { transform: rotate(-12deg); }
  80% { transform: rotate(8deg); }
}

/* ---------- App footer (Home) ---------- */
.app-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-link {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
}
.footer-sep {
  margin: 0 4px;
  color: var(--border-strong);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%) translateY(-40px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.2s ease;
  max-width: calc(100% - 40px);
}
.toast.toast-show {
  opacity: 1;
  animation: toastBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes toastBounceIn {
  0% { transform: translateX(-50%) translateY(-40px); opacity: 0; }
  60% { transform: translateX(-50%) translateY(6px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.toast-emoji {
  font-size: 18px;
}
.toast-text {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- Result combo + confetti ---------- */
.result-combo {
  display: inline-block;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 2px solid #BFDBFE;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  margin: 0 auto 12px;
}
.result-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}
#view-result, #view-boss-result {
  position: relative;
}

/* ---------- Upgrade view ---------- */
.upgrade-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  text-align: center;
}
.upgrade-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.upgrade-card-price {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
}
.upgrade-card-price-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
}
.upgrade-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  font-size: 14px;
  line-height: 2;
  color: var(--text);
}
.upgrade-purchase-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.5;
}
.upgrade-disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 16px;
}

/* ---------- Unlock code card (shared: Upgrade / Settings) ---------- */
.unlock-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 18px;
}
.unlock-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.unlock-input {
  width: 100%;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: inherit;
}
.unlock-input:focus {
  outline: none;
  border-color: var(--blue);
}
.unlock-message {
  font-size: 12px;
  font-weight: 800;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.unlock-message-success {
  background: var(--green-bg);
  color: var(--green-text);
}
.unlock-message-error {
  background: var(--red-bg);
  color: var(--red-dark);
}

/* ---------- Boss Quiz ---------- */
.boss-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.boss-header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.boss-lives {
  font-size: 18px;
  letter-spacing: 2px;
}
.boss-lives-tremble {
  animation: livesTremble 0.4s ease;
}
@keyframes livesTremble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
.boss-progress {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
}
.boss-emoji-banner {
  text-align: center;
  font-size: 40px;
  margin-bottom: 8px;
}
.boss-scale-in {
  animation: bossScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bossScaleIn {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.boss-defeat {
  animation: bossDefeat 0.55s ease forwards;
}
@keyframes bossDefeat {
  0% { transform: rotate(0) scale(1); opacity: 1; }
  100% { transform: rotate(95deg) scale(0.6); opacity: 0; }
}

/* ---------- 3-minute mode ---------- */
.timed-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.timed-header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.timed-clock {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.timed-clock-danger {
  color: #FFD1D1;
  animation: timerPulseRed 1s ease-in-out infinite;
}
@keyframes timerPulseRed {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
.timed-score {
  font-size: 14px;
  font-weight: 700;
}
.timed-best {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.timed-new-best {
  display: inline-block;
  background: #FFF7ED;
  border: 2px solid #FED7AA;
  color: #B45309;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  margin: 0 auto 20px;
}
.new-record-play {
  animation: newRecordBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes newRecordBounce {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Badges ---------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.badge-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
}
.badge-card-emoji {
  font-size: 30px;
  margin-bottom: 6px;
  display: inline-block;
}
.badge-card-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 2px;
}
.badge-card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.badge-locked {
  opacity: 0.55;
}
.badge-locked .badge-card-label {
  color: var(--text-muted);
}
.badge-earned {
  border: 2px solid var(--amber);
  cursor: pointer;
}
.badge-earned:hover .badge-card-emoji {
  animation: badgeSpin 0.6s ease;
}
.badge-flip .badge-card-emoji {
  animation: badgeSpin 0.6s ease;
}
@keyframes badgeSpin {
  0% { transform: rotateY(0) scale(1); }
  50% { transform: rotateY(180deg) scale(1.15); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* ---------- Settings ---------- */
.settings-section {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.settings-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-status {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-link {
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}
.settings-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ---------- Exit confirm modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-overlay.modal-show {
  opacity: 1;
}
.modal-card {
  width: 100%;
  max-width: 340px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.modal-show .modal-card {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.modal-mascot {
  width: 88px;
  height: 96px;
  margin: 0 auto 12px;
}
.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
}
.modal-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ---------- Desktop gate (mobile-only guard) ---------- */
html.gate-lock-scroll,
html.gate-lock-scroll body {
  overflow: hidden;
  height: 100%;
}
.desktop-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.desktop-gate-inner {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 28px 28px;
  text-align: center;
  margin: auto;
}
.desktop-gate-mascot {
  width: 120px;
  height: 132px;
  margin: 0 auto 16px;
}
.desktop-gate-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.desktop-gate-body {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 22px;
  line-height: 1.6;
}
.desktop-gate-url-box {
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.desktop-gate-url-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.desktop-gate-copy-btn {
  margin-bottom: 10px;
}
.desktop-gate-copy-msg {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--green-text);
  background: var(--green-bg);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0 auto 14px;
}
.desktop-gate-pc-link {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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