.book [hidden]{display:none!important}
.book{--green:#176b50;--ink:#203831;--line:#dce8e1;--paper:#f5faf7;color:var(--ink);width:min(1160px,100% - 32px);margin:28px auto 48px}
.book h1,.book h2,.book h3,.book p{margin:0}
.activityTop,.topActions,.controls,.mapHead{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.activityTop,.mapHead{justify-content:space-between}
.activityTop{margin-bottom:18px}.activityTop h1{font-size:clamp(1.7rem,4vw,2.45rem);line-height:1.1}
.book .eyebrow{color:var(--green);font-size:.78rem;letter-spacing:.07em;font-weight:800;margin-bottom:6px}
.libraryTop,.onlineBadge,.counter{padding:7px 12px;border-radius:999px;font-size:.86rem;font-weight:750}
.libraryTop{color:var(--green);border:1px solid var(--line);text-decoration:none}.onlineBadge,.counter{background:#e7f3eb;color:var(--green)}
.book:has(.intro:not([hidden])){width:min(1600px,calc(100% - 32px))}
.book .intro{margin:0 auto;background:#fff;border:1px solid #d9dedb;border-radius:26px;padding:clamp(28px,5vw,76px);box-shadow:0 16px 40px rgba(0,0,0,.07)}
.introHero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(24px,4vw,72px);align-items:center}.introHero h2{font-size:clamp(2.25rem,4.7vw,4.7rem);line-height:1.08;letter-spacing:-.03em;margin:14px 0 26px}.introHero p{font-size:clamp(1.05rem,1.65vw,1.5rem);line-height:1.55;margin:0 0 24px}.introHero ul{padding-left:1.3em;margin:0 0 30px;font-size:clamp(1rem,1.48vw,1.36rem);line-height:1.7}.introHero li+li{margin-top:5px}.introHero img{display:block;width:100%;max-width:580px;max-height:460px;object-fit:contain;justify-self:center;border-radius:20px}
.introCopy .eyebrow{font-size:clamp(.9rem,1.2vw,1.35rem);text-transform:uppercase;letter-spacing:.12em;color:#6b8169}
.book button{font:inherit;font-weight:750;cursor:pointer}.book button:focus-visible,.book a:focus-visible{outline:3px solid #176b50;outline-offset:3px}
.book #start,.controls #next,.controls #restart{background:var(--green);color:#fff;border:1px solid var(--green);border-radius:12px;padding:10px 18px}.book #start{font-size:clamp(1.1rem,1.7vw,1.45rem);padding:15px 28px;border-radius:16px}
.gameShell{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,23%);gap:14px;align-items:start}
.spread{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:stretch}
.spread .page{display:flex;flex-direction:column;min-height:0}.spread .page .artViewport{flex:1 1 0;height:0;min-height:0;aspect-ratio:auto}.spread .page .match{margin-top:auto}
.page,.choices,.promptBox,.mapPanel{min-width:0;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px}
.storyText{font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:800;line-height:1.28;text-align:center;min-height:2.56em}
.artViewport{position:relative;overflow:hidden;aspect-ratio:1.42;margin:10px 0;border:1px solid var(--line);border-radius:10px;background:#fff;touch-action:none}.artLayer{width:100%;height:100%;position:relative;transform-origin:center}.storyArt{display:block;width:100%;height:100%;object-fit:contain;padding:10px;user-select:none;pointer-events:none}.markCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.markCanvas[data-mode=move]{cursor:grab}
.birthdayTools,.zoomTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.birthdayTools{padding:10px;margin:0 0 6px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.birthdayTools button,.zoomTools button{border:1px solid #bfd3c7;border-radius:9px;background:#fff;color:var(--ink);padding:8px 12px}.birthdayTools button[aria-pressed=true]{background:var(--green);color:#fff}.birthdayTools button:disabled,.zoomTools button:disabled{opacity:.45;cursor:default}.birthdayTools label{display:flex;align-items:center;gap:6px;font-weight:750}.birthdayTools input{width:36px;height:34px}.zoomTools{margin-bottom:10px}.zoomTools button{padding:3px 10px}.markTextRow{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0}.markTextRow input{min-width:0;width:min(240px,65%);padding:8px;border:1px solid var(--line);border-radius:8px}

.match{display:flex;align-items:center;gap:12px}.target{width:80px;height:80px;flex:none;border:2px dashed #7ca48c;background:var(--paper);border-radius:12px;padding:3px}.target:empty::before{content:"Match here";font-size:.75rem;color:#385748}.target.ready{outline:3px solid #176b50;outline-offset:2px}
.status{font-size:.88rem;line-height:1.35;color:#36584a;font-weight:650}
.choices h2,.promptBox h3{font-size:1rem;margin-bottom:10px}.bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.bank button{display:grid;place-items:center;min-width:0;aspect-ratio:1;border:1px solid #bfd3c7;border-radius:10px;background:#fff;padding:4px;touch-action:none}
.bank button:hover,.bank button[aria-pressed=true]{background:#e7f3eb;border-color:var(--green)}.bank button[aria-pressed=true]{outline:2px solid var(--green)}
.bank img,.target img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.promptBox{background:var(--paper)}.promptTabs{display:flex;gap:6px;flex-wrap:wrap}.promptTabs button{font-size:.8rem;padding:6px 10px;border:1px solid #bfd3c7;border-radius:999px;background:white;color:var(--ink)}.promptTabs .active{background:var(--green);border-color:var(--green);color:white}.promptText{margin-top:12px!important;line-height:1.45}
.controls{justify-content:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.controls button,.mapHead button{min-height:42px;padding:8px 15px;border-radius:12px}.controls #back{background:#f8c9b8;border:1px solid #edab95;color:#633a30}.controls #mapBtn,.mapHead button{background:#fff;color:#202020;border:1px solid #222}
.mapPanel{margin-top:14px}.mapHead h2{font-size:1.15rem}.mapGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;margin-top:12px}.mapCard{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px;font-size:.8rem!important}.mapCard img{display:block;width:100%;height:76px;object-fit:contain;margin-bottom:4px}.mapCard.current{border:2px solid var(--green)}
.ghost{position:fixed;z-index:9999;pointer-events:none;width:72px;height:72px;object-fit:contain;transform:translate(-50%,-50%);background:white;border:2px solid var(--green,#176b50);border-radius:8px}
@media(max-width:830px){.gameShell{grid-template-columns:1fr}.promptBox{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}.promptBox h3{margin:0}.promptText{grid-column:1/-1;margin:0!important}}
@media(max-width:760px){.introHero{grid-template-columns:1fr}.introHero img{max-width:460px;max-height:320px}.book .intro{padding:clamp(22px,5vw,38px)}}
@media(max-width:520px){.book{width:calc(100% - 16px);margin-top:16px}.introHero{grid-template-columns:1fr}.introHero img{max-height:220px;width:auto;max-width:100%}.spread{gap:6px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.spread .page .artViewport{min-height:210px}.page,.choices,.promptBox{padding:8px}.choices h2{font-size:.86rem}.bank{gap:3px}.bank button{padding:2px}.match{flex-direction:column;gap:5px}.target{height:54px;width:54px}.status{text-align:center;font-size:.76rem}.storyText{font-size:.96rem}.controls{gap:6px}.controls button{padding:7px 9px}}
@media print{body{display:none}}
.bank button{min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);overflow:hidden}
.bank button img{min-width:0;min-height:0;max-width:100%;max-height:100%}

html[lang="es"] .target:empty::before{content:"Coloca aquí"}