@import url('/profesor/lectores.css');

:root {
  color-scheme: light;
  --ink: #193e32; --muted: #66786b; --green: #286347; --leaf: #3f7a4f; --soft: #e7efdd;
  --cream: #faf8ef; --orange: #c75a31; --line: #dce2d0; --paper: #fffefa;
  --gold: #e3b341; --gold-dark: #b8871f; --good-bg: #e8f3df; --bad-bg: #fff1e7; --bad-line: #dba17f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 18px/1.6 system-ui, -apple-system, sans-serif; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Buttons are chunky and press down, like game keys. */
button {
  cursor: pointer; border: 2px solid #c2d0bb; background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: 10px 18px; font-weight: 700; line-height: 1.35; min-height: 46px;
  box-shadow: 0 4px 0 #cdd8c4; transition: transform .12s, box-shadow .12s, background .15s, border-color .15s;
}
button:hover { border-color: var(--leaf); background: #f1f6ea; }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #cdd8c4; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, .basket-stage:focus-visible { outline: 3px solid #d99c26; outline-offset: 4px; }
.primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 4px 0 #173f2c; }
.primary:hover { background: #1f5a3e; color: #fff; border-color: #1f5a3e; }
.primary:active:not(:disabled) { box-shadow: 0 1px 0 #173f2c; }
.big { font-size: 19px; padding: 13px 26px; border-radius: 16px; }
.text-button { border: 0; background: transparent; box-shadow: none; font-size: 15px; }
.text-button:hover { background: #eef3e6; }
a { color: var(--green); }

.top { max-width: 1180px; margin: auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 14px; }
.top > a { text-decoration: none; }
.top > span { font-size: 11px; letter-spacing: 2px; font-weight: 800; }
main { max-width: 1100px; margin: auto; padding: 6px 32px 50px; }
.eyebrow { color: var(--orange); letter-spacing: 2.4px; font-size: 11px; font-weight: 800; margin: 0 0 12px; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.04; font-size: clamp(38px, 5vw, 62px); letter-spacing: -1.6px; margin: 0 0 20px; }
h2 { font-size: 24px; line-height: 1.3; margin: 0 0 10px; }
.intro { color: var(--muted); max-width: 520px; font-size: 19px; margin: 0 0 24px; line-height: 1.6; }
.note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; background: var(--soft); padding: 6px 14px; border-radius: 30px; }
.chip.gold { background: #fbefc8; color: #7a5a12; }

/* Hero: a small Sherwood scene with Robin as guide. */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; padding: 26px 0 40px; }
.hero .tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tools button { font-size: 14px; min-height: 40px; padding: 7px 14px; box-shadow: 0 3px 0 #cdd8c4; }
.tools [aria-pressed=true] { background: var(--soft); border-color: var(--leaf); }
.hero-art { position: relative; min-height: 360px; border-radius: 30px; overflow: hidden; background: linear-gradient(#cde5ee, #e9f2e0 72%); border: 2px solid #d3dfc5; box-shadow: 0 8px 0 #dfe7d4; }
.sun { position: absolute; top: 34px; right: 46px; width: 74px; height: 74px; border-radius: 50%; background: #f3d98d; box-shadow: 0 0 0 14px #f3d98d40, 0 0 0 30px #f3d98d1f; animation: glow 4s ease-in-out infinite alternate; }
.cloud { position: absolute; width: 96px; height: 28px; border-radius: 30px; background: #fff; opacity: .9; animation: drift 46s linear infinite; }
.cloud::before { content: ''; position: absolute; left: 18px; top: -16px; width: 44px; height: 38px; border-radius: 50%; background: inherit; }
.cloud.c1 { top: 44px; left: -110px; }
.cloud.c2 { top: 98px; left: -110px; transform: scale(.7); animation-duration: 64s; animation-delay: -30s; }
.land { position: absolute; left: 0; bottom: 0; width: 100%; height: 68%; object-fit: cover; object-position: bottom; pointer-events: none; }
.hero-robin { position: absolute; left: 41%; bottom: 7%; width: 118px; animation: bob 2.6s ease-in-out infinite; transform-origin: bottom center; }
.hero-bubble { position: absolute; left: calc(41% + 112px); bottom: 46%; margin: 0; background: #fff; border-radius: 16px; padding: 10px 15px; font: 17px/1.35 Georgia, serif; box-shadow: 0 4px 0 #dfe7d4; animation: pop-in .6s .5s both; }
.hero-bubble::before { content: ''; position: absolute; left: -7px; bottom: 14px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }

/* The trail map. */
.journey-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.journey-heading .eyebrow { margin-bottom: 6px; }
.journey-heading h2 { margin: 0; }
.chips { display: flex; gap: 8px; }
.map { position: relative; margin-top: 18px; padding: 38px 26px 34px 56px; border-radius: 30px; background: radial-gradient(circle at 20% 10%, #eef5e5, transparent 50%), linear-gradient(#e4eed8, #d9e7c9); border: 2px solid #cbdab9; box-shadow: inset 0 -8px 0 #cfdfbd; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.trail path { fill: none; stroke-linecap: round; }
#trail-all { stroke: #fff8e6; stroke-width: 14; opacity: .8; }
#trail-done { stroke: #c29457; stroke-width: 6; stroke-dasharray: 2 13; }
.journey { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 40px 18px; }
.journey-card { border: 0; background: none; box-shadow: none; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-height: 0; border-radius: 18px; color: var(--ink); }
.journey-card:hover { background: #ffffff55; }
.journey-card:active:not(:disabled) { transform: none; box-shadow: none; }
.journey-card:disabled { opacity: 1; color: #7c8b79; }
.station { position: relative; width: 92px; height: 92px; border-radius: 50%; background: var(--paper); border: 4px solid #b9c9ad; display: grid; place-items: center; box-shadow: 0 6px 0 #a9bd9b; transition: transform .2s; }
.station img { width: 52px; height: 44px; display: block; }
.station .number { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #b9c9ad; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.journey-card:not(:disabled):hover .station { transform: translateY(-4px) scale(1.05); }
.journey-card.done .station { border-color: #5f9a63; box-shadow: 0 6px 0 var(--leaf); }
.journey-card.done .number { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.journey-card.next .station { border-color: var(--gold); box-shadow: 0 6px 0 var(--gold-dark); animation: pulse 1.8s ease-out infinite; }
.journey-card.next .number { background: var(--gold); border-color: var(--gold-dark); color: #4a3608; }
.journey-card:disabled .station { background: #edf1e5; box-shadow: 0 6px 0 #c9d3be; }
.journey-card:disabled .station img { filter: grayscale(1); opacity: .45; }
.journey-card b { font-size: 16px; line-height: 1.25; background: #fffef8e8; padding: 4px 10px; border-radius: 10px; margin-top: 6px; }
.journey-card small { font-size: 12.5px; color: var(--muted); line-height: 1.35; font-weight: 450; max-width: 200px; }
.journey-card:disabled small { opacity: .8; }
.stars i { font-style: normal; color: #cfd7c4; font-size: 19px; margin: 0 1px; }
.stars i.on { color: var(--gold); text-shadow: 0 1px 0 var(--gold-dark); }
.map-robin { position: absolute; left: 0; top: 0; z-index: 2; width: 54px; pointer-events: none; transition: transform 1s cubic-bezier(.5, 0, .3, 1); }
.map-robin img { width: 100%; display: block; animation: bob 2.6s ease-in-out infinite; transform-origin: bottom center; }
.map-robin.hop img { animation: hop .5s ease-in-out 2; }

/* Stage */
#stage.enter .stage-head, #stage.enter .guide { animation: fade-up .35s both; }
#stage.enter .game { animation: rise .45s .05s both; }
.stage-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 18px; }
.stage-nav button { font-size: 14px; }
.dots { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.dots li { width: 12px; height: 12px; border-radius: 50%; background: #d6dfcb; transition: transform .2s; }
.dots li.done { background: #5f9a63; }
.dots li.now { background: var(--gold); transform: scale(1.4); box-shadow: 0 0 0 3px #e3b34140; }
.stage-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.stage-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--paper); border: 4px solid var(--gold); box-shadow: 0 5px 0 var(--gold-dark); display: grid; place-items: center; flex-shrink: 0; }
.stage-icon img { width: 40px; height: 34px; }
.stage-head .eyebrow { margin-bottom: 4px; }
#stage h1 { font-size: 38px; letter-spacing: -1px; margin: 0; }

/* Robin's bubble stays in view while the game scrolls. */
.guide { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-end; gap: 10px; margin: 0 -8px 10px; padding: 8px 8px 6px; background: linear-gradient(var(--cream) 82%, #faf8ef00); }
.guide-robin { width: 58px; flex-shrink: 0; transform-origin: bottom center; }
.bubble { position: relative; flex: 1; background: var(--paper); border: 2px solid #cfdcc3; border-radius: 18px; padding: 11px 18px; box-shadow: 0 6px 18px #193e3214; min-height: 52px; transition: background .2s, border-color .2s; }
.bubble::before { content: ''; position: absolute; left: -9px; bottom: 15px; width: 15px; height: 15px; background: inherit; border-left: 2px solid; border-bottom: 2px solid; border-color: inherit; transform: rotate(45deg); }
#instruction { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.bubble:has(#feedback:not(:empty)) #instruction { display: none; }
#feedback { font-size: 18px; line-height: 1.5; font-weight: 600; }
#feedback:empty { display: none; }
.bubble:has(#feedback.bad) { background: #fff5ec; border-color: #e7bf9f; }
.guide.happy .bubble { background: #f0f8ea; border-color: #a9cc9a; }
.guide.pop .bubble { animation: pop .35s; }
.guide.happy .guide-robin { animation: jump .6s; }
.guide.sad .guide-robin { animation: tilt .7s; }
#feedback.thinking::after { content: ''; animation: dots 1.2s steps(1) infinite; }

.game { position: relative; background: var(--paper); border: 2px solid #e1e8d8; border-radius: 26px; padding: 28px; min-height: 200px; box-shadow: 0 8px 0 #e0e8d5, 0 18px 40px #193e320d; }
.round { font-weight: 700; color: var(--muted); font-size: 15px; letter-spacing: .3px; margin: 0 0 8px; }
.round.pop { animation: pop .35s; }
.hint { background: #fbf3d8; border-radius: 12px; padding: 8px 14px; display: inline-block; }
.actions, .story-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.actions.center { justify-content: center; }

/* Reading */
.story { max-width: 740px; font-size: 20px; line-height: 1.9; }
.story h2 { font-family: Georgia, serif; font-size: 32px; font-weight: 500; }
.story p { margin: 0 0 22px; }
.game .story p { animation: fade-up .5s calc(.1s + var(--i, 0) * .12s) both; }
.story mark { background: linear-gradient(transparent 58%, #f6df8f 58%); color: inherit; padding: 0 2px; border-radius: 2px; }
.story .note { margin-top: -6px; }
.story-hint { margin: -6px 0 0; }

/* Remember the path */
.tile-list { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.word-tile { width: 148px; border: 2px solid var(--line); border-radius: 18px; padding: 14px; text-align: center; font-size: 20px; background: #f7f8ef; box-shadow: 0 5px 0 #dfe5d2; }
.word-tile img { width: 100%; height: 86px; display: block; }
.word-tile small { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #4a3608; font-weight: 800; font-size: 13px; margin-top: 4px; }
.word-tile b { display: block; }
.word-tile.deal { animation: deal .5s calc(var(--i) * .45s) both; }
.arrow { font-size: 28px; color: #b9a170; font-weight: 800; animation: fade .3s calc(var(--i) * .45s - .1s) both; }
.preview.hide .word-tile, .preview.hide .arrow { animation: flip-away .35s forwards; }
.pick-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; padding: 10px 8px; border-radius: 16px; font-size: 17px; animation: fade-up .3s calc(var(--i) * .05s) both; }
.pick-tile img { width: 72px; height: 56px; display: block; }
.pick-tile:disabled { opacity: .35; transform: scale(.94); }
.slots { display: flex; justify-content: center; gap: 14px; margin: 12px 0 20px; flex-wrap: wrap; }
.slot { width: 120px; height: 112px; border: 3px dashed #c4d2ba; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #b3c2a8; background: #f7f9f1; }
.slot.filled { border-style: solid; border-color: #a9bf98; background: #fff; color: var(--ink); font-size: 16px; box-shadow: 0 4px 0 #dfe5d2; }
.slot img { width: 64px; height: 50px; }
.slot.pop { animation: drop .3s; }
.slots.ok .slot { border-color: #5f9a63; background: var(--good-bg); animation: bounce .55s calc(var(--i) * .1s); }
.slots.bad .slot { border-color: var(--bad-line); background: var(--bad-bg); animation: shake .45s; }

/* Memory cards flip in 3D. */
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 680px; margin: 16px auto; perspective: 1000px; }
.memory-card { position: relative; height: 126px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 16px; opacity: 1 !important; }
.memory-card:hover, .memory-card:active:not(:disabled) { background: none; transform: none; box-shadow: none; }
.memory-card.deal { animation: deal .45s calc(var(--i) * .04s) both; }
.mc-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.3, .7, .4, 1.25); transform-style: preserve-3d; }
.memory-card:not(.flipped):not(:disabled):hover .mc-inner { transform: translateY(-4px) rotate(-1.5deg); }
.memory-card.flipped .mc-inner { transform: rotateY(180deg); }
.mc-face { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mc-back { background: repeating-linear-gradient(45deg, #3f7a4f 0 12px, #39714a 12px 24px); border: 3px solid #2f6a41; box-shadow: 0 5px 0 #24563a; }
.crest { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: #5b4210; display: grid; place-items: center; font: 700 24px Georgia, serif; border: 3px solid #f3d27a; box-shadow: 0 3px 0 var(--gold-dark); }
.mc-front { background: var(--paper); border: 3px solid #cfdcc3; box-shadow: 0 5px 0 #dfe5d2; transform: rotateY(180deg); font-size: 21px; padding: 8px; }
.mc-front img { width: 100%; height: 96px; }
.memory-card.matched .mc-front { border-color: #5f9a63; background: #eef7e8; box-shadow: 0 5px 0 #a9cc9a; }
.memory-card.matched { animation: match .55s .2s; }
.memory-card.matched::after { content: '★'; position: absolute; top: 4px; right: 8px; color: var(--gold); font-size: 22px; text-shadow: 0 1px 0 var(--gold-dark); animation: sparkle .7s .3s both; }
.memory-card.nope .mc-front { border-color: var(--bad-line); background: var(--bad-bg); }
.memory-card.nope { animation: shake .4s; }

/* Order the story */
.scene-slots { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 10px; }
.scene-slot { display: flex; align-items: center; gap: 12px; min-height: 62px; border-radius: 16px; border: 3px dashed #c9d6bf; background: #f7f9f1; padding: 6px 12px; transition: background .2s, border-color .2s; }
.scene-slot::before { content: attr(data-n); width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #c9d6bf; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.slot-empty { color: #9aa893; font-size: 15px; }
.scene-slot .slot-scene { flex: 1; text-align: left; font-size: 17px; font-weight: 600; }
.scene-slot button.slot-scene { border: 0; background: none; box-shadow: none; padding: 8px 4px; min-height: 0; }
.scene-slot button.slot-scene:hover { text-decoration: line-through; text-decoration-color: #c4a07f; }
.scene-slot.filled { border-style: solid; border-color: #b6c8a8; background: #fff; box-shadow: 0 4px 0 #e0e7d6; }
.scene-slot.fixed { border-color: #5f9a63; background: var(--good-bg); }
.scene-slot.fixed::before { content: '✓'; background: var(--leaf); color: #fff; border-color: var(--leaf); }
.scene-slot.pop { animation: drop .3s; }
.scene-slot.good { animation: bounce .55s; }
.scene-slot.bad { border-color: var(--bad-line); background: var(--bad-bg); animation: shake .5s; }
.scene-options { display: grid; gap: 10px; }
.scene-option { text-align: left; padding: 15px 18px; font-size: 17px; animation: fade-up .3s calc(var(--i) * .05s) both; }

/* Meanings and answer */
.qcard { animation: slide-in .4s both; }
.round-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.round-row .round { margin: 0; }
.pips { display: flex; gap: 6px; }
.pips i { width: 30px; height: 8px; border-radius: 4px; background: #dfe6d5; }
.pips i.on { background: var(--leaf); }
.pips i.now { background: var(--gold); }
.big-word { font: 500 46px/1.1 Georgia, serif; margin: 14px 0 6px; color: var(--green); animation: pop-in .5s both; }
.choices { display: grid; gap: 12px; margin-top: 20px; max-width: 740px; }
.choices button { text-align: left; padding: 16px 20px; font-size: 19px; animation: fade-up .3s calc(var(--i, 0) * .06s) both; }
.choices button:disabled { opacity: 1; }
.choices.answered button:not(.correct):not(.wrong) { opacity: .5; }
.choices button.correct { background: #e3efd9; border-color: #68935d; box-shadow: 0 4px 0 #9fc18f; animation: pop .4s; }
.choices button.correct::after { content: ' ✓'; color: var(--leaf); }
.choices button.wrong { background: var(--bad-bg); border-color: var(--bad-line); box-shadow: 0 4px 0 #ebc4a8; color: #7d4527; text-decoration: line-through; text-decoration-color: #d89b77; animation: shake .4s; }
textarea { display: block; width: min(100%, 740px); min-height: 115px; border: 2px solid #aabb9e; border-radius: 16px; padding: 15px; resize: vertical; margin: 10px 0; background: #fff; box-shadow: inset 0 3px 0 #eef2e8; }
textarea:focus { border-color: var(--leaf); }

/* Finish: a sheet that slides up above the student bar. */
.finish { position: fixed; left: 0; right: 0; bottom: var(--barra, 0px); z-index: 890; background: #def0d1; border-top: 3px solid #9cc68f; box-shadow: 0 -12px 30px #193e3224; padding: 16px 24px 18px; }
.finish.show { animation: sheet .5s cubic-bezier(.2, 1.3, .4, 1); }
.finish-inner { max-width: 1036px; margin: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.finish-check { width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 4px 0 #173f2c; animation: pop-in .5s .1s both; }
.finish-copy { flex: 1; min-width: 220px; }
.finish h2 { margin: 0; font: 500 28px/1.2 Georgia, serif; }
.finish-stars .star { display: inline-block; font-size: 32px; line-height: 1.1; color: #c3cfb8; margin-right: 2px; }
.finish-stars .star.on { color: var(--gold); text-shadow: 0 2px 0 var(--gold-dark); animation: star-in .55s calc(.2s + var(--i) * .2s) both; }
.finish p { margin: 2px 0 0; font-size: 16px; color: #50634f; }
.confetti { position: absolute; left: 50%; top: 20px; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; animation: confetti 1.5s ease-out forwards; }
body.finished main { padding-bottom: 190px; }

/* Basket game */
.word-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.word-chip { display: inline-flex; align-items: center; gap: 6px; background: #fbf3d8; border: 2px solid #ecd9a0; border-radius: 30px; padding: 4px 12px 4px 6px; font-weight: 700; }
.word-chip img { width: 30px; height: 25px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 16px; }
.check input { width: 20px; height: 20px; }
.basket-stage { position: relative; overflow: hidden; height: 400px; max-width: 820px; margin: 12px auto; border-radius: 22px; border: 3px solid #b9cfa6; background: linear-gradient(#cde5ee, #ebf3e2 68%); touch-action: none; box-shadow: 0 6px 0 #d6e2c9; }
.basket-stage .sun { width: 58px; height: 58px; top: 22px; right: 36px; }
.basket-stage .land { height: 42%; opacity: .95; }
.basket-stage.paused .cloud, .basket-stage.paused .falling-word { animation-play-state: paused; }
.falling-word { position: absolute; transform: translate(-50%, -50%); padding: 9px 18px; border-radius: 14px; background: #fff7d6; border: 3px solid #c9a24f; font: 800 22px system-ui, sans-serif; color: #5b4210; box-shadow: 0 5px 0 #b48a35; white-space: nowrap; z-index: 2; animation: sway 1.4s ease-in-out infinite alternate; }
.basket { position: absolute; bottom: 3%; width: 112px; height: 91px; object-fit: contain; translate: -50% 0; z-index: 3; filter: drop-shadow(0 6px 4px #0002); }
.basket.catch { animation: catch .45s; }
.basket.oops { animation: oops .5s; }
.basket-paused { position: absolute; inset: 0; display: grid; place-items: center; background: #f8faeee6; z-index: 5; font-size: 30px; font-family: Georgia, serif; }
.fx { position: absolute; z-index: 4; translate: -50% -50%; font-weight: 800; font-size: 22px; pointer-events: none; white-space: nowrap; animation: float-up .95s ease-out forwards; background: #fff; padding: 2px 12px; border-radius: 20px; box-shadow: 0 3px 0 #0000001a; }
.fx.good { color: #2a6a3c; font-size: 26px; }
.fx.bad { color: #b2502a; }
.fx.info { color: #53685e; font-size: 17px; }
.basket-controls { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.basket-controls button { min-width: 92px; touch-action: none; }
.basket-score { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; }
#basket-points { display: flex; gap: 6px; flex-wrap: wrap; }
.basket-stage.calm { display: grid; place-items: center; height: 300px; }
.calm-word { position: relative; z-index: 2; margin: 0 0 60px; background: #fff7d6; border: 3px solid #c9a24f; box-shadow: 0 6px 0 #b48a35; border-radius: 18px; padding: 14px 34px; font: 500 44px Georgia, serif; }
.calm-word.pop { animation: deal .4s; }
.basket-final { text-align: center; padding: 10px 0; animation: rise .45s both; }
.final-counts { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 14px 0; }
.final-counts span { background: #f4f8ee; border: 2px solid #d6e2c9; border-radius: 18px; padding: 14px 22px; min-width: 180px; }
.final-counts b { font: 500 44px/1 Georgia, serif; color: var(--green); }
.final-counts small { display: block; color: var(--muted); font-size: 14px; }
.basket-final > p:not(.note) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

dialog { width: min(850px, 95vw); max-height: 90dvh; overflow: auto; border: 1px solid var(--line); border-radius: 22px; padding: 25px 32px; background: var(--paper); color: var(--ink); }
dialog[open] { animation: rise .3s both; }
dialog::backdrop { background: #153b2dd4; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 25px; font-size: 14px; }
.teacher-panel { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 25px; font-size: 15px; }
.teacher-panel input { border: 1px solid #aabb9e; border-radius: 7px; padding: 8px; max-width: 200px; }

.easy-reading { font-size: 21px; letter-spacing: .04em; word-spacing: .08em; }
.easy-reading .story { font-family: system-ui, sans-serif; font-size: 23px; line-height: 2.1; }

@keyframes pop { 40% { transform: scale(1.04); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes bounce { 30% { transform: translateY(-8px); } 60% { transform: translateY(2px); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes deal { from { opacity: 0; transform: translateY(-24px) rotate(-6deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes drop { from { transform: scale(.9); opacity: .4; } 60% { transform: scale(1.03); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes flip-away { to { opacity: 0; transform: rotateY(90deg) scale(.9); } }
@keyframes sheet { from { transform: translateY(110%); } }
@keyframes star-in { from { opacity: 0; transform: scale(0) rotate(-120deg); } 70% { transform: scale(1.35) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes confetti { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); opacity: 0; } }
@keyframes match { 35% { transform: scale(1.1); } 70% { transform: scale(.97); } }
@keyframes sparkle { from { opacity: 0; transform: scale(0) rotate(-90deg); } 60% { transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes jump { 30% { transform: translateY(-16px) rotate(-6deg); } 55% { transform: translateY(0) scaleY(.9); } 75% { transform: translateY(-5px); } }
@keyframes tilt { 25% { transform: rotate(-8deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes hop { 50% { transform: translateY(-22px); } }
@keyframes pulse { 0% { box-shadow: 0 6px 0 var(--gold-dark), 0 0 0 0 #e3b34180; } 70%, 100% { box-shadow: 0 6px 0 var(--gold-dark), 0 0 0 18px #e3b34100; } }
@keyframes glow { to { box-shadow: 0 0 0 18px #f3d98d40, 0 0 0 38px #f3d98d14; } }
@keyframes drift { to { translate: 1200px 0; } }
@keyframes sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes catch { 35% { scale: 1.18 .82; } 65% { scale: .94 1.1; } }
@keyframes oops { 20%, 60% { rotate: -9deg; } 40%, 80% { rotate: 9deg; } }
@keyframes float-up { from { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; transform: translateY(-6px) scale(1.1); } to { opacity: 0; transform: translateY(-56px); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

@media (max-width: 800px) {
  .hero { gap: 24px; }
  .hero-art { min-height: 320px; }
  .hero-robin { width: 100px; }
  .hero-bubble { left: calc(41% + 94px); font-size: 15px; }
}
@media (max-width: 600px) {
  main { padding: 4px 16px 35px; }
  .top { padding: 14px 16px; }
  .top > span { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 14px; }
  .hero h1 { font-size: 44px; }
  .hero-art { min-height: 230px; order: -1; }
  .hero-robin { width: 86px; left: 24%; }
  .hero-bubble { left: calc(24% + 82px); bottom: 50%; }
  .sun { width: 50px; height: 50px; top: 18px; right: 24px; }
  .map { padding: 30px 10px 26px 40px; }
  .journey { gap: 32px 8px; }
  .station { width: 80px; height: 80px; }
  .station img { width: 44px; height: 38px; }
  .journey-card small { display: none; }
  .journey-card.next small { display: block; }
  .map-robin { width: 46px; }
  .stage-nav button { font-size: 13px; padding: 8px 10px; }
  .dots { gap: 5px; }
  .dots li { width: 9px; height: 9px; }
  .stage-icon { width: 54px; height: 54px; border-width: 3px; }
  .stage-icon img { width: 30px; height: 26px; }
  #stage h1 { font-size: 30px; }
  .guide-robin { width: 44px; }
  #feedback, #instruction { font-size: 16px; }
  .game { padding: 18px 14px; border-radius: 20px; }
  .memory-grid { gap: 8px; grid-template-columns: repeat(3, 1fr); }
  .memory-card { height: 100px; }
  .mc-front { font-size: 17px; }
  .mc-front img { height: 78px; }
  .story { font-size: 18px; }
  .basket-stage { height: 340px; }
  .falling-word { font-size: 18px; padding: 7px 12px; }
  .basket { width: 88px; height: 72px; }
  .word-tile { width: 96px; padding: 8px; font-size: 16px; }
  .word-tile img { height: 60px; }
  .arrow { font-size: 18px; }
  .tile-list { gap: 8px; }
  .slot, .pick-tile { width: 96px; }
  .slot { height: 96px; }
  .big-word { font-size: 36px; }
  .finish { padding: 12px 16px 14px; }
  .finish-inner { gap: 12px; }
  .finish-check { width: 44px; height: 44px; font-size: 24px; }
  .finish h2 { font-size: 22px; }
  .finish-stars .star { font-size: 26px; }
  .finish .big { width: 100%; }
  dialog { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.mc-front .meaning { font-size: 14px; line-height: 1.3; font-weight: 650; text-align: center; }
@media (max-width: 600px) { .mc-front .meaning { font-size: 11.5px; } }
.wait { flex-basis: 100%; margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #8a5a1f; background: #fbf0d6; border-radius: 10px; padding: 6px 12px; animation: fade .3s; }
/* Challenges and letter games */
.journey-card.challenge .station { border-color: var(--gold); background: #fff8e3; box-shadow: 0 6px 0 var(--gold-dark); }
.journey-card.challenge:disabled .station { border-color: #d9cfa8; background: #f4f1e4; box-shadow: 0 6px 0 #d6ccaa; }
.journey-card.challenge b { background: #fbefc8; }
.snake-stage { position: relative; max-width: 700px; margin: 12px auto; border-radius: 18px; overflow: hidden; border: 3px solid #b9cfa6; box-shadow: 0 6px 0 #d6e2c9; touch-action: none; }
.snake-stage canvas { display: block; width: 100%; height: auto; }
.word-slots { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.word-slots span { width: 46px; height: 54px; border-radius: 12px; border: 3px dashed #c4d2ba; background: #f7f9f1; display: grid; place-items: center; font: 800 26px system-ui, sans-serif; color: var(--green); }
.word-slots span.on { border-style: solid; border-color: #5f9a63; background: var(--good-bg); animation: pop-in .35s both; }
.word-slots.big span { width: 54px; height: 62px; font-size: 30px; }
.word-slots.pop { animation: pop .35s; }
.letter-pick { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px auto; max-width: 640px; }
.letter-tile { width: 58px; height: 58px; padding: 0; font: 800 24px system-ui, sans-serif; border-radius: 14px; }
.keyboard .letter-tile { width: 48px; height: 50px; font-size: 20px; }
.letter-tile.correct { background: var(--good-bg); border-color: #68935d; opacity: 1; }
.letter-tile.wrong { background: var(--bad-bg); border-color: var(--bad-line); color: #b2502a; text-decoration: line-through; opacity: 1; }
#snake-controls button { min-width: 58px; font-size: 20px; }
@media (max-width: 600px) { .word-slots span { width: 36px; height: 44px; font-size: 21px; } .keyboard .letter-tile { width: 40px; height: 44px; font-size: 18px; } }
@media (max-width: 600px) { .dots { display: none; } }
@media (max-width: 600px) { .word-slots.big span { width: 38px; height: 46px; font-size: 22px; } .word-slots { gap: 5px; } }
/* Wordle */
.wordle { display: grid; gap: 7px; justify-content: center; margin: 16px 0; }
.wrow { display: grid; grid-template-columns: repeat(var(--n), 56px); gap: 7px; }
.wrow span { height: 56px; border-radius: 10px; border: 2px solid #d4ddc9; background: #fff; display: grid; place-items: center; font: 800 26px system-ui, sans-serif; color: var(--ink); }
.wrow span.typed { border-color: #8fa983; animation: pop .15s; }
.wrow.done span { color: #fff; animation: flip-in .45s calc(var(--i) * .12s) both; }
.wrow span.verde { background: #4c9a5c; border-color: #4c9a5c; }
.wrow span.amarilla { background: #d9a72c; border-color: #d9a72c; }
.wrow span.gris { background: #9aa395; border-color: #9aa395; }
.wrow.nope { animation: shake .4s; }
.krow { display: flex; justify-content: center; gap: 5px; width: 100%; }
.keyboard { flex-direction: column; align-items: center; gap: 6px; }
.keyboard .letter-tile.wide { width: auto; padding: 0 12px; font-size: 15px; }
.letter-tile.verde { background: #4c9a5c; border-color: #4c9a5c; color: #fff; }
.letter-tile.amarilla { background: #d9a72c; border-color: #d9a72c; color: #fff; }
.letter-tile.gris { background: #c9cfc4; border-color: #c9cfc4; color: #6b7368; }
@keyframes flip-in { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
@media (max-width: 600px) { .wrow { grid-template-columns: repeat(var(--n), 46px); } .wrow span { height: 46px; font-size: 22px; } .keyboard .letter-tile { width: 30px; height: 42px; font-size: 15px; } .krow { gap: 3px; } }
/* Word classes */
.cls-rules { list-style: none; padding: 10px 14px; margin: 6px 0 14px; background: #f4f8ee; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.cls-card { text-align: center; padding: 10px 16px 16px; border: 2px solid #e3d9b5; background: #fffaf0; border-radius: 18px; max-width: 620px; margin: 0 auto 16px; box-shadow: 0 5px 0 #eee2bd; }
.cls-card.deal { animation: deal .4s both; }
.cls-card .big-word { margin: 6px 0 4px; }
.cls-frase { font: 19px/1.5 Georgia, serif; margin: 0; color: #3b4f44; }
.cls-frase mark { background: #f6df8f; color: inherit; padding: 0 3px; border-radius: 4px; }
.cls-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 680px; margin: 0 auto; }
.cls-bin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border-width: 3px; min-height: 96px; font-size: 18px; }
.cls-bin.sustantivo { border-color: #7aa7c7; background: #eef5fa; box-shadow: 0 5px 0 #b9d2e3; }
.cls-bin.adjetivo { border-color: #d39ac0; background: #fbf0f6; box-shadow: 0 5px 0 #e9c6dc; }
.cls-bin.verbo { border-color: #e0a95a; background: #fdf4e6; box-shadow: 0 5px 0 #efd2a6; }
.cls-n { font: 500 28px Georgia, serif; }
.cls-bin.catch { animation: bounce .45s; }
.cls-bin.nope { animation: shake .4s; }
.cls-bin:disabled { opacity: .6; }
@media (max-width: 600px) { .cls-bins { gap: 6px; } .cls-bin { font-size: 14px; padding: 12px 4px; } .cls-frase { font-size: 17px; } }