/* Bebela Code — casca do app. Tokens visuais + telas.
   css/play.css só USA estes tokens; quem define é este arquivo.
   Estrutura no estilo Duolingo (chapado, cantos 12px, borda 2px, borda inferior 4px,
   botões em MAIÚSCULAS) com paleta própria: violeta + turquesa. */

/* ---------- fonte pixel das brincadeiras (offline, sem CDN) ---------- */
@font-face {
  font-family: "DTM Sans";
  src: url("../fonts/DTM-Sans.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DTM Mono";
  src: url("../fonts/DTM-Mono.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  /* superfícies */
  --bg: #ffffff;
  --bg-soft: #faf9ff;
  --card: #ffffff;
  --line: #e6e4f0;
  --disabled: #b4b2c2;

  /* tinta */
  --ink: #3d3a50;
  --muted: #77748a;
  --deep: #1d1a39;

  /* marca */
  --primary: #7c5cff;
  --primary-dark: #5a3fd6;
  --primary-wash: #ebe5ff;

  /* ação secundária / links */
  --blue: #12b5a6;
  --blue-dark: #0d8f83;
  --blue-wash: #dcf6f3;

  /* certo / errado */
  --ok: #2ec27e;
  --ok-dark: #1f9d63;
  --ok-wash: #d9f7e8;
  --danger: #ff5a6e;
  --danger-dark: #e03a50;
  --danger-wash: #ffe1e5;

  /* XP, estrelas, ofensiva */
  --gold: #ffb830;
  --gold-dark: #d9920f;
  --gold-wash: #fff3dc;
  --streak: #ff8a3d;

  /* usado por play.css / temas de mundo */
  --purple: #7c5cff;
  --purple-dark: #5a3fd6;

  --radius: 12px;
  --radius-card: 16px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-game: "DTM Sans", var(--font);
  --mono-game: "DTM Mono", var(--mono);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --tab-h: 64px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; margin: 0; }
code, pre, textarea, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* texto das brincadeiras na fonte pixel (maior, sem negrito sintético) */
.gamefont {
  font-family: var(--font-game);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0;
}
.gamefont strong, .gamefont b { font-weight: 400; color: var(--primary-dark); }
.gamefont code { font-family: var(--mono-game); font-weight: 400; }

#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}
.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.screen > .view {
  flex: 1 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  animation: viewIn .26s ease both;
}
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wrap { max-width: 560px; margin: 0 auto; padding: 16px; width: 100%; min-width: 0; }
.screen > .view, .lesson__body > .step { min-width: 0; }

/* ---------- botões (assinatura: borda inferior de 4px + efeito de apertar) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px;
  border: 0; border-radius: var(--radius);
  background: var(--primary); color: #fff;
  font-family: var(--font);
  font-weight: 700; font-size: 15px; letter-spacing: .053em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--primary-dark);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform .06s ease, box-shadow .06s ease, background .15s ease, opacity .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--primary-dark); }
.btn:disabled { background: #efeef5; color: var(--disabled); box-shadow: 0 4px 0 #dcdae6; cursor: default; }
.btn--block { width: 100%; }
.btn--blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.btn--blue:active:not(:disabled) { box-shadow: 0 0 0 var(--blue-dark); }
.btn--ok { background: var(--ok); box-shadow: 0 4px 0 var(--ok-dark); }
.btn--ok:active:not(:disabled) { box-shadow: 0 0 0 var(--ok-dark); }
.btn--danger { background: var(--danger); box-shadow: 0 4px 0 var(--danger-dark); }
.btn--danger:active:not(:disabled) { box-shadow: 0 0 0 var(--danger-dark); }
.btn--gold { background: var(--gold); color: var(--deep); box-shadow: 0 4px 0 var(--gold-dark); }
.btn--gold:active:not(:disabled) { box-shadow: 0 0 0 var(--gold-dark); }
/* contornado: branco, borda 2px, texto turquesa */
.btn--ghost {
  background: var(--card); color: var(--blue-dark);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}
.btn--ghost:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.btn--sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  background: none; border: 0; border-radius: var(--radius);
  font-size: 22px; color: var(--muted); cursor: pointer;
}
.icon-btn:active { background: var(--primary-wash); }
.icon-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- topbar ---------- */
.topbar {
  flex: 0 0 auto;
  padding: calc(var(--safe-t) + 12px) 16px 12px;
  background: var(--card);
  border-bottom: 2px solid var(--line);
  z-index: 5;
}
.stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 17px;
  padding: 4px 8px; border-radius: var(--radius);
}
.stat i { font-style: normal; font-size: 20px; }
.stat--streak { color: var(--streak); }
.stat--xp { color: var(--gold-dark); }
.stat--star { color: var(--primary-dark); }
.goalbar { margin-top: 12px; }
.goalbar__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.bar { height: 12px; background: #efeef5; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar--gold > i { background: var(--gold); }

/* ---------- tabbar ---------- */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  background: var(--card);
  border-top: 2px solid var(--line);
  padding-bottom: var(--safe-b);
  z-index: 6;
}
.tab {
  flex: 1; min-height: var(--tab-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .053em;
  user-select: none; -webkit-user-select: none;
}
.tab i { font-style: normal; font-size: 24px; line-height: 1; transition: transform .15s ease; }
.tab[aria-current="page"] { color: var(--primary-dark); }
.tab[aria-current="page"] i { transform: scale(1.12); }
.tab:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* ---------- onboarding ---------- */
.ob { padding: 24px 20px calc(24px + var(--safe-b)); max-width: 460px; margin: 0 auto; text-align: center; width: 100%; }
.ob__mascot { width: 150px; height: 150px; margin: 8px auto 4px; animation: bob 3s ease-in-out infinite; }
.ob__mascot svg { width: 100%; height: 100%; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.ob h1 { font-size: 30px; }
.ob h2 { font-size: 22px; margin-bottom: 4px; }
.ob p.lead { color: var(--muted); font-size: 16px; margin: 8px 0 24px; }
.field {
  width: 100%; font-size: 18px; font-family: var(--font); font-weight: 700;
  padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink); text-align: center;
}
.field:focus { outline: none; border-color: var(--primary); }
.ob__note { font-size: 13px; color: var(--muted); margin-top: 12px; font-weight: 700; }

.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 24px; }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 96px; padding: 12px;
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius);
  cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink);
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.pick svg { width: 54px; height: 54px; }
.pick em { font-style: normal; font-size: 30px; line-height: 1; }
.pick small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.pick[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-dark); }
.pick:active { transform: scale(.97); }
.pick:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- trilha ---------- */
.trail { padding: 16px 16px calc(32px + var(--safe-b)); max-width: 520px; margin: 0 auto; width: 100%; background: var(--bg-soft); flex: 1 0 auto; }
.world { margin-bottom: 24px; }
.world__banner {
  border-radius: var(--radius-card);
  padding: 16px;
  color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.world__banner em { font-style: normal; font-size: 34px; line-height: 1; }
.world__banner h2 { font-size: 19px; }
.world__banner p { font-size: 13px; opacity: .92; font-weight: 700; }
.world__banner b { margin-left: auto; font-size: 13px; background: rgba(255,255,255,.24); padding: 4px 12px; border-radius: 99px; white-space: nowrap; }

.path { position: relative; padding: 48px 0 8px; }
.path__links { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.link {
  position: absolute; height: 8px; border-radius: 99px;
  background: none; border-top: 4px dashed var(--line);
  transform-origin: 0 50%;
}
.link.link--on { background: none; border-color: #d5cdfb; }

.node { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: 20px; }
.node { transform: translateX(calc(var(--k, 0) * min(104px, 21vw))); }
.bubble {
  position: relative;
  width: 84px; height: 76px;
  border: 0; border-radius: 50% / 46%;
  background: var(--primary);
  box-shadow: 0 7px 0 var(--primary-dark);
  color: #fff; font-size: 34px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .08s ease;
}
.bubble:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--primary-dark); }
.bubble:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.bubble--done { background: var(--gold); box-shadow: 0 7px 0 var(--gold-dark); }
.bubble--locked { background: #efeef5; box-shadow: 0 7px 0 #dcdae6; color: var(--disabled); }
.bubble--current { animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 7px 0 var(--primary-dark), 0 0 0 0 rgba(124, 92, 255, .45); }
  50% { box-shadow: 0 7px 0 var(--primary-dark), 0 0 0 16px rgba(124, 92, 255, 0); }
}
.bubble__stars {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1px; font-size: 13px;
}
.startpop {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
  background: var(--card); color: var(--primary-dark);
  font-family: var(--font-game); font-size: 13px; font-weight: 400; letter-spacing: .04em;
  padding: 8px 12px; border-radius: var(--radius); border: 2px solid var(--line);
  white-space: nowrap; animation: bobx 2s ease-in-out infinite;
}
/* o keyframe precisa repetir o translateX(-50%), senão a animação o sobrescreve */
@keyframes bobx { 0%, 100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, -6px) } }
.startpop::after {
  content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--card);
}
.soon {
  margin-top: 8px; padding: 24px 16px; text-align: center;
  background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius-card);
}
.soon em { font-style: normal; font-size: 32px; }
.soon h3 { font-size: 17px; margin: 8px 0 4px; }
.soon p { font-size: 14px; color: var(--muted); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }

/* ---------- bottom sheet ---------- */
.sheet-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(29, 26, 57, .45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .2s ease both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet {
  width: 100%; max-width: 520px;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 12px 20px calc(24px + var(--safe-b));
  animation: up .26s cubic-bezier(.2,.9,.3,1) both;
  max-height: 88vh; overflow-y: auto;
}
@keyframes up { from { transform: translateY(100%) } to { transform: none } }
.sheet__grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 16px; }
.sheet__emoji { font-size: 40px; text-align: center; }
.sheet h3 { font-size: 21px; text-align: center; margin: 8px 0; }
.sheet p {
  text-align: center; color: var(--muted); margin-bottom: 16px;
  font-family: var(--font-game); font-weight: 400; font-size: 18px; line-height: 1.35;
}
.sheet p strong { font-weight: 400; color: var(--primary-dark); }
.sheet .stars-row { text-align: center; font-size: 22px; margin-bottom: 8px; }
@media (min-width: 720px) {
  .sheet-back { align-items: center; }
  .sheet { border-radius: var(--radius-card); max-width: 440px; padding-bottom: 24px; }
}

/* ---------- lição ---------- */
.lesson { flex: 1 1 auto; min-height: 0; }
.lesson__top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 8px) 12px 8px;
  background: var(--card); border-bottom: 2px solid var(--line);
}
.lesson__top .bar { flex: 1; }
.lesson__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lesson__body > .step { padding: 16px 16px 24px; max-width: 620px; margin: 0 auto; animation: viewIn .22s ease both; }
.lesson__foot {
  flex: 0 0 auto; position: relative;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: var(--card); border-top: 2px solid var(--line);
}
.lesson__foot .row { display: flex; gap: 12px; align-items: center; max-width: 620px; margin: 0 auto; }
.lesson__foot .row .btn { flex: 1; }

.step h2 {
  font-family: var(--font-game); font-weight: 400; letter-spacing: 0;
  font-size: 20px; line-height: 1.35; margin-bottom: 16px; color: var(--ink);
}
.step h2 strong { font-weight: 400; color: var(--primary-dark); }
.step h2 code, .step .prompt code { font-family: var(--mono-game); }
.step .prompt {
  font-family: var(--font-game); font-weight: 400;
  font-size: 19px; line-height: 1.35; margin-bottom: 16px;
}
.step .prompt strong { font-weight: 400; color: var(--primary-dark); }
.step .prompt code, .bubbletext code, .opt code, .fb code, .notice code, .sheet p code {
  background: var(--primary-wash); color: var(--primary-dark);
  border-radius: 6px; padding: 1px 5px; font-family: var(--mono-game); font-size: .95em;
}
pre.code {
  background: var(--deep); color: #e9e6ff;
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px;
  font-family: var(--mono-game); font-size: 15px; line-height: 1.6;
  overflow-x: auto; white-space: pre;
}
pre.code .cmt { color: #9a95c7; }

/* info */
.info-card { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.info-card .mascot { flex: 0 0 auto; width: 86px; }
.info-card .mascot svg { width: 100%; height: auto; }
.bubbletext {
  position: relative; flex: 1;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-card);
  padding: 14px 16px;
  font-family: var(--font-game); font-weight: 400; font-size: 19px; line-height: 1.35;
}
.bubbletext strong { font-weight: 400; color: var(--primary-dark); }
.bubbletext::after {
  content: ""; position: absolute; left: -9px; bottom: 16px;
  border: 8px solid transparent; border-right-color: var(--card);
}
.bubbletext::before {
  content: ""; position: absolute; left: -13px; bottom: 16px;
  border: 8px solid transparent; border-right-color: var(--line);
}

/* choice */
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius);
  font-family: var(--font-game); font-weight: 400; font-size: 19px; line-height: 1.3;
  cursor: pointer; color: var(--ink);
  transition: transform .07s ease, border-color .15s, background .15s;
}
.opt strong { font-weight: 400; color: var(--primary-dark); }
.opt:active { transform: scale(.985); }
.opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-dark); }
.opt.is-right { border-color: var(--ok); background: var(--ok-wash); color: var(--ok-dark); }
.opt.is-wrong { border-color: var(--danger); background: var(--danger-wash); color: var(--danger-dark); }
.opt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt__k {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--muted);
}

/* order */
.slot-area {
  min-height: 108px; padding: 8px; margin-bottom: 16px;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--card);
  display: flex; flex-direction: column; gap: 8px;
}
.slot-area:empty::after {
  content: "Toque nas linhas abaixo para montar o programa";
  color: var(--muted); font-size: 14px; font-weight: 700; padding: 16px 8px; text-align: center;
}
.bank { display: flex; flex-direction: column; gap: 8px; }
.line-chip {
  display: block; width: 100%; text-align: left;
  min-height: 46px; padding: 12px;
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius);
  font-family: var(--mono-game); font-size: 15px; white-space: pre; overflow-x: auto;
  cursor: pointer; color: var(--ink); transition: transform .07s ease;
}
.line-chip:active { transform: scale(.985); }
.line-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.slot-area .line-chip { background: var(--primary-wash); border-color: #d5cdfb; color: var(--primary-dark); }

/* fill */
.fill-code {
  background: var(--deep); color: #e9e6ff; border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; font-family: var(--mono-game);
  font-size: 16px; line-height: 2.1; white-space: pre-wrap; word-break: break-word;
}
.blank {
  display: inline-block; min-width: 72px; min-height: 36px; padding: 2px 10px;
  margin: 0 2px; vertical-align: middle; text-align: center;
  background: #332f57; border: 2px dashed #6f69a5; border-radius: 8px;
  color: #e9e6ff; font-family: var(--mono-game); font-size: 16px; cursor: pointer;
}
.blank.is-filled { background: var(--primary); border: 2px solid var(--primary-dark); color: #fff; }
.blank:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  min-height: 46px; padding: 12px 16px;
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius);
  font-family: var(--mono-game); font-size: 16px; color: var(--ink); cursor: pointer;
}
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* maze / code */
.play-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.play-head .prompt { margin: 0; flex: 1; }
.play-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  /* O desafio continua vertical em telas grandes: primeiro o mundo para
     observar, depois o código para escrever. A mesma ordem funciona nas
     lições e no Ateliê, sem encolher o personagem numa coluna lateral. */
  .play-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lesson__body > .step--play { max-width: 1040px; }
  .step--play .mz-grid,
  .play-grid .mz-grid {
    max-width: min(
      100%,
      calc(var(--mz-cols, 7) * 8rem),
      calc(60vh * var(--mz-cols, 7) / var(--mz-rows, 6))
    );
  }
  .step--play .ed-root,
  .play-grid .ed-root {
    --ed-fs: 18px;
    --ed-lh: 30px;
    --ed-pad: 14px;
    --ed-h: clamp(15rem, 34vh, 22rem);
  }
}
/* .maze-box / .ed-box são só contêineres: BebelaMazeView e BebelaEditor (play.css)
   trazem o próprio fundo, borda e cantos. */
.maze-box, .ed-box, .play-grid > * { min-width: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.toolbar .btn { flex: 0 0 auto; }
.speed {
  min-height: 44px; padding: 8px 12px; border-radius: var(--radius);
  border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card);
  font-weight: 700; font-size: 14px; cursor: pointer; color: var(--muted);
}
.speed[aria-pressed="true"] { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-wash); }
.variant-tag {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary-dark);
  background: var(--primary-wash); border-radius: 99px; padding: 4px 12px; margin-bottom: 8px;
}
.console {
  background: var(--deep); color: #e9e6ff; border-radius: var(--radius); padding: 12px; margin-top: 12px;
  font-family: var(--mono-game); font-size: 15px; white-space: pre-wrap; word-break: break-word;
  max-height: 180px; overflow-y: auto;
}
.console b {
  display: block; color: #9a95c7; font-family: var(--font); font-size: 11px;
  text-transform: uppercase; letter-spacing: .053em; margin-bottom: 4px;
}
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.diff > div {
  background: var(--deep); border-radius: var(--radius); padding: 12px;
  font-family: var(--mono-game); font-size: 14px; color: #e9e6ff; white-space: pre-wrap;
}
.diff b { display: block; font-family: var(--font); font-size: 11px; text-transform: uppercase; letter-spacing: .053em; margin-bottom: 4px; }
.diff .want b { color: #8ee0b6; }
.diff .got b { color: #ffb3bd; }

.notice {
  margin-top: 12px; padding: 12px 16px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--card);
  font-family: var(--font-game); font-weight: 400; font-size: 18px; line-height: 1.35;
}
.notice b { display: block; font-weight: 400; margin-bottom: 4px; }
.notice strong { font-weight: 400; }
.notice--bad { border-color: var(--danger); background: var(--danger-wash); color: var(--danger-dark); }
.notice--good { border-color: var(--ok); background: var(--ok-wash); color: var(--ok-dark); }
.notice--hint { border-color: var(--gold); background: var(--gold-wash); color: #8a5c00; }
.badge-lean {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--gold); color: var(--deep); font-weight: 700; font-size: 14px;
  padding: 8px 16px; border-radius: 99px;
  animation: pop .4s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* feedback */
.fb {
  position: absolute; left: 0; right: 0; bottom: 100%;
  padding: 16px;
  background: var(--ok-wash); border-top: 2px solid var(--ok);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
}
.fb.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.fb__in { max-width: 620px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-start; }
.fb__ico { font-size: 26px; line-height: 1.1; }
.fb strong {
  display: block; font-family: var(--font-game); font-weight: 400;
  font-size: 20px; line-height: 1.3; color: var(--ok-dark);
}
.fb span { font-family: var(--font-game); font-weight: 400; font-size: 18px; line-height: 1.35; color: var(--ok-dark); }
.fb span strong { display: inline; font-size: inherit; }
.fb--bad { background: var(--danger-wash); border-top-color: var(--danger); }
.fb--bad strong, .fb--bad span { color: var(--danger-dark); }

/* ---------- fim de lição ---------- */
.done { text-align: center; padding: 32px 20px calc(32px + var(--safe-b)); max-width: 460px; margin: 0 auto; width: 100%; }
.done__mascot { width: 160px; margin: 0 auto 8px; animation: bob 2.4s ease-in-out infinite; }
.done__mascot svg { width: 100%; height: auto; }
.done h1 {
  font-family: var(--font-game); font-weight: 400; letter-spacing: 0;
  font-size: 26px; line-height: 1.3; color: var(--primary-dark);
}
.done .stars-row { font-size: 44px; letter-spacing: 6px; margin: 12px 0 4px; }
.done .stars-row em { font-style: normal; display: inline-block; animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.done .stars-row em:nth-child(2) { animation-delay: .15s }
.done .stars-row em:nth-child(3) { animation-delay: .3s }
.done > p.muted { font-family: var(--font-game); font-weight: 400; font-size: 18px; line-height: 1.35; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.tile { background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius); padding: 12px 4px; }
.tile b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.tile small { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .053em; }
.tile--xp b { color: var(--gold-dark); }
.tile--streak b { color: var(--streak); }
.tile--star b { color: var(--primary-dark); }
.done .newbadge { margin: 0 0 16px; }

#fx-root { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti { position: absolute; width: 10px; height: 14px; border-radius: 2px; will-change: transform; }

/* ---------- ateliê ---------- */
.seg { display: flex; gap: 4px; background: #f2f1f8; padding: 4px; border-radius: var(--radius); margin-bottom: 16px; }
.seg button {
  flex: 1; min-height: 44px; border: 0; background: none; border-radius: 8px;
  font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer;
}
.seg button[aria-selected="true"] { background: var(--card); color: var(--primary-dark); }
.hero-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; }
.hero-row .pick { flex: 0 0 96px; min-height: 84px; font-size: 13px; }
.hero-row .pick svg { width: 40px; height: 40px; }

/* ---------- perfil ---------- */
.profile { padding: 20px 16px calc(32px + var(--safe-b)); max-width: 560px; margin: 0 auto; width: 100%; }
.profile__head { text-align: center; margin-bottom: 24px; }
.profile__av { width: 110px; margin: 0 auto; }
.profile__av svg { width: 100%; height: auto; }
.profile__head h1 { font-size: 25px; }
.profile__head p { color: var(--muted); font-size: 14px; font-weight: 700; }
.sec-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .053em; color: var(--muted); margin: 24px 0 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card { background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.stat-card em { font-style: normal; font-size: 26px; }
.stat-card b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.stat-card small { font-size: 12px; color: var(--muted); font-weight: 700; }
.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.ach__it {
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius);
  padding: 12px 4px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted);
}
.ach__it em { font-style: normal; display: block; font-size: 30px; filter: grayscale(1); opacity: .35; margin-bottom: 4px; }
.ach__it.is-on { border-color: var(--gold); background: var(--gold-wash); color: #8a5c00; }
.ach__it.is-on em { filter: none; opacity: 1; }
.rows { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 16px; background: none; border: 0;
  border-bottom: 2px solid var(--line); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
}
.row-item:last-child { border-bottom: 0; }
.row-item em { font-style: normal; font-size: 22px; }
.row-item .right { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 700; }
.row-item.is-danger { color: var(--danger-dark); }
.switch { margin-left: auto; width: 52px; height: 30px; border-radius: 99px; background: #dcdae6; position: relative; transition: background .2s; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
[aria-checked="true"] .switch { background: var(--primary); }
[aria-checked="true"] .switch::after { transform: translateX(22px); }

/* ---------- utilidades ---------- */
.spacer { height: 12px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 14px; font-weight: 700; }
.warnbox {
  margin: 16px; padding: 16px; border-radius: var(--radius);
  background: var(--gold-wash); border: 2px solid var(--gold); color: #8a5c00;
  font-size: 14px; font-weight: 700;
}

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

/* =============================================================================
   Bebela Code — visual refresh
   Missão: deixar o app com cara de "mesa de jogo de lógica": contraste firme,
   cartões úteis e trilha que comunica avanço. Este bloco só sobrescreve
   apresentação; os seletores, IDs e a estrutura que o JavaScript usa continuam
   exatamente os mesmos.
   ========================================================================== */

:root {
  --bg: #f7f6fc;
  --bg-soft: #efedf8;
  --card: #ffffff;
  --line: #d8d3e7;
  --disabled: #9891aa;
  --ink: #27233f;
  --muted: #6c6680;
  --deep: #27233f;
  --primary: #7c5cff;
  --primary-dark: #5338c9;
  --primary-wash: #eeeaff;
  --blue: #12b5a6;
  --blue-dark: #087f75;
  --blue-wash: #dff7f3;
  --ok: #25ad78;
  --ok-dark: #14734d;
  --ok-wash: #dcf6e9;
  --danger: #ec5f70;
  --danger-dark: #ba354c;
  --danger-wash: #ffe6ea;
  --gold: #f7b23b;
  --gold-dark: #b87408;
  --gold-wash: #fff2d9;
  --streak: #e9783d;
  --radius: 12px;
  --radius-card: 12px;
  --tab-h: 68px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.wrap { max-width: 640px; padding: 20px 16px; }

/* Controles com relevo mecânico — a principal assinatura tátil do app. */
.btn {
  min-height: 52px;
  border: 2px solid var(--primary-dark);
  border-bottom-width: 5px;
  border-radius: var(--radius);
  box-shadow: none;
  letter-spacing: .045em;
}
.btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 2px; box-shadow: none; }
.btn--blue { border-color: var(--blue-dark); box-shadow: none; }
.btn--blue:active:not(:disabled) { box-shadow: none; }
.btn--ok { border-color: var(--ok-dark); box-shadow: none; }
.btn--ok:active:not(:disabled) { box-shadow: none; }
.btn--danger { border-color: var(--danger-dark); box-shadow: none; }
.btn--danger:active:not(:disabled) { box-shadow: none; }
.btn--gold { border-color: var(--gold-dark); box-shadow: none; }
.btn--gold:active:not(:disabled) { box-shadow: none; }
.btn--ghost { border-color: var(--line); border-bottom-width: 5px; box-shadow: none; }
.btn--ghost:active:not(:disabled) { border-bottom-width: 2px; box-shadow: none; }
.btn:disabled { border-color: #dedbe8; border-bottom-width: 5px; box-shadow: none; }

.topbar {
  padding: calc(var(--safe-t) + 12px) 16px 10px;
  background: var(--card);
  border-bottom: 2px solid var(--line);
}
.stat { min-height: 36px; padding: 5px 8px; border: 2px solid transparent; }
.stat--streak { background: #fff0e7; border-color: #ffd5c2; }
.stat--xp { background: var(--gold-wash); border-color: #f7deb1; }
.stat--star { background: var(--primary-wash); border-color: #d9cffd; }
.bar { height: 10px; border-radius: 6px; background: #dfdbe9; }
.bar > i { border-radius: 4px; }

.tabbar { border-top: 2px solid var(--line); background: var(--card); }
.tab { position: relative; min-height: var(--tab-h); font-size: 11px; letter-spacing: .06em; }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; width: 36px; height: 4px;
  background: var(--blue); border-radius: 0 0 4px 4px;
}

/* Trilha: o mapa deixa de ser uma coluna vazia; banners e nós formam uma
   sequência física, como casas de um jogo de tabuleiro. */
.trail { max-width: 640px; padding: 20px 16px calc(40px + var(--safe-b)); background: var(--bg-soft); }
.world { margin-bottom: 32px; }
.world__banner {
  min-height: 94px; padding: 16px; border: 2px solid rgba(39,35,63,.18);
  border-bottom-width: 5px; border-radius: var(--radius-card);
}
.world__banner em { font-size: 38px; }
.world__banner h2 { font-size: 21px; letter-spacing: -.03em; }
.world__banner p { margin-top: 2px; font-size: 13px; }
.world__banner b { padding: 6px 10px; border: 2px solid rgba(255,255,255,.34); border-radius: 8px; }
.path { padding: 58px 0 10px; }
.link { height: 0; background: none; border-top: 4px dashed var(--line); border-radius: 0; }
.link.link--on { background: none; border-color: #b9acf5; }
.node { margin-bottom: 28px; }
.bubble {
  width: 94px; height: 82px; border: 2px solid var(--primary-dark); border-bottom-width: 6px;
  border-radius: 22px; box-shadow: none; font-size: 30px;
}
.bubble:active { transform: translateY(4px); border-bottom-width: 2px; box-shadow: none; }
.bubble--done { background: var(--blue); border-color: var(--blue-dark); box-shadow: none; }
.bubble--locked { background: #e7e3ef; color: #958ea6; border-color: #ccc5da; box-shadow: none; }
.bubble--current { background: var(--primary); animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,92,255,.28); }
  55% { box-shadow: 0 0 0 12px rgba(124,92,255,0); }
}
.bubble__stars { bottom: -16px; font-size: 12px; letter-spacing: 1px; }
.startpop { top: -50px; border: 2px solid var(--primary-dark); border-bottom-width: 4px; border-radius: 8px; color: var(--primary-dark); }

/* Lição: leitura prioritária, respostas táteis e feedback sem poluição. */
.lesson__top { padding: calc(var(--safe-t) + 10px) 14px 10px; border-bottom: 2px solid var(--line); }
.lesson__body > .step { max-width: 680px; padding: 24px 16px 32px; }
.lesson__foot { border-top: 2px solid var(--line); padding: 12px 16px calc(14px + var(--safe-b)); }
.step h2 { font-size: 22px; line-height: 1.4; margin-bottom: 20px; }
.step .prompt { font-size: 20px; line-height: 1.42; margin-bottom: 20px; }
pre.code { border: 2px solid #171427; border-bottom-width: 5px; border-radius: var(--radius); padding: 14px 16px; }
.info-card { align-items: center; gap: 14px; }
.info-card .mascot { width: 96px; }
.bubbletext { border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius); padding: 14px 16px; }
.opt { min-height: 60px; border-color: var(--line); border-bottom-width: 5px; border-radius: var(--radius); padding: 13px 16px; }
.opt:active { transform: translateY(3px); border-bottom-width: 2px; }
.opt[aria-pressed="true"] { border-color: var(--primary-dark); background: var(--primary-wash); }
.slot-area { border: 2px dashed #bdb5cf; border-radius: var(--radius); background: #fbfaff; }
.line-chip { border-bottom-width: 5px; border-radius: var(--radius); }
.line-chip:active { transform: translateY(3px); border-bottom-width: 2px; }
.notice, .warnbox { border-bottom-width: 4px; border-radius: var(--radius); }
.fb { border-top-width: 2px; }

.seg { border: 2px solid var(--line); padding: 3px; background: #e9e6f2; border-radius: var(--radius); }
.seg button[aria-selected="true"] { border: 2px solid var(--primary-dark); background: var(--card); }
.profile { max-width: 640px; padding: 28px 16px calc(40px + var(--safe-b)); }
.profile__head { padding: 20px 16px; margin: 0 -16px 22px; background: var(--primary-wash); border-bottom: 2px solid #d5cafa; }
.profile__av { width: 118px; }
.stat-card, .ach__it, .tile { border-bottom-width: 5px; border-radius: var(--radius); }
.rows { border-radius: var(--radius); }

@media (min-width: 720px) {
  .wrap, .trail, .profile { max-width: 700px; }
  .trail { padding-top: 28px; }
  .path { padding-left: 36px; padding-right: 36px; }
  .lesson__body > .step { padding-left: 28px; padding-right: 28px; }
}

/* =============================================================================
   Bebela Code — trilha de missões
   Ritmo de aprendizagem curto + apresentação editorial de produto.
   ========================================================================== */

:root {
  --navy: #111b3a;
  --navy-2: #17254d;
  --paper: #f5f7fb;
  --cyan: #12b5d0;
  --cyan-dark: #087f98;
  --cyan-wash: #e5f8fb;
}

body { background: var(--paper); }
.bb-sprite { display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon-wrap { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.inline-icon { display: inline-flex; width: 18px; height: 18px; margin-right: 7px; vertical-align: -3px; }
.eyebrow { color: var(--primary-dark); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Cabeçalho compacto: progresso visível sem disputar espaço com a lição. */
.topbar { padding: calc(var(--safe-t) + 10px) 16px 10px; background: #fff; }
.topbar__inner { width: 100%; max-width: 980px; margin: 0 auto; }
.topbar__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
.brand__mark { display: inline-flex; width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--navy); color: #fff; }
.brand strong { font-size: 15px; }
.brand span { color: var(--cyan-dark); font-weight: 800; }
.stats { justify-content: flex-end; gap: 6px; }
.stat { min-height: 36px; border-color: var(--line); background: #fff; color: var(--navy); }
.stat .ui-icon-wrap { width: 18px; height: 18px; color: var(--primary); }
.stat small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stat--streak, .stat--xp, .stat--star { background: #fff; border-color: var(--line); color: var(--navy); }
.stat--streak .ui-icon-wrap { color: var(--streak); }
.stat--xp .ui-icon-wrap { color: var(--gold-dark); }
.goalbar { margin-top: 9px; }
.goalbar__top { font-size: 11px; }

/* Navegação por ícones vetoriais, sem emojis do sistema. */
.tab__icon { display: inline-flex; width: 24px; height: 24px; }
.tab span { line-height: 1; }

/* Abertura de missão: composição espacial simples, sem gradiente ou vidro. */
.trail { max-width: 980px; padding: 18px 16px calc(40px + var(--safe-b)); background: transparent; }
.home-intro {
  position: relative; min-height: 164px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 126px; align-items: center; gap: 10px;
  padding: 24px; border: 2px solid #22325d; border-bottom-width: 5px; border-radius: var(--radius);
  background: var(--navy); color: #fff;
}
.home-intro::before, .home-intro::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.home-intro::before { width: 180px; height: 180px; right: 26px; top: 58px; border: 2px solid rgba(18,181,208,.28); }
.home-intro::after { width: 5px; height: 5px; left: 56%; top: 28px; background: #fff; box-shadow: 54px 34px 0 #12b5d0, 108px 2px 0 #fff, 188px 46px 0 #7c5cff; }
.home-intro__copy { position: relative; z-index: 1; }
.home-intro .eyebrow { color: #73d8e7; margin-bottom: 7px; }
.home-intro h1 { max-width: 650px; color: #fff; font-size: clamp(26px, 5vw, 42px); line-height: 1.02; letter-spacing: -.045em; }
.home-intro__lead { margin-top: 8px; color: #c8d3ef; font-size: 15px; }
.home-intro__mascot { position: relative; z-index: 1; width: 126px; height: 126px; object-fit: contain; }

.resume-card { margin-top: 14px; padding: 18px; border: 2px solid #d8ddea; border-bottom-width: 5px; border-radius: var(--radius); background: #fff; }
.resume-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.resume-card__course { color: var(--primary-dark); font-size: 13px; font-weight: 800; }
.resume-card__time { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.resume-card__time .ui-icon-wrap { width: 17px; height: 17px; }
.resume-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .68fr); gap: 18px; align-items: stretch; }
.resume-card__copy h2 { margin-top: 5px; color: var(--navy); font-size: clamp(22px, 3.7vw, 31px); line-height: 1.12; }
.resume-card__copy > p:last-child { max-width: 600px; margin-top: 7px; color: var(--muted); font-size: 14px; }
.resume-card__code { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 106px; padding: 15px; border: 2px solid #22325d; border-bottom-width: 4px; border-radius: var(--radius); background: #101a34; color: #8ce6cf; font: 13px/1.35 var(--mono); }
.resume-card__code span:first-child { color: #75d9f2; }
.resume-card__cta { width: 100%; margin-top: 16px; background: var(--cyan); border-color: var(--cyan-dark); }
.resume-card__cta .ui-icon-wrap { width: 20px; height: 20px; }

.trail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 34px 2px 14px; }
.trail-heading h2 { margin-top: 3px; color: var(--navy); font-size: 25px; }
.trail-heading > span { padding: 7px 10px; border: 2px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }

.world { margin-bottom: 26px; }
.world__banner {
  position: relative;
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 106px; padding: 14px 18px; overflow: hidden;
  border-color: #22325d; background: var(--navy); color: #fff;
}
.world__banner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--world-accent); }
.world__mascot { width: 72px; height: 72px; object-fit: contain; }
.world__copy > span { color: #7edbe8; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.world__banner .world__copy h2 { color: #fff; font-size: 21px; }
.world__banner .world__copy p { color: #bcc8e5; font-size: 13px; }
.world__progress { min-width: 68px; padding: 8px 9px; border: 2px solid #34466f; border-radius: 9px; text-align: center; background: #19274d; }
.world__progress b, .world__progress small { display: block; }
.world__progress b { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 16px; }
.world__progress small { margin-top: 1px; color: #9daccc; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

/* Cartões substituem os círculos: título e propósito continuam legíveis bloqueados. */
.path { display: grid; gap: 10px; padding: 12px 0 0; }
.node { width: 100%; margin: 0; transform: none !important; }
.bubble {
  position: relative; width: 100%; height: auto; min-height: 98px;
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 58px; align-items: center; gap: 14px;
  padding: 14px 16px; overflow: visible; text-align: left;
  border-radius: var(--radius); border: 2px solid #d8ddea; border-bottom-width: 5px;
  background: #fff; color: var(--navy); font-size: 16px;
}
.bubble:active { transform: translateY(3px); border-bottom-width: 2px; }
.mission-index { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid #d7dcea; border-radius: 12px; background: #f5f6fa; color: var(--navy); font: 800 17px/1 var(--mono); }
.mission-copy { min-width: 0; }
.mission-copy strong { display: block; color: inherit; font-size: 17px; line-height: 1.18; }
.mission-copy small { display: block; max-width: 620px; margin-top: 5px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.3; }
.mission-state { justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); }
.mission-state .ui-icon-wrap { width: 26px; height: 26px; }
.mission-state small { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.bubble--current { border-color: var(--cyan); background: var(--cyan-wash); animation: none; }
.bubble--current .mission-index { border-color: var(--cyan); background: var(--cyan); color: #fff; }
.bubble--current .mission-state { color: var(--cyan-dark); }
.bubble--done { border-color: #b7e1d7; background: #f5fbf9; color: var(--navy); }
.bubble--done .mission-index { border-color: var(--blue); background: var(--blue); color: #fff; }
.bubble--done .mission-state { color: var(--blue-dark); }
.bubble--locked { border-color: #e0e2ea; background: #f4f5f8; color: #747b91; }
.bubble--locked .mission-index { color: #858ba0; }
.startpop { top: -11px; right: 14px; left: auto; transform: none; padding: 5px 8px; border-color: var(--cyan-dark); background: var(--cyan); color: #072b35; font-size: 9px; }
.startpop::after { display: none; }
.path__links, .link, .bubble__stars { display: none; }
.soon { display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px dashed #c8ccda; border-radius: var(--radius); color: var(--muted); text-align: left; }
.soon__icon { display: inline-flex; width: 42px; height: 42px; padding: 9px; border-radius: 10px; background: var(--primary-wash); color: var(--primary-dark); }
.soon h3 { color: var(--navy); font-size: 16px; }
.soon p { margin-top: 3px; font-size: 13px; }

/* Componentes atualizados para os sprites e ícones próprios. */
.ob__mascot .bb-sprite, .profile__av .bb-sprite, .done__mascot .bb-sprite, .info-card .mascot .bb-sprite, .sheet__mascot .bb-sprite { object-fit: contain; }
.pick > span { display: block; width: 58px; height: 58px; }
.picker .bb-sprite, .picker .bb-mascot-frame { width: 58px; height: 58px; }
.pick__icon { display: inline-flex; width: 28px; height: 28px; color: var(--primary); }
.sheet__mascot { width: 112px; height: 112px; margin: 0 auto 5px; }
.sheet__icon { display: flex; width: 58px; height: 58px; margin: 4px auto 10px; padding: 13px; border-radius: 12px; background: var(--primary-wash); color: var(--primary-dark); }
.fb__ico { display: flex; width: 32px; height: 32px; color: var(--ok-dark); }
.fb--bad .fb__ico { color: var(--danger-dark); }
.stars-row { display: flex; justify-content: center; gap: 8px; }
.result-star { display: inline-flex; width: 40px; height: 40px; color: #cfd2dc; }
.result-star.is-on { color: var(--gold-dark); fill: var(--gold); }
.tile { display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 5px; }
.tile__icon { grid-row: 1 / 3; display: inline-flex; width: 25px; height: 25px; }
.tile--streak .tile__icon { color: var(--streak); }
.tile--star .tile__icon { color: var(--gold-dark); }
.stat-card__icon { display: inline-flex; width: 28px; height: 28px; color: var(--primary-dark); }
.ach__icon { display: flex; width: 30px; height: 30px; margin: 0 auto 7px; color: #a7aabd; }
.ach__it.is-on .ach__icon { color: var(--gold-dark); }
.row-item__icon { display: inline-flex; width: 23px; height: 23px; color: var(--primary-dark); }
.row-item.is-danger .row-item__icon { color: var(--danger-dark); }

/* Celular estreito: nenhuma informação crítica depende de miniaturas ou hover. */
@media (max-width: 520px) {
  .brand span, .stat small { display: none; }
  .brand { gap: 5px; }
  .brand__mark { width: 26px; height: 26px; }
  .stats { gap: 4px; }
  .stat { padding: 4px 6px; font-size: 14px; }
  .goalbar { margin-top: 7px; }
  .trail { padding-left: 12px; padding-right: 12px; }
  .home-intro { min-height: 150px; grid-template-columns: minmax(0, 1fr) 94px; padding: 19px 16px; }
  .home-intro h1 { font-size: 27px; }
  .home-intro__lead { font-size: 13px; }
  .home-intro__mascot { width: 94px; height: 94px; }
  .resume-card { padding: 15px; }
  .resume-card__body { grid-template-columns: 1fr; }
  .resume-card__code { display: none; }
  .trail-heading { align-items: flex-start; margin-top: 28px; }
  .trail-heading h2 { font-size: 21px; }
  .trail-heading > span { font-size: 10px; }
  .world__banner { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; min-height: 94px; padding: 12px 12px 12px 15px; }
  .world__mascot { width: 58px; height: 58px; }
  .world__banner .world__copy h2 { font-size: 18px; }
  .world__banner .world__copy p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .world__progress { min-width: 54px; padding: 6px; }
  .bubble { grid-template-columns: 46px minmax(0, 1fr) 42px; min-height: 90px; gap: 10px; padding: 12px; }
  .mission-index { width: 44px; height: 44px; font-size: 15px; }
  .mission-copy strong { font-size: 15px; }
  .mission-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; }
  .mission-state small { display: none; }
  .startpop { right: 9px; }
  .grid2 { gap: 8px; }
  .stat-card { padding: 11px; gap: 8px; }
  .stat-card small { font-size: 10px; }
  .info-card { display: block; }
  .info-card .mascot { width: 94px; height: 94px; margin: 0 auto 12px; }
  .bubbletext { width: 100%; font-size: 17px; line-height: 1.45; }
}

/* Desktop: mesma experiência, com navegação lateral inspirada no painel NEXO. */
@media (min-width: 1080px) {
  #app:has(> .tabbar:not([hidden])) { padding-left: 212px; }
  .tabbar:not([hidden]) {
    position: fixed; inset: 0 auto 0 0; width: 212px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
    padding: 92px 14px 18px; border: 0; border-right: 2px solid #22325d;
    background: var(--navy); color: #fff;
  }
  .tab { flex: 0 0 auto; min-height: 54px; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 0 15px; border-radius: 10px; color: #aebbd8; font-size: 13px; }
  .tab[aria-current="page"] { background: #20345f; color: #fff; }
  .tab[aria-current="page"]::before { top: 12px; left: 0; width: 4px; height: 30px; border-radius: 0 4px 4px 0; background: var(--cyan); }
  .tab__icon { width: 22px; height: 22px; }
  .trail { padding-top: 24px; }
  .home-intro { min-height: 184px; grid-template-columns: minmax(0, 1fr) 170px; padding: 30px; }
  .home-intro__mascot { width: 160px; height: 160px; }
  .resume-card { padding: 22px; }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bubble { min-height: 112px; }
  .profile { max-width: 820px; }
}

/* -------------------------------------------------------------------------
   CENÁRIOS E MISSÕES ILUSTRADAS
   A interface continua limpa; profundidade e narrativa ficam concentradas
   nos fundos e nas miniaturas das missões.
   ------------------------------------------------------------------------- */
.home-intro {
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(13, 25, 57, .98) 0%, rgba(13, 25, 57, .86) 42%, rgba(13, 25, 57, .16) 100%), var(--home-art);
  background-size: cover;
  background-position: center;
}
.home-intro::before, .home-intro::after { z-index: 0; }
.home-intro__mascot { filter: drop-shadow(0 8px 0 rgba(7, 15, 39, .22)); }

.resume-card__code {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #101a34;
  background-image: linear-gradient(90deg, rgba(11, 21, 47, .9), rgba(11, 21, 47, .4)), var(--resume-art);
  background-size: cover, 300% 300%;
  background-position: center, 0 0;
}
.resume-card__code::before { content: "MISSÃO EM DESTAQUE"; position: absolute; right: 12px; bottom: 10px; color: #d9faff; font: 800 9px/1 var(--font); letter-spacing: .1em; }
.resume-card__code span { position: relative; z-index: 1; }

.world__banner {
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(13, 25, 57, .98) 0%, rgba(13, 25, 57, .83) 44%, rgba(13, 25, 57, .2) 100%), var(--world-art);
  background-size: cover;
  background-position: center;
}
.world__banner > * { position: relative; z-index: 1; }
.world__banner::before { z-index: 2; }

.bubble { grid-template-columns: 54px 74px minmax(0, 1fr) 58px; }
.mission-art {
  display: block;
  width: 74px;
  height: 74px;
  border: 2px solid #25375f;
  border-radius: 12px;
  background-color: #162348;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  box-shadow: 0 3px 0 #ccd4e8;
}
.bubble--current .mission-art { border-color: var(--cyan-dark); box-shadow-color: #94dce6; }
.bubble--done .mission-art { border-color: var(--blue-dark); }
.bubble--locked .mission-art { filter: grayscale(1) opacity(.42); }

.lesson__world-art {
  flex: 0 0 clamp(160px, 22vw, 300px);
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #23355e;
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(13, 25, 57, .72), rgba(13, 25, 57, .1)), var(--lesson-art);
  background-size: 100% 100%, contain;
  background-repeat: no-repeat;
  background-position: center;
}
.lesson__world-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 25, 57, .32), transparent 55%); }

@media (max-width: 520px) {
  .bubble { grid-template-columns: 44px 58px minmax(0, 1fr) 42px; gap: 8px; }
  .mission-art { width: 58px; height: 58px; border-radius: 10px; }
  .lesson__world-art { flex-basis: clamp(140px, 45vw, 185px); }
}

@media (min-width: 900px) {
  .lesson__body > .step.step--play,
  .wrap.wrap--atelier { max-width: 1040px; }
}