:root {
  --ink: #153b3e;
  --teal: #087d72;
  --deep: #062f35;
  --cream: #f5f1e8;
  --paper: #fffdf8;
  --gold: #ffc928;
  --line: #d6d1c4;
  font-family: "Segoe UI", Nunito, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background-color: var(--cream); background-image: radial-gradient(circle at 16% 7%, rgb(255 201 40 / 14%) 0 8%, transparent 8.2%), radial-gradient(circle at 90% 88%, rgb(8 125 114 / 10%) 0 12%, transparent 12.2%); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
.topbar { border-bottom: 1px solid rgb(255 255 255 / 10%); background: var(--deep); color: white; }
.topbar-inner { display: flex; max-width: 1500px; align-items: center; justify-content: space-between; gap: 1rem; margin: auto; padding: 0.75rem clamp(1rem, 3vw, 2rem); }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-mark { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 1rem 1rem 1.3rem 1.3rem; background: #ffb300; box-shadow: inset 0 -4px 0 rgb(175 92 0 / 28%); color: var(--deep); font-size: 1.3rem; font-weight: 1000; }
.brand b { display: block; font-size: 1.2rem; line-height: 1; letter-spacing: -0.02em; }
.brand small { display: block; margin-top: 0.3rem; color: #9fe8d9; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.motto { display: flex; align-items: center; gap: 0.5rem; margin: 0; border-radius: 999px; background: rgb(255 255 255 / 10%); padding: 0.55rem 0.9rem; font-size: 0.9rem; font-weight: 800; }
.motto span { color: var(--gold); }
.page { max-width: 1500px; margin: auto; padding: 1.25rem clamp(1rem, 3vw, 2rem) 2.5rem; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.page-heading h1 { margin: 0.2rem 0 0; font-family: "Trebuchet MS", sans-serif; font-size: clamp(1.65rem, 3vw, 2rem); letter-spacing: -0.04em; }
.page-heading > p { max-width: 30rem; margin: 0; color: #557074; text-align: right; font-size: 0.9rem; font-weight: 650; }
.eyebrow { margin: 0; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.game-rail { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.85rem; scrollbar-width: thin; }
.game-tab { display: flex; min-width: 9.5rem; height: 3.65rem; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 0.42rem; border: 1px solid var(--line); border-radius: 1rem; background: rgb(255 253 248 / 78%); padding: 0.6rem 0.75rem; color: #466367; text-align: left; font-size: 0.78rem; font-weight: 900; line-height: 1.08; opacity: 1; }
.game-tab span { color: #b46700; font-size: 0.68rem; }
.game-tab.active { border-color: var(--teal); background: var(--teal); box-shadow: 0 4px 0 #07564f; color: white; }
.game-tab.active span { color: #ffd36c; }
.game-shell { display: grid; min-height: 31rem; grid-template-columns: minmax(19rem, 0.8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid rgb(6 47 53 / 14%); border-radius: 2rem; background: var(--paper); box-shadow: 0 24px 70px rgb(6 47 53 / 14%); }
.game-intro { position: relative; overflow: hidden; min-height: 31rem; background: linear-gradient(145deg, #075159 0%, #06343a 72%); padding: clamp(1.5rem, 3vw, 2.75rem); }
.game-intro::after { position: absolute; bottom: -30%; left: -12%; width: 84%; aspect-ratio: 1; border: 2px dashed rgb(255 211 108 / 34%); border-radius: 50%; content: ""; }
.game-copy { position: relative; z-index: 1; }
.gold { color: #ffd36c; }
.game-copy h2 { max-width: 23rem; margin: 0.55rem 0 0; color: white; font-family: "Trebuchet MS", sans-serif; font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1.02; letter-spacing: -0.045em; }
.game-copy > p:not(.eyebrow) { max-width: 22rem; margin: 0.8rem 0 0; color: #d9f5ee; font-size: 1rem; line-height: 1.55; }
.reference { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: 999px; background: rgb(255 255 255 / 10%); padding: 0.45rem 0.7rem; color: white; font-size: 0.84rem; font-weight: 800; }
.reference i { color: #ffd36c; font-style: normal; }
.character-stage { position: absolute; right: 0; bottom: 0; width: min(58%, 19rem); height: 68%; }
.character-halo { position: absolute; inset: 12% 8% 2%; border-radius: 50% 50% 28% 28%; background: radial-gradient(circle, rgb(255 201 40 / 34%), transparent 68%); filter: blur(4px); }
.character-stage img { position: absolute; right: -3%; bottom: -2%; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 16px 14px rgb(0 0 0 / 28%)); }
.play-panel { padding: clamp(1.5rem, 3vw, 3rem); background: linear-gradient(180deg, #fffdf8, #fff9e9); }
.round-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.amber { color: #aa6500; }
.round-heading h3 { margin: 0.25rem 0 0; font-family: "Trebuchet MS", sans-serif; font-size: 1.55rem; letter-spacing: -0.035em; }
.icon-button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid #d9d2c4; border-radius: 50%; background: white; color: #45666a; font-size: 1.5rem; font-weight: 900; transition: 160ms ease; }
.icon-button:hover { transform: rotate(-14deg); border-color: var(--teal); color: var(--teal); }
.situation-card { margin: 1.35rem 0 0; border-left: 5px solid var(--gold); border-radius: 0 1rem 1rem 0; background: #f4ead1; padding: 1.1rem 1.2rem; color: #193e42; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 900; line-height: 1.35; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem; }
.choice-card { display: flex; min-height: 7.6rem; align-items: flex-start; gap: 0.8rem; border: 2px solid #ddd6c8; border-radius: 1.2rem; background: white; padding: 1rem; color: #315459; text-align: left; transition: 160ms ease; }
.choice-card:hover { transform: translateY(-2px); border-color: #8aa9a5; box-shadow: 0 8px 20px rgb(6 47 53 / 9%); }
.choice-card.selected.wise { border-color: var(--teal); background: #e6f5f0; box-shadow: 0 0 0 3px rgb(8 125 114 / 12%); }
.choice-card.selected.quick { border-color: #e28e19; background: #fff0d8; box-shadow: 0 0 0 3px rgb(226 142 25 / 12%); }
.choice-card b { display: block; margin-bottom: 0.35rem; color: var(--ink); font-family: "Trebuchet MS", sans-serif; font-size: 1.02rem; }
.choice-symbol { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 0.7rem; background: #e5f4ef; color: var(--teal); font-weight: 1000; }
.quick .choice-symbol { background: #fff0d8; color: #b86b00; }
.feedback { visibility: hidden; display: flex; min-height: 4rem; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; border-radius: 1rem; padding: 0.8rem 1rem; color: transparent; transition: 180ms ease; }
.feedback.visible { visibility: visible; background: #fff3bd; color: #65420a; }
.feedback b { color: #533705; }
.primary-button { min-height: 3rem; margin-top: 1rem; border: 0; border-radius: 1rem; background: var(--teal); box-shadow: 0 5px 0 #07564f; padding: 0.75rem 1rem; color: white; font-size: 1rem; font-weight: 900; transition: 150ms ease; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: #096a62; }
.primary-button:disabled { box-shadow: none; opacity: 0.45; }

@media (max-width: 820px) {
  .page-heading > p { display: none; }
  .game-shell { grid-template-columns: 1fr; }
  .game-intro { min-height: 22rem; }
  .character-stage { width: 13rem; height: 70%; }
}
@media (max-width: 560px) {
  .motto { display: none; }
  .game-intro { min-height: 24rem; }
  .character-stage { width: 11rem; opacity: 0.84; }
  .play-panel { padding: 1.25rem; }
  .choices { grid-template-columns: 1fr; }
  .choice-card { min-height: auto; }
  .primary-button { width: 100%; }
}

.instruction { margin: 0.8rem 0 1rem; color: #557074; font-size: 0.96rem; font-weight: 700; line-height: 1.45; }
.progress-dots { display: flex; gap: 0.3rem; margin-top: 0.8rem; }
.progress-dots span { width: 100%; max-width: 2rem; height: 0.32rem; border-radius: 999px; background: #ded9ce; }
.progress-dots span.done { background: #80bcb2; }
.progress-dots span.now { background: var(--teal); }
.action-card { display: grid; min-height: 7.5rem; place-items: center; border: 2px solid #d7c89f; border-radius: 1.3rem; background: #f7edcf; padding: 1rem; text-align: center; }
.action-card span, .guide-card small { color: #9b6414; font-size: 0.7rem; font-weight: 1000; letter-spacing: 0.14em; }
.action-card strong { display: block; max-width: 29rem; color: #213f42; font-size: 1.35rem; line-height: 1.25; }
.virtue-grid, .virtue-bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1rem; }
.virtue-chip, .virtue-bank button { min-height: 2.7rem; border: 1px solid #d9d2c4; border-radius: 0.85rem; background: white; padding: 0.55rem; color: #294d51; font-size: 0.82rem; font-weight: 900; transition: 140ms ease; }
.virtue-chip { display: flex; align-items: center; gap: 0.45rem; text-align: left; }
.virtue-chip > span { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; border-radius: 50%; background: var(--chip); }
.virtue-chip:hover, .virtue-chip.selected, .virtue-bank button:hover { transform: translateY(-1px); border-color: var(--chip); box-shadow: 0 4px 10px rgb(6 47 53 / 10%); }
.base-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.base-card { min-height: 5.2rem; border: 2px solid #b7b09f; border-radius: 1rem; background: linear-gradient(150deg, #73766d, #a9aa9f); color: white; text-align: left; padding: 0.9rem 1rem; }
.base-card.sand { border-color: #cfab6a; background: linear-gradient(150deg, #d0ad6e, #f0d18c); color: #654311; }
.base-card b, .base-card span { display: block; }
.base-card b { font-family: "Trebuchet MS", sans-serif; font-size: 1.05rem; }
.base-card span { margin-top: 0.25rem; font-size: 0.83rem; font-weight: 750; }
.base-card.selected { box-shadow: 0 0 0 4px rgb(8 125 114 / 22%); border-color: var(--teal); }
.sequence-row { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 1rem 0; }
.sequence-row > span { color: #bb7e18; font-weight: 1000; }
.sequence-card { display: grid; min-width: 6rem; min-height: 4.2rem; place-items: center; border: 1px solid #d9d2c4; border-radius: 0.9rem; background: white; color: #486468; font-size: 0.9rem; font-weight: 900; }
.sequence-card small { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: #ede8dc; font-size: 0.65rem; }
.sequence-card.placed { border-color: var(--teal); background: #e6f5f0; color: var(--teal); opacity: 1; }
.test-row { display: flex; gap: 0.5rem; }
.test-button { flex: 1; min-height: 2.6rem; border: 1px solid #d5cfc2; border-radius: 0.8rem; background: #f2ece1; color: #385d60; font-weight: 850; }
.test-button.tested { background: #e6f5f0; color: #087d72; opacity: 1; }
.stability { margin-top: 1rem; }
.stability > div:first-child { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 900; }
.stability-track { height: 0.75rem; overflow: hidden; border-radius: 999px; background: #e6dfd3; }
.stability-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d79b23, #087d72); transition: width 360ms ease; }
.emotion-prompt { text-align: center; }
.emotion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.emotion-chip { min-height: 3.2rem; border: 2px solid #d9d2c4; border-radius: 1rem; background: white; color: #315459; font-weight: 900; }
.emotion-chip:hover, .emotion-chip.correct { border-color: var(--teal); background: #e6f5f0; }
.emotion-chip.wrong { border-color: #d48665; background: #fff0e8; }
.fruit-string { position: relative; display: grid; grid-template-columns: repeat(9, minmax(2rem, 1fr)); gap: 0.35rem; align-items: center; min-height: 5.5rem; padding: 1rem 0; }
.string-line { position: absolute; right: 0; left: 0; z-index: 0; height: 3px; background: #9c6b38; }
.fruit-token { display: grid; z-index: 1; min-height: 3rem; place-items: center; border: 2px solid #d4c9b4; border-radius: 1.1rem; background: #f6eddc; color: #9c8c76; font-size: 0.58rem; font-weight: 1000; text-align: center; }
.fruit-token.placed { border-color: color-mix(in srgb, var(--fruit), #333 18%); background: var(--fruit); color: white; box-shadow: 0 4px 0 color-mix(in srgb, var(--fruit), #111 30%); }
.guide-card { border-left: 5px solid var(--gold); border-radius: 0 1rem 1rem 0; background: #f7edcf; padding: 0.9rem 1rem; }
.guide-card strong { display: block; margin-top: 0.2rem; color: #173e42; font-size: 1.2rem; }
.guide-card p { margin: 0.2rem 0 0; color: #556f72; font-size: 0.88rem; font-weight: 700; }
.virtue-bank button { --chip: #087d72; }
.celebration { display: grid; min-height: 14rem; place-items: center; border-radius: 1.5rem; background: radial-gradient(circle, #fff3a9, #f4ead1); padding: 1.5rem; text-align: center; }
.celebration span { color: #d18a00; font-size: 3rem; }
.celebration b { max-width: 28rem; font-size: 1.15rem; line-height: 1.55; }
.route-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; }
.route-tabs button { flex: 1; min-height: 2.5rem; border: 1px solid #d9d2c4; border-radius: 0.75rem; background: white; color: #527074; font-size: 0.78rem; font-weight: 900; }
.route-tabs button.active { border-color: var(--teal); background: #e6f5f0; color: var(--teal); }
#trace-canvas { display: block; width: 100%; max-height: 16rem; border: 1px solid #d8cfb9; border-radius: 1.25rem; background: #f7efd8; touch-action: none; }
.trace-status { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.65rem; color: #587174; font-size: 0.82rem; font-weight: 750; }
.trace-status b { color: var(--teal); }
.secondary-button { min-height: 2.8rem; margin-top: 1rem; border: 2px solid var(--teal); border-radius: 0.9rem; background: white; padding: 0.6rem 0.9rem; color: var(--teal); font-weight: 900; }
.puzzle-layout { display: grid; grid-template-columns: minmax(11rem, 0.8fr) minmax(14rem, 1.2fr); gap: 1rem; margin-top: 0.8rem; }
.puzzle-board { position: relative; height: 22rem; overflow: hidden; border: 2px dashed #cbbf9f; border-radius: 1.2rem; background: #f1e9d8; }
.puzzle-board img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.puzzle-ghost { opacity: 0.16; filter: grayscale(1); }
.puzzle-layer { filter: drop-shadow(0 3px 3px rgb(0 0 0 / 16%)); animation: place-piece 260ms ease both; }
@keyframes place-piece { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.piece-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; align-content: start; }
.piece-bank button { display: flex; min-height: 3rem; align-items: center; gap: 0.55rem; border: 1px solid #d9d2c4; border-radius: 0.75rem; background: white; padding: 0.45rem; color: #315459; text-align: left; font-size: 0.76rem; font-weight: 900; }
.piece-bank button span { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; place-items: center; border-radius: 0.5rem; background: #fff0bc; color: #99610c; }
.piece-bank button:disabled { border-color: #9ec9c0; background: #e6f5f0; color: #087d72; opacity: 1; }
.memory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.8rem; }
.memory-card { display: grid; min-height: 5.4rem; place-items: center; overflow: hidden; border: 2px solid #d0ab59; border-radius: 0.75rem; background: #12365d; padding: 0.35rem; color: #e9bd52; transition: 180ms ease; }
.memory-card:hover:not(.open) { transform: translateY(-2px) rotate(0.5deg); }
.memory-card.open { border-color: #d6c8a8; background: #fff6df; color: #2b5053; opacity: 1; }
.memory-card.matched { border-color: #5ba698; background: #e3f4ef; }
.memory-card > span:not(.card-back) { align-self: stretch; width: calc(100% + 0.7rem); margin: -0.35rem -0.35rem 0; background: var(--card); padding: 0.28rem; color: white; font-size: 0.56rem; font-weight: 1000; text-transform: uppercase; }
.memory-card b { font-size: 0.57rem; line-height: 1.16; }
.card-back { display: grid; width: 2rem; height: 2.5rem; place-items: center; border: 2px solid #d8aa3a; border-radius: 0.35rem 0.35rem 0.7rem 0.7rem; font-family: Georgia, serif; font-size: 1.15rem; }
.feeling-stage { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 1rem; margin: 0.8rem 0 1rem; border-radius: 1.2rem; background: #f4ead1; padding: 1rem; }
.feeling-stage .face { display: grid; width: 6rem; height: 6rem; place-items: center; border: 3px solid #d39a24; border-radius: 50%; background: white; color: #3b3024; font-size: 3.1rem; }
.feeling-stage .face.revealed { animation: pop 240ms ease both; }
@keyframes pop { 50% { transform: scale(1.1) rotate(-3deg); } }
.feeling-stage p { margin: 0; color: #214548; font-size: 1.12rem; font-weight: 900; line-height: 1.4; }
.emotion-grid.faces .emotion-chip { display: grid; place-items: center; gap: 0.1rem; padding: 0.35rem; font-size: 0.75rem; }
.emotion-grid.faces span { font-size: 1.35rem; }
.path-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0.7rem; margin-top: 1rem; }
.path-card { display: grid; min-height: 12rem; align-content: start; gap: 0.65rem; border: 2px solid #7ca68b; border-radius: 1.2rem; background: linear-gradient(180deg, #eef7eb, #dcefdc); padding: 1rem; color: #234e38; text-align: left; }
.path-card.quick { border-color: #cf8768; background: linear-gradient(180deg, #fff3e9, #f8ddd0); color: #6c3c28; }
.path-card small { font-size: 0.64rem; font-weight: 1000; letter-spacing: 0.09em; }
.path-card b { font-size: 1rem; line-height: 1.3; }
.path-card span { align-self: end; border-radius: 0.75rem; background: rgb(255 255 255 / 75%); padding: 0.6rem; font-size: 0.78rem; font-weight: 850; }
.path-card.selected { box-shadow: 0 0 0 4px rgb(8 125 114 / 16%); transform: translateY(-2px); }
.path-card.quick.selected { box-shadow: 0 0 0 4px rgb(207 135 104 / 18%); }
.fork-mark { display: grid; width: 2.4rem; height: 2.4rem; align-self: center; place-items: center; border-radius: 50%; background: #f0d990; color: #8c6616; font-family: Georgia, serif; font-weight: 1000; }

@media (max-width: 1100px) {
  .game-copy h2 { max-width: 17rem; }
  .memory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .virtue-grid, .virtue-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequence-row { gap: 0.25rem; }
  .sequence-card { min-width: 0; width: 100%; font-size: 0.72rem; }
  .fruit-string { grid-template-columns: repeat(5, 1fr); }
  .string-line { display: none; }
  .puzzle-layout { grid-template-columns: 1fr; }
  .puzzle-board { height: 19rem; }
  .memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memory-card { min-height: 4.8rem; }
  .feeling-stage { grid-template-columns: 5rem 1fr; }
  .feeling-stage .face { width: 4.5rem; height: 4.5rem; font-size: 2.35rem; }
  .path-split { grid-template-columns: 1fr; }
  .fork-mark { margin: -0.3rem auto; }
  .path-card { min-height: 8.5rem; }
}

/* Visual system 2026 — aula aventura */
:root {
  --ink: #102a43;
  --teal: #0c9c8d;
  --deep: #092746;
  --cream: #eef6ff;
  --paper: #ffffff;
  --gold: #ffcb3d;
  --line: #cfdeed;
  --blue: #2458d3;
  --blue-dark: #173f9e;
  --coral: #ff6b5d;
  --soft-teal: #e6f8f5;
  --shadow: 0 24px 70px rgb(22 58 112 / 14%);
  font-family: Nunito, Aptos, "Segoe UI", sans-serif;
  background: #eef6ff;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 13%, rgb(255 203 61 / 18%) 0 7.5rem, transparent 7.7rem),
    radial-gradient(circle at 96% 34%, rgb(43 116 255 / 11%) 0 11rem, transparent 11.2rem),
    linear-gradient(180deg, #f6fbff 0%, #edf6ff 45%, #f8fbff 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image: radial-gradient(rgb(35 88 170 / 22%) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 66%);
  content: "";
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid rgb(255 203 61 / 85%);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-180%);
  border-radius: 0.8rem;
  background: white;
  padding: 0.75rem 1rem;
  color: var(--deep);
  font-weight: 900;
  transition: transform 150ms ease;
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border: 0;
  background: linear-gradient(112deg, #071d39 0%, #0b315c 58%, #123f70 100%);
  box-shadow: 0 8px 30px rgb(3 22 45 / 16%);
}
.topbar::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #ff8e50 35%, #2dd4bf 70%, #7fb3ff);
  content: "";
}
.topbar-inner {
  min-height: 4.75rem;
  max-width: 1440px;
  padding: 0.7rem clamp(1rem, 3.5vw, 3rem);
}
.brand { gap: 0.8rem; }
.brand-mark {
  position: relative;
  width: 3rem;
  height: 3rem;
  border: 2px solid rgb(255 255 255 / 50%);
  border-radius: 1rem;
  background: linear-gradient(145deg, #ffe27d, #ffb414);
  box-shadow: inset 0 -5px 0 rgb(178 92 0 / 20%), 0 7px 18px rgb(0 0 0 / 20%);
  color: #0b315c;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 1.45rem;
}
.brand-mark::after {
  position: absolute;
  top: -0.35rem;
  right: -0.3rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0 4px #0b315c;
  content: "";
}
.brand b { font-family: "Trebuchet MS", sans-serif; font-size: 1.16rem; letter-spacing: 0.05em; }
.brand small { color: #a9d7ff; font-size: 0.66rem; letter-spacing: 0.15em; }
.motto { background: rgb(255 255 255 / 8%); color: #ddecff; }
.header-badge { display: flex; align-items: center; gap: 0.65rem; color: white; }
.header-badge-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  color: var(--gold);
  font-weight: 1000;
}
.header-badge b, .header-badge small { display: block; }
.header-badge b { font-size: 0.84rem; }
.header-badge small { margin-top: 0.1rem; color: #a9d7ff; font-size: 0.68rem; font-weight: 800; }

.page { max-width: 1440px; padding: 1.5rem clamp(1rem, 3.5vw, 3rem) 2rem; }
.welcome-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  border: 1px solid rgb(44 102 184 / 12%);
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 12px 35px rgb(22 58 112 / 8%);
  padding: 1.35rem 1.5rem;
  backdrop-filter: blur(14px);
}
.welcome-copy .eyebrow { display: flex; align-items: center; gap: 0.45rem; color: #42658f; }
.live-dot { width: 0.58rem; height: 0.58rem; border-radius: 50%; background: #17b39f; box-shadow: 0 0 0 5px rgb(23 179 159 / 12%); }
.welcome-copy h1 {
  margin: 0.25rem 0 0;
  color: var(--deep);
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.055em;
}
.welcome-copy h1 em { color: var(--blue); font-style: normal; }
.welcome-copy > p:last-child { max-width: 46rem; margin: 0.55rem 0 0; color: #506c89; font-size: 1rem; font-weight: 650; line-height: 1.45; }
.journey-card { border-radius: 1.15rem; background: #0c2e56; padding: 1rem 1.05rem; color: white; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.journey-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.83rem; font-weight: 850; }
.journey-topline b { color: #ffe173; }
.journey-track { overflow: hidden; height: 0.62rem; margin: 0.6rem 0; border-radius: 99rem; background: rgb(255 255 255 / 13%); }
.journey-track span { display: block; width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c7ad, #ffcf45); transition: width 440ms cubic-bezier(.2,.8,.2,1); }
.journey-card small { display: block; color: #bdd7ef; font-size: 0.74rem; font-weight: 700; line-height: 1.35; }

.game-browser { margin-top: 1.35rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.section-heading .eyebrow { color: #54728e; }
.section-heading h2 { margin: 0.15rem 0 0; color: #112f50; font-family: "Trebuchet MS", sans-serif; font-size: clamp(1.35rem, 2.7vw, 1.85rem); letter-spacing: -0.035em; }
.section-heading > p { margin: 0; color: #688096; font-size: 0.8rem; font-weight: 800; }
.game-rail { gap: 0.7rem; margin: 0 -0.2rem; padding: 0.25rem 0.2rem 1rem; scroll-snap-type: x proximity; }
.game-rail::after { display: block; min-width: 0.1rem; content: ""; }
.game-tab {
  position: relative;
  display: grid;
  min-width: 11.25rem;
  height: 5.25rem;
  grid-template-columns: 2.1rem 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: initial;
  gap: 0 0.65rem;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #d4e2f0;
  border-radius: 1.15rem;
  background: rgb(255 255 255 / 92%);
  padding: 0.75rem;
  box-shadow: 0 7px 18px rgb(24 69 125 / 6%);
  color: #2d5375;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.game-tab:hover { transform: translateY(-3px); border-color: #8bb1de; box-shadow: 0 12px 24px rgb(24 69 125 / 12%); }
.game-tab > span {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 0.72rem;
  background: #edf4ff;
  color: #275bc9;
  font-size: 0.72rem;
  font-weight: 1000;
}
.game-tab b { align-self: end; color: #163b61; font-size: 0.82rem; line-height: 1.08; }
.game-tab small { align-self: start; margin-top: 0.18rem; color: #70879d; font-size: 0.67rem; font-weight: 800; }
.game-tab.active {
  border-color: #2458d3;
  background: linear-gradient(145deg, #2b62de, #17439f);
  box-shadow: 0 7px 0 #0d2f7f, 0 14px 30px rgb(36 88 211 / 22%);
  color: white;
}
.game-tab.active > span { background: #ffce47; color: #173c7e; }
.game-tab.active b { color: white; }
.game-tab.active small { color: #c6dcff; }
.game-tab.visited:not(.active)::after {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border-radius: 50%;
  background: #18a890;
  color: white;
  font-size: 0.66rem;
  font-weight: 1000;
  content: "✓";
}

.game-shell {
  min-height: 39rem;
  grid-template-columns: minmax(22rem, 0.78fr) minmax(0, 1.22fr);
  border: 1px solid rgb(30 73 126 / 13%);
  border-radius: 1.8rem;
  background: white;
  box-shadow: var(--shadow);
}
.game-intro {
  min-height: 39rem;
  isolation: isolate;
  background:
    linear-gradient(155deg, rgb(30 90 202 / 0%) 30%, rgb(27 130 144 / 24%) 100%),
    linear-gradient(140deg, #0b2d5c 0%, #173e96 58%, #0c5668 100%);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.game-intro::before {
  position: absolute;
  inset: auto -12% -35% 8%;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgb(255 255 255 / 4%), 0 0 0 8rem rgb(255 255 255 / 2%);
  content: "";
}
.game-intro::after { display: none; }
.ambient-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.orb-one { top: -3rem; right: -2rem; width: 12rem; height: 12rem; background: rgb(255 203 61 / 14%); }
.orb-two { right: 22%; bottom: 20%; width: 5rem; height: 5rem; background: rgb(45 212 191 / 16%); }
.game-copy { z-index: 4; }
.game-kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.level-pill { border: 1px solid rgb(255 255 255 / 20%); border-radius: 99rem; background: rgb(255 255 255 / 9%); padding: 0.3rem 0.55rem; color: #bce7ff; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.03em; }
.game-copy h2 { max-width: 27rem; margin-top: 0.7rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 0.98; letter-spacing: -0.052em; }
.game-copy > p:not(.eyebrow) { max-width: 27rem; color: #d9edff; font-size: 1rem; line-height: 1.5; }
.reference { max-width: 100%; border-color: rgb(255 255 255 / 16%); background: rgb(3 20 48 / 22%); color: #e9f5ff; font-size: 0.76rem; }
.reference i { color: #ffdc6c; }

.mascot-message {
  position: absolute;
  bottom: 16.3rem;
  left: clamp(1rem, 3vw, 2.5rem);
  z-index: 6;
  width: min(14rem, 54%);
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 1.15rem 1.15rem 0.25rem 1.15rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 13px 30px rgb(2 17 41 / 22%);
  padding: 0.78rem 0.9rem;
  color: #12345a;
  transform-origin: bottom right;
  animation: bubble-in 420ms cubic-bezier(.2,.85,.25,1.2) both;
}
.mascot-message::after {
  position: absolute;
  right: -0.45rem;
  bottom: -0.42rem;
  width: 1.2rem;
  height: 1.2rem;
  background: white;
  clip-path: polygon(0 0, 100% 100%, 0 72%);
  content: "";
}
.mascot-message b, .mascot-message span { display: block; }
.mascot-message b { font-family: "Trebuchet MS", sans-serif; font-size: 0.9rem; }
.mascot-message span { margin-top: 0.22rem; color: #58718b; font-size: 0.75rem; font-weight: 700; line-height: 1.35; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.82) translateY(.4rem); } to { opacity: 1; transform: scale(1) translateY(0); } }

.character-stage { right: 0.6rem; bottom: 0; width: min(65%, 20rem); height: 61%; z-index: 3; }
.character-stage img {
  right: 0;
  bottom: -1.5%;
  width: 100%;
  height: 100%;
  object-position: bottom center;
  filter: drop-shadow(0 20px 18px rgb(0 0 0 / 31%));
  animation: mascot-arrive 440ms cubic-bezier(.2,.85,.25,1.15) both;
  transition: filter 200ms ease;
}
.character-stage:hover img { filter: drop-shadow(0 22px 20px rgb(0 0 0 / 34%)) brightness(1.04); }
.character-stage.mood-guide img, .character-stage.mood-proud img { animation: mascot-breathe 3.2s ease-in-out infinite; }
.character-stage.mood-proud img { animation-duration: 1.9s; }
.character-halo { inset: 11% 4% 4%; background: radial-gradient(circle, rgb(255 215 89 / 40%), rgb(255 198 42 / 9%) 48%, transparent 69%); animation: halo-pulse 3.8s ease-in-out infinite; }
.mascot-action { position: absolute; right: 0.25rem; bottom: 0.85rem; z-index: 4; border: 1px solid rgb(255 255 255 / 25%); border-radius: 99rem; background: rgb(5 30 69 / 75%); padding: 0.38rem 0.65rem; color: #d8edff; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.04em; backdrop-filter: blur(8px); }
.spark { position: absolute; z-index: 4; color: #ffe06d; text-shadow: 0 0 14px #ffca33; animation: sparkle 2.2s ease-in-out infinite; }
.spark-one { top: 16%; right: 8%; font-size: 1.25rem; }
.spark-two { top: 33%; left: 5%; font-size: 0.8rem; animation-delay: -1.1s; }
@keyframes mascot-arrive { from { opacity: 0; transform: translateY(1.5rem) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mascot-breathe { 50% { transform: translateY(-.38rem) rotate(.7deg); } }
@keyframes halo-pulse { 50% { transform: scale(1.06); opacity: .74; } }
@keyframes sparkle { 50% { transform: translateY(-.35rem) rotate(12deg) scale(1.2); opacity: .45; } }

.play-panel { min-width: 0; padding: clamp(1.4rem, 3.2vw, 3rem); background: linear-gradient(180deg, #ffffff 0%, #fbfdff 70%, #f5f9ff 100%); }
.round-heading h3 { color: #102f50; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.amber { color: #b15f00; }
.icon-button { border-color: #d2e0ec; box-shadow: 0 4px 12px rgb(28 65 107 / 8%); color: #37617e; }
.icon-button:hover { border-color: var(--blue); color: var(--blue); background: #eff5ff; }
.instruction { color: #5b7288; font-size: 0.96rem; }
.progress-dots span { max-width: none; background: #e2eaf1; }
.progress-dots span.done { background: #6fd3c1; }
.progress-dots span.now { background: #2458d3; box-shadow: 0 0 0 3px rgb(36 88 211 / 10%); }
.situation-card { border-left-color: #ffbf28; background: linear-gradient(100deg, #fff4c9, #fff9e9); box-shadow: inset 0 0 0 1px rgb(212 157 21 / 12%); color: #153855; }
.choice-card { border-color: #d5e2ec; border-radius: 1.15rem; box-shadow: 0 5px 15px rgb(28 65 107 / 5%); color: #49667e; }
.choice-card:hover { border-color: #7fa3c4; box-shadow: 0 10px 25px rgb(21 63 109 / 11%); }
.choice-card.selected.wise { border-color: #0c9c8d; background: #e7f9f5; box-shadow: 0 0 0 4px rgb(12 156 141 / 11%); }
.choice-card.selected.quick { border-color: #ed8e38; background: #fff2e6; box-shadow: 0 0 0 4px rgb(237 142 56 / 11%); }
.choice-card b { color: #143856; }
.choice-symbol { background: #e4f8f4; color: #087f74; }
.feedback { border: 1px solid transparent; }
.feedback.visible { border-color: #f1d067; background: linear-gradient(100deg, #fff5c9, #fff9e9); color: #69480d; animation: feedback-in 230ms ease both; }
@keyframes feedback-in { from { opacity: 0; transform: translateY(.35rem); } }
.primary-button {
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #235ed9, #1744aa);
  box-shadow: 0 5px 0 #0e327f, 0 10px 20px rgb(30 82 192 / 18%);
  padding-inline: 1.2rem;
}
.primary-button:hover:not(:disabled) { background: linear-gradient(135deg, #2d6bea, #1c4eb9); box-shadow: 0 4px 0 #0e327f, 0 11px 22px rgb(30 82 192 / 22%); }
.secondary-button { border-color: #2458d3; color: #2458d3; }

.action-card, .guide-card { border-color: #f0c553; background: linear-gradient(125deg, #fff5ca, #fffaf0); }
.virtue-chip, .virtue-bank button, .emotion-chip, .sequence-card, .piece-bank button { border-color: #d5e2ec; box-shadow: 0 3px 10px rgb(24 67 112 / 5%); }
.base-card { border-color: #70869c; background: linear-gradient(150deg, #48627b, #7f95a8); }
.base-card.sand { border-color: #d7a64b; background: linear-gradient(150deg, #d8aa55, #f0d493); }
.base-card.selected { border-color: #1a64c9; box-shadow: 0 0 0 4px rgb(36 88 211 / 16%); }
.stability-track { background: #e1e9f0; }
.stability-track span { background: linear-gradient(90deg, #ffbd2f, #16aa96, #2458d3); }
.emotion-chip:hover, .emotion-chip.correct { border-color: #0c9c8d; background: #e5f8f5; }
.fruit-token { border-color: #d9dfdf; background: #f5f8fa; }
.celebration { background: radial-gradient(circle, #fff8cd, #edf7ff); box-shadow: inset 0 0 0 1px #e8d98e; }
.route-tabs button { border-color: #d6e2ed; }
.route-tabs button.active { border-color: #2458d3; background: #edf4ff; color: #2458d3; }
#trace-canvas { border-color: #cbddea; background: #f5f9ff; }
.puzzle-board { border-color: #afc7db; background: #eff6fc; }
.memory-card { border-color: #d8a928; background: linear-gradient(145deg, #123d77, #0b2852); box-shadow: 0 5px 12px rgb(9 40 82 / 14%); }
.memory-card.open { border-color: #c9dbe8; background: #f9fcff; }
.memory-card.matched { border-color: #3eb9a3; background: #e4f8f4; }
.feeling-stage { background: linear-gradient(105deg, #eef5ff, #fff5cb); }
.feeling-stage .face { border-color: #f0b72a; box-shadow: 0 8px 20px rgb(179 117 12 / 14%); }
.path-card { border-color: #55ab8a; background: linear-gradient(180deg, #effbf4, #def4e8); }
.path-card.quick { border-color: #e3936d; background: linear-gradient(180deg, #fff5ee, #ffe4d6); }

.learning-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 1.5rem;
  border: 1px solid #d6e3ef;
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 80%);
  box-shadow: 0 10px 30px rgb(24 69 125 / 7%);
}
.learning-band > div { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; }
.learning-band > div + div { border-left: 1px solid #e0e9f1; }
.learning-band > div > span { color: #2b61ca; font-size: 0.72rem; font-weight: 1000; }
.learning-band p, .learning-band b { display: block; }
.learning-band p { margin: 0; color: #6b8296; font-size: 0.74rem; font-weight: 700; line-height: 1.3; }
.learning-band b { margin-bottom: 0.14rem; color: #173d60; font-size: 0.9rem; }
.site-footer { display: flex; max-width: 1440px; justify-content: space-between; gap: 1rem; margin: 0 auto; padding: 1rem clamp(1rem, 3.5vw, 3rem) 2.25rem; color: #607990; font-size: 0.77rem; font-weight: 700; }
.site-footer p { margin: 0; }
.site-footer b { color: #173d60; letter-spacing: 0.05em; }

@media (max-width: 1050px) {
  .motto { display: none; }
  .game-shell { grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr); }
  .game-copy h2 { max-width: 21rem; }
  .character-stage { width: min(68%, 17rem); }
  .mascot-message { width: 12rem; }
}

@media (max-width: 820px) {
  .topbar { position: relative; }
  .welcome-strip { grid-template-columns: 1fr; gap: 1rem; }
  .game-shell { grid-template-columns: 1fr; }
  .game-intro { min-height: 29rem; }
  .game-copy h2, .game-copy > p:not(.eyebrow) { max-width: 30rem; }
  .character-stage { width: 14.5rem; height: 65%; }
  .mascot-message { right: 12.5rem; bottom: 3.5rem; left: auto; width: min(17rem, calc(100% - 15rem)); }
  .play-panel { min-height: 34rem; }
  .learning-band { grid-template-columns: 1fr 1fr; }
  .learning-band > div:nth-child(3) { border-left: 0; border-top: 1px solid #e0e9f1; }
  .learning-band > div:nth-child(4) { border-top: 1px solid #e0e9f1; }
}

@media (max-width: 620px) {
  .topbar-inner { min-height: 4.25rem; }
  .header-badge { display: none; }
  .page { padding-top: 1rem; }
  .welcome-strip { padding: 1rem; }
  .welcome-copy h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .welcome-copy > p:last-child { font-size: 0.9rem; }
  .journey-card { padding: 0.85rem; }
  .section-heading > p { display: none; }
  .game-tab { min-width: 9.8rem; height: 4.8rem; }
  .game-shell { min-height: auto; border-radius: 1.35rem; }
  .game-intro { min-height: 32rem; padding: 1.25rem; }
  .game-kicker-row { padding-right: 0; }
  .game-copy h2 { max-width: 18rem; font-size: 2.1rem; }
  .game-copy > p:not(.eyebrow) { max-width: 20rem; font-size: 0.9rem; }
  .reference { max-width: 18rem; border-radius: 0.8rem; }
  .character-stage { right: -0.25rem; width: 13.5rem; height: 58%; }
  .mascot-message { right: auto; bottom: 2.5rem; left: 1.1rem; width: calc(100% - 12.8rem); min-width: 9.4rem; }
  .play-panel { min-height: 0; padding: 1.15rem; }
  .round-heading { align-items: flex-start; }
  .choices { grid-template-columns: 1fr; }
  .learning-band { grid-template-columns: 1fr; }
  .learning-band > div + div { border-top: 1px solid #e0e9f1; border-left: 0; }
  .site-footer { display: block; text-align: center; }
  .site-footer p + p { margin-top: 0.35rem; }
}

@media (max-width: 400px) {
  .brand small { letter-spacing: 0.09em; }
  .game-intro { min-height: 34rem; }
  .level-pill { display: none; }
  .mascot-message { bottom: 1.5rem; width: 10rem; }
  .character-stage { width: 12.5rem; }
  .virtue-grid, .virtue-bank, .emotion-grid { grid-template-columns: 1fr 1fr; }
  .sequence-row > span { display: none; }
}

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

/* Juego 03 — las dos casas reciben la misma tormenta */
.house-duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: .75rem 0 1rem;
}
.house-choice {
  min-width: 0;
  overflow: hidden;
  border: 2px solid #c8d6e2;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #dff2ff 0 65%, #f7fbff 65%);
  padding: .65rem;
  color: #173d60;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.house-choice:hover { transform: translateY(-2px); border-color: #7198ba; }
.house-choice.selected { border-color: #2458d3; box-shadow: 0 0 0 4px rgb(36 88 211 / 16%); }
.house-choice:focus-visible, .puzzle-piece:focus-visible, .puzzle-slot:focus-visible { outline: 3px solid #ffbd2f; outline-offset: 2px; }
.house-choice-label { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; padding: .1rem .15rem .45rem; }
.house-choice-label b { font-size: clamp(.78rem, 1.7vw, .95rem); }
.house-choice-label small { color: #55738c; font-size: .68rem; font-weight: 800; }
.house-scene { position: relative; display: block; height: clamp(9.5rem, 24vw, 13.5rem); overflow: hidden; border-radius: .85rem; background: linear-gradient(#bfe7ff 0 63%, #8dc972 63%); }
.house-sprite { position: absolute; z-index: 4; left: 50%; bottom: 2.25rem; width: min(84%, 12.5rem); height: auto; transform: translateX(-50%); transform-origin: 50% 90%; filter: drop-shadow(0 .35rem .25rem rgb(28 57 68 / 24%)); }
.ground { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 1.25rem; height: 2.15rem; }
.rock-ground { border-radius: 48% 42% 16% 20%; background: linear-gradient(145deg, #8396a5, #465868 67%, #2b3c49); box-shadow: inset 0 .3rem .2rem rgb(255 255 255 / 19%); }
.rock-ground::before, .rock-ground::after { position: absolute; width: 36%; height: 64%; border: 2px solid rgb(39 57 70 / 30%); border-radius: 50%; content: ''; }
.rock-ground::before { left: 12%; top: 18%; transform: rotate(-8deg); }
.rock-ground::after { right: 13%; top: 9%; transform: rotate(12deg); }
.sand-ground { left: 3%; right: 3%; height: 2rem; border-radius: 50% 50% 15% 15%; background: linear-gradient(#f4d47b, #c99b3f); box-shadow: inset 0 .28rem .2rem rgb(255 252 203 / 55%); }
.sand-dust { position: absolute; z-index: 6; right: 8%; bottom: 1.35rem; width: 54%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, rgb(229 183 87 / 82%), transparent 68%); opacity: 0; }
.ground-caption { position: absolute; z-index: 8; right: .4rem; bottom: .35rem; border-radius: 999px; background: rgb(7 34 61 / 76%); padding: .16rem .42rem; color: white; font-size: .6rem; font-weight: 1000; letter-spacing: .08em; }
.storm-cloud { display: none; position: absolute; z-index: 2; top: -.25rem; left: 50%; color: #536b80; font-size: clamp(2.8rem, 7vw, 4.5rem); line-height: 1; transform: translateX(-50%); filter: drop-shadow(.8rem .2rem 0 #708496); }
.storm-lluvia .storm-cloud, .storm-viento .storm-cloud, .storm-agua .storm-cloud { display: block; animation: cloud-arrive .75s ease both; }
.rain { position: absolute; z-index: 7; inset: 1.4rem 0 1.2rem; overflow: hidden; pointer-events: none; }
.rain i { position: absolute; top: -1rem; left: calc((var(--drop) + 1) * 6.5%); width: 2px; height: 1.2rem; border-radius: 1rem; background: #2d87d5; transform: rotate(13deg); animation: rain-fall .55s linear calc(var(--drop) * -.045s) 3; }
.wind { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.wind i { position: absolute; left: -70%; width: 64%; height: .3rem; border-top: .2rem solid rgb(235 250 255 / 90%); border-radius: 50%; animation: wind-blast .72s ease-out both; }
.wind i:nth-child(1) { top: 29%; }.wind i:nth-child(2) { top: 48%; animation-delay: .12s; }.wind i:nth-child(3) { top: 66%; animation-delay: .23s; }
.flood { position: absolute; z-index: 7; right: 0; bottom: 0; left: 0; height: 47%; overflow: hidden; background: linear-gradient(rgb(56 161 218 / 60%), rgb(20 101 171 / 88%)); animation: flood-rise .9s ease both; pointer-events: none; }
.flood i { position: absolute; top: -.35rem; left: -15%; width: 60%; height: 1rem; border-radius: 50%; border-top: .3rem solid rgb(231 252 255 / 80%); animation: water-roll .85s linear infinite; }
.flood i:nth-child(2) { left: 25%; animation-delay: -.3s; }.flood i:nth-child(3) { left: 65%; animation-delay: -.6s; }
.storm-lluvia .rock-home .house-sprite, .storm-viento .rock-home .house-sprite, .storm-agua .rock-home .house-sprite { animation: rock-holds .72s ease both; }
.damage-1 .sand-home .house-sprite { animation: sand-wobble .8s ease both; }
.damage-2 .sand-home .house-sprite { animation: sand-slip .9s ease both; transform: translateX(-49%) translateY(.45rem) rotate(3deg); }
.damage-2 .sand-home .house-crack, .damage-3 .sand-home .house-crack { position: absolute; z-index: 8; left: 55%; bottom: 3.7rem; width: 3px; height: 3.4rem; background: #633f2c; opacity: .9; transform: rotate(17deg); box-shadow: -.5rem 1rem 0 -1px #633f2c; }
.damage-3 .sand-home .house-sprite { animation: sand-collapse 1.05s cubic-bezier(.42,0,.65,1.2) both; transform: translateX(-43%) translateY(3.25rem) rotate(13deg) scale(.9); filter: grayscale(.2) brightness(.82) drop-shadow(0 .3rem .2rem rgb(28 57 68 / 25%)); }
.damage-3 .sand-home .sand-dust { animation: dust-puff 1s ease both; }
.test-row { flex-wrap: wrap; }
.test-button { display: inline-flex; min-width: 5.25rem; min-height: 3rem; align-items: center; justify-content: center; gap: .35rem; touch-action: manipulation; }
.test-button span { font-size: 1.15rem; }
.storm-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .65rem; color: #5d7891; font-size: .78rem; font-weight: 850; }
.storm-progress > div { display: flex; gap: .3rem; }
.storm-progress i { width: 2.2rem; height: .38rem; border-radius: 1rem; background: #dce7ef; }
.storm-progress i.done { background: #168e80; }
@keyframes cloud-arrive { from { opacity: 0; transform: translate(-80%,-20%); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes rain-fall { to { transform: translate(1.1rem, 13rem) rotate(13deg); } }
@keyframes wind-blast { to { left: 115%; } }
@keyframes flood-rise { from { height: 6%; opacity: .4; } }
@keyframes water-roll { to { transform: translateX(35%); } }
@keyframes rock-holds { 20% { transform: translateX(-51%) rotate(-1.5deg); } 45% { transform: translateX(-49%) rotate(1deg); } 100% { transform: translateX(-50%) rotate(0); } }
@keyframes sand-wobble { 35% { transform: translateX(-54%) rotate(-3deg); } 70% { transform: translateX(-47%) rotate(3deg); } }
@keyframes sand-slip { 0% { transform: translateX(-50%); } 55% { transform: translateX(-47%) translateY(.55rem) rotate(4deg); } 100% { transform: translateX(-49%) translateY(.45rem) rotate(3deg); } }
@keyframes sand-collapse { 0% { transform: translateX(-49%) translateY(.45rem) rotate(3deg); } 55% { transform: translateX(-42%) translateY(1.2rem) rotate(11deg); } 100% { transform: translateX(-43%) translateY(3.25rem) rotate(13deg) scale(.9); } }
@keyframes dust-puff { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: .9; } 100% { opacity: .35; transform: scale(1.45); } }

/* Juego 07 — rompecabezas con arrastre para mouse y pantalla táctil */
.puzzle-layout { grid-template-columns: minmax(12rem, .9fr) minmax(13rem, 1.1fr); align-items: center; gap: 1.1rem; }
.puzzle-board { width: min(100%, 17rem); height: auto; aspect-ratio: 3 / 4; justify-self: center; overflow: hidden; border: 2px solid #8cb1cf; background: linear-gradient(145deg, #ddecf7, #f8fbfd); touch-action: manipulation; }
.puzzle-board > .puzzle-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .12; filter: grayscale(1); }
.puzzle-slots { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.puzzle-slot { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px dashed rgb(62 102 135 / 47%); border-radius: 0; background: transparent; padding: 0; touch-action: manipulation; }
.puzzle-slot.filled { border-color: rgb(255 255 255 / 19%); }
.slot-number { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; margin: auto; border-radius: 50%; background: rgb(255 255 255 / 70%); color: #607c95; font-size: .72rem; font-weight: 1000; }
.puzzle-image-piece { position: absolute; inset: 0; display: block; background-image: var(--puzzle-image); background-repeat: no-repeat; background-size: 300% 300%; background-position: var(--piece-x) var(--piece-y); animation: place-piece .25s ease both; }
.piece-bank { grid-template-columns: repeat(3, minmax(3.2rem, 1fr)); align-content: center; gap: .55rem; border: 1px solid #d7e3ec; border-radius: 1.1rem; background: #f4f9fc; padding: .7rem; }
.piece-bank > p { grid-column: 1 / -1; align-self: center; margin: 0; color: #18786e; text-align: center; font-weight: 900; }
.piece-bank .puzzle-piece { position: relative; display: block; min-height: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid white; border-radius: .65rem; background-color: #cbdce8; background-image: var(--puzzle-image); background-repeat: no-repeat; background-size: 300% 300%; background-position: var(--piece-x) var(--piece-y); box-shadow: 0 .25rem .65rem rgb(23 61 96 / 16%); padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.piece-bank .puzzle-piece:hover, .piece-bank .puzzle-piece.selected { z-index: 2; border-color: #ffbd2f; box-shadow: 0 0 0 3px rgb(255 189 47 / 25%), 0 .35rem .8rem rgb(23 61 96 / 20%); transform: translateY(-2px); }
.piece-bank .puzzle-piece > span, .puzzle-drag-ghost > span { position: absolute; top: .2rem; left: .2rem; display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 50%; background: #092746; color: white; font-size: .63rem; font-weight: 1000; }
.puzzle-drag-ghost { position: fixed !important; z-index: 9999 !important; width: clamp(3.5rem, 9vw, 5.3rem) !important; min-height: 0 !important; aspect-ratio: 3 / 4; pointer-events: none !important; transform: translate(-50%, -50%) scale(1.06) rotate(2deg) !important; opacity: .9; }
.puzzle-drag-active { cursor: grabbing; }
.puzzle-message { min-height: 1.5rem; margin-top: .55rem; color: transparent; font-size: .82rem; font-weight: 800; text-align: center; }
.puzzle-message.visible { color: #536f87; }

@media (max-width: 820px) {
  .house-scene { height: clamp(10rem, 31vw, 13.5rem); }
  .puzzle-layout { grid-template-columns: minmax(11rem, .8fr) minmax(13rem, 1.2fr); }
}
@media (max-width: 620px) {
  body { overflow-x: hidden; }
  button, a { -webkit-tap-highlight-color: transparent; }
  .house-duel { gap: .45rem; }
  .house-choice { padding: .42rem; border-radius: .85rem; }
  .house-choice-label { display: block; min-height: 3.25rem; padding: .15rem .12rem .35rem; }
  .house-choice-label b, .house-choice-label small { display: block; }
  .house-choice-label small { margin-top: .18rem; }
  .house-scene { height: clamp(8.6rem, 43vw, 11rem); }
  .house-sprite { bottom: 2rem; width: 88%; }
  .ground { left: 4%; right: 4%; bottom: 1.05rem; }
  .ground-caption { right: .25rem; bottom: .2rem; font-size: .52rem; }
  .test-button { min-width: calc(33.333% - .35rem); padding-inline: .35rem; }
  .storm-progress { align-items: flex-end; }
  .puzzle-layout { grid-template-columns: 1fr; }
  .puzzle-board { width: min(72vw, 14.5rem); }
  .piece-bank { grid-template-columns: repeat(5, minmax(2.7rem, 1fr)); width: 100%; }
  .piece-bank .puzzle-piece { min-width: 2.7rem; }
}
@media (max-width: 390px) {
  .house-choice-label b { font-size: .72rem; }
  .house-choice-label small { font-size: .6rem; }
  .house-scene { height: 8.4rem; }
  .test-button { min-height: 3.15rem; font-size: .76rem; }
  .piece-bank { grid-template-columns: repeat(5, minmax(2.35rem, 1fr)); gap: .35rem; padding: .5rem; }
  .piece-bank .puzzle-piece { min-width: 2.35rem; }
}

[hidden] { display: none !important; }
#restart-journey { margin-top: .75rem; border: 1px solid #e0b866; border-radius: .65rem; background: #fff7df; color: #173d62; padding: .55rem .8rem; font-weight: 800; cursor: pointer; }
.game-tab.completed { box-shadow: inset 0 0 0 2px #e5b843; }

/* Contornos entrelazados: cada pieza tiene una silueta propia. */
.puzzle-board, .puzzle-slots, .puzzle-slot { overflow: visible; }
.puzzle-slot { border: 0; background: transparent; isolation: isolate; }
.puzzle-slot.filled { z-index: 3; }
.puzzle-slot .jigsaw-art { position: absolute; left: -18%; top: -13.5%; width: 136%; height: 127%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 2px rgb(13 51 77 / 22%)); }
.puzzle-slot .slot-number { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.puzzle-image-piece { overflow: visible; background: none; }
.puzzle-image-piece .jigsaw-art { position: absolute; left: -18%; top: -13.5%; width: 136%; height: 127%; }
.piece-bank .puzzle-piece { aspect-ratio: 136 / 169.333; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.piece-bank .puzzle-piece .jigsaw-art, .puzzle-drag-ghost .jigsaw-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .22rem .18rem rgb(11 46 75 / 35%)); }
.piece-bank .puzzle-piece:hover, .piece-bank .puzzle-piece.selected { border: 0; background: rgb(255 201 75 / 12%); box-shadow: none; }
.piece-bank .puzzle-piece > span, .puzzle-drag-ghost > span { z-index: 2; }

@media (max-width: 620px) {
  .puzzle-board { width: min(82vw, 17rem); }
  .piece-bank { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .piece-bank .puzzle-piece { min-width: 0; width: 100%; }
}

.feeling-stage{grid-template-columns:1fr}.emotion-grid.faces .emotion-chip{font-size:1rem;padding:.8rem}.feedback>span:empty{display:none}

/* Rompecabezas: piezas gruesas con bisel y un tablero de madera en relieve. */
.puzzle-layout { padding: .75rem .45rem 1rem; gap: 1.4rem; }
.puzzle-board { border: 0; border-radius: .55rem; background: linear-gradient(145deg,#e5dbc3,#c6b18a); box-shadow: inset 0 .2rem .45rem rgb(64 43 20 / 24%),0 1rem 1.5rem rgb(43 39 28 / 18%); isolation: isolate; }
.puzzle-board::before { content: ''; position: absolute; z-index: -1; inset: -.42rem; border: .42rem solid #b28b50; border-radius: .95rem; background: #cfad74; box-shadow: inset 0 2px 0 #f5dfb5,inset 0 -3px 0 #735126,0 .22rem 0 #76512d,0 .55rem .9rem rgb(50 35 15 / 19%); pointer-events: none; }
.puzzle-board > .puzzle-ghost { opacity: .14; filter: saturate(.5); border-radius: .45rem; transition: opacity .2s ease; }
.puzzle-board.show-puzzle-guide > .puzzle-ghost { opacity: .8; filter: none; }
.puzzle-complete { box-shadow: 0 .4rem 1.3rem rgb(146 107 30 / 25%); }
.puzzle-slot .jigsaw-art { filter: none; }
.piece-bank { perspective: 900px; gap: .85rem; padding: .8rem; border-radius: 1rem; background: linear-gradient(145deg,#f3ead8,#dfceb0); box-shadow: inset 0 1px 2px rgb(255 255 255 / 90%),inset 0 -2px 3px rgb(100 72 34 / 16%); }
.piece-bank .puzzle-piece { transform-style: preserve-3d; transition: transform .18s ease,filter .18s ease; }
.piece-bank .puzzle-piece .jigsaw-art { filter: drop-shadow(0 .28rem .16rem rgb(57 38 18 / 36%)); }
.piece-bank .puzzle-piece:hover, .piece-bank .puzzle-piece.selected { background: transparent; transform: translateY(-.3rem) rotateX(7deg) rotateY(-5deg); }
.piece-bank .puzzle-piece.selected .jigsaw-art { filter: drop-shadow(0 .4rem .25rem rgb(57 38 18 / 35%)) drop-shadow(0 0 3px #e9b433); }
.puzzle-drag-ghost .jigsaw-art { filter: drop-shadow(0 .6rem .35rem rgb(34 28 17 / 38%)); }
.puzzle-collection-note { margin: -.2rem 0 .9rem; color: #655633; font-size: .9rem; line-height: 1.5; }
.puzzle-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.puzzle-actions button { min-height: 44px; flex: 1 1 11rem; max-width: 19rem; }
.game-shell.puzzle-mode { grid-template-columns: 1fr; }
.puzzle-mode .game-intro { min-height: 0; padding: 1.1rem 1.6rem; }
.puzzle-mode .game-intro::before { display: none; }
.puzzle-mode .game-copy { max-width: none; padding: 0; }
.puzzle-mode #game-title { margin: .35rem 0; font-size: clamp(1.35rem,2.4vw,2rem); }
.puzzle-mode #game-intro { max-width: 55rem; margin: .45rem 0; }
.puzzle-mode .game-reference { margin: .5rem 0 0; }
.puzzle-mode .character-stage,.puzzle-mode .mascot-message { display: none; }
.puzzle-mode .play-panel { min-height: 0; }
.puzzle-mode .puzzle-layout { max-width: 58rem; margin: 1rem auto; grid-template-columns: minmax(16rem,1fr) minmax(15rem,.95fr); gap: 2.5rem; }
.puzzle-mode .puzzle-board { width: min(100%,25rem); }
.puzzle-mode .piece-bank { width: 100%; max-width: 25rem; justify-self: center; }
.puzzle-mode .feedback:not(.visible) { display: none; }
.puzzle-mode .puzzle-message:not(.visible) { min-height: 0; margin: 0; }
.puzzle-mode .puzzle-actions { margin-top: .8rem; }
@media (max-width:780px) {
 .puzzle-mode .game-intro { padding: 1rem 1.2rem; }
 .puzzle-mode .puzzle-layout { grid-template-columns: 1fr; gap: 1.8rem; }
 .puzzle-mode .puzzle-board { width: min(78vw,20rem); }
 .puzzle-mode .piece-bank { max-width: 22rem; }
}
@media (max-width:620px) {
 .puzzle-layout { gap: 1.65rem; padding-inline: .4rem; }
 .piece-bank { padding: .7rem; gap: .65rem; }
 .puzzle-actions button { max-width: none; }
}
@media (prefers-reduced-motion:reduce) {
 .piece-bank .puzzle-piece,.puzzle-board > .puzzle-ghost { transition: none; }
 .piece-bank .puzzle-piece:hover,.piece-bank .puzzle-piece.selected { transform: none; }
}

/* Memoria: cartas legibles, identidad oficial y progreso sin límite de tiempo. */
.brand .collection-logo { display:block; width:7.2rem; height:auto; object-fit:contain; flex:none; }
.game-shell.memory-mode { grid-template-columns:1fr; }
.memory-mode .game-intro { min-height:0; padding:1.15rem clamp(1.15rem,3vw,2rem); }
.memory-mode .game-intro::before,.memory-mode .character-stage,.memory-mode .mascot-message { display:none; }
.memory-mode .game-copy { max-width:none; padding:0; }
.memory-mode #game-title { max-width:none; margin:.4rem 0; font-size:clamp(1.4rem,2.5vw,2rem); }
.memory-mode #game-intro { max-width:48rem; margin:.5rem 0; }
.memory-mode .play-panel { min-height:0; background:linear-gradient(180deg,#fffdf7,#f5f0e5); padding:clamp(1.1rem,3vw,2.4rem); }
.memory-mode .round-heading { max-width:68rem; margin-inline:auto; }
.memory-mode .round-heading h3 { font-family:Georgia,serif; font-weight:500; font-size:clamp(1.65rem,3.5vw,2.5rem); line-height:1.15; }
.memory-mode .memory-instruction { max-width:68rem; margin:.9rem auto 1.25rem; color:#445b65; font-size:1rem; line-height:1.6; }
.memory-score { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; max-width:68rem; margin:auto; padding:.9rem 1.1rem; border:1px solid #e1d6bd; border-radius:1rem; background:#fffdf7; color:#596367; font-size:.88rem; }
.memory-score > span { display:flex; align-items:baseline; gap:.4rem; }
.memory-score b { color:#123f50; font-size:1.45rem; font-weight:850; font-variant-numeric:tabular-nums; }
.memory-score b small { font-size:.9rem; font-weight:600; color:#69777b; }
.memory-progress { flex:1 1 6rem; height:.45rem; border-radius:2rem; overflow:hidden; background:#e9e3d6; }
.memory-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#bd8a26,#e4be64); transition:width .25s; }
.memory-hint { max-width:68rem; min-height:3rem; display:flex; align-items:center; margin:.5rem auto .75rem; color:#3d655d; font-size:.92rem; line-height:1.5; }
.memory-mode .memory-grid { max-width:68rem; margin:0 auto; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.5rem,1.4vw,1rem); align-items:stretch; }
.memory-mode .memory-card { position:relative; display:grid; min-width:0; min-height:11rem; padding:0; border:1px solid #c7a65c; border-radius:1rem; background:radial-gradient(ellipse at 35% 0%,#174b65,#092a41 70%); color:#e8cb82; box-shadow:0 4px 0 #b2904b,0 8px 14px #1334471a; overflow:hidden; transition:transform .18s,box-shadow .18s; cursor:pointer; }
.memory-mode .memory-card::after { content:''; position:absolute; inset:5px; border:1px solid #d3b46866; border-radius:.68rem; pointer-events:none; }
.memory-mode .memory-card:hover:not(:disabled):not(.open) { transform:translateY(-3px); box-shadow:0 7px 0 #b2904b,0 12px 18px #13344722; }
.memory-mode .memory-card:focus-visible { outline:3px solid #14756e; outline-offset:4px; }
.memory-mode .memory-card:disabled { opacity:1; cursor:default; }
.memory-mode .memory-card.open { border-color:#cab990; background:#fffdf7; box-shadow:0 4px 0 #cfbf9b,0 8px 14px #13344710; color:#153e4b; }
.memory-mode .memory-card.matched { border-color:#4d9482; background:#edf7f0; box-shadow:0 4px 0 #78a998,0 8px 14px #13344710; }
.memory-mode .card-back { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; width:100%; height:100%; border:0; margin:0; padding:.9rem .55rem; background:transparent; font-family:inherit; }
.memory-mode .card-back img { display:block; width:100%; height:auto; max-width:9.5rem; object-fit:contain; filter:drop-shadow(0 3px 4px #0005); }
.memory-mode .card-back small { color:#e4d19a; font-size:.68rem; font-weight:700; letter-spacing:.04em; }
.memory-mode .memory-card > .memory-face { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; width:100%; height:100%; margin:0; padding:1rem .7rem; border-top:5px solid var(--card); background:transparent; color:#143f4d; text-align:center; text-transform:none; font-weight:500; }
.memory-face > small { color:#6a624f; font-size:.65rem; line-height:1.3; font-weight:800; letter-spacing:.045em; }
.memory-face > b { width:100%; font-family:inherit; font-size:clamp(.86rem,1.4vw,1.12rem); line-height:1.4; font-weight:800; overflow-wrap:break-word; }
.memory-face > b.memory-virtue { color:#123d4b; font-size:clamp(.86rem,1.6vw,1.25rem); }
.memory-face > em { color:#526d69; font-size:.7rem; line-height:1.35; font-style:normal; font-weight:500; }
.matched .memory-face > small { color:#276854; font-size:.6rem; letter-spacing:0; }
.memory-finish { max-width:40rem; margin:1.7rem auto .25rem; padding:1.25rem; text-align:center; border:1px solid #b6d6bd; border-radius:1.1rem; background:#eef7ed; color:#234c3c; line-height:1.55; }
.memory-finish p { margin:0 0 1rem; }
@media(max-width:1000px) { .memory-mode .memory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:44rem; } }
@media(max-width:620px) {
 .brand .collection-logo { width:5.4rem; }
 .memory-mode .game-intro { padding:1rem 1.15rem; }
 .memory-mode .memory-card { min-height:10rem; border-radius:.8rem; }
 .memory-mode .memory-card > .memory-face { padding:.85rem .45rem; gap:.6rem; }
 .memory-score { padding:.75rem .85rem; gap:.6rem 1rem; }
 .memory-progress { flex-basis:100%; }
 .memory-mode .card-back { padding:.8rem .4rem; gap:.7rem; }
 .memory-mode .card-back small { font-size:.6rem; }
 .memory-hint { min-height:3.5rem; font-size:.88rem; }
 .memory-face > em { font-size:.65rem; }
}
@media(max-width:350px) { .memory-mode .memory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .memory-mode .memory-card,.memory-progress i { transition:none; } .memory-mode .memory-card:hover:not(:disabled):not(.open) { transform:none; } }

.memory-mode .memory-card { font-family:"Trebuchet MS",Arial,sans-serif; }

/* El fruto del Espíritu: un recorrido visible y acciones concretas. */
.game-shell.fruit-mode { grid-template-columns:1fr; }
.fruit-mode .game-intro { min-height:0; padding:1.15rem clamp(1.15rem,3vw,2rem); }
.fruit-mode .game-intro::before,.fruit-mode .character-stage,.fruit-mode .mascot-message { display:none; }
.fruit-mode .game-copy { max-width:none; padding:0; }
.fruit-mode #game-title { max-width:none; margin:.4rem 0; font-size:clamp(1.4rem,2.5vw,2rem); }
.fruit-mode #game-intro { max-width:48rem; margin:.5rem 0; }
.fruit-mode .play-panel { min-height:0; padding:clamp(1.1rem,3vw,2.4rem); background:linear-gradient(180deg,#fffdf7,#f5f0e5); }
.fruit-mode .round-heading,.fruit-instruction,.fruit-score,.fruit-route,.fruit-focus,.fruit-choice-heading,.fruit-response,.fruit-bank,.fruit-finish { max-width:64rem; margin-inline:auto; }
.fruit-mode .round-heading h3 { font-family:Georgia,serif; font-size:clamp(1.65rem,3.5vw,2.5rem); font-weight:500; line-height:1.15; }
.fruit-mode .fruit-instruction { margin-block:.9rem 1.2rem; color:#445b65; font-size:1rem; line-height:1.6; }
.fruit-score { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.2rem; padding:.85rem 1rem; border:1px solid #e1d6bd; border-radius:1rem; background:#fffdf7; color:#526467; font-size:.88rem; }
.fruit-score b { color:#123f50; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.fruit-score b small { color:#71807e; font-size:.9rem; font-weight:500; }
.fruit-progress { flex:1 1 8rem; height:.45rem; border-radius:2rem; overflow:hidden; background:#e9e3d6; }
.fruit-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b98827,#e4be64); transition:width .2s; }
.fruit-route { margin-block:1.4rem; }
.fruit-route h4,.fruit-choice-heading h4 { margin:0 0 .7rem; font-size:1rem; color:#173f4d; }
.fruit-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; padding:0; margin:0; list-style:none; }
.fruit-steps li { display:flex; align-items:center; gap:.6rem; min-width:0; padding:.65rem .75rem; border:1px solid #ded8c9; border-radius:.8rem; background:#fffcf6; color:#57676b; }
.fruit-step-number { display:grid; flex:0 0 1.65rem; width:1.65rem; height:1.65rem; place-items:center; border:1px solid #d6cab0; border-radius:50%; background:#f2ead9; color:#76603a; font-size:.75rem; font-weight:800; }
.fruit-steps li > span:last-child { min-width:0; }
.fruit-steps b { display:block; font-size:.87rem; line-height:1.3; overflow-wrap:break-word; }
.fruit-steps small { display:block; margin-top:.2rem; font-size:.65rem; line-height:1.2; }
.fruit-steps li.current { background:#123e50; border-color:#b99448; color:#fff3cf; box-shadow:0 3px 0 #b99448; }
.fruit-steps .current .fruit-step-number { background:#ecd090; border-color:#ecd090; color:#123e50; }
.fruit-steps li.done { background:#eaf5ed; color:#316654; border-color:#a8c9b4; }
.fruit-steps .done .fruit-step-number { background:#d7e9dd; border-color:#a3c2ad; color:#316654; }
.fruit-focus { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block:1.4rem; padding:clamp(1.05rem,2.5vw,1.6rem); border:1px solid #b99448; border-radius:1.15rem; background:linear-gradient(120deg,#082c40,#174a5b); box-shadow:0 5px 0 #b9944833; color:#fff8e6; }
.fruit-focus > div { min-width:0; }
.fruit-focus small { color:#e4cd90; font-size:.68rem; font-weight:800; letter-spacing:.06em; }
.fruit-focus h4 { margin:.5rem 0 .3rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; line-height:1.12; }
.fruit-focus p { margin:.5rem 0 0; font-size:1.02rem; line-height:1.5; }
.fruit-focus img { width:6.5rem; height:auto; flex:none; object-fit:contain; }
.fruit-choice-heading { display:flex; flex-wrap:wrap; gap:.25rem 1rem; justify-content:space-between; align-items:baseline; }
.fruit-choice-heading h4 { margin:0; font-size:1.08rem; }
.fruit-choice-heading p { margin:0; font-size:.86rem; color:#62736e; }
.fruit-response { min-height:3.2rem; display:flex; align-items:center; margin-block:.35rem .75rem; color:#356451; line-height:1.5; font-size:.92rem; }
.fruit-response.gentle-retry { color:#8a4e22; }
.fruit-bank { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.fruit-option { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.55rem; min-width:0; min-height:8.5rem; padding:1rem 1.05rem; border:1px solid #d4c7a8; border-top:4px solid var(--fruit); border-radius:1rem; background:#fffdf8; box-shadow:0 4px 0 #ddcfaf,0 7px 12px #123e4b09; color:#183e4b; text-align:left; font-family:"Trebuchet MS",Arial,sans-serif; cursor:pointer; transition:transform .18s,box-shadow .18s; }
.fruit-option > small { font-size:.62rem; font-weight:800; color:#72654b; letter-spacing:.05em; }
.fruit-option > b { width:100%; font-size:1.08rem; line-height:1.3; overflow-wrap:break-word; }
.fruit-option > span { width:100%; color:#52676a; font-size:.9rem; line-height:1.45; }
.fruit-option:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 7px 0 #ddcfaf,0 11px 16px #123e4b12; }
.fruit-option:focus-visible { outline:3px solid #14756e; outline-offset:4px; }
.fruit-option.placed { opacity:1; border-color:#b3cbb7; background:#edf5ef; box-shadow:0 3px 0 #b8cdbc; cursor:default; }
.fruit-option.placed > small { color:#36704e; }
.fruit-option.try-again { border-color:#bf8953; background:#fff5e9; }
.fruit-finish { margin-block:1.5rem 0; padding:1.4rem; text-align:center; border:1px solid #b8d2b9; border-radius:1.1rem; background:#eef7ed; color:#244c3b; }
.fruit-finish h4 { margin:.5rem 0; font-family:Georgia,serif; font-size:1.8rem; font-weight:500; }
.fruit-finish p { line-height:1.55; }
.fruit-finish button { margin-top:.5rem; }
@media(max-width:620px) {
 .fruit-mode .game-intro { padding:1rem 1.15rem; }
 .fruit-progress { flex-basis:100%; }
 .fruit-steps li { flex-direction:column; align-items:flex-start; gap:.4rem; min-height:5.2rem; padding:.6rem; }
 .fruit-steps b { font-size:.8rem; }
 .fruit-focus { align-items:flex-start; gap:.7rem; }
 .fruit-focus img { width:4.5rem; margin-top:.3rem; }
 .fruit-focus p { font-size:1rem; }
 .fruit-bank { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
 .fruit-option { min-height:9.5rem; padding:.9rem .75rem; }
 .fruit-option > b { font-size:.94rem; }
 .fruit-option > span { font-size:.86rem; }
}
@media(max-width:350px) { .fruit-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .fruit-focus img { width:3.8rem; } }
@media(prefers-reduced-motion:reduce) { .fruit-option,.fruit-progress i { transition:none; } .fruit-option:hover:not(:disabled) { transform:none; } }
/* Dos casas: un pequeño valle para explorar. Alcance exclusivo del juego. */
.game-shell.rock-mode { grid-template-columns:1fr; }
.rock-mode .game-intro { min-height:0; padding:1rem clamp(1.15rem,3vw,2rem); }
.rock-mode .game-intro::before,.rock-mode .character-stage,.rock-mode .mascot-message { display:none; }
.rock-mode .game-copy { padding:0; max-width:none; }
.rock-mode #game-title { margin:.4rem 0; max-width:none; font-size:clamp(1.35rem,3vw,1.9rem); }
.rock-mode #game-intro { margin:.5rem 0; max-width:48rem; }
.rock-mode .play-panel { min-height:0; background:linear-gradient(160deg,#fffdf5,#f3f7ef 55%,#e6f1ee); padding:clamp(1.1rem,3vw,2.3rem); }
.rock-mode .round-heading,.rock-instruction,.rock-adventure,.rock-lesson { max-width:58rem; margin-inline:auto; }
.rock-mode .round-heading h3 { font-family:Georgia,serif; font-size:clamp(1.85rem,3.8vw,2.8rem); font-weight:500; line-height:1.14; }
.rock-mode .round-heading .eyebrow { font-size:.7rem; line-height:1.6; }
.rock-instruction { color:#496964; font-size:1rem; line-height:1.6; margin-block:1rem 1.4rem; }
.rock-adventure { padding:clamp(.8rem,2.5vw,1.6rem); border:1px solid #cfdbc7; border-radius:1.7rem; background:#fffcf3; box-shadow:0 7px 0 #cddcca77,0 15px 30px #184d4010; }
.rock-scene-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.2rem .35rem 1.1rem; }
.rock-step { color:#8b6423; font-size:.66rem; font-weight:900; letter-spacing:.07em; }
.rock-scene-heading h4 { font-family:Georgia,serif; font-size:clamp(1.5rem,3vw,2rem); font-weight:500; margin:.4rem 0 0; line-height:1.2; color:#123e44; }
.rock-scene-heading img { width:6.3rem; height:auto; flex:none; }
.rock-mode .house-duel { gap:1rem; margin:0 0 1.3rem; }
.rock-mode .house-choice { position:relative; padding:0; background:#fffef9; border:2px solid #d6e0d1; border-radius:1.3rem; box-shadow:0 5px 0 #e1e5d6; color:#143e42; font-family:"Trebuchet MS",Arial,sans-serif; }
.rock-mode .house-choice:hover { transform:translateY(-3px); border-color:#85ada0; }
.rock-mode .house-choice.selected { border-color:#b38a30; box-shadow:0 5px 0 #be963c,0 0 0 3px #efdd9b88; }
.rock-mode .house-choice-label { display:flex; flex-direction:column; align-items:flex-start; padding:1rem 1rem .8rem; min-height:0; gap:.3rem; background:#fffdf5; }
.rock-mode .house-choice-label b { font-size:1.12rem; line-height:1.25; }
.rock-mode .house-choice-label small { margin:0; font-size:.72rem; color:#657e76; }
.rock-mode .selected .house-choice-label small { color:#785415; font-weight:900; }
.rock-mode .house-scene { margin:0 .45rem; height:18rem; border-radius:.9rem; background:linear-gradient(#83c9ec,#d6f2ee 65%,#8dc576 65%,#5eae73); isolation:isolate; }
.rock-mode .sand-home .house-scene { background:linear-gradient(#8bd3ea,#d9f0e1 65%,#f5d58a 65%,#d9b369); }
.scene-sun { position:absolute; top:12%; right:14%; width:2.7rem; height:2.7rem; background:#ffe28a; border-radius:50%; box-shadow:0 0 0 8px #fff1b044,0 0 22px #fff6b7; transition:opacity .4s; }
.scene-cloud { position:absolute; z-index:2; top:13%; left:8%; width:4.2rem; height:1.2rem; border-radius:2rem; background:#fffefa; box-shadow:0 5px 12px #548d9620; }
.scene-cloud::before,.scene-cloud::after { content:""; position:absolute; bottom:0; background:inherit; border-radius:50%; width:2rem; height:2rem; left:.6rem; }
.scene-cloud::after { left:2rem; width:1.6rem; height:1.6rem; }
.cloud-two { top:28%; left:66%; transform:scale(.7); opacity:.9; }
.scene-hill { position:absolute; z-index:0; left:-15%; top:49%; width:105%; height:35%; background:#75bb8e; border-radius:60% 65% 0 0; transform:rotate(-12deg); box-shadow:7rem 1rem 0 #b0d6a0; }
.sand-home .scene-hill { background:#b9c99a; box-shadow:7rem 1rem 0 #d1d7a9; }
.scene-bush { position:absolute; z-index:3; bottom:21%; left:-.8rem; width:2.8rem; height:2rem; background:#438f70; border-radius:50%; box-shadow:1rem -.4rem 0 #6baa76,1.9rem .1rem 0 #4b9166,16rem .3rem 0 #4b9166; }
.rock-mode .house-sprite { bottom:3.3rem; width:min(88%,15rem); }
.rock-mode .ground { bottom:2.3rem; height:2.5rem; }
.rock-mode .rock-ground { background:linear-gradient(155deg,#b4c2bb,#758e8d 55%,#3e6269); box-shadow:0 .4rem .3rem #37595c40,inset 0 .35rem .3rem #f4f6df55; }
.rock-mode .sand-ground { background:linear-gradient(155deg,#ffeab0,#e8ba62 60%,#c19148); box-shadow:0 .4rem .4rem #a2773940,inset 0 .3rem .3rem #fff9df88; }
.rock-mode .ground-caption { right:.6rem; bottom:.55rem; font-size:.65rem; background:#143e44d9; padding:.22rem .55rem; }
.rock-mode .house-observation { display:block; padding:.9rem .45rem; text-align:center; font-size:.85rem; font-weight:800; line-height:1.35; }
.rock-mode .house-duel:not(.sunny) .scene-sun { opacity:.15; }
.rock-mode .house-duel:not(.sunny) .scene-cloud { background:#879fac; }
.rock-mode .house-duel:not(.sunny) .house-scene { background:linear-gradient(#769cae,#bad3d4 65%,#87b387 65%,#629676); }
.rock-mode .house-duel:not(.sunny) .sand-home .house-scene { background:linear-gradient(#769cae,#bad3d4 65%,#dbc28a 65%,#b9a270); }
.rock-mode .rain { inset:1.4rem 0 1.2rem; }
.rock-mode .rain i { background:#2b6e9a; height:1.4rem; animation-iteration-count:5; }
.rock-mode .wind i { border-top-color:#f5ffff; animation-iteration-count:3; }
.rock-mode .flood { height:34%; }
.rock-mode .damage-3 .sand-home .house-crack { display:none; }
.rock-mode .damage-3 .sand-home .house-sprite { transform:translateX(-42%) translateY(4rem) rotate(32deg) scale(.86); animation:valley-house-fall 1s ease both; }
@keyframes valley-house-fall { from { transform:translateX(-49%) translateY(.45rem) rotate(3deg); } to { transform:translateX(-42%) translateY(4rem) rotate(32deg) scale(.86); } }
.rock-mode .damage-3 .sand-home .house-observation { color:#96531f; background:#fff0d8; }
.rock-mode .damage-3 .rock-home .house-observation { color:#22644c; background:#e5f4df; }
.weather-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem 1rem; margin:.6rem 0 .9rem; }
.weather-heading h4 { font-size:1.05rem; color:#244f51; margin:0; }
.weather-heading span { font-size:.8rem; color:#5b7470; line-height:1.4; }
.rock-mode .test-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.rock-mode .test-button { min-width:0; min-height:8rem; display:flex; flex-direction:column; gap:.4rem; background:linear-gradient(#eff9fc,#dceef3); border:1px solid #adcbd2; border-radius:1.1rem; color:#245a6a; padding:.85rem .35rem; box-shadow:0 4px 0 #a7c5cc; font-family:"Trebuchet MS",Arial,sans-serif; transition:transform .15s; }
.rock-mode .test-button svg { display:block; width:2.4rem; height:2.4rem; }
.rock-mode .test-button b { font-size:1.05rem; }
.rock-mode .test-button small { font-size:.7rem; line-height:1.35; }
.rock-mode .test-button:hover:not(:disabled) { transform:translateY(-3px); background:#fff5d2; border-color:#c4a14d; }
.rock-mode .test-button:disabled { opacity:1; cursor:default; background:#f1f3ef; color:#748680; border-color:#d7dfd6; box-shadow:0 3px 0 #dbe1d7; }
.rock-mode .test-button.tested { background:#e6f2df; color:#3a674d; border-color:#aac39c; }
.rock-mode .test-button:focus-visible { outline:3px solid #aa7d23; outline-offset:4px; }
.rock-mode .storm-progress { margin:1.2rem .2rem .6rem; font-size:.8rem; color:#4c6e64; }
.rock-mode .storm-progress i { background:#e1e9dc; height:.5rem; width:2.6rem; }
.rock-mode .storm-progress i.done { background:#73966b; }
.rock-message { margin:1rem 0 0; padding:1rem 1.1rem; border-left:4px solid #c5a14a; border-radius:.3rem .9rem .9rem .3rem; background:#f5edda; color:#52634f; font-size:.95rem; line-height:1.6; }
.rock-lesson { margin-top:1.6rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid #bb9e53; border-radius:1.5rem; background:linear-gradient(120deg,#103947,#1c554f); color:#fff6df; box-shadow:0 6px 0 #b99a4d33; }
.rock-lesson > small { color:#edd398; font-size:.68rem; font-weight:800; letter-spacing:.08em; }
.rock-lesson h4 { font-family:Georgia,serif; font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.2; font-weight:500; margin:.7rem 0; }
.rock-lesson p { line-height:1.65; font-size:1rem; }
.rock-lesson .rock-kind-note { padding-top:.8rem; border-top:1px solid #ffffff2b; color:#d6e5d7; font-size:.87rem; }
.rock-lesson button { margin-top:.5rem; background:#f2d68f; color:#153e43; }
@media(max-width:620px) {
 .rock-scene-heading img { width:4.4rem; }
 .rock-mode .house-duel { gap:.6rem; }
 .rock-mode .house-choice { border-radius:1rem; }
 .rock-mode .house-choice-label { padding:.8rem .65rem .7rem; min-height:4.5rem; }
 .rock-mode .house-choice-label b { font-size:.96rem; }
 .rock-mode .house-choice-label small { font-size:.65rem; }
 .rock-mode .house-scene { height:13.5rem; margin:0 .25rem; border-radius:.65rem; }
 .rock-mode .house-sprite { bottom:3rem; width:96%; }
 .rock-mode .ground { bottom:2.3rem; height:1.7rem; }
 .scene-sun { right:10%; width:1.9rem; height:1.9rem; }
 .scene-cloud { transform:scale(.65); transform-origin:left center; left:6%; }
 .cloud-two { transform:scale(.5); left:58%; }
 .scene-hill { top:58%; }
 .scene-bush { bottom:20%; transform:scale(.7); transform-origin:left bottom; }
 .rock-mode .house-observation { font-size:.76rem; min-height:3.3rem; padding:.7rem .3rem; display:grid; place-items:center; }
 .rock-mode .test-row { gap:.5rem; }
 .rock-mode .test-button { min-height:7.2rem; border-radius:.85rem; padding:.7rem .2rem; }
 .rock-mode .test-button b { font-size:.95rem; }
 .rock-mode .test-button small { font-size:.62rem; }
 .rock-message { font-size:.9rem; }
}
@media(max-width:350px) {
 .rock-mode .house-duel { grid-template-columns:1fr; gap:1rem; }
 .rock-mode .house-scene { height:15rem; }
 .rock-mode .house-sprite { width:85%; max-width:12rem; }
 .rock-mode .house-choice-label { min-height:0; }
 .rock-mode .house-choice-label b { font-size:1.1rem; }
 .rock-mode .house-observation { min-height:0; font-size:.9rem; }
 .rock-mode .storm-progress { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
 .rock-mode *, .rock-mode *::before, .rock-mode *::after { animation:none!important; transition:none!important; }
 .rock-mode .rain i { top:calc(var(--drop) * 7%); }
 .rock-mode .wind i { left:10%; }
 .rock-mode .house-choice:hover,.rock-mode .test-button:hover { transform:none; }
}

/* Corazón: reconocer, elegir y poner en palabras, sin calificar emociones. */
.game-shell.heart-mode { grid-template-columns:1fr; }
.heart-mode .game-intro { min-height:0; padding:1rem clamp(1.15rem,3vw,2rem); }
.heart-mode .game-intro::before,.heart-mode .character-stage,.heart-mode .mascot-message { display:none; }
.heart-mode .game-copy { padding:0; max-width:none; }
.heart-mode #game-title { margin:.4rem 0; max-width:none; font-size:clamp(1.4rem,3vw,1.9rem); }
.heart-mode #game-intro { margin:.5rem 0; max-width:48rem; }
.heart-mode .play-panel { min-height:0; padding:clamp(1.1rem,3vw,2.3rem); background:linear-gradient(160deg,#fffaf0,#fff3ed 45%,#eef4f2); }
.heart-mode .round-heading,.heart-welcome,.heart-map,.heart-story,.heart-pick,.heart-expression,.heart-next,.heart-journey,.heart-finish { max-width:54rem; margin-inline:auto; }
.heart-mode .round-heading h3 { font-family:Georgia,serif; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.15; font-weight:500; }
.heart-welcome { margin-block:1rem 1.25rem; color:#5f6961; font-size:1rem; line-height:1.6; }
.heart-map { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.55rem; margin-block:1rem 1.4rem; }
.heart-map > span { display:flex; align-items:center; gap:.45rem; color:#686e61; font-size:.82rem; font-weight:750; }
.heart-map b,.heart-number { display:grid; place-items:center; flex:none; width:1.8rem; height:1.8rem; border-radius:50%; background:#eed9a5; color:#715b31; font-size:.85rem; font-weight:900; box-shadow:0 2px 0 #d6be86; }
.heart-story { position:relative; padding:clamp(1.2rem,3vw,2rem); border:1px solid #d9bd8f; border-radius:1.5rem; background:linear-gradient(125deg,#fff8dc,#ffebda); color:#284f51; box-shadow:0 6px 0 #e1c6a266,0 15px 30px #a6773710; }
.heart-story::after { content:""; position:absolute; width:1.1rem; height:1.1rem; left:2rem; bottom:-.6rem; background:#fff1d8; border-right:1px solid #d9bd8f; border-bottom:1px solid #d9bd8f; transform:rotate(45deg); }
.heart-story-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.heart-story-top img { width:5rem; height:auto; flex:none; }
.heart-step { color:#86602c; font-size:.68rem; font-weight:900; letter-spacing:.05em; line-height:1.6; }
.heart-story h4 { max-width:39rem; margin:1rem 0 .8rem; font-family:"Trebuchet MS",Arial,sans-serif; font-size:clamp(1.3rem,2.7vw,1.8rem); font-weight:750; line-height:1.45; text-wrap:pretty; }
.heart-story > p { margin:.6rem 0 0; color:#69705d; font-size:.92rem; line-height:1.5; }
.heart-pick { margin-block:2rem 0; }
.heart-section-title { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1.1rem; }
.heart-number { margin-top:.05rem; }
.heart-section-title h4 { margin:0; font-size:1.13rem; line-height:1.35; color:#244c50; }
.heart-section-title p { margin:.4rem 0 0; font-size:.9rem; line-height:1.5; color:#667269; }
.heart-feelings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.heart-feeling { position:relative; min-width:0; min-height:12.4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; padding:.9rem .6rem; border:2px solid #dfd8c9; border-radius:1.45rem; color:#254d50; background:var(--feeling-bg); box-shadow:0 5px 0 #d9d2c2; font-family:"Trebuchet MS",Arial,sans-serif; cursor:pointer; transition:transform .18s,box-shadow .18s; }
.heart-face { display:block; width:5rem; height:5rem; filter:drop-shadow(0 4px 0 #a87e4720); }
.heart-feeling > b { margin-top:.3rem; font-size:1.15rem; line-height:1.3; }
.heart-feeling > small { min-height:1.1rem; color:#67746c; font-size:.73rem; line-height:1.3; }
.heart-choice-state { margin-top:.45rem; border-radius:1rem; padding:.3rem .65rem; background:#ffffff80; color:#697268; font-size:.65rem; line-height:1.25; font-weight:700; }
.heart-feeling:hover { transform:translateY(-4px) rotate(-1deg); box-shadow:0 9px 0 #d9d2c2; }
.heart-feeling.chosen { border-color:var(--feeling); box-shadow:0 5px 0 var(--feeling),0 0 0 3px #fffaf0; }
.heart-feeling.chosen .heart-choice-state { background:#143f4b; color:#fff7e4; }
.heart-feeling:focus-visible,.heart-unsure:focus-visible { outline:3px solid #165b67; outline-offset:5px; }
.heart-unsure { display:block; width:100%; margin:1.3rem 0 .65rem; border:1px dashed #aaab97; border-radius:.9rem; padding:1rem .8rem; background:#fffcf6; color:#58655c; font-family:"Trebuchet MS",Arial,sans-serif; font-size:.92rem; font-weight:750; cursor:pointer; }
.heart-unsure.chosen { border:2px solid #687e75; background:#e8f1e7; }
.heart-status { min-height:3.8rem; margin:.4rem 0 0; padding:.65rem .2rem; color:#557068; font-size:.91rem; line-height:1.6; }
.heart-expression { margin-block:1.1rem 0; padding:clamp(1.15rem,3vw,1.7rem); background:#fffdf5; border:1px solid #d8c9a7; border-radius:1.4rem; box-shadow:0 5px 0 #ded4bb66; }
.heart-say { margin-top:1rem; padding:1rem 1.1rem; border-left:4px solid var(--feeling,#688c7d); background:#f7f1e4; border-radius:.2rem .85rem .85rem .2rem; }
.heart-say > small { font-weight:800; font-size:.68rem; color:#766143; letter-spacing:.05em; }
.heart-say p { margin:.5rem 0 0; color:#2d5150; font-size:1.1rem; line-height:1.6; }
.heart-say .heart-body-clue { color:#6a776e; font-size:.85rem; }
.heart-say .heart-quote { font-weight:700; }
.heart-care { margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid #e0dbc8; color:#657064; font-size:.87rem; line-height:1.6; }
.heart-next { margin-top:1.7rem; text-align:center; }
.heart-next button { width:min(100%,28rem); background:linear-gradient(115deg,#164e57,#2c6a61); color:#fff6df; min-height:3.5rem; border:1px solid #2c655d; border-radius:1rem; box-shadow:0 5px 0 #153f49; font-family:"Trebuchet MS",Arial,sans-serif; font-size:1rem; }
.heart-next button:disabled { opacity:1; background:#e1e6dc; border-color:#cbd2c4; color:#5d6d65; box-shadow:0 3px 0 #c8d0c1; }
.heart-next p { margin:1rem 0; color:#6c786e; font-size:.8rem; line-height:1.5; }
.heart-journey { display:flex; justify-content:center; gap:.45rem; margin-top:1.3rem; }
.heart-journey i { width:.65rem; height:.65rem; border-radius:50%; background:#d9dfd1; }
.heart-journey i.done { background:#6b927c; }
.heart-finish { padding:1rem; text-align:center; font-size:.95rem; line-height:1.6; color:#456354; }
@media(max-width:620px) {
 .heart-map { justify-content:flex-start; gap:.5rem 1.05rem; }
 .heart-map > span { font-size:.72rem; gap:.3rem; }
 .heart-map b { width:1.5rem; height:1.5rem; font-size:.72rem; }
 .heart-story-top img { width:4.3rem; }
 .heart-feelings { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
 .heart-feeling { min-height:11.4rem; border-radius:1.1rem; padding:.8rem .4rem; }
 .heart-face { width:4.6rem; height:4.6rem; }
 .heart-feeling > b { font-size:1.06rem; }
 .heart-status { min-height:4.8rem; }
 .heart-section-title h4 { font-size:1.05rem; }
 .heart-section-title p { font-size:.86rem; }
}
@media(max-width:350px) { .heart-map { gap:.5rem .7rem; } .heart-map > span { font-size:.66rem; } .heart-story-top img { width:3.5rem; } .heart-feeling > b { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { .heart-feeling { transition:none; } .heart-feeling:hover { transform:none; } }

/* El árbol de las virtudes: frutos, pistas y acciones cotidianas. */
.game-shell.tree-mode { grid-template-columns:1fr; }
.tree-mode .game-intro { min-height:0; padding:1rem clamp(1.15rem,3vw,2rem); }
.tree-mode .game-intro::before,.tree-mode .character-stage,.tree-mode .mascot-message { display:none; }
.tree-mode .game-copy { padding:0; max-width:none; }
.tree-mode #game-title { max-width:none; margin:.4rem 0; font-size:clamp(1.4rem,3vw,1.9rem); }
.tree-mode #game-intro { max-width:48rem; margin:.5rem 0; }
.tree-mode .play-panel { min-height:0; padding:clamp(1.1rem,3vw,2.3rem); background:linear-gradient(155deg,#fffdf2,#f1f6e8 52%,#edf5f1); }
.tree-mode .round-heading,.tree-welcome,.tree-discovery,.tree-options,.tree-message,.tree-practice,.tree-finish,.tree-next { max-width:60rem; margin-inline:auto; }
.tree-mode .round-heading h3 { font-family:Georgia,serif; font-weight:500; font-size:clamp(1.85rem,3.7vw,2.7rem); line-height:1.18; }
.tree-mode .round-heading .eyebrow { font-size:.7rem; line-height:1.6; }
.tree-welcome { font-size:1rem; color:#60705c; line-height:1.6; margin-block:1rem 1.5rem; }
.tree-discovery { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.1rem; align-items:stretch; }
.tree-garden { overflow:hidden; border:1px solid #c2d4b0; border-radius:1.5rem; padding:1rem 1.2rem 1.4rem; background:radial-gradient(ellipse at 15% 10%,#fff9cc88,transparent 55%),linear-gradient(#eaf6ed,#f6f9e9); box-shadow:0 5px 0 #c8d7b888; }
.tree-garden-heading { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.tree-garden-heading h4 { margin:0; color:#4d7250; font-size:.85rem; line-height:1.4; max-width:10rem; }
.tree-garden-heading img { width:4.4rem; height:auto; flex:none; }
.virtue-tree { display:block; width:100%; max-width:23rem; height:auto; margin:-.4rem auto -.5rem; }
.tree-fruit.grown { animation:tree-fruit-grow .3s ease-out; }
@keyframes tree-fruit-grow { from { opacity:.4; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
.tree-score { display:flex; gap:.8rem; align-items:center; justify-content:center; color:#5a7454; font-size:.85rem; }
.tree-score b { font-size:1.7rem; color:#335a3f; }
.tree-score small { font-size:.95rem; font-weight:500; }
.tree-progress { margin:.7rem auto 0; max-width:16rem; height:.4rem; border-radius:1rem; overflow:hidden; background:#d3e0c3; }
.tree-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6a9658,#b4bc5c); transition:width .2s; }
.tree-action { display:flex; flex-direction:column; justify-content:center; gap:1.1rem; padding:clamp(1.25rem,3vw,2rem); border:1px solid #d8bc7b; border-radius:1.5rem; background:linear-gradient(120deg,#fff8dd,#fff1da); box-shadow:0 5px 0 #e5d6ad88; }
.tree-step { color:#88662c; font-size:.69rem; font-weight:900; letter-spacing:.06em; }
.tree-action h4 { margin:0; color:#214c4c; font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.4; font-family:"Trebuchet MS",Arial,sans-serif; }
.tree-clue { padding:.9rem 1rem; border-radius:.85rem; background:#fffdf5bb; border-left:4px solid #bd9d4c; }
.tree-clue b { font-size:.8rem; color:#8a6a31; }
.tree-clue p { margin:.5rem 0 0; color:#5b6c58; font-size:.98rem; line-height:1.55; }
.tree-focus { margin:0; font-size:.85rem; color:#73806b; line-height:1.5; }
.tree-options { margin-top:1.9rem; }
.tree-choice-title { margin:0 0 1rem; }
.tree-choice-title h4 { margin:.5rem 0 0; font-size:1.15rem; color:#345c50; line-height:1.4; }
.tree-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tree-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; min-width:0; min-height:11.3rem; padding:1rem .65rem; background:#fffdf6; border:1px solid #d7d5bc; border-radius:1.2rem; color:#244c4e; box-shadow:0 5px 0 #d5d5bb; font-family:"Trebuchet MS",Arial,sans-serif; cursor:pointer; transition:transform .16s; }
.tree-card-fruit { position:relative; display:block; flex:none; width:2.8rem; height:2.8rem; margin:.25rem 0; border-radius:46% 47% 44% 45%; background:var(--fruit); box-shadow:inset -.35rem -.35rem 0 #00000012,0 3px 0 #5c644b20; }
.tree-card-fruit::before { content:""; position:absolute; width:.65rem; height:1rem; left:.45rem; top:.4rem; background:#ffffff55; border-radius:50%; transform:rotate(25deg); }
.tree-card-fruit::after { content:""; position:absolute; width:1.1rem; height:.65rem; right:-.2rem; top:-.3rem; border-radius:80% 0 80% 0; background:#5b8056; transform:rotate(-15deg); }
.tree-card-fruit i { position:absolute; left:48%; top:-.35rem; width:3px; height:.55rem; background:#8b6945; transform:rotate(12deg); }
.tree-card > b { font-size:1.08rem; line-height:1.3; text-align:center; }
.tree-card > small { font-size:.8rem; color:#687c68; line-height:1.4; text-align:center; }
.tree-card-label { margin-top:.2rem; padding:.25rem .75rem; border-radius:1rem; font-size:.65rem; font-weight:700; color:#647861; background:#edf2e5; }
.tree-card:hover:not(:disabled) { transform:translateY(-4px); border-color:#8dab79; }
.tree-card.selected { border:2px solid #b5984e; background:#fff7dd; }
.tree-card.discovered { border:2px solid #729562; background:#edf6e2; box-shadow:0 5px 0 #99b585; }
.tree-card.discovered .tree-card-label { background:#43694b; color:#fff7df; }
.tree-card:disabled { opacity:1; cursor:default; }
.tree-card:focus-visible { outline:3px solid #496d53; outline-offset:5px; }
.tree-message { margin-block:1.4rem 0; padding:1.05rem 1.15rem; border:1px solid #d7d7b9; border-radius:1rem; background:#faf6e7; color:#637058; font-size:.94rem; line-height:1.65; }
.tree-message.fruit-added { border-color:#bad0ac; background:#e9f4df; color:#406143; }
.tree-practice { margin-top:1.2rem; padding:1.4rem; border:1px solid #c4a35d; border-radius:1.3rem; background:linear-gradient(120deg,#204d45,#326452); color:#fff6dc; }
.tree-practice > small { font-size:.67rem; font-weight:900; letter-spacing:.06em; color:#ebd394; }
.tree-practice h4 { margin:.7rem 0; font-family:Georgia,serif; font-size:1.65rem; font-weight:500; line-height:1.25; }
.tree-practice p { font-size:1.08rem; line-height:1.6; margin:.7rem 0; }
.tree-practice > span { display:block; font-size:.83rem; line-height:1.5; color:#cfdfc6; }
.tree-next { margin-top:1.5rem; text-align:center; }
.tree-next button { width:min(100%,30rem); min-height:3.5rem; border-radius:1rem; background:#f1d18a; color:#264e44; border:1px solid #bda05e; box-shadow:0 5px 0 #b49753; font-family:"Trebuchet MS",Arial,sans-serif; }
.tree-next button:disabled { opacity:1; background:#e2e7d9; color:#6a7763; border-color:#c8d0bc; box-shadow:0 3px 0 #cbd3c1; }
.tree-finish { margin-block:1.2rem 0; padding:1.2rem; border-radius:1rem; background:#e4f0d7; color:#41623d; font-size:1.02rem; line-height:1.6; text-align:center; }
@media(max-width:700px) {
 .tree-discovery { grid-template-columns:1fr; }
 .tree-garden { padding:.9rem 1rem 1.1rem; }
 .virtue-tree { max-width:17rem; margin:-1.1rem auto -1rem; }
 .tree-garden-heading h4 { max-width:12rem; }
 .tree-action { gap:.9rem; padding:1.2rem; }
 .tree-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
 .tree-card { min-height:10.5rem; padding:.85rem .5rem; }
 .tree-card > b { font-size:.98rem; }
 .tree-card > small { font-size:.76rem; }
 .tree-card-fruit { width:2.45rem; height:2.45rem; }
 .tree-cards .tree-card:last-child { grid-column:1 / -1; min-height:10rem; }
}
@media(prefers-reduced-motion:reduce) { .tree-fruit,.tree-card,.tree-progress i { animation:none!important; transition:none; } .tree-card:hover { transform:none; } }


/* Ilustración original con follaje y raíces; frutos del juego por encima. */
.tree-garden { background:radial-gradient(ellipse at 28% 10%,#fff6d2 0,transparent 55%),linear-gradient(165deg,#f5faee,#e4f0e3); }
.virtue-tree.illustrated-tree { max-width:25rem; margin:.3rem auto .35rem; }
@media(max-width:700px) { .virtue-tree.illustrated-tree { max-width:20rem; margin:.2rem auto .3rem; } }