/* KiboGames — Shared Light/Dark Theme & Accessibility System */

/* ============================================================
   RESPONSIVENESS & SCROLLING SAFEGUARDS FOR ALL SCREENS
   ============================================================ */
html, body {
  min-height: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.screen {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.screen::-webkit-scrollbar {
  width: 6px;
}

.screen::-webkit-scrollbar-track {
  background: transparent;
}

.screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

[data-theme="light"] .screen {
  scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

[data-theme="light"] .screen::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   THEME TOGGLE BUTTON — shared across all pages
   ============================================================ */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--th-border, rgba(255, 255, 255, .2));
  background: var(--th-btn-bg, rgba(255, 255, 255, .12));
  color: var(--th-btn-color, #ffffff);
  cursor: pointer;
  font-size: 15px;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
  flex-shrink: 0;
  outline: none;
}
#theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  background: var(--th-btn-hover, rgba(255, 255, 255, .25));
}

/* Smooth color transitions when toggling */
body, .screen, .game-card, .phone-card, .scene-card, .q-card, .day-card, .market-card, .prof-card, .stat-box, .res-box, .fb-card, .site-header, .hdr, .game-header {
  transition: background-color .35s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ============================================================
   HIGH-CONTRAST FEEDBACK STATES (CORRECT / WRONG ANSWERS)
   ============================================================ */
.opt-btn.correct,
.choice-btn.correct,
.btn-verdict.correct,
.mode-card.correct {
  background: #059669 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

.opt-btn.correct *,
.choice-btn.correct *,
.btn-verdict.correct *,
.mode-card.correct * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.opt-btn.correct i,
.choice-btn.correct i {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.opt-btn.wrong,
.choice-btn.wrong,
.btn-verdict.wrong,
.mode-card.wrong {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important;
}

.opt-btn.wrong *,
.choice-btn.wrong *,
.btn-verdict.wrong *,
.mode-card.wrong * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.opt-btn.wrong i,
.choice-btn.wrong i {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* ============================================================
   DARK THEME FEEDBACK & CONTRAST REFINEMENTS [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --dim-text: #cbd5e1;
}

[data-theme="dark"] .fb-overlay,
[data-theme="dark"] .feedback-overlay {
  background: rgba(6, 10, 15, 0.9) !important;
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .fb-card,
[data-theme="dark"] .feedback-card {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .fb-t,
[data-theme="dark"] .fb-title,
[data-theme="dark"] .feedback-title,
[data-theme="dark"] #fbt,
[data-theme="dark"] #fb-title {
  font-weight: 900 !important;
  font-size: 22px !important;
  color: #ffffff !important;
}

[data-theme="dark"] .fb-exp,
[data-theme="dark"] .fb-d,
[data-theme="dark"] .fb-info,
[data-theme="dark"] .fb-fact,
[data-theme="dark"] .fb-fun,
[data-theme="dark"] .fb-tip,
[data-theme="dark"] .fb-explain,
[data-theme="dark"] .feedback-explain,
[data-theme="dark"] #fbe,
[data-theme="dark"] #fbd,
[data-theme="dark"] #fbinfo,
[data-theme="dark"] #fbfact,
[data-theme="dark"] #fbtip,
[data-theme="dark"] #fb-explain {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

[data-theme="dark"] .fb-exp *,
[data-theme="dark"] .fb-d *,
[data-theme="dark"] .fb-info *,
[data-theme="dark"] .fb-fact *,
[data-theme="dark"] .fb-fun *,
[data-theme="dark"] .fb-tip *,
[data-theme="dark"] .fb-explain *,
[data-theme="dark"] .feedback-explain * {
  color: #f8fafc !important;
}

/* Result Screen (Dark) */
[data-theme="dark"] #sr,
[data-theme="dark"] #screen-result {
  background: #060a0f !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .res-box,
[data-theme="dark"] .score-box,
[data-theme="dark"] .result-score-card {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .res-n { color: #ffffff !important; font-weight: 900 !important; }
[data-theme="dark"] .res-l { color: #94a3b8 !important; font-weight: 700 !important; }
[data-theme="dark"] .res-title, [data-theme="dark"] .res-t { color: #ffffff !important; font-weight: 900 !important; }
[data-theme="dark"] .res-sub, [data-theme="dark"] .res-s { color: #cbd5e1 !important; }

/* Dark mode subtitle/dim contrast improvements */
[data-theme="dark"] .intro-s,
[data-theme="dark"] .intro-sub,
[data-theme="dark"] .intro-subtitle,
[data-theme="dark"] .scene-context,
[data-theme="dark"] .day-context,
[data-theme="dark"] .res-s,
[data-theme="dark"] .res-sub,
[data-theme="dark"] .cat-desc,
[data-theme="dark"] .game-desc,
[data-theme="dark"] .site-footer {
  color: #cbd5e1 !important;
}

/* ============================================================
   LIGHT THEME GLOBAL VARIABLES & OVERRIDES [data-theme="light"]
   ============================================================ */
[data-theme="light"] {
  --white: #ffffff;
  --text: #0f172a;
  --text-dim: #475569;
  --card: #ffffff;
  --card-bg: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --card-border: rgba(15, 23, 42, 0.1);
}

/* ── BODY & BACKGROUNDS ── */
[data-theme="light"] body {
  background-color: var(--bg) !important;
  color: var(--text, #0f172a) !important;
}

[data-theme="light"] .bg-dots {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
}

/* ── HEADERS ── */
[data-theme="light"] .site-header,
[data-theme="light"] .hdr,
[data-theme="light"] .game-header,
[data-theme="light"] .sky {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  color: #0f172a !important;
}

[data-theme="light"] .brand-name,
[data-theme="light"] .hdr h1,
[data-theme="light"] .hdr-t,
[data-theme="light"] .header-brand h1 {
  color: #0f172a !important;
}

[data-theme="light"] .brand-sub,
[data-theme="light"] .header-mz,
[data-theme="light"] .stat-lbl,
[data-theme="light"] .hero-sub,
[data-theme="light"] .intro-s,
[data-theme="light"] .intro-sub,
[data-theme="light"] .intro-subtitle,
[data-theme="light"] .cat-desc,
[data-theme="light"] .section-title,
[data-theme="light"] .game-desc,
[data-theme="light"] .scenario-label,
[data-theme="light"] .news-label,
[data-theme="light"] .q-label,
[data-theme="light"] .round-label {
  color: #334155 !important;
}

/* ── MAIN INDEX LIGHT MODE CARDS ── */
[data-theme="light"] .game-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .game-card:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="light"] .game-thumb {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Category-specific light gradients for game thumbnails in light mode */
[data-theme="light"] .game-card[href*="KiboSocial"] .game-thumb {
  background: linear-gradient(135deg, #dbeafe, #eff6ff) !important;
}

[data-theme="light"] .game-card[href*="KiboSetups"] .game-thumb {
  background: linear-gradient(135deg, #cff4fc, #e0f2fe) !important;
}

[data-theme="light"] .game-card[href*="KiboRecicla"] .game-thumb {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5) !important;
}

[data-theme="light"] .game-card[href*="PraiaLimpa"] .game-thumb {
  background: linear-gradient(135deg, #bae6fd, #e0f2fe) !important;
}

[data-theme="light"] .game-card[href*="FeiraDoKibo"] .game-thumb {
  background: linear-gradient(135deg, #fef3c7, #fffbeb) !important;
}

[data-theme="light"] .game-card[href*="KiboPoupanca"] .game-thumb {
  background: linear-gradient(135deg, #fef9c3, #fefce8) !important;
}

[data-theme="light"] .game-card[href*="KiboProfissoes"] .game-thumb {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff) !important;
}

[data-theme="light"] .game-card[href*="KiboBandeiras"] .game-thumb {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4) !important;
}

/* Background watermark icons inside thumbnails */
[data-theme="light"] .thumb-icon-bg {
  opacity: 0.25 !important;
}

[data-theme="light"] .thumb-icon {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1)) !important;
}

/* Card titles and text */
[data-theme="light"] .game-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .game-desc {
  color: #475569 !important;
}

[data-theme="light"] .game-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Category Headers */
[data-theme="light"] .cat-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .cat-name {
  color: #0f172a !important;
}

[data-theme="light"] .cat-desc {
  color: #475569 !important;
}

/* Stat Boxes in Hero */
[data-theme="light"] .stat-box {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .stat-num {
  font-weight: 900 !important;
}

/* Light Mode Tag & Badge Color Adjustments for AAA Contrast */
[data-theme="light"] .game-tag[style*="amber"],
[data-theme="light"] .game-tag[style*="f59e0b"] {
  color: #92400e !important;
  background: #fef3c7 !important;
}

[data-theme="light"] .game-tag[style*="gold"],
[data-theme="light"] .game-tag[style*="fcd34d"] {
  color: #854d0e !important;
  background: #fef9c3 !important;
}

[data-theme="light"] .game-tag[style*="38bdf8"] {
  color: #0369a1 !important;
  background: #e0f2fe !important;
}

[data-theme="light"] .game-tag[style*="009a44"] {
  color: #166534 !important;
  background: #dcfce7 !important;
}

[data-theme="light"] .stat-box .stat-num[style*="amber"] {
  color: #b45309 !important;
}

/* ── CARDS (ALL OTHER GAMES) ── */
[data-theme="light"] .res-box,
[data-theme="light"] .market-card,
[data-theme="light"] .day-card,
[data-theme="light"] .goal-card,
[data-theme="light"] .prof-card,
[data-theme="light"] .q-card,
[data-theme="light"] .scene-card,
[data-theme="light"] .phone-card,
[data-theme="light"] .selected-area,
[data-theme="light"] .money-section,
[data-theme="light"] .goal-preview,
[data-theme="light"] .mode-card,
[data-theme="light"] .intro-rules,
[data-theme="light"] .level-card,
[data-theme="light"] .result-score-card,
[data-theme="light"] .items-pool,
[data-theme="light"] .clues-box {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  color: #0f172a !important;
}

[data-theme="light"] .post-username,
[data-theme="light"] .post-headline,
[data-theme="light"] .scene-q,
[data-theme="light"] .res-n,
[data-theme="light"] .stat-num,
[data-theme="light"] .lname,
[data-theme="light"] .intro-title,
[data-theme="light"] .res-title,
[data-theme="light"] .res-t,
[data-theme="light"] .q-question,
[data-theme="light"] .day-situation,
[data-theme="light"] .product-name,
[data-theme="light"] .mname {
  color: #0f172a !important;
}

[data-theme="light"] .post-body,
[data-theme="light"] .res-sub,
[data-theme="light"] .res-s,
[data-theme="light"] .ldesc,
[data-theme="light"] .mdesc,
[data-theme="light"] .rule-item,
[data-theme="light"] .post-location,
[data-theme="light"] .post-time,
[data-theme="light"] .post-source,
[data-theme="light"] .clue-text,
[data-theme="light"] .goal-desc,
[data-theme="light"] .piggy-label {
  color: #334155 !important;
}

/* ── HINTS & CONTEXT BOXES (LIGHT MODE) ── */
[data-theme="light"] .q-hint {
  color: #166534 !important;
  background: #ecfdf5 !important;
  border-left: 3px solid #16a34a !important;
}

[data-theme="light"] .day-context,
[data-theme="light"] .scene-context {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-left: 3px solid #2563eb !important;
}

/* ── FEIRA DO KIBO & KIBOPOUPANÇA CONTRAST (LIGHT MODE) ── */
[data-theme="light"] .price-label,
[data-theme="light"] .paid-label {
  color: #475569 !important;
}

[data-theme="light"] .price-amount {
  color: #b45309 !important;
}

[data-theme="light"] .paid-amount {
  color: #0f172a !important;
}

[data-theme="light"] .change-needed {
  color: #92400e !important;
  background: #fef3c7;
  border-radius: 8px;
  margin: 6px 12px;
}

[data-theme="light"] .change-needed #change-needed-val {
  color: #b45309 !important;
}

[data-theme="light"] .money-title,
[data-theme="light"] .sel-title,
[data-theme="light"] .clues-title {
  color: #475569 !important;
}

[data-theme="light"] .sel-total {
  color: #b45309 !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .money-btn,
[data-theme="light"] .coin-demo {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="light"] .money-btn .val,
[data-theme="light"] .coin-demo .val {
  color: #0f172a !important;
  font-weight: 900 !important;
}

[data-theme="light"] .money-btn .unit,
[data-theme="light"] .coin-demo .unit {
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .day-amount {
  color: #b45309 !important;
}

[data-theme="light"] .day-header {
  background: linear-gradient(135deg, #92400e, #b45309) !important;
}

[data-theme="light"] .day-num {
  color: #fef3c7 !important;
}

[data-theme="light"] .day-bal {
  color: #ffffff !important;
}

/* ── KIBOSOCIAL (LIGHT MODE) ── */
[data-theme="light"] .phone-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .post-app-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .post-username {
  color: #0f172a !important;
}

[data-theme="light"] .post-headline {
  color: #0f172a !important;
}

[data-theme="light"] .post-body {
  color: #334155 !important;
}

[data-theme="light"] .post-source {
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #64748b !important;
}

/* ── PRAIALIMPA (LIGHT MODE) ── */
[data-theme="light"] #si {
  background: radial-gradient(circle at 50% 12%, rgba(56,189,248,0.25) 0%, transparent 60%), linear-gradient(180deg, #38bdf8 0%, #0ea5e9 40%, #0284c7 75%, #0369a1 100%) !important;
}

[data-theme="light"] .intro-card {
  background: #ffffff !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .intro-card .intro-t {
  color: #020617 !important;
  text-shadow: none !important;
}

[data-theme="light"] .intro-card .intro-t span {
  color: #b45309 !important;
  text-shadow: none !important;
}

[data-theme="light"] .intro-card .intro-s {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

[data-theme="light"] .lev-card {
  background: #f8fafc !important;
  border: 2px solid rgba(15, 23, 42, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .lev-card .lev-title {
  color: #020617 !important;
}

[data-theme="light"] .lev-card .lev-desc {
  color: #334155 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .lev-card:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
}

[data-theme="light"] .game-hud {
  background: linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%) !important;
  border-bottom: 2px solid #0284c7 !important;
}

[data-theme="light"] .game-hud .hud-title span {
  color: #020617 !important;
  text-shadow: none !important;
}

[data-theme="light"] .clean-bar-labels {
  color: #020617 !important;
  text-shadow: none !important;
}

[data-theme="light"] .hud-stats .stat-pill {
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 23, 42, 0.2) !important;
  color: #020617 !important;
}

[data-theme="light"] #sr {
  background: radial-gradient(circle at 50% 15%, rgba(56,189,248,0.2) 0%, transparent 60%),
             linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%) !important;
}

[data-theme="light"] #sr .res-t {
  color: #020617 !important;
  text-shadow: none !important;
}

[data-theme="light"] #sr .res-s {
  background: #ffffff !important;
  border: 2px solid #0284c7 !important;
  color: #020617 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #sr .res-box {
  background: #ffffff !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #sr .res-l {
  color: #0f172a !important;
}

/* ── KIBORECICLA (LIGHT MODE) ── */
[data-theme="light"] .drag-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bin.paper {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18) !important;
}

[data-theme="light"] .bin.plastic {
  border-color: #dc2626 !important;
  background: linear-gradient(180deg, #fef2f2, #fee2e2) !important;
  color: #b91c1c !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.18) !important;
}

[data-theme="light"] .bin.glass {
  border-color: #059669 !important;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5) !important;
  color: #065f46 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.18) !important;
}

[data-theme="light"] .bin.organic {
  border-color: #92400e !important;
  background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
  color: #7c2d12 !important;
  box-shadow: 0 4px 14px rgba(146, 64, 14, 0.18) !important;
}

[data-theme="light"] .bin-card.paper-card { color: #1d4ed8 !important; border-color: #2563eb !important; background: #ffffff !important; }
[data-theme="light"] .bin-card.plastic-card { color: #b91c1c !important; border-color: #dc2626 !important; background: #ffffff !important; }
[data-theme="light"] .bin-card.glass-card { color: #065f46 !important; border-color: #059669 !important; background: #ffffff !important; }
[data-theme="light"] .bin-card.organic-card { color: #7c2d12 !important; border-color: #92400e !important; background: #ffffff !important; }

[data-theme="light"] .bin-count {
  background: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

/* ── PILLS & STAT BADGES ── */
[data-theme="light"] .pill,
[data-theme="light"] .stat-pill {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] .progress-bar-wrap,
[data-theme="light"] .pbar-wrap,
[data-theme="light"] .timer-bar-wrap,
[data-theme="light"] .shield-bar-bg,
[data-theme="light"] .goal-prog-bg {
  background: #e2e8f0 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .shield-bar-wrap {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .shield-bar-label {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .shield-bar-fill {
  background: linear-gradient(90deg, #059669, #0891b2, #2563eb) !important;
  box-shadow: 0 0 10px rgba(8, 145, 178, 0.35) !important;
}

[data-theme="light"] .shield-pct {
  color: #0369a1 !important;
  font-weight: 900 !important;
}

/* ── OPTION BUTTONS & ACTION BUTTONS (DEFAULT UNSELECTED) ── */
[data-theme="light"] .opt-btn:not(.correct):not(.wrong),
[data-theme="light"] .choice-btn:not(.correct):not(.wrong),
[data-theme="light"] .btn-sec,
[data-theme="light"] .btn-restart {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .opt-btn:not(.correct):not(.wrong) *,
[data-theme="light"] .choice-btn:not(.correct):not(.wrong) * {
  color: #0f172a !important;
}

[data-theme="light"] .opt-btn:not(.correct):not(.wrong):hover,
[data-theme="light"] .choice-btn:not(.correct):not(.wrong):hover {
  background: #f8fafc !important;
  border-color: #3b82f6 !important;
}

[data-theme="light"] .opt-btn:not(.correct):not(.wrong) i {
  background: #f1f5f9 !important;
  color: #3b82f6 !important;
}

/* Maintain crisp white text on primary gradient buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-pri,
[data-theme="light"] .btn-continue,
[data-theme="light"] .btn-next,
[data-theme="light"] .btn-nxt,
[data-theme="light"] .btn-ok,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-spend {
  color: #ffffff !important;
}

/* ── MODALS & FEEDBACK OVERLAYS (LIGHT MODE) ── */
[data-theme="light"] .fb-overlay,
[data-theme="light"] .feedback-overlay {
  background: rgba(244, 247, 254, 0.92) !important;
  backdrop-filter: blur(10px);
}

[data-theme="light"] .fb-card,
[data-theme="light"] .feedback-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="light"] .fb-t,
[data-theme="light"] .fb-title,
[data-theme="light"] .feedback-title,
[data-theme="light"] #fbt,
[data-theme="light"] #fb-title {
  color: #0f172a !important;
}

[data-theme="light"] .fb-exp,
[data-theme="light"] .fb-d,
[data-theme="light"] .fb-info,
[data-theme="light"] .fb-fact,
[data-theme="light"] .fb-fun,
[data-theme="light"] .fb-tip,
[data-theme="light"] .fb-explain,
[data-theme="light"] .feedback-explain,
[data-theme="light"] #fbe,
[data-theme="light"] #fbd,
[data-theme="light"] #fbinfo,
[data-theme="light"] #fbfact,
[data-theme="light"] #fbtip,
[data-theme="light"] #fb-explain {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-left: 4px solid #2563eb !important;
}

[data-theme="light"] .fb-exp *,
[data-theme="light"] .fb-d *,
[data-theme="light"] .fb-info *,
[data-theme="light"] .fb-fact *,
[data-theme="light"] .fb-fun *,
[data-theme="light"] .fb-tip *,
[data-theme="light"] .fb-explain *,
[data-theme="light"] .feedback-explain * {
  color: #0f172a !important;
}

/* ── RESULT SCREEN (LIGHT MODE) ── */
[data-theme="light"] #sr,
[data-theme="light"] #screen-result {
  background: #f4f7fe !important;
  color: #0f172a !important;
}

[data-theme="light"] .res-box,
[data-theme="light"] .score-box,
[data-theme="light"] .result-score-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .res-n { color: #0f172a !important; }
[data-theme="light"] .res-l { color: #475569 !important; }
[data-theme="light"] .res-title, [data-theme="light"] .res-t { color: #0f172a !important; }
[data-theme="light"] .res-sub, [data-theme="light"] .res-s { color: #475569 !important; }

/* ── KIBO SPEECH BUBBLES ── */
[data-theme="light"] .kibo-bubble,
[data-theme="light"] .kibo-talk,
[data-theme="light"] .kb-talk {
  background: #ffffff !important;
  border: 1.5px solid #3b82f6 !important;
  color: #0f172a !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
}

/* ── THEME TOGGLE BUTTON IN LIGHT MODE ── */
[data-theme="light"] #theme-toggle {
  border-color: rgba(15, 23, 42, 0.15) !important;
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
[data-theme="light"] #theme-toggle:hover {
  background: rgba(15, 23, 42, 0.12) !important;
}

/* ── KIBO IMAGE MASCOT FILTER ── */
[data-theme="light"] .kibo-img {
  filter: none !important;
}
[data-theme="dark"] .kibo-img {
  filter: drop-shadow(0 6px 20px rgba(255, 255, 255, 0.12));
}

/* ── SITE FOOTER ── */
[data-theme="light"] .site-footer {
  background: rgba(0, 0, 0, 0.02) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}

/* ============================================================
   UNIVERSAL HIGH-CONTRAST PRESENTATION & INTRO SCREENS (#si)
   ============================================================ */

.intro-card {
  border-radius: 24px;
  padding: 26px 20px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}

/* ── DARK MODE PRESENTATION SCREENS ── */
[data-theme="dark"] #si,
[data-theme="dark"] #screen-intro {
  color: #ffffff;
}

[data-theme="dark"] .intro-t,
[data-theme="dark"] .intro-title {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .intro-s,
[data-theme="dark"] .intro-sub,
[data-theme="dark"] .intro-subtitle,
[data-theme="dark"] .intro-desc {
  color: #f8fafc;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.6;
}

/* ── LIGHT MODE PRESENTATION SCREENS ── */
[data-theme="light"] #si,
[data-theme="light"] #screen-intro {
  color: #020617;
}

[data-theme="light"] .intro-card {
  background: #ffffff !important;
  color: #020617 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .intro-t,
[data-theme="light"] .intro-title {
  color: #020617 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

[data-theme="light"] .intro-s,
[data-theme="light"] .intro-sub,
[data-theme="light"] .intro-subtitle,
[data-theme="light"] .intro-desc {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  line-height: 1.6 !important;
}

[data-theme="light"] .badge,
[data-theme="light"] .intro-badge {
  background: #ffffff !important;
  color: #020617 !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .prof-chip,
[data-theme="light"] .bin-card,
[data-theme="light"] .mode-card,
[data-theme="light"] .level-card,
[data-theme="light"] .lev-card,
[data-theme="light"] .goal-preview,
[data-theme="light"] .coin-demo,
[data-theme="light"] .shield-demo,
[data-theme="light"] .intro-rules,
[data-theme="light"] .rule-item {
  background: #ffffff !important;
  color: #020617 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .mode-card .mname,
[data-theme="light"] .level-card .lname,
[data-theme="light"] .rule-item span,
[data-theme="light"] .goal-item {
  color: #020617 !important;
  font-weight: 900 !important;
}

[data-theme="light"] .mode-card .mdesc,
[data-theme="light"] .level-card .ldesc {
  color: #334155 !important;
  font-weight: 800 !important;
}

/* ============================================================
   MODERN ACCENTS & ENHANCED GLOWS
   ============================================================ */

.modern-accent-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #059669, #0284c7, #f59e0b);
  border-radius: 4px;
}

/* GLOW HOVER EFFECTS */
.glow-blue:hover {
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28), 0 0 20px rgba(59, 130, 246, 0.25) !important;
  border-color: #3b82f6 !important;
}
.glow-cyan:hover {
  box-shadow: 0 16px 36px rgba(8, 145, 178, 0.28), 0 0 20px rgba(6, 182, 212, 0.25) !important;
  border-color: #06b6d4 !important;
}
.glow-green:hover {
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.28), 0 0 20px rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
}
.glow-amber:hover {
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.28), 0 0 20px rgba(245, 158, 11, 0.25) !important;
  border-color: #f59e0b !important;
}
.glow-purple:hover {
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.28), 0 0 20px rgba(139, 92, 246, 0.25) !important;
  border-color: #8b5cf6 !important;
}

/* ANIMATIONS & KEYFRAMES */
@keyframes coinSparkle {
  0% { transform: scale(0.6) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 12px #f59e0b); }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes stampImpact {
  0% { transform: scale(3) rotate(-15deg); opacity: 0; }
  60% { transform: scale(0.9) rotate(4deg); opacity: 1; }
  80% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes cardFlipIn {
  from { transform: perspective(800px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}

@keyframes waveShimmer {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-6px) scaleY(1.05); }
}

@keyframes laserSweep {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 92%; opacity: 1; box-shadow: 0 0 16px rgba(6, 182, 212, 0.9); }
  100% { top: 0%; opacity: 0.8; }
}

@keyframes kiboWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-6deg) scale(1.08); }
  75% { transform: rotate(6deg) scale(1.08); }
}

.btn-tactile {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  user-select: none;
}
.btn-tactile:active {
  transform: scale(0.94) !important;
}

/* ============================================================
   BOTÃO E MODAL DE VÍDEO TUTORIAL (SIMULADOR INTERACTIVO)
   ============================================================ */

.btn-tutorial {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  margin-top: 4px;
}
[data-theme="light"] .btn-tutorial {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.2);
  color: #0f172a;
}
.btn-tutorial:hover {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.tutorial-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.tutorial-modal-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.tutorial-card {
  background: var(--card, #1e293b);
  border: 2px solid var(--border-card, #334155);
  border-radius: 24px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  color: var(--text, #f8fafc);
  animation: cardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-card, #334155);
}
.tutorial-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tutorial-badge {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #38bdf8;
}
.tutorial-title {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}
.tutorial-btn-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-card, #334155);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tutorial-video-screen {
  background: #090d16;
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video-rec-indicator {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.85);
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse 1.2s infinite;
}

.video-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.video-hand-cursor {
  position: absolute;
  font-size: 24px;
  color: #fbbf24;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  z-index: 20;
  pointer-events: none;
  animation: cursorTapAnim 2.4s ease-in-out infinite;
}

@keyframes cursorTapAnim {
  0% { transform: translate(40px, 30px) scale(1); }
  40% { transform: translate(0px, 0px) scale(0.9); }
  60% { transform: translate(0px, 0px) scale(1.1); }
  100% { transform: translate(-30px, 20px) scale(1); }
}

.demo-card-visual {
  background: rgba(30, 41, 59, 0.9);
  border: 1.5px solid #0284c7;
  border-radius: 12px;
  padding: 12px;
  width: 75%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.demo-badge-bar {
  font-size: 10px;
  font-weight: 900;
  color: #38bdf8;
  margin-bottom: 6px;
}
.demo-headline-box {
  height: 8px;
  background: #38bdf8;
  border-radius: 4px;
  width: 80%;
  margin-bottom: 6px;
}
.demo-text-line {
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  width: 100%;
  margin-bottom: 4px;
}
.demo-text-line.short { width: 60%; }

.demo-choice-row {
  display: flex;
  gap: 12px;
}
.demo-btn-box {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-btn-box.green {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}
.demo-btn-box.red {
  background: rgba(220, 38, 38, 0.3);
  border: 1px dashed #ef4444;
  color: #ef4444;
}

.demo-win-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.demo-trophy {
  font-size: 38px;
  color: #f59e0b;
  filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.6));
}
.demo-star-row {
  display: flex;
  gap: 6px;
}
.demo-star-row i.gold {
  color: #fbbf24;
  font-size: 16px;
}
.demo-win-text {
  font-size: 12px;
  font-weight: 900;
  color: #10b981;
}

.video-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}
.video-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #10b981);
  width: 33%;
  transition: width 0.4s ease;
}

.tutorial-step-box {
  padding: 18px 20px;
  background: var(--card, #1e293b);
}
.tutorial-step-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text, #ffffff);
  margin: 0 0 4px 0;
}
.tutorial-step-desc {
  font-size: 13.5px;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.5;
}

.tutorial-controls {
  padding: 14px 20px;
  border-top: 1px solid var(--border-card, #334155);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.04);
}
.tutorial-dots {
  display: flex;
  gap: 6px;
}
.tut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.25s ease;
}
[data-theme="light"] .tut-dot {
  background: rgba(15, 23, 42, 0.2);
}
.tut-dot.active {
  width: 24px;
  border-radius: 10px;
  background: #38bdf8;
}

.tutorial-actions {
  display: flex;
  gap: 8px;
}
.btn-tut-prev {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-card, #334155);
  color: var(--text, #ffffff);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.btn-tut-next {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  border: none;
  color: #ffffff;
  border-radius: 12px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

/* ============================================================
   SISTEMA DE ELOGIOS E ENTUSIASMO (KIBOPRAISE & CONFETTI)
   ============================================================ */

.kibo-praise-floater {
  position: fixed;
  transform: translate(-50%, -50%) scale(0.5);
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.6), 0 0 20px rgba(251, 191, 36, 0.4);
  border: 2px solid #34d399;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: praisePopAnim 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.kibo-praise-floater.super {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-color: #fde047;
  font-size: 18px;
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.7);
}

@keyframes praisePopAnim {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); opacity: 0; }
  35% { transform: translate(-50%, -80px) scale(1.15) rotate(4deg); opacity: 1; }
  60% { transform: translate(-50%, -95px) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -140px) scale(0.85); opacity: 0; }
}

.kibo-confetti-particle {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiExplode 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes confettiExplode {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(720deg);
    opacity: 0;
  }
}