:root {
  --ink: #2b140a;
  --cream: #fffaf0;
  --paper: #fff3dc;
  --orange: #ff8c42;
  --orange-d: #d9661e;
  --green: #3bb273;
  --green-d: #238650;
  --blue: #3a86ff;
  --blue-d: #1f5fc4;
  --pink: #ff5d8f;
  --pink-d: #d13a6a;
  --gold: #ffd23f;
  --muted: #7a5b45;
  --scene-h: 40%;
  --font: "Avenir Next Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --bone-url: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #62bdf6; }
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; color: inherit; touch-action: manipulation; }
#app { position: fixed; inset: 0; overflow: hidden; }

#scene-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: bottom .35s ease; }
#scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#app[data-layout="split"] #scene-wrap { bottom: calc(100% - var(--scene-h)); }
@media (orientation: landscape) { :root { --scene-h: 42%; } }

#ui { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(64px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
#app[data-layout="split"] #ui {
  top: var(--scene-h);
  padding-top: 12px;
  background: linear-gradient(#fff3dc, #ffe8c2);
  border-top: 6px solid #6b4a2b;
  box-shadow: inset 0 6px 0 #c29a5b;
}

/* ---------- HUD ---------- */
#hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; z-index: 5;
  padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud-title { flex: 1; font-weight: 900; font-size: clamp(15px, 2.6vh, 22px); color: #fff; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-btn { width: 48px; height: 48px; border-radius: 14px; border: 3px solid var(--ink); background: var(--cream); font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.hud-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.bones-pill { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; border: 3px solid var(--ink); background: var(--cream); font-weight: 900; font-size: 22px; box-shadow: 0 4px 0 var(--ink); }
.bones-pill.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bone-ico { display: inline-block; width: 33px; height: 18px; background: var(--bone-url) center/contain no-repeat; image-rendering: pixelated; }

/* ---------- Tarjetas y botones ---------- */
.card { background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 18px; }
.center-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 10px 22px; border-radius: 18px;
  border: 4px solid var(--ink); font-size: clamp(18px, 2.8vh, 24px); font-weight: 900; cursor: pointer; background: var(--orange); color: #fff;
  text-shadow: 1px 2px 0 rgba(0,0,0,.25); box-shadow: 0 6px 0 var(--ink); transition: transform .05s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn.green { background: var(--green); }
.btn.blue { background: var(--blue); }
.btn.pink { background: var(--pink); }
.btn.light { background: var(--cream); color: var(--ink); text-shadow: none; }
.btn[disabled] { background: #d9cfc0; color: #8a7a66; text-shadow: none; pointer-events: none; }
.btn.big { min-height: 76px; font-size: clamp(22px, 3.4vh, 30px); padding: 12px 34px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }

h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; line-height: 1.35; }
.muted { color: var(--muted); }

/* ---------- Portada ---------- */
.title-card { text-align: center; max-width: 560px; width: 100%; }
.game-title { font-size: clamp(34px, 7vw, 60px); font-weight: 900; color: #fff; letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 7px 0 var(--ink); line-height: 1.05; margin-bottom: 6px; }
.game-title .luna { color: var(--gold); }
.subtitle { font-size: clamp(17px, 2.6vh, 22px); font-weight: 800; color: #fff; text-shadow: 2px 2px 0 var(--ink); margin-bottom: 22px; }
.name-input { width: 100%; font: inherit; font-size: 26px; font-weight: 800; padding: 12px 16px; border-radius: 16px; border: 4px solid var(--ink);
  background: #fff; text-align: center; -webkit-user-select: text; user-select: text; margin: 8px 0 14px; }
.title-bottom { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: center; }

/* Globo de diálogo de Luna */
.speech { display: flex; gap: 14px; align-items: center; max-width: 620px; width: 100%; }
.speech .avatar { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 4px solid var(--ink); background: #8fd177 var(--avatar) center/140% no-repeat; image-rendering: pixelated; box-shadow: 0 4px 0 var(--ink); }
.speech .bubble { flex: 1; font-size: clamp(18px, 2.8vh, 24px); font-weight: 700; }

/* ---------- Mapa ---------- */
.map { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.map-head { display: flex; align-items: center; gap: 12px; }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
@media (min-width: 1000px) { .zones { grid-template-columns: repeat(7, 1fr); } }
.zone { position: relative; text-align: left; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.zone:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.zone canvas { width: 100%; aspect-ratio: 80 / 52; image-rendering: pixelated; border-radius: 12px; border: 3px solid var(--ink); background: #8fd177; }
.zone .tnum { display: flex; align-items: baseline; gap: 6px; font-weight: 900; line-height: 1; }
.zone .tnum small { font-size: 15px; }
.zone .tnum b { font-size: 40px; }
.zone .zname { font-size: 14px; font-weight: 800; color: var(--muted); min-height: 2.4em; }
.stars { font-size: 22px; letter-spacing: 2px; color: #d7c7ad; }
.stars .on { color: var(--gold); text-shadow: 0 2px 0 #b58900; }
.bar { height: 12px; border-radius: 8px; border: 2px solid var(--ink); background: #fff; overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .found { background: #f4d8a8; }
.bar .gold { background: var(--gold); }
.next-badge { position: absolute; top: -12px; right: -8px; background: var(--pink); color: #fff; font-weight: 900; font-size: 14px; padding: 4px 10px;
  border-radius: 12px; border: 3px solid var(--ink); animation: wiggle 1.6s ease-in-out infinite; }
.next-badge.new { background: var(--blue); animation: none; }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
.map-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.due-note { font-weight: 800; }

/* ---------- Zona ---------- */
.zone-screen { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.activity { display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; width: 100%; font: inherit; }
.activity .ico { font-size: 38px; width: 56px; text-align: center; flex: none; }
.activity h3 { font-size: 22px; font-weight: 900; }
.activity p { font-size: 16px; color: var(--muted); font-weight: 700; }
.activity:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.activity.recommended { background: #fff8c4; }
.tag { display: inline-block; background: var(--pink); color: #fff; font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }

/* ---------- Ronda ---------- */
.round { min-height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 10px; max-width: 1040px; margin: 0 auto; }
@media (orientation: landscape) { .round { grid-template-rows: 1fr; grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.padcol { display: flex; flex-direction: column; justify-content: safe center; gap: 8px; }
.write-it { font-weight: 900; text-align: center; font-size: clamp(17px, 2.6vh, 22px); }
.qbox { display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: 8px; text-align: center; }
.round.fixing .question { font-size: clamp(34px, min(7vh, 10vw), 72px); }
.ready-land { display: none; }
@media (orientation: landscape) {
  .ready-land { display: inline-flex; }
  .ready-port { display: none; }
  .round.explain .qbox { justify-content: flex-start; }
}
.round > * { min-width: 0; }
.round.fixing .key { min-height: clamp(44px, 7vh, 80px); }
.feedback .lines span { overflow-wrap: anywhere; }
.progress-bones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.progress-bones i { width: 24px; height: 13px; background: var(--bone-url) center/contain no-repeat; image-rendering: pixelated; opacity: .22; filter: grayscale(1); }
.progress-bones i.done { opacity: 1; filter: none; }
.progress-bones i.miss { opacity: .7; filter: grayscale(1); }
.progress-bones i.now { opacity: .9; filter: none; animation: bump 1s infinite; }
.question { font-size: clamp(38px, min(10vh, 12.5vw), 104px); font-weight: 900; line-height: 1; white-space: nowrap; }
.question .ans { display: inline-block; min-width: 1.6em; border-bottom: 6px solid var(--ink); color: var(--blue-d); }
.question .ans.ok { color: var(--green-d); }
.question .ans.bad { color: var(--pink-d); }
.qmsg { min-height: 1.4em; font-size: clamp(18px, 2.8vh, 26px); font-weight: 900; }
.hint-btn { background: none; border: none; font-size: 18px; font-weight: 800; color: var(--blue-d); text-decoration: underline; cursor: pointer; padding: 10px 18px; min-height: 48px; }
.hint { font-size: 20px; font-weight: 800; background: #eaf4ff; border: 3px dashed var(--blue); border-radius: 14px; padding: 8px 14px; }

.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.2vh, 12px); align-content: center; max-width: 460px; width: 100%; margin: 0 auto; }
.key { min-height: clamp(48px, 9.2vh, 92px); font-size: clamp(26px, 5vh, 44px); font-weight: 900; border: 4px solid var(--ink); border-radius: 18px;
  background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; }
/* En vertical el teclado comparte altura con la pregunta: se dimensiona por altura disponible */
@media (orientation: portrait) {
  .key { min-height: clamp(46px, 6.6vh, 84px); font-size: clamp(24px, 4vh, 40px); }
  .round.fixing .key { min-height: clamp(44px, 5.6vh, 72px); }
}
.key:active, .key.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.key.del { background: #ffe1e8; }
.key.ok { background: var(--green); color: #fff; text-shadow: 1px 2px 0 rgba(0,0,0,.25); }

.feedback { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.feedback .lines { font-size: clamp(17px, 2.6vh, 23px); font-weight: 800; display: flex; flex-direction: column; gap: 4px; }
.feedback .lines .big { font-size: clamp(24px, 4vh, 34px); color: var(--green-d); }

/* Arreglo de huesos */
.bone-array { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; max-width: 100%; }
.bone-row { display: flex; align-items: center; gap: calc(var(--bw, 22px) * .18); position: relative; }
.bone-row .lbl { width: 62px; font-size: 12px; font-weight: 900; text-align: right; padding-right: 6px; color: var(--muted); white-space: nowrap; }
.bone-row i { width: var(--bw, 22px); height: calc(var(--bw, 22px) * .55); background: var(--bone-url) center/contain no-repeat; image-rendering: pixelated; }
.bone-row.b i { background-image: var(--bone-blue-url); }
.bone-row.ghost i { opacity: .18; }
.bone-row.minus i { opacity: .35; }
.bone-row.minus::after { content: ""; position: absolute; left: 62px; right: 0; top: 50%; height: 3px; background: var(--pink-d); border-radius: 2px; }
.bone-row .sum { font-size: 13px; font-weight: 900; margin-left: 6px; color: var(--muted); }

/* ---------- Resumen ---------- */
.summary { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.summary h2 { font-size: clamp(28px, 5vh, 40px); }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stat { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 8px 14px; min-width: 120px; }
.stat b { display: block; font-size: 30px; }
.stat span { font-size: 14px; font-weight: 800; color: var(--muted); }
.record { background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 14px; font-weight: 900; font-size: 20px; animation: bump 1s ease 2; }
.record .stars { color: #b89a3a; }
.record .stars .on { color: #fff; text-shadow: 0 0 0 var(--ink), 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip { background: #ffe1e8; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; font-weight: 900; font-size: 18px; }

/* ---------- Múltiplos ---------- */
.multiples { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.mhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 900; font-size: clamp(16px, 2.6vh, 22px); flex-wrap: wrap; }
.mgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.2vh, 10px); width: 100%; max-width: min(100%, 76vh); margin: 0 auto; }
/* Celular horizontal: 2 filas de 10 para que cada casilla tenga tamaño de dedo */
@media (orientation: landscape) and (max-height: 520px) {
  .mgrid { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 100%; }
  .tile { aspect-ratio: 1.5; font-size: 24px; }
}
.tile { width: 100%; aspect-ratio: 1.6; font-size: clamp(20px, 4.2vh, 38px); font-weight: 900; border: 4px solid var(--ink); border-radius: 16px;
  background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; position: relative; padding: 0; }
.tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.tile.eaten { background: #d8f5d0; color: transparent; box-shadow: 0 2px 0 var(--ink); transform: translateY(3px); pointer-events: none; }
.tile.eaten::after { content: ""; position: absolute; inset: 22%; background: var(--bone-gold-url) center/contain no-repeat; image-rendering: pixelated; }
.tile.nope { animation: shake .4s; background: #ffe1e8; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.mmsg { min-height: 2.6em; text-align: center; font-weight: 800; font-size: clamp(16px, 2.4vh, 20px); }

/* ---------- Armario ---------- */
.closet { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.closet-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.closet-top .stack { flex: 1 1 200px; min-width: 0; }
.closet-top h2, .closet-top .btn { overflow-wrap: anywhere; }
.closet-top canvas { width: 184px; height: 152px; image-rendering: pixelated; background: #8fd177; border: 4px solid var(--ink); border-radius: 18px; flex: none; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 12px; }
.item .sw { width: 54px; height: 54px; border-radius: 14px; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.item .nm { font-weight: 900; font-size: 17px; }
.item .btn { min-height: 46px; font-size: 17px; padding: 6px 14px; width: 100%; }
.item.on { background: #e5f9dc; }

/* ---------- Papás ---------- */
.parents { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.heat { border-collapse: separate; border-spacing: 3px; margin: 0 auto; }
.heat td, .heat th { width: clamp(26px, 6vw, 44px); height: clamp(26px, 6vw, 40px); text-align: center; font-size: 12px; font-weight: 900; border-radius: 6px; }
.heat th { color: var(--muted); font-size: 15px; }
.lv-known { background: #cfe3f7; } .lv-0 { background: #fff; border: 2px solid #e2d4bd; } .lv-1 { background: #ffb3c1; } .lv-2 { background: #ffe38a; } .lv-3 { background: #a8e6a1; } .lv-4 { background: #6cd08a; } .lv-5 { background: #38b36a; color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 14px; font-weight: 800; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.hold { position: relative; overflow: hidden; }
.hold .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.45); }
.method li { margin: 4px 0; font-weight: 600; line-height: 1.35; }
.warn { background: #fff4c2; border: 3px solid #e0b100; border-radius: 14px; padding: 10px 12px; font-weight: 700; line-height: 1.35; }
.install-note { text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.backup { width: 100%; font: 14px/1.3 ui-monospace, monospace; border: 3px solid var(--ink); border-radius: 12px; padding: 8px; -webkit-user-select: text; user-select: text; resize: vertical; }
.cloud-card { background: #eef7ff; }
.cloud-code { font: 900 clamp(15px, 5vw, 34px)/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; text-align: center; background: #fff;
  border: 4px dashed var(--blue); border-radius: 16px; padding: 12px 6px; -webkit-user-select: all; user-select: all; white-space: nowrap; overflow-x: auto; }
.cloud-status { font-weight: 800; color: var(--muted); }
.cloud-code.small { font-size: clamp(14px, 4.4vw, 26px); padding: 8px 6px; }
.code-notice { background: #eef7ff; display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
.use-code summary { font-weight: 900; cursor: pointer; padding: 8px 0; min-height: 44px; }
.code-input { text-transform: uppercase; font-family: ui-monospace, monospace; letter-spacing: 2px; }
.streak { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.streak-msg { font-weight: 800; font-size: clamp(16px, 2.4vh, 20px); display: flex; flex-direction: column; gap: 2px; }
.rest-note { font-size: 13px; color: var(--muted); font-weight: 800; }
.week { display: flex; gap: 6px; }
.dcell { width: 38px; height: 46px; border-radius: 10px; border: 3px solid var(--ink); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dcell b { font-size: 16px; line-height: 1.1; min-height: 18px; }
.dcell i { font-style: normal; font-size: 11px; font-weight: 900; color: var(--muted); }
.dcell.on { background: #ffe38a; }
.dcell.rest { background: #e3e8ff; }
.dcell.today { border-style: dashed; }
.dcell.today b { color: var(--muted); }

/* ---------- Lección ---------- */
.lesson { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.lesson h2 { font-size: clamp(24px, 4vh, 34px); }
.lesson .idea { font-size: clamp(18px, 2.8vh, 23px); font-weight: 700; }
.lesson .steps { font-size: clamp(22px, 3.6vh, 32px); font-weight: 900; display: flex; flex-direction: column; gap: 4px; min-height: 3.2em; }
.lesson .steps .dim { opacity: .2; }
.lesson .ex { font-size: clamp(30px, 5.5vh, 52px); font-weight: 900; }
.mnav { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.mnav .btn { min-height: 52px; }

#toast { position: absolute; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translate(-50%, -20px); background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 14px; font-weight: 800; font-size: 18px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 20; max-width: 90%; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Lamida en grande (racha de 5 y 10) ---------- */
#lick { position: absolute; inset: 0; z-index: 30; overflow: hidden; cursor: pointer; background: rgba(255, 240, 200, 0); transition: background .25s; }
#lick.on { background: rgba(255, 240, 200, .25); }
#lick-face { position: absolute; left: 50%; bottom: 0; height: min(80vh, 100vw); aspect-ratio: 48 / 46; image-rendering: pixelated;
  transform: translate(-50%, 100%); transition: transform .28s cubic-bezier(.2, 1.3, .5, 1); }
#lick.on #lick-face { transform: translate(-50%, 0); }
.lick-label { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--gold); border: 4px solid var(--ink);
  border-radius: 18px; padding: 8px 18px; font-weight: 900; font-size: clamp(18px, min(4vh, 6.5vw), 34px); box-shadow: 0 5px 0 var(--ink);
  max-width: calc(100% - 24px); width: max-content; text-align: center; white-space: normal; }
.slobber { position: fixed; z-index: 31; pointer-events: none; border-radius: 48% 52% 45% 55%;
  background: radial-gradient(ellipse at 38% 32%, rgba(255,255,255,.95) 0 8%, rgba(220,242,255,.75) 22%, rgba(170,220,255,.5) 48%, rgba(170,220,255,0) 72%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  animation: slobber 2.2s ease-out forwards; }
@keyframes slobber { 0% { opacity: 0; transform: scale(.4) rotate(var(--r)); } 10% { opacity: 1; transform: scale(1) rotate(var(--r)); } 65% { opacity: .9; } 100% { opacity: 0; transform: scale(1.04) translateY(26px) rotate(var(--r)); } }
.combo-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff0c2; border: 3px solid var(--ink); border-radius: 14px; padding: 2px 10px; font-weight: 900; font-size: clamp(15px, 2.2vh, 19px); }
.combo-pill.hot { background: var(--gold); }
.combo-pill.bump { animation: bump .5s ease; }
#combo { position: absolute; z-index: 6; left: max(12px, env(safe-area-inset-left)); top: calc(var(--scene-h) - 44px); box-shadow: 0 3px 0 var(--ink); pointer-events: none; }
#combo[hidden] { display: none; }
#app[data-layout="full"] #combo { display: none; }
.closet h3.section { margin-top: 4px; }
.item .sw.pv { background: #8fd177 center bottom/contain no-repeat; image-rendering: pixelated; width: 92px; height: 76px; }
.item .why { font-size: 13px; font-weight: 800; color: var(--muted); min-height: 2.4em; }

.fade-in { animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-height: 520px) and (orientation: landscape) {
  :root { --scene-h: 34%; }
  .key, .round.fixing .key { min-height: 40px; font-size: 24px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .write-it { display: none; }
  .question { font-size: 44px; }
  .progress-bones i { width: 18px; height: 10px; }
}


/* Conoce en celular vertical: dibujo y definición más compactos (definiciones largas sin scroll) */
@media (orientation: portrait) and (max-width: 500px) {
  .learn-pic .vpic { width: clamp(96px, min(22vh, 36vw), 180px); }
  .learn .def { font-size: 15px; }
  .learn-card { gap: 4px; padding: 12px; }
}

/* Conoce: los 3 controles (◀, 3 de 12, ▶ o ¡A jugar!) siempre en un renglón */
.learn .mnav { flex-wrap: nowrap; }
.learn .mnav .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
@media (orientation: portrait) and (max-height: 700px) {
  .learn-pic .vpic { width: clamp(80px, 17vh, 130px); }
  .learn-word { font-size: 30px; }
  .learn #say.btn { min-height: 44px; font-size: 18px; padding: 4px 16px; }
  .learn .mnav .btn { min-height: 44px; }
}

/* Celulares chicos en vertical (360×640, 390×664): menos parque, teclado más compacto */
@media (orientation: portrait) and (max-height: 720px) {
  :root { --scene-h: 32%; }
  .key, .round.fixing .key { min-height: 44px; font-size: 24px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .keypad { gap: 6px; }
  .question { font-size: clamp(34px, 11vw, 48px); }
  .qbox { gap: 4px; }
  .hint-btn { min-height: 44px; padding: 6px 12px; }
  #ui { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #app[data-layout="split"] #ui { padding-top: 8px; }
}


/* ================= Inglés: Luna viaja por el mundo ================= */
.vpic { image-rendering: pixelated; image-rendering: crisp-edges; display: block; border-radius: 10px; -webkit-user-drag: none; pointer-events: none; }

/* Elegir materia */
.subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.subject { display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; font: inherit; min-height: 120px; }
.subject:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.subject .sico { font-size: 54px; flex: none; }
.subject h2 { font-size: clamp(22px, 3.4vh, 30px); }
.subject p { font-weight: 800; color: var(--muted); }
.subject.tables { background: #fff8c4; }
.subject.english { background: #e3f3ff; }
.due-pill { align-self: flex-start; background: var(--pink); color: #fff; font-weight: 900; font-size: 14px; border: 3px solid var(--ink); border-radius: 12px; padding: 2px 10px; }

/* Pasaporte */
.world h3.section { margin: 2px 0 -4px; }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 1000px) { .topics { grid-template-columns: repeat(6, 1fr); } }
.topic { position: relative; text-align: left; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 4px; font: inherit; background: #fffdf5; }
.topic:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.topic .tname { font-weight: 900; font-size: 18px; line-height: 1.1; }
.topic .tes { font-size: 14px; font-weight: 800; color: var(--muted); }
.tpics { display: flex; gap: 4px; justify-content: center; background: #e9f6ff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px; }
.tpics .vpic { width: 30%; aspect-ratio: 1; }
.tpics.big { flex-wrap: wrap; justify-content: flex-start; }
.tpics.big .vpic { width: clamp(44px, 9vw, 72px); height: auto; }
.stamps { font-size: 22px; letter-spacing: 2px; color: #d7c7ad; }
.stamps .on { color: #2ec4b6; text-shadow: 0 2px 0 #13807a; }
.activity.locked { cursor: default; opacity: .75; }

/* Conoce */
.learn { max-width: 720px; margin: 0 auto; }
.learn-card { align-items: center; text-align: center; gap: 8px; }
.learn-pic { cursor: pointer; }
.learn-pic .vpic { width: clamp(120px, min(26vh, 40vw), 240px); height: auto; aspect-ratio: 1; background: #e9f6ff; border: 3px solid var(--ink); }
.learn-word { font-size: clamp(34px, 6vh, 60px); font-weight: 900; letter-spacing: 1px; line-height: 1; }
.learn .def { font-size: clamp(16px, 2.4vh, 20px); font-weight: 700; font-style: italic; color: var(--muted); max-width: 520px; }
.learn details.es summary { font-weight: 800; color: var(--blue-d); cursor: pointer; min-height: 40px; }
@media (orientation: landscape) {
  .learn-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pic word" "pic say" "pic def" "pic ex" "pic es" "nav nav"; column-gap: 18px; justify-items: center; }
  .learn-pic { grid-area: pic; } .learn-word { grid-area: word; } #say.btn { grid-area: say; } .learn .def { grid-area: def; } .learn .ex { grid-area: ex; } .learn details.es { grid-area: es; } .learn .mnav { grid-area: nav; }
  .learn-pic .vpic { width: clamp(96px, 30vh, 240px); }
  .learn-word { font-size: clamp(30px, 6.5vh, 60px); }
}

/* Juegos */
.vgame { max-width: 1040px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.vtop { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; flex: none; }
.vgame .qmsg { font-size: clamp(16px, 2.5vh, 22px); min-height: 1.4em; }
.prompt { display: flex; align-items: center; gap: 12px; }
.say { width: 64px; height: 56px; font-size: 28px; padding: 0; }
.pword { font-size: clamp(30px, 5.5vh, 50px); font-weight: 900; letter-spacing: 1px; min-width: 4ch; }
.pword.hidden { color: #d7c7ad; letter-spacing: 6px; }
.opts { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vh, 14px); }
@media (orientation: landscape) { .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } }
.opt, .mcard, .mem-card { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; font: inherit;
  background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); position: relative; }
.opt:active, .mcard:active, .mem-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.opt .vpic, .mcard .vpic, .mem-card .vpic { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
.opt.good, .mcard.good { background: #d8f5d0; }
.opt.bad { background: #ffe1e8; opacity: .6; }
.opt.nope, .mcard.nope { animation: shake .4s; background: #ffe1e8; }
.opt.hint-glow { background: #fff8c4; animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 6px var(--gold); } }

.mcols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mcol { min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.2vh, 12px); }
@media (orientation: landscape) {
  .mcols { grid-template-columns: 1fr; grid-template-rows: 1.5fr 1fr; }
  .mcol { grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mcard.word { font-size: clamp(18px, min(3.4vh, 5.4vw), 34px); font-weight: 900; line-height: 1.05; }
.wtxt { display: block; max-width: 100%; text-align: center; }
.wtxt.one { white-space: nowrap; }
.mcard.sel { background: #fff8c4; transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.mcard.matched, .mem-card.matched { pointer-events: none; box-shadow: 0 2px 0 var(--ink); transform: translateY(3px); }
/* Número de pareja además del color (no depender solo del color) */
.mcard.matched::after, .mem-card.matched::after { content: attr(data-pair); position: absolute; top: 4px; right: 6px; min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 900; line-height: 22px; text-align: center; }
.m1 { background: #d8f5d0 !important; } .m2 { background: #d6ecff !important; } .m3 { background: #ffe0f0 !important; } .m4 { background: #fff1c2 !important; }

.mem { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.2vh, 10px); }
@media (orientation: landscape) { .mem { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } }
.mem-card { background: var(--orange); transition: transform .18s; }
.mem-card .back { font-size: clamp(26px, 5vh, 44px); }
/* La cara siempre ocupa su lugar (oculta con visibility) para poder ajustar el tamaño de la palabra antes de voltearla */
.mem-card .face { display: flex; position: absolute; inset: 6px; visibility: hidden; align-items: center; justify-content: center; }
.mem-card .face b { font-size: clamp(16px, min(3vh, 4.6vw), 28px); font-weight: 900; line-height: 1.05; }
.mem-card.up { background: #fff; animation: flip .22s ease; }
.mem-card.up .back { visibility: hidden; }
.mem-card.up .face { visibility: visible; }
@keyframes flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }

.spell-row { display: flex; align-items: center; gap: 14px; justify-content: center; }
@media (orientation: portrait) {
  .spell-row { flex-direction: column; gap: 8px; }
  .spell-row > .stack { align-items: center !important; }
  .spell-pic .vpic { width: clamp(72px, 14vh, 170px); }
}
.spell-pic { position: relative; background: #e9f6ff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); padding: 4px; cursor: pointer; flex: none; }
.spell-pic .vpic { width: clamp(84px, min(20vh, 26vw), 180px); height: auto; aspect-ratio: 1; }
.spell-pic .spk { position: absolute; right: -10px; bottom: -10px; background: var(--blue); color: #fff; border: 3px solid var(--ink); border-radius: 12px; font-size: 18px; padding: 2px 6px; }
.slots { display: flex; gap: clamp(3px, .6vw, 6px); flex-wrap: nowrap; }
.slot { width: clamp(24px, min(7.6vw, 5.4vh), 50px); height: clamp(32px, min(10vw, 7vh), 62px); border-bottom: 5px solid var(--ink); background: #fff; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center; font-size: clamp(20px, min(6vw, 4.6vh), 40px); font-weight: 900; }
.slot.filled { color: var(--blue-d); }
.slot.ok { color: var(--green-d); background: #d8f5d0; }
.slot.bad { color: var(--pink-d); background: #ffe1e8; }
.gap { width: clamp(10px, 2vw, 18px); }
.gap.dash { width: auto; font-size: clamp(20px, min(6vw, 4.6vh), 40px); font-weight: 900; align-self: center; }
.spelled { letter-spacing: 2px; }
.spelled u { color: var(--pink-d); text-decoration-thickness: 3px; }
.tiles { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: clamp(6px, 1.2vh, 10px); justify-content: center; align-content: center; max-width: 720px; margin: 0 auto; }
.ltile { width: clamp(44px, min(12vw, 9vh), 76px); height: clamp(44px, min(12vw, 9vh), 76px); font-size: clamp(22px, min(6vw, 4.8vh), 38px); font-weight: 900;
  border: 4px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; padding: 0; text-transform: lowercase; }
.ltile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.ltile[disabled] { opacity: .25; box-shadow: 0 2px 0 var(--ink); transform: translateY(3px); }
.ltile.del { background: #ffe1e8; }
.vchip { display: inline-flex; align-items: center; gap: 6px; }
.vpic.mini { width: 28px; height: 28px; border-radius: 6px; display: inline-block; vertical-align: middle; }

/* ================= Verbos sin dibujo y "Completa la frase" ================= */
/* Ficha con la palabra en lugar del dibujo (verbos abstractos); en "mini" no se muestra (la palabra ya está escrita al lado) */
.vpic.vtext { container-type: inline-size; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: #fff3dc; border: 2px solid #eadcc4; box-sizing: border-box; padding: 2px; overflow: hidden; text-align: center; }
.vpic.vtext b { font-size: 12px; font-size: clamp(8px, 16cqw, 34px); line-height: 1.05; font-weight: 900; color: var(--blue-d); }
.vpic.vtext.mini { display: none; }
/* En la lista del tema, la ficha de texto se ajusta a la palabra (letra legible aunque la palabra sea larga) */
.tpics.big .vpic.vtext { container-type: normal; width: auto; min-width: 44px; height: clamp(44px, 9vw, 72px); aspect-ratio: auto; padding: 0 8px; }
.tpics.big .vpic.vtext b { font-size: clamp(13px, 3.4vw, 16px); white-space: nowrap; }
.hl { color: var(--blue-d); background: #fff2a8; border-radius: 6px; padding: 0 4px; font-weight: 900; }
/* En Conoce, el verbo sin dibujo se enseña con su frase de ejemplo */
.learn-pic .vpic.vsent { image-rendering: auto; width: clamp(200px, 44vw, 380px); height: auto; aspect-ratio: auto; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff8e6; border: 3px solid var(--ink); border-radius: 14px; box-sizing: border-box; padding: 10px 14px; text-align: center; }
.vsent p { margin: 0; font-size: clamp(16px, 3vh, 26px); font-weight: 800; line-height: 1.3; }
.learn .ex { margin: 0; font-size: clamp(15px, 2.2vh, 19px); font-weight: 800; line-height: 1.3; max-width: 520px; }
@media (orientation: portrait) { .learn-pic .vpic.vsent { width: min(84vw, 360px); } }
@media (orientation: portrait) and (max-height: 700px) { .learn-pic .vpic.vsent { width: min(84vw, 340px); min-height: 70px; padding: 6px 10px; } .vsent p { font-size: 16px; } .learn .ex { font-size: 15px; } }
@media (orientation: landscape) { .learn-pic .vpic.vsent { width: clamp(180px, 34vw, 380px); } }
/* Deletrea de un verbo sin dibujo: la frase con el hueco en lugar del dibujo */
.spell-pic.spell-ctx { max-width: min(92vw, 520px); text-align: left; }
.spell-pic .vsent { display: block; padding: 6px 12px; font-size: clamp(16px, 2.8vh, 26px); font-weight: 800; line-height: 1.3; }
.spell-pic .cblank { min-width: 2.4em; }
.spell-pic.spell-ctx .vsent { padding-right: 38px; padding-bottom: 14px; }
/* En Completa las pistas se ven como botones (no como texto subrayado) */
.cloze .hint-btn { text-decoration: none; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 6px 12px; font-weight: 800; }
.cloze .hint-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* Completa la frase */
.csent { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; width: 100%; max-width: 900px; box-sizing: border-box; flex-wrap: wrap; }
.csent .stext { margin: 0; flex: 1 1 220px; text-align: center; font-size: clamp(20px, min(5.4vw, 4.2vh), 36px); font-weight: 900; line-height: 1.35; }
.cblank { display: inline-block; min-width: 3.4em; border-bottom: 5px solid var(--ink); border-radius: 6px 6px 0 0; background: #fff8c4; text-align: center; padding: 0 6px; margin: 0 2px; }
.cblank.filled { background: #d8f5d0; color: var(--green-d); border-bottom-color: var(--green-d); }
.cpic:empty { display: none; }
.cpic .vpic { width: clamp(64px, 12vh, 110px); height: auto; aspect-ratio: 1; background: #e9f6ff; border: 3px solid var(--ink); }
.copts { flex: 1; min-height: 0; max-height: 440px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vh, 14px); }
@media (orientation: landscape) { .copts { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); max-height: 170px; } }
.copt { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; font: inherit; font-size: clamp(20px, min(3.8vh, 6vw), 36px); font-weight: 900; line-height: 1.05;
  background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
.copt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.copt.good { background: #d8f5d0; }
.copt.bad { background: #ffe1e8; opacity: .6; }
.copt.nope { animation: shake .4s; background: #ffe1e8; }
.copt.gone { opacity: .22; text-decoration: line-through; pointer-events: none; }
.copt.hint-glow { background: #fff8c4; animation: glow 1.2s ease-in-out infinite; }
@media (max-height: 520px) and (orientation: landscape) { .csent { padding: 6px 10px; } .csent .stext { font-size: 20px; } .copts { max-height: 90px; } }

/* Papás: palabras */
.wt-wrap { max-height: 380px; overflow-y: auto; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.wtable { width: 100%; border-collapse: collapse; font-weight: 800; font-size: 15px; }
.wtable th, .wtable td { padding: 4px 8px; border-bottom: 1px solid #eadcc4; text-align: center; }
.wtable .wt-word { text-align: left; display: flex; align-items: center; gap: 6px; }
.wtable .wt-topic { text-align: left; background: #fff3dc; }
.settings { display: flex; flex-direction: column; gap: 10px; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; min-height: 44px; }
.switch input { width: 26px; height: 26px; accent-color: var(--green); }
.art-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Comparar dibujos */
.compare { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cmp { padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cmp-pics { display: flex; gap: 6px; }
.cmp figure { margin: 0; }
.cmp .vpic { width: 64px; height: 64px; background: #e9f6ff; border: 2px solid var(--ink); }
.cmp figcaption { font-weight: 900; font-size: 13px; color: var(--muted); }

/* Celular horizontal: todo más compacto */
@media (max-height: 520px) and (orientation: landscape) {
  .say { width: 52px; height: 44px; font-size: 22px; }
  .pword { font-size: 30px; }
  .vgame { gap: 4px; }
  .spell-pic .vpic { width: 72px; }
  .learn-card { padding: 8px 12px; row-gap: 2px; }
  .learn #say.btn { min-height: 44px; font-size: 18px; padding: 4px 16px; }
  .learn-word { font-size: 30px; }
  .learn .def { font-size: 15px; }
  .learn .mnav .btn { min-height: 44px; }
  .ltile { width: 42px; height: 42px; font-size: 22px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
}

/* ================= Tu perrito (editor de la mascota) ================= */
.pet-editor { max-width: 980px; margin: 0 auto; padding-bottom: 24px; }
.pet-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pet-top canvas { width: 184px; height: 152px; image-rendering: pixelated; background: #8fd177; border: 4px solid var(--ink); border-radius: 18px; flex: none; }
.pet-group { margin-top: 12px; }
.pet-group h3 { margin: 0 0 8px; }
.pet-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pet-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; min-height: 48px; padding: 6px 8px 8px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.pet-opt img { width: 92px; height: 76px; image-rendering: pixelated; background: #8fd177; border-radius: 10px; }
.pet-opt.on { background: #fff4b8; outline: 4px solid #ffb703; outline-offset: 1px; }
.pet-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pet-opt.txt { min-width: 120px; justify-content: center; font-size: 18px; }
.pet-opts.sex { margin-top: 4px; }
@media (max-width: 560px) { .pet-opt { min-width: 76px; } .pet-opt img { width: 70px; height: 58px; } .pet-top canvas, .closet-top canvas { width: 138px; height: 114px; } }

/* Siguiente estrella de cada tabla: qué falta y cuándo */
.goal { display: grid; gap: 4px; background: #fff7d6; border: 2px solid #f4c430; border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 700; text-align: left; }
.goal b { font-size: 16px; }
.star-rules { font-size: 15px; text-align: left; }
.star-rules summary { font-weight: 900; cursor: pointer; padding: 8px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #1d6fd8; }
.star-rules summary::-webkit-details-marker { display: none; }
.star-rules .tap { font-size: 13px; background: #e7f0ff; border-radius: 999px; padding: 2px 10px; }
.star-rules[open] .tap { display: none; }
.star-rules ul { margin: 4px 0 6px 20px; padding: 0; }
.star-rules p { margin: 0; }
.star-table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 700; text-align: left; }
.star-table th, .star-table td { padding: 6px 4px; border-bottom: 1px solid #eadfca; vertical-align: top; }
.star-table th { white-space: nowrap; }
.star-table .stars { font-size: 16px; white-space: nowrap; }
/* Tabla de palabras de inglés en "Para papás": cabe en celulares de 360–420 px */
@media (max-width: 440px) { .wtable { font-size: 13px; } .wtable th, .wtable td { padding: 4px 3px; } }

/* Ver un festejo del armario: la pantalla se esconde para ver el parque completo */
body.watching #ui, body.watching #hud { visibility: hidden; }
.item .btn + .btn { margin-top: 0; }