/* 1. Base: cambia estas variables para ajustar la identidad de Atlivo. */
:root {
  --bg: #0c100f;
  --panel: #121816;
  --text: #eef1eb;
  --muted: #9ba69f;
  --line: #ffffff12;
  --accent: #c5f584;
  --display: 'Space Grotesk', sans-serif;
  --body: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button:disabled { cursor: default; }
svg:not(:where(.geo-map *, .geo-panorama *)) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell, .header-inner { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: -80px; left: 16px; background: var(--accent); color: var(--bg); padding: 12px; }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

/* 2. Navigation */
.site-header { border-bottom: 1px solid var(--line); background: #0c100fe8; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); }
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { font: 700 29px var(--display); letter-spacing: -1.5px; display: inline-flex; align-items: center; }
.brand-mark { display: grid; place-items: center; background: var(--accent); color: #1b2a13; width: 32px; height: 32px; border-radius: 8px; margin-right: 10px; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-dot { color: var(--accent); }
.main-nav { display: flex; gap: 34px; align-self: stretch; }
.nav-link { display: flex; align-items: center; gap: 8px; position: relative; font-size: 13px; color: var(--muted); transition: color .2s; }
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active::after { content: ''; height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: var(--accent); }
.nav-dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.prototype-label { font: 9px var(--display); letter-spacing: 1.4px; color: #8b968f; }
.avatar { width: 35px; height: 35px; position: relative; border: 1px solid #c5f5843d; background: #293326; color: var(--accent); border-radius: 50%; font-size: 12px; }
.avatar span { width: 7px; height: 7px; background: var(--accent); position: absolute; bottom: -1px; right: 0; border: 2px solid var(--bg); border-radius: 50%; }

/* 3. Hero y mapa del globo */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; min-height: 565px; gap: 10px; }
.hero-copy { padding: 55px 0; animation: enter .8s ease-out both; }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 500 10px var(--display); letter-spacing: 1.7px; color: var(--accent); margin: 0 0 24px; }
.status-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px #c5f58438; }
.hero h1 { font: 600 clamp(62px, 6.3vw, 89px)/1.02 var(--display); letter-spacing: -5px; margin: 0; }
.hero h1 > span { color: var(--accent); }
.hero-description { max-width: 430px; color: var(--muted); font-size: 15px; line-height: 1.85; margin: 25px 0 30px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.button { border: 1px solid transparent; border-radius: 6px; padding: 14px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 22px; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s; }
.button-primary { background: var(--accent); color: #1c2a12; box-shadow: 0 3px 15px #c5f58408; }
.button-primary:hover { background: #d5ffa1; transform: translateY(-2px); box-shadow: 0 6px 24px #c5f58415; }
.button:active { transform: translateY(0); }
.button svg { width: 17px; height: 17px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #c8d0c9; }
.hero-secondary svg { width: 15px; height: 15px; color: var(--accent); }
.hero-facts { display: flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 10px; color: #91a096; }
.hero-facts > span { display: flex; align-items: center; gap: 6px; }
.hero-facts svg { width: 13px; height: 13px; }
.fact-divider { width: 2px; height: 2px; background: #7a877d; border-radius: 50%; }
.hero-art { position: relative; min-width: 0; padding: 22px 0; background: radial-gradient(ellipse at center, #759b3010, transparent 68%); }
.earth-svg { display: block; width: 100%; height: auto; stroke: none; animation: earth-enter 1.2s ease-out both; }
.coordinate { display: flex; justify-content: space-between; font: 8px monospace; letter-spacing: 1px; color: #6f7e73; position: absolute; left: 7%; right: 7%; }
.coordinate-top { top: 25px; }.coordinate-bottom { bottom: 28px; }
.location-label { position: absolute; display: flex; align-items: center; gap: 12px; left: 3%; bottom: 80px; background: #141e18e8; border: 1px solid #b6d29c26; padding: 13px 16px; border-radius: 6px; box-shadow: 0 15px 35px #0004; backdrop-filter: blur(12px); animation: label-float 7s ease-in-out infinite; }
.location-cross { color: var(--accent); font-size: 27px; }
.location-label small { display: block; font-size: 8px; letter-spacing: 1.4px; color: #a6b39f; margin-bottom: 5px; }
.location-label strong { font-size: 11px; font-weight: 500; }
.location-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 12px; }
.flight-path { animation: route-travel 15s linear infinite; }
.map-pulse { animation: map-pulse 3s ease-in-out infinite; }
.exploration-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.exploration-strip > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 1.5px; color: #adb7ae; }
.exploration-strip p { margin: 0; font-size: 11px; color: #88958c; }.strip-coordinate { color: #687a6e; font: 9px monospace; }

/* 4. Catálogo y sus tres ilustraciones */
.games-section { padding: 47px 0 35px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow.muted { color: #819184; font-size: 9px; margin-bottom: 11px; }
h2 { font: 500 29px/1.2 var(--display); letter-spacing: -1px; margin: 0; }
.section-heading p:not(.eyebrow) { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.game-filters { display: flex; align-items: center; padding: 4px; gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: #111612; }
.filter { font-size: 10px; color: #a9b2aa; padding: 9px 12px; border: 0; border-radius: 4px; background: transparent; transition: background .2s, color .2s; }
.filter:hover { color: var(--text); }.filter.active { background: #293027; color: #d6e2ca; }.filter span { font-size: 8px; margin-left: 5px; color: var(--accent); }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.game-card { min-width: 0; border: 1px solid #ffffff14; border-radius: 10px; overflow: hidden; background: var(--panel); transition: transform .25s, border-color .25s, box-shadow .25s; }
.game-card:hover { transform: translateY(-5px); border-color: #c5f58448; box-shadow: 0 16px 35px #0003; }
.card-visual { height: 210px; position: relative; overflow: hidden; border-bottom: 1px solid #ffffff0c; }
.visual-label { display: flex; gap: 6px; align-items: center; position: absolute; z-index: 2; top: 17px; left: 18px; font: 8px var(--display); letter-spacing: 1px; color: #e3eadb; }
.visual-label svg { width: 12px; height: 12px; }.visual-number { position: absolute; z-index: 2; right: 16px; top: 16px; font: 11px monospace; color: #ffffff66; }
.visual-bottom { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; color: #d4decc; font: 7px monospace; letter-spacing: 1px; }
.visual-bottom > span:last-child { font-size: 20px; }
.terrain-map { width: 100%; height: 100%; object-fit: cover; stroke: none; transform: scale(1.08); transition: transform .7s; }
.game-card:hover .terrain-map { transform: scale(1.16) rotate(-2deg); }
.flags-visual { background: radial-gradient(ellipse at 50% 110%, #63482a 0, #372d20 50%, #211e17 100%); }
.flag-orbit { position: absolute; width: 240px; height: 140px; border: 1px solid #ceb68c20; border-radius: 50%; left: calc(50% - 120px); top: 35px; transform: rotate(-20deg); box-shadow: 0 0 0 20px #ceb68c05, 0 0 0 40px #ceb68c04; }
.flag-composition { width: 210px; height: 120px; position: absolute; top: 48px; left: calc(50% - 105px); transition: transform .5s; }.game-card:hover .flag-composition { transform: translateY(-5px) rotate(2deg); }
.flag { position: absolute; width: 104px; height: 70px; border: 1px solid #ffffff30; box-shadow: 0 10px 20px #0005; border-radius: 3px; }
.flag-fr { left: 3px; top: 10px; background: linear-gradient(90deg, #295189 33.33%, #e8e5dc 33.33% 66.66%, #bc4a41 66.66%); transform: rotate(-15deg); }
.flag-jp { left: 60px; top: 1px; background: #e9e5da; transform: rotate(5deg); display: grid; place-items: center; }.flag-jp span { width: 26px; height: 26px; background: #be3a36; border-radius: 50%; }
.flag-br { top: 42px; right: 4px; background: #2b784a; transform: rotate(15deg); display: grid; place-items: center; }.flag-br > span { width: 58px; height: 42px; background: #e7c65a; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); display: grid; place-items: center; }.flag-br > span::after { content: ''; width: 21px; height: 21px; background: linear-gradient(18deg,#28507b 43%,#ecead8 44% 55%,#28507b 56%); border-radius: 50%; }
.quiz-visual { background: radial-gradient(ellipse at bottom, #2b4854, #182d36 65%, #15242c); }
.quiz-visual::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 29px,#ffffff04 30px), repeating-linear-gradient(0deg,transparent 0 29px,#ffffff04 30px); }
.quiz-preview { position: absolute; width: 228px; top: 48px; left: calc(50% - 114px); transform: rotate(-3deg); background: #17252bf2; border: 1px solid #9bbcce30; border-radius: 6px; padding: 13px; box-shadow: 0 12px 25px #0004; transition: transform .4s; }.game-card:hover .quiz-preview { transform: rotate(0deg) translateY(-3px); }
.quiz-top { display: flex; justify-content: space-between; font: 7px monospace; color: #9cb7c6; }.quiz-top > span:last-child { color: #dbd6aa; }
.quiz-preview p { font-size: 11px; margin: 10px 0; }.quiz-answer { display: flex; align-items: center; gap: 8px; border: 1px solid #ffffff15; padding: 6px; font-size: 8px; margin-top: 5px; border-radius: 3px; color: #aebfc4; }.quiz-answer > span { color: #718991; }.quiz-answer.selected { border-color: #b7d89645; background: #b7d89609; color: #c5e0af; }.quiz-answer b { margin-left: auto; }
.card-content { padding: 22px 21px 0; }.card-heading { display: flex; gap: 6px; align-items: center; justify-content: space-between; }.card-heading h3 { font: 500 19px var(--display); margin: 0; letter-spacing: -.7px; }.difficulty { font-size: 8px; color: #b6ce9e; border: 1px solid #b6ce9e22; background: #b6ce9e08; border-radius: 3px; padding: 4px 6px; }.difficulty.amber { color: #d5ba8c; border-color: #d5ba8c22; background: #d5ba8c08; }.difficulty.blue { color: #9bbdcf; border-color: #9bbdcf22; background: #9bbdcf08; }
.card-content > p { font-size: 12px; line-height: 1.85; color: var(--muted); margin: 12px 0 19px; min-height: 45px; }.card-meta { display: flex; gap: 16px; align-items: center; color: #89988d; font-size: 10px; }.card-meta > span { display: flex; align-items: center; gap: 5px; }.card-meta svg { width: 13px; height: 13px; }.card-meta > span + span::before { content: ''; height: 3px; width: 3px; background: #536257; border-radius: 50%; margin-right: 4px; }
.card-action { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; margin-top: 21px; border: 0; border-top: 1px solid var(--line); background: transparent; color: #d0ddc6; font-size: 11px; text-align: left; }.card-action svg { width: 17px; height: 17px; color: var(--accent); transition: transform .2s; }.card-action:hover svg { transform: translateX(4px); }

/* 5. Reto y progreso */
.bottom-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 20px; }
.daily-card, .progress-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.daily-card { background: radial-gradient(ellipse at 85% 60%,#c5f5840c,transparent 65%),#171f17; }.daily-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 24px 27px 0; }.daily-top .eyebrow { margin: 0; font-size: 9px; letter-spacing: 1.2px; }.daily-top svg { width: 13px; height: 13px; }.outline-tag { border: 1px solid #c5f58425; color: #a4b991; font: 7px var(--display); letter-spacing: 1px; padding: 5px 7px; border-radius: 3px; }
.daily-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 5px; padding: 23px 27px; }.daily-copy h2 { font-size: 31px; line-height: 1.15; letter-spacing: -1.3px; }.daily-copy h2 > span { color: var(--accent); }.daily-copy > p { color: #a1b098; font-size: 11px; line-height: 1.9; margin: 17px 0; }.daily-meta { display: flex; gap: 17px; margin-bottom: 22px; }.daily-meta > span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #bdccae; }.daily-meta svg { width: 13px; height: 13px; }.daily-copy .button { padding: 12px 15px; font-size: 11px; }.daily-map { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }.daily-map svg { width: 100%; height: auto; max-height: 260px; stroke: none; }.map-caption { font: 7px monospace; color: #8fa178; letter-spacing: 1px; margin-top: 8px; }.daily-bottom { border-top: 1px solid #c5f58410; padding: 13px 27px; display: flex; align-items: center; gap: 7px; font-size: 9px; color: #8fa080; }.daily-bottom .status-dot { width: 4px; height: 4px; }
.progress-card { background: var(--panel); padding: 25px 27px 18px; }.progress-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }.progress-head h2 { font-size: 24px; }.demo-badge { font: 8px monospace; letter-spacing: 1px; color: #93a28e; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }.level-row { display: flex; align-items: center; gap: 11px; margin-top: 27px; }.level-badge { width: 46px; height: 46px; border: 1px solid #c5f58430; border-radius: 10px; display: grid; place-items: center; background: #c5f58409; color: var(--accent); }.level-badge svg { width: 27px; height: 27px; }.level-row strong { font: 500 14px var(--display); }.level-subtitle { display: block; color: #92a087; font-size: 9px; margin-top: 6px; }.level-subtitle b { color: #c1d8ac; font-weight: 500; }.xp-total { margin-left: auto; text-align: right; }.xp-total b { font: 500 20px var(--display); letter-spacing: -.5px; }.xp-total small { display: block; color: #82907e; font-size: 7px; letter-spacing: 1px; margin-top: 5px; }.progress-caption { display: flex; justify-content: space-between; font-size: 9px; color: #94a08f; margin: 25px 0 9px; }.progress-caption b { color: #d6e5ca; font-weight: 500; }.progress-track { height: 5px; background: #293028; border-radius: 10px; overflow: hidden; }.progress-track span { display: block; height: 100%; width: 45%; border-radius: inherit; background: linear-gradient(90deg,#89af55,#c5f584); transition: width .8s; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; }.stats-row > div { border-right: 1px solid var(--line); text-align: center; }.stats-row > div:first-child { text-align: left; }.stats-row > div:last-child { border-right: 0; }.stats-row strong { display: block; font: 500 25px var(--display); }.stats-row strong span { font-size: 16px; }.stats-row > div > span { display: block; font-size: 8px; color: #97a190; margin-top: 4px; }.achievement { display: flex; align-items: center; gap: 11px; padding: 13px 11px; background: #c5f58404; border: 1px solid #c5f58414; border-radius: 6px; }.achievement-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #c5b8750c; color: #cdbb7e; }.achievement-icon svg { width: 16px; height: 16px; }.achievement strong { font-size: 10px; font-weight: 500; }.achievement p { font-size: 8px; color: #8f9a87; margin: 5px 0 0; }.achievement-check { color: #b7d197; margin-left: auto; font-size: 12px; }.demo-note { font-size: 8px; color: #819078; margin: 13px 0 0; }
.closing-note { display: flex; align-items: center; gap: 11px; padding: 35px 0; color: #7f9081; }.closing-note > svg { width: 16px; height: 16px; }.closing-note p { margin: 0; font-size: 11px; }.closing-note a { margin-left: auto; font-size: 10px; color: #afbaa8; }.closing-note a span { margin-left: 9px; color: var(--accent); }
footer { display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--line); padding: 24px 0 30px; color: #7e8d80; font-size: 9px; }footer .brand { color: var(--text); font-size: 24px; }footer > span:last-child { margin-left: auto; }.footer-dot { margin-inline: 9px; }

/* 6. Detalles de los juegos y animaciones */
dialog { width: min(480px, calc(100% - 32px)); padding: 0; background: #151d17; color: var(--text); border: 1px solid #c5f58430; border-radius: 12px; box-shadow: 0 30px 100px #0009; }dialog::backdrop { background: #030806bf; backdrop-filter: blur(7px); }dialog[open] { animation: enter .25s ease-out; }.dialog-inner { position: relative; padding: 36px; }.dialog-close { position: absolute; top: 10px; right: 14px; color: #aebda5; font-size: 26px; background: transparent; border: 0; }.dialog-inner > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: #aab6a5; }.dialog-info { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }.dialog-info span { font-size: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; }.dialog-status { display: flex; gap: 8px; align-items: center; }.dialog-inner > .button { margin-top: 13px; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes earth-enter { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes label-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes route-travel { to { stroke-dashoffset: -90; } }
@keyframes map-pulse { 0%,100% { opacity: .3; stroke-width: .7; } 50% { opacity: .85; stroke-width: 1.5; } }

/* 7. Adaptación: las cuadrículas pasan de tres columnas a una. */
@media (min-width: 1500px) { .hero { min-height: 600px; } }
@media (max-width: 1100px) {
  .shell, .header-inner { width: calc(100% - 56px); }.hero h1 { font-size: 72px; }.hero-actions { gap: 18px; }.hero-actions .button { font-size: 11px; padding: 13px 15px; gap: 12px; }.hero-secondary { font-size: 11px; }.hero { min-height: 520px; }.hero-copy .eyebrow { font-size: 8px; letter-spacing: 1.3px; }.card-heading { flex-wrap: wrap; row-gap: 9px; }.card-heading h3 { width: 100%; font-size: 19px; }.card-content { padding-inline: 17px; }.card-content > p { min-height: 66px; }.daily-top, .daily-body { padding-inline: 20px; }.progress-card { padding-inline: 20px; }.daily-copy h2 { font-size: 28px; }.daily-body { grid-template-columns: 1.4fr 1fr; }.outline-tag { font-size: 6px; }
}
@media (max-width: 850px) {
  .main-nav { gap: 22px; }.prototype-label { display: none; }.hero { min-height: 480px; }.hero h1 { font-size: 62px; letter-spacing: -3.5px; }.hero-description { font-size: 13px; }.hero-facts { flex-wrap: wrap; gap: 8px; font-size: 9px; }.hero-art .coordinate { font-size: 6px; }.location-label { left: 0; bottom: 60px; padding: 10px; gap: 8px; }.location-label strong { font-size: 9px; }.location-label small { font-size: 6px; }.location-dot { margin-left: 0; }.hero-art { margin-right: -12px; }.exploration-strip p { display: none; }.section-heading { align-items: flex-start; flex-direction: column; }.game-grid { gap: 12px; }.card-visual { height: 180px; }.quiz-preview { width: 182px; left: calc(50% - 91px); top: 40px; padding: 10px; }.quiz-preview p { font-size: 9px; }.visual-bottom { font-size: 6px; left: 12px; right: 12px; }.visual-label { font-size: 6px; left: 12px; }.card-content { padding-inline: 13px; }.card-heading h3 { font-size: 16px; }.card-content > p { font-size: 11px; min-height: 81px; }.card-meta { gap: 8px; font-size: 8px; }.bottom-grid { grid-template-columns: 1fr; }.daily-body { grid-template-columns: 1fr 1fr; padding-top: 30px; }.daily-copy h2 { font-size: 37px; }.daily-map svg { max-height: 275px; }.progress-card { padding: 25px; }.daily-top { padding-inline: 25px; }.daily-body { padding-inline: 25px; }.progress-head h2 { font-size: 27px; }.demo-note { font-size: 9px; }.level-subtitle { font-size: 10px; }.stats-row > div > span { font-size: 10px; }.achievement strong { font-size: 12px; }.achievement p { font-size: 10px; }.closing-note p { font-size: 10px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 112px; }.shell, .header-inner { width: calc(100% - 36px); }.header-inner { height: 101px; flex-wrap: wrap; gap: 0; padding-top: 13px; }.brand { font-size: 25px; }.brand-mark { width: 28px; height: 28px; }.header-actions { margin-left: auto; }.main-nav { order: 3; width: 100%; height: 41px; gap: 27px; }.nav-link { font-size: 11px; }.hero { grid-template-columns: 1fr; gap: 0; }.hero-copy { padding: 42px 0 5px; }.hero h1 { font-size: clamp(58px, 14vw, 78px); letter-spacing: -3.7px; }.hero-copy .eyebrow { font-size: 7px; letter-spacing: 1.25px; margin-bottom: 22px; }.hero-description { max-width: 355px; font-size: 13px; margin: 22px 0; }.hero-facts { margin-top: 24px; }.hero-art { max-width: 440px; width: 100%; margin: 0 auto; }.hero-art .coordinate { font-size: 7px; }.location-label { left: 3%; bottom: 65px; }.location-label strong { font-size: 11px; }.location-label small { font-size: 7px; }.exploration-strip { padding: 15px 0; gap: 5px; }.exploration-strip > span:first-child { font-size: 7px; letter-spacing: .8px; }.strip-coordinate { font-size: 7px; }.games-section { padding-top: 32px; }.section-heading { gap: 20px; }.section-heading h2 { font-size: 26px; }.game-filters { width: 100%; }.filter { flex: 1; padding-inline: 8px; }.game-grid { grid-template-columns: 1fr; gap: 19px; }.card-visual { height: 218px; }.visual-label { font-size: 8px; top: 17px; left: 18px; }.visual-bottom { font-size: 7px; left: 18px; right: 18px; }.card-heading { flex-wrap: nowrap; }.card-heading h3 { font-size: 20px; width: auto; }.card-content { padding: 21px 20px 0; }.card-content > p { font-size: 12px; min-height: 0; }.card-meta { font-size: 10px; gap: 15px; }.quiz-preview { width: 230px; left: calc(50% - 115px); padding: 13px; top: 49px; }.quiz-preview p { font-size: 11px; }.flag-composition { top: 51px; }.daily-top { padding-inline: 18px; }.daily-body { padding: 25px 18px; grid-template-columns: 1.45fr 1fr; gap: 0; }.daily-copy h2 { font-size: 28px; }.daily-copy > p { font-size: 10px; }.daily-meta { gap: 11px; }.daily-meta > span { font-size: 9px; }.daily-map { margin-right: -10px; }.map-caption { font-size: 5px; }.daily-top .eyebrow { font-size: 8px; }.outline-tag { font-size: 6px; letter-spacing: .5px; }.daily-bottom { padding-inline: 18px; font-size: 8px; }.progress-card { padding: 22px 19px; }.progress-head h2 { font-size: 25px; }.progress-head .eyebrow { font-size: 8px; }.level-subtitle { font-size: 9px; }.stats-row > div > span { font-size: 8px; }.achievement p { font-size: 8px; }.closing-note { flex-wrap: wrap; padding-block: 28px; }.closing-note p { font-size: 10px; }.closing-note a { margin-left: 27px; width: 100%; }footer { flex-wrap: wrap; gap: 13px 20px; }footer > span:last-child { width: 100%; margin-left: 0; font-size: 8px; }.dialog-inner { padding: 30px 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* 8. Estudio de personajes: escenario y controles independientes. */
.character-section { margin: 8px 0 35px; }
.character-label { font: 8px var(--display); letter-spacing: 1.2px; color: #95a488; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.character-studio { display: grid; grid-template-columns: .9fr 1.4fr; border: 1px solid #c5f58422; border-radius: 12px; overflow: hidden; background: var(--panel); }
.character-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; min-height: 540px; padding: 45px 20px 25px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%,#8ca55d25,transparent 62%),repeating-linear-gradient(0deg,transparent 0 39px,#b3c59a06 40px),repeating-linear-gradient(90deg,transparent 0 39px,#b3c59a06 40px),#141e19; border-right: 1px solid var(--line); }
.stage-top { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; color: #90a086; font: 8px monospace; letter-spacing: 1.7px; }
.stage-orbit { position: absolute; width: 285px; height: 285px; border: 1px solid #c5f58419; border-radius: 50%; top: 94px; z-index: -1; box-shadow: 0 0 0 25px #c5f58403,0 0 0 65px #c5f58402; }
.stage-orbit::before,.stage-orbit::after { content: '+'; position: absolute; color: #b5cb953c; font: 19px monospace; }
.stage-orbit::before { top: 2px; right: 29px; }.stage-orbit::after { bottom: 3px; left: 35px; }
.character-render { width: min(100%, 300px); position: relative; z-index: 2; transform-origin: 50% 90%; animation: explorer-idle 7s ease-in-out infinite; filter: drop-shadow(0 12px 12px #0004); }
.explorer-svg { display: block; width: 100%; height: auto; fill: none; stroke: none; }
.stage-platform { width: 165px; height: 34px; border: 1px solid #c5f5842e; background: radial-gradient(ellipse,#a5c77619,transparent 70%); border-radius: 50%; margin-top: -38px; z-index: 1; box-shadow: 0 9px 0 #050c0838; }
.stage-caption { text-align: center; margin-top: 29px; z-index: 2; }
.stage-caption > span { font: 7px monospace; letter-spacing: 1.6px; color: #8fa77a; }
.stage-caption strong { display: block; font: 500 27px var(--display); margin-top: 9px; overflow-wrap: anywhere; }
.stage-caption p { font-size: 10px; color: #a0ae93; margin: 9px 0 0; }
.character-controls { padding: 28px 30px 24px; min-width: 0; }
.character-control-heading { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-bottom: 22px; }
.character-control-heading h3 { font: 500 20px var(--display); letter-spacing: -.6px; margin: 0; }
.character-control-heading p { font-size: 11px; color: var(--muted); margin: 7px 0 0; }
.random-character { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #ffffff1c; color: #c3d3b4; border-radius: 5px; padding: 8px 10px; font-size: 17px; }
.random-character span { font-size: 10px; }.random-character:hover { background: #c5f5840c; border-color: #c5f58455; }
.character-field { display: block; border: 0; padding: 0; margin: 0 0 21px; min-width: 0; font-size: 11px; color: #bdc9b7; }
.character-field legend { padding: 0; margin-bottom: 10px; }
.character-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.character-preset { display: flex; align-items: center; gap: 3px; padding: 3px 8px 3px 1px; border: 1px solid #ffffff16; border-radius: 6px; background: #0d1511; color: #aeba9e; min-width: 0; transition: border-color .2s, background .2s; }
.character-preset .explorer-svg { width: 46px; height: 58px; }
.character-preset > span { font-size: 9px; }.character-preset[aria-pressed="true"] { border-color: #c5f58488; background: #c5f5840c; color: var(--accent); }
.character-preset:hover { border-color: #c5f58455; }
.character-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.name-field input { display: block; margin-top: 10px; width: 100%; min-height: 36px; padding: 8px 10px; background: #0b120e; color: var(--text); border: 1px solid #ffffff20; border-radius: 5px; font: 12px var(--body); }
.name-field input:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.character-swatches { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; min-height: 36px; }
.character-swatch, .character-option { position: relative; display: inline-flex; cursor: pointer; }
.character-swatch input, .character-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.character-swatch > span { display: block; background: var(--swatch); height: 26px; width: 26px; border: 3px solid #131c16; outline: 1px solid #ffffff20; border-radius: 50%; transition: outline-color .2s,transform .2s; }
.character-swatch input:checked + span { outline: 2px solid var(--accent); }
.character-swatch:hover > span { transform: translateY(-2px); }
.character-options { display: flex; flex-wrap: wrap; gap: 6px; }
.character-option > span { padding: 8px 9px; background: #0d1511; border: 1px solid #ffffff1c; border-radius: 4px; color: #a5b59d; font-size: 9px; min-height: 32px; display: flex; align-items: center; }
.character-option input:checked + span { background: #c5f5840c; border-color: #c5f58470; color: var(--accent); }
.character-option input:focus-visible + span,.character-swatch input:focus-visible + span { outline: 2px solid #f4f9ea; outline-offset: 4px; }
.character-save-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 19px; }
.character-save-row > p { color: #a3b398; font-size: 10px; line-height: 1.6; max-width: 215px; margin: 0; }
.character-save-row .button { font-size: 10px; white-space: nowrap; padding: 12px 14px; gap: 12px; }
.character-avatar { overflow: hidden; position: relative; padding: 0; }
.character-avatar .explorer-svg { position: absolute; width: 160%; height: auto; max-width: none; left: -30%; top: -24%; }
.level-badge.character-avatar { flex-shrink: 0; }
@keyframes explorer-idle { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg) translateY(-3px); } }
@media (max-width: 1100px) {
  .character-controls { padding-inline: 22px; }.character-studio { grid-template-columns: .75fr 1.4fr; }.character-preset { flex-direction: column; padding: 5px 3px 10px; }.character-preset .explorer-svg { width: 41px; height: 51px; }.character-fields-row { gap: 16px; }.character-control-heading h3 { font-size: 18px; }.random-character span { display: none; }.character-swatches { gap: 8px; }.character-swatch > span { width: 24px; height: 24px; }
}
@media (max-width: 850px) {
  .character-studio { grid-template-columns: 1fr; }.character-stage { min-height: 425px; padding-top: 25px; border-right: 0; border-bottom: 1px solid var(--line); }.character-render { width: 250px; }.stage-orbit { top: 43px; width: 265px; height: 265px; }.stage-caption { margin-top: 21px; }.stage-caption strong { font-size: 23px; }.stage-caption p { margin-top: 6px; }.character-preset { flex-direction: row; justify-content: center; padding: 5px 8px; }.character-preset .explorer-svg { width: 46px; height: 58px; }.random-character span { display: inline; }.character-control-heading h3 { font-size: 20px; }.character-controls { padding: 25px; }
}
@media (max-width: 600px) {
  .character-section .section-heading { gap: 14px; }.character-section h2 { font-size: 25px; }.character-controls { padding: 22px 17px; }.character-control-heading { gap: 7px; }.character-control-heading h3 { font-size: 17px; }.random-character span { display: none; }.character-fields-row { grid-template-columns: 1fr; gap: 0; }.character-preset { flex-direction: column; gap: 0; padding-bottom: 9px; }.character-preset .explorer-svg { width: 47px; height: 59px; }.character-save-row { flex-direction: column; align-items: stretch; gap: 12px; }.character-save-row > p { max-width: none; min-height: 16px; }.character-field { margin-bottom: 20px; }.character-swatches { gap: 14px; }.character-swatch > span { width: 30px; height: 30px; }.character-option > span { padding: 10px 13px; min-height: 37px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .character-render { animation: none; } }

/* 9. Acceso local y compañeros animales */
.login-button { font-size: 11px; padding: 10px 14px; }
.logout-button { font-size: 10px; color: #a8b79e; background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.logout-button:hover { color: var(--accent); border-color: #c5f58455; }
.animal-invitation { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 30px; padding: 32px; margin: 8px 0 35px; background: radial-gradient(ellipse at 80% 70%,#93b45515,transparent 65%),#141c17; border: 1px solid #c5f58422; border-radius: 12px; }
.animal-invitation h2 { font-size: 31px; }.animal-invitation .eyebrow { font-size: 8px; margin-bottom: 16px; }
.animal-invitation p:not(.eyebrow) { color: #9cad93; font-size: 12px; line-height: 1.8; max-width: 385px; margin: 17px 0 22px; }
.animal-invitation .button { font-size: 11px; }
.animal-lineup { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: 16px 0; }
.lineup-animal { text-align: center; position: relative; }
.lineup-animal .animal-svg { filter: drop-shadow(0 12px 10px #0004); transition: transform .3s; transform: scale(1.15); }
.lineup-animal:nth-child(even) { padding-top: 28px; }.lineup-animal:hover .animal-svg { transform: scale(1.15) translateY(-7px); }
.lineup-animal > span { display: block; margin-top: 10px; font: 9px var(--display); color: #adbe9b; letter-spacing: 1px; }
.character-presets { grid-template-columns: repeat(4,minmax(0,1fr)); }
.character-preset { flex-direction: column; padding: 6px 3px 9px; }.character-preset .animal-svg { width: 57px; height: 72px; }
.character-avatar .animal-svg { width: 153%; left: -26.5%; top: -28%; }
#access-dialog form { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
#access-dialog label { display: block; font-size: 12px; color: #b8c8ac; margin-bottom: 10px; }
#access-dialog input, #access-dialog select { width: 100%; padding: 12px; border: 1px solid #c5f58430; border-radius: 5px; background: #0c130f; color: #e0ead9; font: 13px var(--body); }
#access-dialog input:focus, #access-dialog select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
#access-dialog form .button { width: 100%; margin-top: 14px; font-size: 11px; }
#access-dialog .local-access-note { font-size: 11px; background: #c5f58407; border-left: 2px solid #c5f58455; padding: 10px 12px; }
#access-error { color: #e8b69a; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.account-notice { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(500px,calc(100% - 36px)); padding: 15px; border: 1px solid #c5f58444; background: #1c2c20; color: #d6e4cc; border-radius: 7px; font-size: 12px; line-height: 1.6; z-index: 12; }
@media(max-width:850px) { .animal-invitation { grid-template-columns: 1fr; gap: 10px; }.animal-lineup { max-width: 480px; width: 100%; margin: auto; }.animal-invitation p:not(.eyebrow) { max-width: 540px; }.animal-invitation h2 br { display: none; } }
@media(max-width:600px) { .animal-invitation { padding: 23px 17px; }.animal-invitation h2 { font-size: 27px; }.header-actions { gap: 9px; }.login-button { font-size: 10px; padding: 8px 10px; }.character-preset .animal-svg { width: 49px; height: 62px; }.character-preset > span { font-size: 8px; }.animal-lineup { margin-top: 10px; } }

/* 10. Partidas: instrucciones, preguntas, temporizador y resultados. */
#game-dialog { width: min(740px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; }
.game-shell { padding: 30px; }
.game-header { position: relative; padding-right: 36px; }
.game-header .eyebrow { margin-bottom: 10px; font-size: 9px; }
.game-header .dialog-close { right: -9px; top: -16px; width: 38px; height: 38px; }
.game-header h2 { font-size: 28px; }
.game-hud { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin: 23px 0; padding: 12px 0; border-block: 1px solid var(--line); font: 11px var(--display); color: #b9cba8; }
#game-clock { font-variant-numeric: tabular-nums; color: var(--accent); }
#game-clock.clock-urgent { color: #ffaf87; }
.game-mascot { width: 125px; margin: 14px auto 4px; filter: drop-shadow(0 12px 14px #0003); }
.game-instructions { color: #bfccb5; font-size: 14px; line-height: 1.9; margin: 18px 0; }
.game-player-note { color: #99ad8c; font-size: 11px; line-height: 1.8; margin-block: 14px; }
#game-content > .button { margin-top: 15px; }
.question-art { display: grid; place-items: center; margin-bottom: 23px; }
.question-flag { width: min(240px, 80%); height: auto; stroke: none; border: 1px solid #ffffff30; border-radius: 4px; box-shadow: 0 12px 28px #0003; }
.question-map { width: 100%; height: auto; stroke: none; border: 1px solid var(--line); border-radius: 8px; }
.question-text { font: 500 19px/1.65 var(--display); margin: 18px 0; letter-spacing: -.3px; }
.question-text:focus, .result-title:focus { outline: none; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-secondary { color: #d6e4cb; background: #c5f58405; border-color: #c5f58430; }
.button-secondary:hover { background: #c5f58411; border-color: #c5f58488; }
.answer-button { text-align: left; justify-content: flex-start; min-height: 50px; font-size: 12px; font-weight: 500; padding: 14px; }
.answer-button:disabled { opacity: .65; transform: none; }
.answer-button.answer-correct { border-color: var(--accent); color: var(--accent); background: #c5f58415; opacity: 1; }
.answer-button.answer-wrong { border-color: #db997b; background: #db997b15; color: #e9b399; opacity: 1; }
.game-feedback { font-size: 12px; line-height: 1.7; color: #c5f584; margin: 16px 0 0; min-height: 20px; }
.game-exit { border: 1px solid #d3ac7044; padding: 18px; background: #25271a; border-radius: 7px; margin-top: 15px; }
.game-exit p { color: #dfd1b4; font-size: 12px; line-height: 1.6; margin: 0 0 14px; }
.game-exit > div { display: flex; flex-wrap: wrap; gap: 10px; }
.daily-answer-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.daily-answer-form label { grid-column: 1/-1; color: #b8c8ac; font-size: 12px; }
.daily-answer-form input { min-width: 0; padding: 13px; color: var(--text); background: #0b140f; border: 1px solid #c5f58444; border-radius: 5px; font: 14px var(--body); }
.daily-answer-form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.found-countries { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; list-style: none; padding: 0; margin: 22px 0; }
.found-countries li { background: #c5f5840a; border: 1px solid #c5f58422; border-radius: 5px; color: #d1e5bc; padding: 9px; font-size: 11px; animation: enter .2s ease-out; }
.result-title { font: 500 24px/1.35 var(--display); margin: 25px 0; }
.result-score { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid #c5f58433; border-radius: 8px; padding: 22px; background: #c5f58408; }
.result-score strong { font: 500 40px var(--display); color: var(--accent); letter-spacing: -1px; }
.result-score > span { color: #d8eac9; font: 500 18px var(--display); }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.game-review { margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; }
.game-review summary { cursor: pointer; font-size: 12px; color: #ccdcbe; }
.game-review ol { padding-left: 24px; font-size: 12px; color: #a8b99b; line-height: 2; }
#progress-owner { max-width: 110px; overflow-wrap: anywhere; }
.recent-games { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.recent-games h3 { font: 500 12px var(--display); margin: 0 0 10px; color: #c2d2b5; }
.recent-games ul { list-style: none; margin: 0; padding: 0; }
.recent-games li { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #9daf92; line-height: 1.5; padding-block: 6px; }
.recent-games strong { color: #c5dcb3; font-weight: 500; }
@media(max-width:600px) { .game-shell { padding: 23px 18px; }.game-header h2 { font-size: 23px; }.question-text { font-size: 16px; }.game-instructions { font-size: 13px; }.answer-grid { grid-template-columns: 1fr; }.daily-answer-form { grid-template-columns: 1fr; }.found-countries { grid-template-columns: repeat(2,1fr); }.result-score strong { font-size: 33px; }.game-hud { font-size: 10px; }.game-mascot { width: 100px; } }
@media(prefers-reduced-motion:reduce) { .found-countries li { animation: none; } }

/* 11. Acceso con cuenta: formularios y estados de envío. */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 7px; margin: 22px 0 0; }
.auth-tabs button { background: transparent; border: 0; color: #99ab8c; padding: 11px 8px; font-size: 12px; border-radius: 4px; }
.auth-tabs button[aria-pressed="true"] { background: #c5f58414; color: var(--accent); }
#auth-form label { margin-top: 17px; }
#auth-form small { display: block; margin-top: 7px; color: #92a285; font-size: 10px; line-height: 1.5; }
#auth-form .password-field { position: relative; }
#auth-form .password-field input { padding-right: 80px; }
#toggle-password { position: absolute; right: 7px; top: 7px; bottom: 7px; padding: 0 9px; background: #c5f5840d; border: 0; color: #c2d6b0; font-size: 10px; border-radius: 4px; }
#access-dialog .auth-footnote { font-size: 10px; color: #95a988; line-height: 1.7; margin-bottom: 0; }
button:disabled { opacity: .55; cursor: wait; }
.server-help { margin-top: 22px; padding: 18px; border: 1px solid #c5f58444; border-radius: 7px; background: #c5f58408; }
.server-help > strong { color: #e0efcd; font: 500 16px var(--display); }
.server-help p { color: #adbf9e; font-size: 12px; line-height: 1.8; }
.server-help code { color: var(--accent); }
.server-help .button { width: 100%; }

/* 12. Perfil: una vista propia, separada de la portada. */
#profile-view { padding: 35px 0 55px; min-height: 70vh; }
.profile-page-heading { margin-bottom: 30px; }
.back-home { display: inline-block; color: #9dae93; font-size: 11px; margin-bottom: 30px; }
.back-home:hover { color: var(--accent); }
.profile-page-heading .eyebrow { margin-bottom: 12px; }
.profile-page-heading h1 { font: 500 43px/1.1 var(--display); letter-spacing: -1.8px; margin: 0; }
.profile-page-heading h1:focus { outline: none; }
.profile-page-heading > p:last-child { color: var(--muted); font-size: 13px; margin-top: 12px; }
.profile-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 27px; align-items: start; }
.profile-sidebar { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; overflow: hidden; position: sticky; top: 106px; }
.profile-identity { padding: 22px 19px; text-align: center; background: radial-gradient(ellipse at 50% 30%,#c5f5840a,transparent 80%); border-bottom: 1px solid var(--line); }
#profile-portrait { width: 90px; height: 100px; margin: 0 auto 14px; border-radius: 15px; background: #c5f58408; overflow: hidden; }
#profile-portrait .animal-svg { width: 115%; max-width: none; margin-left: -7.5%; }
.profile-identity strong { display: block; font: 500 19px var(--display); overflow-wrap: anywhere; }
.profile-identity > span { display: block; color: #98aa8b; font-size: 11px; margin-top: 6px; }
.profile-nav { display: flex; flex-direction: column; gap: 5px; padding: 14px 10px; }
.profile-nav a { display: flex; align-items: center; gap: 10px; color: #abbba0; padding: 13px 10px; font-size: 12px; border-radius: 5px; border: 1px solid transparent; }
.profile-nav a.active { background: #c5f5840b; border-color: #c5f58424; color: var(--accent); }
.profile-nav a:hover { background: #c5f58408; }
.profile-nav svg { width: 17px; height: 17px; }
.profile-nav a > span { margin-left: auto; font: 8px monospace; opacity: .5; }
.profile-play-link { display: block; padding: 18px; border-top: 1px solid var(--line); font-size: 10px; color: #a6bb91; text-align: center; }
.profile-panels { min-width: 0; }
.profile-companion-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; border: 1px solid #c5f58426; border-radius: 10px; background: radial-gradient(ellipse at 90% 30%,#97b86f15,transparent 70%),#172018; margin-bottom: 22px; }
.profile-companion-card .eyebrow { font-size: 8px; margin-bottom: 12px; }
.profile-companion-card h2 { font-size: 31px; overflow-wrap: anywhere; }
.profile-companion-card p:not(.eyebrow) { font-size: 12px; line-height: 1.8; color: #a4b699; max-width: 340px; }
.profile-companion-card .button { font-size: 10px; padding: 10px 13px; }
#profile-companion-art { width: 150px; flex-shrink: 0; filter: drop-shadow(0 8px 10px #0003); }
#profile-companion-art:empty { display: none; }
#profile-summary .progress-card { padding: 28px; }
#profile-summary .stats-row { margin-block: 28px; }
#profile-summary .stats-row strong { font-size: 32px; }
#profile-summary .stats-row > div > span { font-size: 10px; }
#profile-summary .recent-games { margin-top: 24px; }
#profile-summary .recent-games li { padding-block: 10px; font-size: 12px; border-bottom: 1px solid #ffffff08; }
.profile-panels .character-section { margin: 0; }
.profile-panels .character-section .section-heading { align-items: flex-start; }
.profile-panels .character-section h2 { font-size: 26px; }
.profile-panels .character-label { display: none; }
.profile-panels .character-studio { grid-template-columns: 1fr; }
.profile-panels .character-stage { min-height: 345px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
.profile-panels .character-render { width: 210px; }
.profile-panels .stage-orbit { top: 30px; width: 230px; height: 230px; }
.profile-panels .stage-caption { margin-top: 18px; }
.profile-panels .stage-caption strong { font-size: 22px; }
.profile-panels .stage-caption p { display: none; }
.profile-panels .character-controls { padding: 25px; }
.profile-panels .character-control-heading h3 { font-size: 21px; }
.profile-account-card { border: 1px solid var(--line); border-radius: 10px; padding: 30px; background: var(--panel); }
.profile-account-card > p:not(.eyebrow) { color: #a3b398; font-size: 12px; line-height: 1.7; }
.profile-account-card dl { margin: 30px 0; }
.profile-account-card dl > div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.profile-account-card dt { color: #899e7f; font: 9px var(--display); text-transform: uppercase; letter-spacing: 1px; }
.profile-account-card dd { margin: 8px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.profile-session { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.profile-session strong { font-size: 12px; font-weight: 500; }
.profile-session p { font-size: 10px; color: #a0b093; line-height: 1.8; margin-bottom: 0; }
.profile-session .logout-button { white-space: nowrap; border-color: #d9b29940; color: #dfbba7; padding: 11px 14px; }
.profile-gate { text-align: center; padding: 50px 25px; border: 1px solid #c5f58426; border-radius: 10px; background: radial-gradient(ellipse at 50% 0%,#c5f5840c,transparent 80%),var(--panel); }
.profile-gate > svg { width: 45px; height: 45px; color: var(--accent); margin-bottom: 22px; }
.profile-gate p { color: #a5b798; font-size: 13px; line-height: 1.8; max-width: 420px; margin: 16px auto 25px; }
.profile-gate > a { display: block; font-size: 11px; color: #9cb58b; margin-top: 20px; }
.home-profile-card { border: 1px solid var(--line); border-radius: 10px; padding: 28px; background: var(--panel); display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.home-profile-card > svg { width: 31px; height: 31px; color: #a8c587; margin: 14px 0 20px; }
.home-profile-card h2 { font-size: 26px; }
.home-profile-card > p:not(.eyebrow) { color: #a0af94; font-size: 12px; line-height: 1.9; margin-bottom: 24px; }
.home-profile-card .button { font-size: 11px; }
@media(max-width:850px) {
  .profile-layout { grid-template-columns: 185px minmax(0,1fr); gap: 18px; }
  .profile-companion-card { padding: 21px; gap: 10px; }#profile-companion-art { width: 100px; }
  .profile-panels .character-fields-row { grid-template-columns: 1fr; gap: 0; }
  .profile-panels .character-save-row { flex-direction: column; align-items: stretch; }
  .profile-panels .character-save-row p { max-width: none; }
  .profile-companion-card h2 { font-size: 25px; }
  .profile-session { flex-direction: column; align-items: flex-start; }
}
@media(max-width:600px) {
  #profile-view { padding-top: 25px; }.profile-page-heading h1 { font-size: 34px; }
  .profile-page-heading > p:last-child { font-size: 12px; }.back-home { margin-bottom: 23px; }
  .profile-layout { grid-template-columns: 1fr; }.profile-sidebar { position: static; }
  .profile-identity { display: none; }.profile-play-link { display: none; }
  .profile-nav { flex-direction: row; padding: 6px; gap: 3px; }.profile-nav a { flex: 1; justify-content: center; padding: 11px 5px; gap: 5px; font-size: 10px; }.profile-nav a > span { display: none; }.profile-nav svg { width: 14px; height: 14px; }
  #profile-summary .progress-card { padding: 22px 18px; }#profile-summary .stats-row > div > span { font-size: 8px; }
  .profile-account-card { padding: 24px 19px; }.profile-companion-card { padding: 20px 17px; }
  .profile-companion-card p:not(.eyebrow) { font-size: 11px; }.profile-companion-card .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .profile-panels .character-controls { padding: 22px 17px; }.profile-panels .character-control-heading h3 { font-size: 17px; }
  .profile-gate h2 { font-size: 24px; }.profile-gate p { font-size: 12px; }
}

/* 13. Decoración de la portada, independiente del perfil. */
#home-view { position: relative; isolation: isolate; }
.home-contours { position: absolute; inset: 0 -35px 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .6; }
.home-contours svg { width: 100%; height: 100%; stroke: #91b16a; stroke-width: .6; opacity: .13; }
#home-view::before { content: ''; position: absolute; width: 420px; height: 420px; top: 130px; right: 0; background: radial-gradient(circle,#c5f58407,transparent 70%); pointer-events: none; z-index: -1; }
.home-animal { pointer-events: none; user-select: none; filter: drop-shadow(0 9px 8px #0006); }
.home-animal .animal-svg { transform-origin: 50% 92%; animation: home-companion-idle 6s ease-in-out infinite; animation-delay: var(--idle-delay,0s); }
.hero-animal-one { position: absolute; width: 120px; left: 2%; bottom: 21px; z-index: 5; transform: rotate(-7deg); }
.hero-animal-two { position: absolute; width: 101px; right: 2%; bottom: 44px; z-index: 5; transform: rotate(9deg); }
#home-view .location-label { bottom: 169px; left: -1%; z-index: 6; }
.explorer-sticker { position: absolute; left: 25%; bottom: 31px; transform: rotate(-7deg); background: #c5f584; color: #213017; padding: 9px 11px; border: 3px solid #192416; font: 700 8px var(--display); letter-spacing: 1px; box-shadow: 0 4px 0 #0003; z-index: 4; }
.explorer-sticker span { padding-left: 8px; font-size: 12px; }
#home-view .hero-art .coordinate-bottom { bottom: 7px; }
#home-view .games-section { position: relative; }
.game-guide { position: absolute; width: 70px; height: 89px; top: 33px; left: -5px; transform: rotate(-5deg); }
#home-view .games-section > .section-heading { padding-left: 77px; }
#home-view .games-section > .section-heading h2 { font-size: 27px; }
#home-view .game-card { box-shadow: 0 8px 22px #0002; }
#home-view .game-card:hover { box-shadow: 0 16px 32px #0004; }
.expedition-postcard { position: relative; display: flex; align-items: center; min-height: 222px; border: 1px solid #bbcf922c; border-radius: 10px; overflow: hidden; background: linear-gradient(110deg,#1c281d,#202a22); margin: 0 0 28px; isolation: isolate; }
.expedition-postcard::before { content: ''; position: absolute; inset: 11px; border: 1px dashed #bdc99023; border-radius: 4px; pointer-events: none; z-index: 4; }
.postcard-heading { padding: 29px 33px; width: 45%; position: relative; z-index: 3; background: linear-gradient(90deg,#1c281d 75%,transparent); }
.postcard-number { color: #a1b387; font: 8px monospace; letter-spacing: 1.7px; }
.postcard-heading h2 { color: #e3ead6; font: 500 25px/1.14 var(--display); letter-spacing: -.8px; margin-top: 13px; }
.postcard-heading p { font-size: 10px; color: #a2b18e; line-height: 1.8; margin: 12px 0 0; }
.postcard-landscape { position: absolute; inset: 0 0 0 23%; z-index: 1; }
.postcard-landscape svg { width: 100%; height: 100%; stroke: none; }
.postcard-animals { display: flex; align-items: flex-end; gap: 0; position: absolute; bottom: 7px; right: 17%; z-index: 3; }
.postcard-animals .home-animal { width: 107px; transform: rotate(-4deg); }
.postcard-animals .home-animal + .home-animal { width: 95px; margin-left: -14px; transform: rotate(7deg); }
.postcard-stamp { position: absolute; right: 27px; top: 27px; border: 1px solid #d4d6a553; border-radius: 50%; width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #d4d6a5a8; transform: rotate(15deg); z-index: 3; }
.postcard-stamp svg { width: 24px; height: 24px; }.postcard-stamp span { font: 7px/1.6 monospace; text-align: center; letter-spacing: .7px; }
#home-view .daily-map { isolation: isolate; }
.daily-animal { width: 85px; position: absolute; right: -6px; bottom: 23px; z-index: 3; transform: rotate(8deg); }
#home-view .daily-card { border-color: #c5f58426; }
@keyframes home-companion-idle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@media(max-width:1100px) {
  #home-view .games-section > .section-heading { align-items: flex-start; flex-direction: column; }
  #home-view .location-label { left: 1%; bottom: 150px; padding: 10px; }
  .hero-animal-one { width: 100px; bottom: 22px; }.hero-animal-two { width: 85px; bottom: 31px; }
  .explorer-sticker { font-size: 7px; left: 30%; padding: 6px 8px; bottom: 27px; }
}
@media(max-width:850px) {
  .hero-animal-one { width: 88px; left: -1%; }.hero-animal-two { width: 76px; right: 0; }
  #home-view .location-label { bottom: 134px; left: 0; }.explorer-sticker { font-size: 6px; bottom: 25px; padding: 4px 6px; }
  .postcard-heading { width: 48%; padding: 26px; }.postcard-heading h2 { font-size: 23px; }.postcard-animals { right: 10%; }.postcard-stamp { right: 23px; width: 64px; height: 64px; top: 20px; }.postcard-stamp span { font-size: 5px; }
}
@media(max-width:600px) {
  .home-contours { inset-inline: 0; }#home-view::before { width: 100%; }
  .hero-animal-one { width: 98px; left: 1%; bottom: 18px; }.hero-animal-two { width: 85px; right: 0; bottom: 29px; }
  #home-view .location-label { bottom: 150px; left: 0; }.explorer-sticker { font-size: 6px; left: 29%; bottom: 27px; }
  .game-guide { width: 56px; top: 24px; }#home-view .games-section > .section-heading { padding-left: 60px; }#home-view .games-section > .section-heading h2 { font-size: 23px; }
  #home-view .games-section .eyebrow { font-size: 7px; letter-spacing: 1px; }#home-view .games-section .section-heading p:not(.eyebrow) { font-size: 11px; }
  #home-view .game-filters { margin-left: -60px; width: calc(100% + 60px); }
  .expedition-postcard { min-height: 315px; align-items: flex-start; }.postcard-heading { width: 100%; background: linear-gradient(180deg,#1c281d 45%,transparent); padding: 24px; }.postcard-heading h2 { font-size: 23px; }.postcard-heading p { max-width: 150px; font-size: 9px; }.postcard-landscape { inset: 100px -70px 0 0; }.postcard-animals { right: 7%; bottom: 9px; }.postcard-animals .home-animal { width: 97px; }.postcard-animals .home-animal + .home-animal { width: 83px; }.postcard-stamp { right: 22px; top: 31px; width: 59px; height: 59px; }.daily-animal { width: 67px; right: -2px; bottom: 34px; }
}
@media(prefers-reduced-motion:reduce) { .home-animal .animal-svg { animation: none; } }

/* 14. Maestro de banderas: recorrido, compañero y cuaderno de aprendizaje. */
#game-dialog.flags-game { width: min(800px,calc(100% - 24px)); background: #121c17; border-color: #b9d69a38; }
.flags-game .game-shell { padding: 30px 36px; background: radial-gradient(ellipse at 90% 0,#a5c9860d,transparent 55%); }
.flags-game .game-header { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.flags-game .game-hud { margin: 15px 0 18px; border: 0; padding: 0; font-size: 10px; }
.flags-eyebrow { color: #a6c68a; font: 9px var(--display); letter-spacing: 1.7px; margin: 22px 0 12px; }
.flags-intro-mascot { width: 115px; background: radial-gradient(ellipse at center,#b8de8820,transparent 68%); animation: flag-arrive .5s ease-out; }
.flags-route { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0; margin: 24px 0; }
.flags-route li { position: relative; border: 1px solid #abc58b26; padding: 16px; border-radius: 8px; background: #a8c68305; }
.flags-route li > span { display: block; color: #b5d88c; font: 12px monospace; margin-bottom: 13px; }
.flags-route strong { display: block; font: 500 12px var(--display); color: #e0e9d6; }
.flags-route small { display: block; margin-top: 7px; color: #9cac90; font-size: 10px; }
.flags-stage-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.flags-stage-heading > span { color: #c8d7b9; font: 9px var(--display); letter-spacing: 1px; }
.flag-streak { border: 1px solid #b8d49130; border-radius: 20px; padding: 6px 10px; color: #b4c79f; font: 10px var(--display); white-space: nowrap; }
.flag-streak.streak-active { color: #f3d39a; background: #b7892820; border-color: #e9bd6366; animation: flag-arrive .3s ease-out; }
.flags-round-track { display: flex; gap: 7px; list-style: none; padding: 0; margin: 16px 0 9px; }
.flags-round-track li { flex: 1; display: grid; place-items: center; height: 25px; font: 10px monospace; color: #829278; border: 1px solid #a9c58a22; background: #ffffff02; border-radius: 4px; }
.flags-round-track li:nth-child(3),.flags-round-track li:nth-child(6) { margin-right: 10px; }
.flags-round-track .round-current { color: #def5c0; border-color: #c5f584; box-shadow: 0 0 0 2px #c5f5840a; }
.flags-round-track .round-correct { color: #d1f5a7; background: #bce78c20; border-color: #bce78c66; }
.flags-round-track .round-missed { color: #e6b495; background: #dfab8310; border-color: #dfab8344; }
.flags-stage-detail { margin: 0 0 16px; color: #91a385; font-size: 10px; }
.flags-game .question-art { position: relative; margin-bottom: 18px; min-height: 180px; padding: 20px; border-radius: 10px; border: 1px solid #adc88b20; background: radial-gradient(ellipse at center,#a5c68b12,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 23px,#a9cb8806 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#a9cb8806 24px),#0c1511; }
.flags-game .question-art .question-flag { width: 210px; max-width: 100%; height: auto; margin: 0; border-radius: 3px; box-shadow: 0 10px 25px #0005; animation: flag-arrive .4s ease-out; }
.flags-game .question-text { font-size: 19px; margin: 16px 0; }
.flags-game .answer-grid { gap: 10px; }
.flags-game .answer-button { border-color: #afc99130; border-radius: 7px; min-height: 48px; }
.flags-game .answer-button:not(:disabled):hover { background: #c5f5840d; border-color: #c5f58488; }
.flags-game .answer-button:focus-visible { outline: 2px solid #c5f584; outline-offset: 3px; }
.flags-game .answer-button:disabled { cursor: default; }
.flags-game .answer-correct { border-color: var(--accent); animation: flag-answer-glow .5s ease-out; }
.flags-game .answer-wrong { border-color: #db997b; animation: flag-answer-nudge .3s ease-out; }
.answer-mark { margin-left: auto; font-size: 17px; }
.flag-companion { display: flex; align-items: center; gap: 14px; margin-top: 20px; min-height: 80px; }
.flag-companion-art { width: 65px; flex: 0 0 65px; filter: drop-shadow(0 5px 5px #0004); transform-origin: center bottom; }
.companion-speech { position: relative; flex: 1; padding: 12px 15px; border: 1px solid #aac98724; background: #a7c88a06; border-radius: 0 9px 9px 9px; }
.companion-speech span { display: block; color: #b9d69d; font: 9px var(--display); letter-spacing: .4px; }
.companion-speech p { color: #adbea2; font-size: 11px; line-height: 1.7; margin: 6px 0 0; }
.companion-happy .flag-companion-art { animation: companion-celebrate .65s ease-in-out; }
.companion-encourage .flag-companion-art { animation: companion-nod .7s ease-in-out; }
.flag-learning { border-left: 2px solid #c5f584; background: #c5f58407; margin-top: 14px; padding: 12px 15px; animation: flag-arrive .3s ease-out; }
.flag-learning strong { color: #d1e6b7; font-size: 12px; font-weight: 500; }
.flag-learning p { color: #b5c5a9; font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
.learning-missed { border-color: #dfb493; background: #dfb49306; }
.learning-missed strong { color: #e5c0a5; }
.flags-game #game-content > .button { width: 100%; justify-content: center; margin-top: 20px; }
.flags-game .game-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flags-game .result-title { margin: 20px 0; font-size: 24px; }
.flags-game .result-score { background: radial-gradient(ellipse at top right,#c5f58413,transparent),#17221a; }
.flag-result-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 0 28px; padding: 17px 0; border-block: 1px solid var(--line); }
.flag-result-stats > div { display: flex; flex-direction: column; text-align: center; gap: 7px; }
.flag-result-stats > div + div { border-left: 1px solid var(--line); }
.flag-result-stats strong { color: #e0ebd5; font: 500 24px var(--display); }
.flag-result-stats span { color: #9bac8e; font-size: 10px; }
.flag-notebook h4 { font: 500 19px var(--display); margin: 0 0 10px; letter-spacing: -.3px; }
.flag-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; align-items: start; }
.flag-review-entry { border: 1px solid #afc99125; border-radius: 7px; overflow: hidden; background: #0c151140; }
.flag-review-entry.review-missed { border-color: #dfb49342; }
.flag-review-entry summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 11px; padding: 13px; }
.flag-review-entry summary::-webkit-details-marker { display: none; }
.flag-review-entry summary:focus-visible { outline: 2px solid #c5f584; outline-offset: -3px; }
.flag-review-entry summary:hover { background: #bada9607; }
.flag-thumbnail { width: 45px; flex: 0 0 45px; }
.flag-thumbnail .question-flag { display: block; width: 100%; height: auto; border-radius: 2px; margin: 0; box-shadow: none; }
.flag-review-entry summary strong { display: block; color: #d9e5ce; font-size: 11px; font-weight: 500; }
.flag-review-entry summary small { display: block; color: #a9c98b; font-size: 9px; margin-top: 5px; }
.review-missed summary small { color: #dcaf8d; }
.review-expand { margin-left: auto; color: #91ab7d; }
.flag-review-entry[open] .review-expand { transform: rotate(45deg); }
.flag-review-entry > p { padding: 0 13px; color: #acbda0; font-size: 11px; line-height: 1.8; margin: 0 0 13px; }
.flag-review-entry .review-choice { color: #d0ac94; }
@keyframes flag-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flag-answer-glow { 50% { box-shadow: 0 0 0 3px #c5f58425; } }
@keyframes flag-answer-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes companion-celebrate { 30% { transform: translateY(-9px) rotate(-6deg); } 65% { transform: translateY(-3px) rotate(5deg); } }
@keyframes companion-nod { 40% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } }
@media(max-width:600px) {
  .flags-game .game-shell { padding: 24px 18px; }
  .flags-route { gap: 6px; }.flags-route li { padding: 11px 9px; }.flags-route strong { font-size: 10px; }.flags-route small { font-size: 9px; line-height: 1.6; }
  .flags-stage-heading > span { font-size: 8px; letter-spacing: .5px; }.flag-streak { font-size: 9px; padding: 5px 7px; }
  .flags-game .question-art { min-height: 145px; padding: 15px; }.flags-game .question-art .question-flag { width: 180px; }
  .flags-game .answer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.flags-game .answer-button { font-size: 11px; padding: 10px; }
  .flag-companion { gap: 10px; margin-top: 15px; }.flag-companion-art { width: 53px; flex-basis: 53px; }.companion-speech { padding: 10px; }
  .flags-game .result-title { font-size: 21px; }.flag-result-stats strong { font-size: 21px; }.flag-result-stats span { font-size: 9px; }
  .flag-review-grid { grid-template-columns: 1fr; }.flags-game .result-actions .button { flex: 1; justify-content: center; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
  .flags-game *, .flags-game *::before, .flags-game *::after { animation: none !important; transition: none !important; }
}

/* 15. Dirección visual de la expedición: atlas, fichas y cuaderno de campo. */
#game-dialog.flags-game { width: min(1080px,calc(100% - 32px)); border-radius: 16px; box-shadow: 0 32px 120px #0009,0 0 0 5px #bad59905; scrollbar-width: thin; scrollbar-color: #52634b #121c17; }
.flags-game .game-shell { padding: 25px 34px 30px; background: radial-gradient(ellipse at 100% 0,#9ebd7711,transparent 45%),#121c17; }
.flags-game .game-header { display: flex; align-items: center; min-height: 53px; padding-bottom: 18px; }
.flags-game .game-header .eyebrow { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 7px; }
.flags-game .game-header h2 { font-size: 21px; letter-spacing: -.5px; }
.flags-game .game-header .dialog-close { top: 0; right: 0; border: 1px solid #b3ca9528; border-radius: 50%; background: #c5f58405; color: #c7d7bb; }
.flags-game .game-header .dialog-close:hover { background: #c5f58417; }
.flag-icon { display: inline-flex; width: 24px; height: 24px; color: #b5d394; flex: 0 0 auto; }
.flag-icon svg { width: 100%; height: 100%; }
.flag-briefing { display: grid; grid-template-columns: 1.15fr 1fr; gap: 15px; position: relative; padding: 12px 0 24px; border-bottom: 1px solid var(--line); }
.flag-briefing-copy { align-self: center; position: relative; z-index: 2; padding: 18px 0; }
.flag-briefing-copy .flags-eyebrow { margin: 10px 0 22px; font-size: 8px; letter-spacing: 1.5px; }
.flag-briefing h3 { font: 500 clamp(30px,4vw,46px)/1.09 var(--display); letter-spacing: -1.9px; color: #e9edde; margin: 0; }
.flag-briefing h3 em { display: block; color: #c5f584; font-style: normal; }
.flag-briefing-description { color: #9faf9a; font-size: 12px; line-height: 1.9; max-width: 360px; margin: 22px 0; }
.flag-briefing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.flag-briefing-chips span { border: 1px solid #b5cd962a; border-radius: 4px; padding: 7px 9px; font: 9px var(--display); color: #b9c9aa; background: #b5cd9605; }
.flag-briefing-chips span:first-child { background: #c5f5840e; color: #c5f584; }
.flag-briefing-scene { position: relative; min-height: 310px; isolation: isolate; }
.flag-atlas { position: absolute; width: 325px; height: 325px; color: #94b179; opacity: .24; pointer-events: none; }
.flag-atlas svg { width: 100%; height: 100%; stroke-width: .8; }
.flag-briefing-scene .flag-atlas { left: 50%; top: -6px; transform: translateX(-50%) rotate(-17deg); }
.flag-scene-coordinate { position: absolute; top: 11px; right: 0; color: #7c9270; letter-spacing: 3px; font: 7px monospace; }
.flag-specimen-fan { position: absolute; inset: 0; }
.flag-specimen { position: absolute; width: 132px; padding: 8px 8px 6px; background: #e4e1cf; border-radius: 4px; box-shadow: 0 12px 24px #0005; top: 43px; left: 10px; transform: rotate(-17deg); }
.flag-specimen .question-flag { width: 100%; border: 0; border-radius: 1px; box-shadow: none; display: block; }
.flag-specimen > span { display: block; color: #555c4b; font: 6px monospace; letter-spacing: 1px; margin-top: 7px; }
.flag-specimen:nth-child(2) { left: 115px; top: 27px; transform: rotate(7deg); }
.flag-specimen:nth-child(3) { left: auto; right: 2px; top: 86px; transform: rotate(21deg); }
.flag-pet-plinth { position: absolute; width: 180px; height: 35px; background: radial-gradient(ellipse,#93b2724a,#93b27208 65%,transparent 70%); left: 50%; bottom: 15px; transform: translateX(-50%); border-bottom: 1px solid #aec88622; border-radius: 50%; }
.flag-briefing-pet { position: absolute; width: 175px; bottom: 12px; left: 50%; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 12px 12px #0006); }
.flag-expedition-seal { position: absolute; bottom: 34px; right: 5px; height: 77px; width: 77px; border: 1px solid #ceb87877; outline: 1px dashed #ceb87844; outline-offset: -5px; border-radius: 50%; color: #cfbd86; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transform: rotate(13deg); }
.flag-expedition-seal .flag-icon { width: 20px; height: 20px; color: inherit; }
.flag-expedition-seal > span:not(.flag-icon) { font: 8px monospace; letter-spacing: 2px; }
.flag-expedition-seal small { font: 5px monospace; letter-spacing: .6px; }
.flag-scene-caption { position: absolute; bottom: 0; left: 0; font: 6px monospace; letter-spacing: 1.2px; color: #809871; }
.flag-section-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; font: 8px var(--display); letter-spacing: 1.2px; color: #b2c49f; }
.flag-section-caption > span + span { color: #81937a; font: 10px var(--body); letter-spacing: 0; }
.flags-game .flags-route { gap: 14px; margin: 14px 0 21px; }
.flags-game .flags-route li { padding: 17px 19px; background: linear-gradient(135deg,#a6c1850c,transparent 75%); border-color: #b3cb9726; }
.flags-route li::after { content: ''; position: absolute; width: 7px; height: 7px; top: 14px; right: 14px; border-top: 1px solid #c5f5844a; border-right: 1px solid #c5f5844a; }
.flag-route-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-right: 4px; }
.flag-route-top > span:not(.flag-icon) { font: 28px var(--display); color: #c1d7a932; letter-spacing: -1px; }
.flags-game .flags-route strong { font-size: 13px; }
.flags-route li > p { font-size: 11px; line-height: 1.75; color: #93a68b; margin: 8px 0 13px; max-width: 220px; }
.flags-game .flags-route small { font: 8px monospace; color: #aac68f; letter-spacing: .4px; border-top: 1px solid #c5f58414; padding-top: 12px; }
.flag-boarding { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 14px 21px; border: 1px solid #b6cb932c; border-radius: 8px; background: repeating-linear-gradient(135deg,#c5f58402 0 1px,transparent 1px 6px),#172119; }
.flag-boarding-identity { display: flex; gap: 15px; align-items: center; min-width: 0; }
.flag-boarding-identity > div:first-child { width: 48px; height: 57px; flex-shrink: 0; overflow: hidden; background: #c5f58408; border-radius: 50%; }
.flag-boarding-identity .animal-svg { width: 110%; max-width: none; margin-left: -5%; }
.flag-boarding-identity small { display: block; font: 7px var(--display); letter-spacing: 1px; color: #96ac82; }
.flag-boarding-identity strong { display: block; color: #dae8ca; font: 500 17px var(--display); margin-top: 5px; overflow-wrap: anywhere; }
.flag-boarding-identity div > span { display: block; font-size: 10px; margin-top: 4px; color: #99ac8c; overflow-wrap: anywhere; }
.flag-boarding-reward { display: grid; grid-template-columns: 26px auto; column-gap: 10px; padding: 7px 0 7px 28px; border-left: 1px dashed #b4ce963f; }
.flag-boarding-reward .flag-icon { grid-row: span 2; align-self: center; color: #d4bd80; }
.flag-boarding-reward strong { font: 500 18px var(--display); color: #e2d09c; }
.flag-boarding-reward small { font-size: 9px; color: #b8ab88; margin-top: 5px; }
.flag-briefing-footer { display: flex; gap: 25px; align-items: center; justify-content: space-between; margin-top: 22px; }
.flag-briefing-footer p { font-size: 10px; line-height: 1.8; color: #8b9e80; max-width: 310px; margin: 0; }
.flag-briefing-footer .button { min-width: 265px; justify-content: center; padding: 15px 22px; box-shadow: 0 4px 0 #718d48; }
.flags-game .game-hud { padding: 12px 16px; background: #0b140e66; border: 1px solid #a7c38818; border-radius: 6px; color: #a4b895; }
.flag-round-navigation { margin: 20px 0; }
.flag-round-navigation .flags-round-track li { height: 29px; }
.flag-round-navigation .flags-stage-detail { margin: 0; }
.flag-play-layout { display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 24px; align-items: start; }
.flag-play-main { min-width: 0; }
.flags-game .flag-play-main .question-art { min-height: 275px; overflow: hidden; border-radius: 10px; padding: 57px 25px 44px; background: radial-gradient(ellipse at 50% 60%,#879b611c,transparent 75%),#0d1712; }
.question-art .flag-atlas { width: 350px; height: 350px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-16deg); opacity: .14; }
.flags-game .flag-play-main .question-flag { position: relative; width: 238px; z-index: 1; box-shadow: 0 16px 30px #0006,0 0 0 8px #bcd99505; }
.flag-art-label { position: absolute; top: 18px; left: 19px; right: 19px; display: flex; justify-content: space-between; gap: 12px; font: 7px monospace; letter-spacing: 1px; color: #8da079; }
.flag-art-caption { position: absolute; bottom: 16px; color: #7d916f; font: 7px monospace; letter-spacing: 2px; }
.flag-answer-heading { margin: 20px 0 17px; }.flag-answer-heading .question-text { margin: 0; font-size: 21px; }
.flag-answer-heading > p { font-size: 11px; color: #93a484; margin: 6px 0 0; }
.flags-game .flag-play-main .answer-button { min-height: 59px; border-radius: 8px; gap: 12px; font-size: 12px; }
.flag-option-number { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border: 1px solid #b1c99335; border-radius: 5px; color: #97b77f; font: 10px monospace; background: #c5f58404; }
.answer-correct .flag-option-number { background: #c5f5841a; border-color: #c5f58480; color: #c5f584; }
.flag-play-main > .button { width: 100%; justify-content: center; margin-top: 17px; min-height: 48px; }
.flag-field-panel { padding: 19px; border: 1px solid #acc48e30; border-radius: 10px; background: radial-gradient(ellipse at 50% 20%,#a5c68010,transparent 48%),#18221a; position: relative; overflow: hidden; }
.flag-field-panel > .flags-eyebrow { font-size: 7px; letter-spacing: 1.5px; margin: 0 0 6px; text-align: center; }
.flag-field-panel .flag-companion { flex-direction: column; gap: 0; margin: 0; }
.flag-field-panel .flag-companion-art { width: 131px; flex-basis: auto; position: relative; }
.flag-field-panel .companion-speech { text-align: center; width: 100%; box-sizing: border-box; padding: 13px 10px; background: #0d170e75; border-radius: 7px; }
.flag-field-panel .companion-speech span { font-size: 9px; color: #ccdfb8; }
.flag-field-panel .companion-speech p { font-size: 10px; min-height: 51px; }
.flag-field-log { margin-top: 20px; padding-top: 18px; border-top: 1px solid #b4ce9224; }
.flag-field-log > span { display: block; font: 7px monospace; letter-spacing: 1.7px; color: #829e70; }
.flag-field-score { display: block; font: 500 27px var(--display); margin: 7px 0 3px; color: #dceacc; }
.flag-field-log small { font-size: 10px; color: #8fa680; }
.flag-field-progress { height: 4px; margin: 13px 0 19px; border-radius: 5px; background: #c5f58410; overflow: hidden; }
.flag-field-progress > span { height: 100%; display: block; background: #c5f584; transition: width .35s ease; }
.flag-field-stages { list-style: none; padding: 0; margin: 0; }
.flag-field-stages li { display: flex; gap: 10px; align-items: center; color: #7c8f70; padding: 9px 0; font: 10px var(--display); }
.flag-field-stages li > span { font: 9px monospace; border: 1px solid #afca9222; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.flag-field-stages strong { font-weight: 400; }
.flag-field-stages .is-current { color: #c5f584; }.flag-field-stages .is-current > span { background: #c5f58412; border-color: #c5f58460; }
.flag-field-stages .is-complete { color: #a3bf8b; }
.flag-field-note { font-size: 9px; line-height: 1.8; color: #8a9f7c; border-top: 1px solid #b4ce921b; padding-top: 13px; margin: 12px 0 0; }
.flag-answer-stamp { position: absolute; right: 14px; bottom: 31px; border: 2px solid #b5d99588; color: #c5e0ad; padding: 8px 10px; z-index: 2; background: #152719e8; font: 8px monospace; letter-spacing: 1px; transform: rotate(-8deg); animation: flag-stamp-in .3s ease-out; }
.flag-art-discovery .flag-answer-stamp { color: #e1c08e; border-color: #d5b78177; background: #262718ee; }
.flags-game .flag-art-success { border-color: #c5f58450; }
.flags-game #game-content[data-view="result"] { padding-top: 8px; }
.flag-result-cover { display: grid; grid-template-columns: minmax(0,1fr) 245px; align-items: center; gap: 35px; padding: 10px 0 20px; border-bottom: 1px solid var(--line); }
.flag-result-cover .result-title { font-size: 32px; line-height: 1.2; letter-spacing: -1px; max-width: 430px; }
.flag-result-cover .flag-companion { flex-direction: column; gap: 0; margin: 0; }
.flag-result-cover .flag-companion-art { width: 135px; flex-basis: auto; }
.flag-result-cover .companion-speech { text-align: center; }
.flag-result-cover .result-score { padding: 18px 20px; }
.flag-result-recap .flags-eyebrow { font-size: 8px; }
.flags-game .flag-result-stats { background: #a7c38806; border: 1px solid #a7c38825; border-radius: 8px; padding: 22px 0; }
.flags-game .flag-notebook { position: relative; border: 1px solid #abc58d29; border-radius: 10px; padding: 22px; background: repeating-linear-gradient(0deg,transparent 0 29px,#b1c88704 29px 30px),#0c15114a; }
.flags-game .flag-notebook .flags-eyebrow { margin-top: 0; }
.flags-game .flag-review-entry { background: #19221ae6; }
.flags-game .flag-review-entry summary { padding: 16px; }.flags-game .flag-thumbnail { width: 59px; flex-basis: 59px; }
.flags-game .result-actions { justify-content: flex-end; padding-top: 15px; border-top: 1px solid var(--line); }
@keyframes flag-stamp-in { from { opacity: 0; scale: 1.35; } to { opacity: 1; scale: 1; } }
@media(max-width:850px) {
  .flags-game .game-shell { padding: 23px; }.flag-briefing h3 { font-size: 35px; }
  .flag-briefing-scene { min-height: 300px; }.flag-specimen { width: 106px; }.flag-specimen:nth-child(2) { left: 77px; }.flag-specimen:nth-child(3) { top: 102px; }.flag-expedition-seal { right: -3px; bottom: 15px; width: 60px; height: 60px; }.flag-briefing-pet { width: 160px; }
  .flag-play-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 16px; }.flag-field-panel { padding: 15px; }.flag-field-panel .flag-companion-art { width: 110px; }
  .flag-boarding-reward { padding-left: 16px; }.flag-boarding-identity small { letter-spacing: .4px; }.flag-briefing-footer .button { min-width: 230px; }
}
@media(max-width:600px) {
  #game-dialog.flags-game { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .flags-game .game-shell { padding: 20px 17px; }.flags-game .game-header h2 { font-size: 19px; }
  .flag-briefing { grid-template-columns: 1fr; padding-bottom: 15px; gap: 0; }.flag-briefing-copy { padding: 10px 0 0; }.flag-briefing-copy .flags-eyebrow { font-size: 7px; margin-bottom: 17px; }.flag-briefing h3 { font-size: 34px; letter-spacing: -1.5px; }.flag-briefing-description { font-size: 11px; margin: 16px 0; }
  .flag-briefing-scene { min-height: 235px; max-width: 330px; width: 100%; margin: 12px auto 0; }.flag-briefing-scene .flag-atlas { width: 255px; height: 255px; top: -10px; }.flag-specimen { width: 108px; top: 26px; }.flag-specimen:nth-child(2) { left: 90px; top: 12px; }.flag-specimen:nth-child(3) { top: 52px; }.flag-briefing-pet { width: 138px; bottom: 0; }.flag-pet-plinth { bottom: 4px; }.flag-expedition-seal { bottom: 16px; right: 12px; }.flag-scene-coordinate { top: -3px; }.flag-scene-caption { font-size: 5px; }
  .flag-section-caption { margin-top: 18px; }.flag-section-caption > span + span { display: none; }
  .flags-game .flags-route { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }.flags-game .flags-route li { padding: 14px 13px 14px 56px; }.flag-route-top { position: absolute; top: 16px; left: 14px; margin: 0; }.flag-route-top > span:not(.flag-icon) { display: none; }.flags-game .flags-route strong { font-size: 12px; }.flags-route li > p { margin: 5px 0 7px; max-width: none; font-size: 10px; }.flags-game .flags-route small { border: 0; padding: 0; font-size: 7px; }
  .flag-boarding { flex-direction: column; align-items: stretch; padding: 14px; gap: 13px; }.flag-boarding-reward { border-left: 0; border-top: 1px dashed #b4ce963f; padding: 13px 0 0; }.flag-boarding-reward strong { font-size: 16px; }.flag-boarding-identity small { font-size: 7px; }
  .flag-briefing-footer { flex-direction: column-reverse; gap: 15px; text-align: center; margin-top: 17px; }.flag-briefing-footer .button { width: 100%; min-width: 0; }.flag-briefing-footer p { font-size: 9px; }
  .flags-game .game-hud { font-size: 9px; padding: 10px; }.flag-play-layout { grid-template-columns: 1fr; gap: 18px; }
  .flags-game .flag-play-main .question-art { min-height: 235px; padding: 51px 18px 37px; }.flags-game .flag-play-main .question-flag { width: 200px; }.flag-art-label { font-size: 6px; }.flag-answer-heading .question-text { font-size: 18px; }.flags-game .flag-play-main .answer-button { font-size: 11px; gap: 8px; min-height: 57px; }.flag-option-number { width: 22px; height: 24px; flex-basis: 22px; font-size: 9px; }
  .flag-field-panel { padding: 13px; }.flag-field-panel > .flags-eyebrow { text-align: left; }.flag-field-panel .flag-companion { flex-direction: row; gap: 12px; }.flag-field-panel .flag-companion-art { width: 70px; flex: 0 0 70px; }.flag-field-panel .companion-speech { text-align: left; }.flag-field-panel .companion-speech p { min-height: 0; }.flag-field-log { margin-top: 10px; padding-top: 12px; }.flag-field-score { display: inline-block; font-size: 23px; margin-right: 9px; }.flag-field-progress { margin-bottom: 4px; }.flag-field-stages { display: none; }.flag-field-note { margin-top: 7px; padding-top: 8px; }
  .flags-game .flag-notebook { padding: 17px 13px; }.flags-game .flag-review-entry summary { padding: 13px; }
  .flag-result-cover { grid-template-columns: 1fr; gap: 18px; }.flag-result-cover .result-title { font-size: 27px; }.flag-result-cover .flag-companion { flex-direction: row; gap: 12px; }.flag-result-cover .flag-companion-art { width: 70px; flex: 0 0 70px; }.flag-result-cover .companion-speech { text-align: left; }
}
@media(prefers-reduced-motion:reduce) { .flag-answer-stamp { animation: none; } }

/* 16. Bandera enmarcada y cuenta atrás independiente por ronda. */
.flag-time-settings { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 0; }
.flag-time-settings strong { display: block; color: #cedec0; font: 500 12px var(--display); }
.flag-time-settings small { display: block; color: #8da17f; font-size: 10px; line-height: 1.7; margin-top: 5px; }
.flag-time-options { display: flex; gap: 4px; padding: 4px; border: 1px solid #b8cf962b; border-radius: 7px; flex-shrink: 0; background: #0b150d80; }
.flag-time-options .button { padding: 8px 12px; min-height: 34px; font-size: 10px; border: 1px solid transparent; border-radius: 4px; white-space: nowrap; }
.flag-time-options .button[aria-pressed="true"] { color: #d2f5ad; border-color: #c5f58440; background: #c5f58414; }
.flag-round-timer { --time-left: 1; --timer-color: #c5f584; display: flex; align-items: center; gap: 13px; padding: 10px 16px 10px 11px; margin-bottom: 14px; border: 1px solid #aeca9230; border-radius: 10px; background: linear-gradient(110deg,#aac98b0c,transparent 75%),#132017; }
.flag-timer-dial { position: relative; width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; }
.flag-timer-ring { position: absolute; inset: 0; }
.flag-timer-ring svg { width: 100%; height: 100%; stroke-width: 3; transform: rotate(-90deg); }
.timer-ring-track { stroke: #b6d7911a; }
.timer-ring-fill { stroke: var(--timer-color); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--time-left)); stroke-linecap: round; transition: stroke-dashoffset .1s linear,stroke .3s; }
.flag-timer-dial strong { font: 500 21px var(--display); font-variant-numeric: tabular-nums; color: var(--timer-color); letter-spacing: -1px; }
.flag-round-timer small { display: block; font: 8px var(--display); letter-spacing: 1.5px; color: #a8c091; }
#flag-timer-caption { display: block; font-size: 11px; color: #cad8bc; margin-top: 6px; }
.flag-round-timer > .flag-icon { margin-left: auto; width: 19px; height: 19px; color: var(--timer-color); opacity: .6; }
.flag-round-timer.timer-urgent { --timer-color: #f0b383; border-color: #e4a57070; background: linear-gradient(100deg,#b3792718,transparent),#211d14; }
.timer-urgent .flag-timer-dial { animation: timer-heartbeat 1s ease-in-out infinite; }
.timer-urgent small { color: #e1b38a; }.timer-stopped { --timer-color: #a9bea0; }
.flags-game .flag-play-main .question-art { min-height: 345px; padding: 62px 35px 54px; background: radial-gradient(ellipse at 50% 38%,#7d976331,transparent 65%),repeating-linear-gradient(0deg,transparent 0 37px,#b6d49b05 38px),repeating-linear-gradient(90deg,transparent 0 37px,#b6d49b05 38px),#0c1611; border-color: #c7d9ae2e; box-shadow: inset 0 0 70px #0003; isolation: isolate; }
.flag-play-main .question-art::before { content: ''; position: absolute; inset: 10px; border: 1px solid #b2c78f1c; border-radius: 5px; pointer-events: none; }
.flag-play-main .question-art::after { content: '+'; position: absolute; left: 21px; bottom: 38px; color: #c5d5a344; font: 19px monospace; pointer-events: none; }
.flag-play-main .question-art .flag-atlas { width: 430px; height: 430px; opacity: .2; }
.flag-display-frame { position: relative; width: min(330px,100%); padding: 12px 12px 0; border: 1px solid #f8f2d9a6; border-radius: 5px; background: linear-gradient(135deg,#eee9d8,#d7d3c0); box-shadow: 0 24px 35px #0007,0 5px 0 #b9b7a3,0 6px 0 #777f644a; transform: rotate(-2deg); z-index: 1; animation: flag-frame-arrive .5s ease-out; }
.flag-display-frame::before { content: ''; position: absolute; width: 60px; height: 18px; left: calc(50% - 30px); top: -9px; background: #d7c393bf; border: 1px solid #e6d5ab55; transform: rotate(4deg); box-shadow: 0 1px 2px #0002; z-index: 3; }
.flag-display-fabric { position: relative; border: 1px solid #40554035; overflow: hidden; background: #fff; }
.flags-game .flag-play-main .flag-display-fabric .question-flag { display: block; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.flag-display-fabric::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,#fff1,transparent 38%,#00000005 70%,#fff1); pointer-events: none; z-index: 2; }
.flag-display-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; color: #626954; font: 7px monospace; letter-spacing: 1px; }
.flag-display-footer > span + span { color: #778066; font-size: 14px; letter-spacing: -1px; }
.flag-play-main .flag-art-label { color: #a6b994; top: 22px; left: 23px; right: 23px; }
.flag-play-main .flag-art-caption { color: #8fa680; bottom: 22px; font-size: 7px; letter-spacing: 2.3px; }
.flag-play-main .flag-answer-stamp { bottom: 45px; right: 20px; z-index: 4; box-shadow: 0 3px 10px #0003; }
.flags-game .flag-play-main .answer-button { background: linear-gradient(120deg,#bfd79a09,transparent),#17221a; box-shadow: 0 3px 0 #08120c66; transition: border-color .2s,background .2s,transform .2s; }
.flags-game .flag-play-main .answer-button:not(:disabled):hover { background: #c5f58413; transform: translateY(-2px); }
.flags-game .flag-play-main .answer-correct { background: #c5f58415; border-color: #c5f584; }
.flags-game .flag-play-main .answer-wrong { background: #db997b15; border-color: #db997b; }
@keyframes flag-frame-arrive { from { opacity: 0; transform: translateY(9px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes timer-heartbeat { 50% { filter: drop-shadow(0 0 5px #efb28055); } }
@media(max-width:850px) {
  .flags-game .flag-play-main .question-art { min-height: 285px; padding: 56px 26px 46px; }
  .flag-display-frame { width: min(290px,100%); padding: 9px 9px 0; }
}
@media(max-width:600px) {
  .flag-time-settings { flex-direction: column; align-items: stretch; gap: 11px; }.flag-time-options .button { flex: 1; justify-content: center; }
  .flag-round-timer { padding: 8px 12px 8px 9px; margin-bottom: 11px; gap: 10px; }.flag-timer-dial { width: 46px; height: 46px; flex-basis: 46px; }.flag-timer-dial strong { font-size: 19px; }.flag-round-timer small { font-size: 7px; }#flag-timer-caption { font-size: 10px; }
  .flags-game .flag-play-main .question-art { min-height: 270px; padding: 51px 24px 46px; }.flag-display-frame { width: min(255px,100%); }.flag-display-footer { font-size: 5px; min-height: 29px; letter-spacing: .6px; }.flag-play-main .flag-art-label { font-size: 6px; left: 18px; right: 18px; }.flag-play-main .flag-art-caption { font-size: 6px; letter-spacing: 1.6px; }
  .flag-play-main .flag-answer-stamp { font-size: 7px; bottom: 32px; right: 12px; }
}
@media(prefers-reduced-motion:reduce) { .flag-display-frame,.timer-urgent .flag-timer-dial { animation: none; }.timer-ring-fill { transition: none; } }

/* Imágenes SVG locales: escudos y formas completos, sin recortar la bandera. */
img.question-flag { object-fit: contain; aspect-ratio: 4 / 3; }
.flag-image-status:empty { display: none; }
.flag-image-status { margin-bottom: 14px; padding: 12px 15px; border: 1px solid #d6b38255; border-radius: 7px; color: #d7c1a2; }
.flag-image-status p { font-size: 12px; line-height: 1.7; margin: 0 0 10px; }
.flag-image-status .button { font-size: 11px; }
.flags-game .flag-play-main .answer-button > span:not(.flag-option-number):not(.answer-mark) { overflow-wrap: anywhere; min-width: 0; line-height: 1.5; }

/* La dificultad comunica cambios de países, distractores y tiempo. */
.flag-route-time { display: block; margin-top: 9px; color: #d3dcbc; font: 10px var(--display); }
.flag-difficulty-panel { --level-color: #c5f584; display: flex; align-items: center; gap: 15px; border: 1px solid #b2ce8e35; border-left: 3px solid var(--level-color); border-radius: 8px; padding: 14px 17px; margin-bottom: 18px; background: linear-gradient(110deg,#a9c9820e,transparent),#101b14; }
.difficulty-level-1 { --level-color: #edcf86; border-color: #edcf8640; }
.difficulty-level-2 { --level-color: #e8ac8b; border-color: #e8ac8b40; }
.flag-difficulty-meter { display: flex; align-items: flex-end; gap: 4px; height: 32px; flex: 0 0 35px; }
.flag-difficulty-meter > span { width: 8px; height: 12px; background: #b4cb9420; border-radius: 2px; }
.flag-difficulty-meter > span:nth-child(2) { height: 21px; }.flag-difficulty-meter > span:nth-child(3) { height: 30px; }
.flag-difficulty-meter .is-filled { background: var(--level-color); }
.flag-difficulty-panel small { display: block; color: var(--level-color); font: 7px var(--display); letter-spacing: 1.5px; }
.flag-difficulty-panel strong { display: block; color: #e2ecd8; font: 500 18px var(--display); margin-top: 5px; }
.flag-difficulty-panel p { margin: 5px 0 0; font-size: 10px; color: #a5b79a; line-height: 1.6; }
.flag-difficulty-time { margin-left: auto; flex-shrink: 0; padding: 8px 10px; border: 1px solid #b5c9972b; border-radius: 5px; font: 10px var(--display); color: var(--level-color); }
.flag-difficulty-panel.level-up { animation: difficulty-arrive .5s ease-out; }
@keyframes difficulty-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:600px) {
  .flag-difficulty-panel { gap: 10px; padding: 13px 11px; flex-wrap: wrap; }
  .flag-difficulty-panel > div:nth-child(2) { flex: 1; min-width: 155px; }
  .flag-difficulty-time { margin-left: 45px; padding: 6px 8px; font-size: 9px; }
  .flag-route-time { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) { .flag-difficulty-panel.level-up { animation: none; } }

/* Música de la expedición: controles persistentes entre rondas. */
.flags-game .game-header { gap: 18px; padding-right: 50px; }
.flags-game .game-header > div:first-child { flex: 1; min-width: 0; }
.game-audio-controls { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
#game-music-toggle { display: flex; gap: 8px; align-items: center; min-height: 36px; padding: 8px 10px; color: #c9ddb6; border: 1px solid #b4cf9235; border-radius: 6px; background: #c5f58408; font: 10px var(--display); }
#game-music-toggle[aria-pressed="false"] { color: #8c9c81; background: transparent; }
#game-music-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.music-levels { display: flex; align-items: center; gap: 2px; height: 16px; width: 16px; }
.music-levels i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; transform-origin: center; }
.music-levels i:nth-child(2) { height: 13px; }.music-levels i:nth-child(3) { height: 9px; }
.music-playing .music-levels i { animation: music-pulse .8s ease-in-out infinite alternate; }.music-playing .music-levels i:nth-child(2) { animation-delay: -.3s; }.music-playing .music-levels i:nth-child(3) { animation-delay: -.6s; }
.game-volume { display: flex; flex-direction: column; gap: 5px; width: 73px; color: #96ad86; font: 7px var(--display); letter-spacing: .7px; }
.game-volume input { width: 100%; margin: 0; padding: 0; accent-color: #b9df8d; cursor: pointer; height: 15px; }
.flag-music-note { margin: 15px 0 0; font-size: 10px; color: #9eaf91; line-height: 1.8; }
@keyframes music-pulse { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@media(max-width:600px) {
  .flags-game .game-header { flex-wrap: wrap; gap: 13px; padding-right: 0; }
  .flags-game .game-header > div:first-child { flex-basis: 100%; padding-right: 45px; }
  .game-audio-controls { width: 100%; gap: 15px; }.game-volume { width: 95px; }
  .flag-music-note { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) { .music-playing .music-levels i { animation: none; } }

/* 19 — Atelier: piezas independientes, colores propios y estilos completos. */
.profile-panels .expanded-studio { grid-template-columns: minmax(230px,.8fr) minmax(0,1.4fr); overflow: visible; border-radius: 16px; }
.profile-panels .expanded-studio .character-stage { min-height: 650px; height: auto; padding: 48px 18px 24px; border: 0; border-right: 1px solid var(--line); border-radius: 16px 0 0 16px; justify-content: flex-start; background: radial-gradient(ellipse at 50% 33%,#9eb77225,transparent 65%),repeating-linear-gradient(0deg,transparent 0 31px,#b3c59a06 32px),repeating-linear-gradient(90deg,transparent 0 31px,#b3c59a06 32px),#111d18; }
.studio-live { display: flex; align-items: center; gap: 6px; font-size: 7px; letter-spacing: 1px; }
.profile-panels .expanded-studio .character-render { width: min(100%,245px); margin-top: 15px; animation: none; }
.profile-panels .expanded-studio .stage-orbit { top: 106px; width: 205px; height: 205px; }
.profile-panels .expanded-studio .stage-caption { margin-top: 23px; }
.profile-panels .expanded-studio .stage-caption strong { font-size: 30px; }
.profile-panels .expanded-studio .stage-caption p { display: block; font-size: 10px; line-height: 1.7; }
.studio-palette { display: flex; margin: 18px 0 25px; padding: 7px 10px; border: 1px solid #ffffff12; border-radius: 30px; background: #101913; gap: 6px; }
.studio-palette span { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ffffff25; }
.studio-lookbook { width: 100%; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.studio-lookbook > .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
.studio-lookbook > p { font-size: 10px; color: var(--muted); margin: 12px 0 0; }
#character-looks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.studio-look { min-width: 0; padding: 6px 2px 10px; background: #ffffff04; border: 1px solid #ffffff12; color: #c6d3bc; border-radius: 9px; transition: background .2s, border-color .2s, transform .2s; }
.studio-look svg { width: 62px; max-width: 100%; margin: auto; }
.studio-look strong { font-size: 10px; font-weight: 500; }
.studio-look:hover { background: #c5f5840a; border-color: #c5f58470; transform: translateY(-3px); }
.studio-look[aria-pressed="true"] { background: #c5f5840a; border-color: #c5f58470; color: var(--accent); }
.studio-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: -3px 0 18px; }
.studio-tools > span { font-size: 10px; color: var(--muted); }
.studio-tools > div { display: flex; gap: 6px; }
.studio-tools button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: #c4d3bb; background: #ffffff04; font-size: 11px; }
.studio-tools button:disabled { opacity: .35; }
.profile-panels .expanded-studio .character-controls { display: flex; flex-direction: column; padding: 26px; }
.expanded-studio .character-control-heading .eyebrow { margin: 0 0 10px; font-size: 8px; letter-spacing: 1.4px; }
.profile-panels .expanded-studio .character-control-heading h3 { font-size: 30px; }
.expanded-studio .random-character { margin-top: 17px; }
.studio-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #0c1510; margin-bottom: 26px; }
.studio-tabs button { min-width: 0; border: 0; border-radius: 6px; padding: 10px 3px; color: #91a58e; font: 500 11px var(--body,sans-serif); background: transparent; transition: background .2s,color .2s; }
.studio-tabs button > span { display: block; font: 9px monospace; opacity: .55; margin-bottom: 5px; }
.studio-tabs button[aria-pressed="true"] { color: var(--accent); background: #c5f58412; box-shadow: inset 0 0 0 1px #c5f58420; }
.studio-tabs button:hover { color: #e2eed9; }
.studio-panel { min-height: 430px; animation: studio-enter .22s ease-out; }
.studio-panel[hidden] { display: none; }
.expanded-studio .character-field { margin-bottom: 22px; font-size: 12px; }
.expanded-studio .character-field:disabled { opacity: .45; }
.expanded-studio .character-field:disabled label { cursor: default; }
.expanded-studio .character-field legend { margin-bottom: 12px; }
.expanded-studio .character-presets { gap: 8px; }
.expanded-studio .character-preset { border-radius: 10px; }
.expanded-studio .character-preset .animal-svg { width: 58px; height: 73px; }
.expanded-studio .character-preset > span { font-size: 10px; }
.expanded-studio .character-option > span { font-size: 11px; padding: 10px 12px; border-radius: 7px; }
.expanded-studio .character-swatches { gap: 12px; }
.expanded-studio .character-swatch > span { width: 27px; height: 27px; }
.studio-hint { display: block; color: #8fa18b; font-size: 10px; line-height: 1.6; font-weight: 400; margin: 9px 0 0; }
.studio-panel > .studio-hint { margin: 0 0 22px; }
.studio-custom-color { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-top: 12px; padding: 5px 9px 5px 5px; border: 1px solid #ffffff16; background: #101913; border-radius: 7px; cursor: pointer; }
.studio-custom-color input[type="color"] { width: 32px; height: 30px; padding: 1px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.studio-custom-color span { font-size: 10px; color: #acbda3; }
.studio-custom-color input[type="text"] { width: 78px; min-width: 0; font: 11px monospace; color: #d2dfc7; padding: 6px; margin: 0; background: #ffffff04; border: 1px solid #ffffff15; border-radius: 4px; }
.expanded-studio .character-save-row { margin-top: auto; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0 0; background: var(--panel); }
.expanded-studio .character-save-row > p { max-width: none; min-height: 17px; }
.studio-save-actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.studio-reset { padding: 10px 0; border: 0; background: transparent; color: #bbcbb1; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.studio-reset:disabled { opacity: .35; cursor: default; }
.expanded-studio button:focus-visible,.studio-custom-color input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes studio-enter { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1100px) {
  .profile-panels .expanded-studio { grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr); }
  .profile-panels .expanded-studio .character-controls { padding: 20px; }
  .expanded-studio .character-swatches { gap: 10px; }
  .expanded-studio .character-swatch > span { width: 24px; height: 24px; }
}
/* Retira la columna del perfil antes de estrechar demasiado los controles. */
@media(max-width:1000px) {
  .profile-layout:has(#personaje:not([hidden])) { grid-template-columns: 1fr; }
  .profile-layout:has(#personaje:not([hidden])) .profile-sidebar { position: static; }
  .profile-layout:has(#personaje:not([hidden])) .profile-identity,
  .profile-layout:has(#personaje:not([hidden])) .profile-play-link { display: none; }
  .profile-layout:has(#personaje:not([hidden])) .profile-nav { flex-direction: row; }
  .profile-layout:has(#personaje:not([hidden])) .profile-nav a { flex: 1; justify-content: center; }
}
@media(min-width:651px) and (min-height:850px) {
  .profile-panels .expanded-studio .character-stage { position: sticky; top: 100px; align-self: start; }
}
@media(max-width:650px) {
  .profile-panels .expanded-studio { grid-template-columns: 1fr; }
  .profile-panels .expanded-studio .character-stage { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 0 12px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 43px 16px 18px; }
  .profile-panels .expanded-studio .character-render { width: 120px; margin-top: 0; grid-row: 1 / 3; }
  .profile-panels .expanded-studio .stage-orbit { top: 43px; width: 190px; height: 190px; }
  .profile-panels .expanded-studio .stage-caption { margin-top: 10px; text-align: left; align-self: end; }
  .profile-panels .expanded-studio .stage-caption > span { font-size: 7px; letter-spacing: 1px; }
  .profile-panels .expanded-studio .stage-caption strong { font-size: 24px; }
  .expanded-studio .stage-platform { display: none; }
  .studio-palette { margin: 12px 0 20px; width: fit-content; align-self: start; }
  .studio-lookbook { max-width: none; padding-top: 16px; grid-column: 1 / -1; }
  .studio-look { display: flex; align-items: center; justify-content: center; padding: 4px; }
  .studio-look svg { width: 35px; margin: 0; }
  .studio-look strong { font-size: 9px; }
  .studio-panel { min-height: 0; }
  .expanded-studio .character-save-row { margin-top: 8px; }
  .studio-tools > span { display: none; }
  .studio-tools { justify-content: flex-end; }
  .studio-tabs button { font-size: 10px; }
  .expanded-studio .character-option > span { min-height: 42px; }
}
@media(prefers-reduced-motion:reduce) { .studio-panel { animation: none; }.studio-look { transition: none; } }


/* 20. Expedición con Google Street View y mapa de respuesta independiente. */
#game-dialog.geo-game { width: min(1160px,calc(100vw - 36px)); max-width: none; }
.geo-game .game-shell { padding: 28px; }
.geo-game .game-header { padding-right: 36px; }
.geo-intro { display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 32px; padding: 25px 28px; border: 1px solid #c5f58425; border-radius: 14px; background: radial-gradient(ellipse at 90% 60%,#c5f58412,transparent 55%),#111d17; }
.geo-intro h3 { font: 500 clamp(26px,4vw,40px)/1.15 var(--display); max-width: 570px; margin: 15px 0; letter-spacing: -1px; }
.geo-intro p:not(.eyebrow) { font-size: 13px; color: #abbda6; line-height: 1.8; max-width: 520px; }
.geo-intro-art { border-radius: 50%; background: radial-gradient(#afca7020,transparent 70%); }
.geo-intro-art .animal-svg { width: 100%; height: auto; }
.geo-intro-stats { display: flex; flex-wrap: wrap; gap: 30px; margin: 24px 0 0; }
.geo-intro-stats strong { display: block; font: 500 27px var(--display); color: #c5f584; }
.geo-intro-stats span { display: block; margin-top: 5px; font-size: 10px; color: #9eaf93; }
.geo-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; padding: 24px 20px 10px; color: #cbd8be; font-size: 12px; line-height: 1.7; }
.geo-round-title { font: 500 23px var(--display); margin: 15px 0 22px; }
.geo-round-title:focus { outline: none; }
.geo-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,1fr); align-items: start; gap: 22px; }
.geo-scene,.geo-map-panel { min-width: 0; }
.geo-street-frame { position: relative; height: 440px; background: #080e0c; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.geo-panorama { height: 100%; width: 100%; position: relative; z-index: 0; }
.geo-navigation-status { font-size: 11px; line-height: 1.65; color: #adc79b; margin: 6px 0 12px; }
.geo-navigation-status.is-warning { color: #edc78f; padding: 10px 12px; border: 1px solid #edc78f35; border-radius: 8px; background: #edc78f09; }
.geo-connection { margin: 18px 0; padding: 16px 18px; border: 1px solid #c5f58428; border-radius: 10px; background: #152119; color: #bbcca9; font-size: 12px; line-height: 1.7; }
.geo-connection strong { display: block; color: #e1e8da; }
.geo-connection p { margin: 5px 0 0; }
.geo-connection ~ .button { margin: 0 10px 8px 0; }
.geo-game .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.geo-compass { margin-left: auto; align-self: center; font: 11px var(--display); color: var(--accent); letter-spacing: 1px; }
/* Conserva tamaños nativos y atribuciones de Google dentro de sus visores. */
.geo-map .gm-style img,.geo-panorama .gm-style img { max-width: none; }
.geo-load-status { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; padding: 24px; text-align: center; color: #bfd3ac; background: #111b16; font-size: 13px; }
.geo-load-status[hidden] { display: none; }
.geo-credit { color: #9eac96; font-size: 10px; line-height: 1.8; margin: 12px 2px; }
.geo-credit a { text-decoration: underline; text-underline-offset: 3px; }
.geo-hint { border: 1px solid var(--line); padding: 13px 15px; border-radius: 8px; color: #b8cba9; font-size: 12px; }
.geo-hint summary { cursor: pointer; }
.geo-hint p { margin: 12px 0 0; line-height: 1.7; }
.geo-map-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.geo-map-heading strong { font: 500 17px var(--display); }
.geo-map-heading > span { color: #8caa7b; font: 8px var(--display); letter-spacing: 1px; }
.geo-map { height: 340px; width: 100%; border: 1px solid #d9e1ce35; border-radius: 10px; z-index: 0; background: #cbd6d5; cursor: crosshair; }
.geo-map-status { font-size: 10px; line-height: 1.6; color: #a7b89a; min-height: 16px; }
.geo-map-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.geo-map-tools .button { font-size: 11px; padding: 10px 12px; }
.geo-selection { color: #c2d2b7; font-size: 11px; line-height: 1.7; min-height: 38px; }
.geo-confirm { width: 100%; justify-content: center; }
.geo-confirm:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.geo-pin { background: transparent; border: 0; }
.geo-pin > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #6ebce5; border: 2px solid #fff; box-shadow: 0 3px 8px #0007; font: bold 16px Arial; color: #17394a; }
.geo-pin-actual > span { background: #c5f584; color: #264c22; }
.geo-reveal { margin-top: 22px; padding: 22px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border: 1px solid #c5f58435; border-radius: 12px; background: #c5f58407; }
.geo-reveal[hidden] { display: none; }
.geo-reveal h4 { font: 500 22px var(--display); margin: 10px 0; }
.geo-reveal p:not(.eyebrow) { font-size: 12px; line-height: 1.8; max-width: 400px; color: #b0c3a1; }
.geo-distance { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.geo-distance strong { font: 500 25px var(--display); color: var(--accent); }
.geo-distance strong:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.geo-distance span { grid-row: 2; font-size: 10px; color: #a6b898; }
.geo-results { padding: 0; list-style: none; margin: 22px 0; }
.geo-results li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px; border-bottom: 1px solid var(--line); }
.geo-results strong { display: block; font-size: 14px; }
.geo-results span { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.geo-results b { color: var(--accent); white-space: nowrap; font-size: 14px; }
@media(max-width:800px) {
  .geo-layout { grid-template-columns: 1fr; gap: 22px; }
  .geo-street-frame { height: 360px; }
  .geo-map { height: 320px; }
  .geo-intro { grid-template-columns: 1fr 130px; padding: 20px; gap: 16px; }
  .geo-steps { grid-template-columns: 1fr; gap: 10px; }
}
@media(max-width:500px) {
  #game-dialog.geo-game { width: calc(100vw - 14px); }
  .geo-game .game-shell { padding: 18px 14px; }
  .geo-intro { grid-template-columns: 1fr; }
  .geo-intro-art { display: none; }
  .geo-street-frame { height: 320px; }
  .geo-round-title { font-size: 20px; }
  .geo-reveal { padding: 16px; }
  .geo-reveal .button { width: 100%; }
  .geo-game .result-score strong { font-size: 34px; }
}
@media(min-width:801px) and (max-height:800px) {
  .geo-game .game-shell { padding: 20px 24px; }
  .geo-game .game-hud { margin: 14px 0; padding: 10px 0; }
  .geo-game .game-header h2 { font-size: 25px; }
  .geo-round-title { margin: 12px 0 16px; font-size: 21px; }
  .geo-street-frame { height: 360px; }
  .geo-map { height: 250px; }
  .geo-selection { min-height: 19px; }
}

/* 21. Expedición como página completa. Street View ocupa el escenario. */
body.geo-page-open { overflow: hidden; }
body.geo-page-open > .site-header,body.geo-page-open > main,body.geo-page-open > .skip-link { display: none; }
#geo-page { position: fixed; inset: 0; z-index: 100; height: 100dvh; overflow: auto; overscroll-behavior: contain; color: var(--text); background: radial-gradient(ellipse at 80% 15%,#344b293b,transparent 60%),#0c1410; }
#geo-page:focus { outline: none; }
#geo-page > .game-shell { max-width: 1120px; margin: 0 auto; padding: 32px 36px 60px; }
#geo-page .game-header { display: flex; justify-content: space-between; align-items: center; padding: 0; gap: 16px; margin-bottom: 32px; }
#geo-page .game-header h2 { font: 500 20px var(--display); margin: 0; }
#geo-page .game-header .eyebrow { margin: 0 0 6px; font-size: 8px; letter-spacing: 2px; }
#geo-page .game-header .dialog-close { position: static; width: auto; height: auto; flex: 0 0 auto; padding: 11px 16px; font: 500 12px var(--body); border: 1px solid #ffffff24; border-radius: 8px; background: #111b16dd; color: #d6e2cc; }
#geo-page .geo-intro { padding: clamp(24px,4vw,60px); grid-template-columns: 1fr 260px; min-height: 370px; }
#geo-page .geo-intro h3 { font-size: clamp(34px,4.6vw,56px); }
#geo-page .geo-intro-art { filter: drop-shadow(0 20px 30px #0005); }
#geo-page .game-exit { position: fixed; z-index: 20; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(430px,calc(100% - 32px)); margin: 0; padding: 28px; background: #162119; box-shadow: 0 0 0 100vmax #050a08c9,0 24px 100px #0008; border-color: #c5f58455; border-radius: 16px; }
#geo-page .game-exit p { font-size: 15px; }
#geo-page.geo-playing { overflow: hidden; background: #111b16; }
#geo-page.geo-playing > .game-shell { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0; }
#geo-page.geo-playing .game-header { position: absolute; inset: 0 0 auto; height: 86px; padding: 16px 24px; z-index: 5; margin: 0; background: linear-gradient(#07100fe8,#07100f9c,transparent); pointer-events: none; }
#geo-page.geo-playing .game-header .dialog-close { pointer-events: auto; backdrop-filter: blur(14px); }
#geo-page.geo-playing .game-header h2 { font-size: 17px; text-shadow: 0 2px 12px #000; }
#geo-page.geo-playing .game-hud { position: absolute; z-index: 6; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; padding: 13px 20px; gap: 22px; flex-wrap: nowrap; border: 1px solid #ffffff26; border-radius: 12px; background: #0c1815d9; backdrop-filter: blur(16px); box-shadow: 0 8px 35px #0003; color: #ecf2e8; white-space: nowrap; font-size: 12px; }
#geo-page.geo-playing #game-score { font-weight: 700; color: var(--accent); }
#geo-page.geo-playing #game-content { position: absolute; inset: 0; }
#geo-page.geo-playing .geo-layout,#geo-page.geo-playing .geo-scene { position: absolute; inset: 0; display: block; }
#geo-page.geo-playing .geo-street-frame { position: absolute; inset: 0; height: 100%; border: 0; border-radius: 0; }
#geo-page.geo-playing .geo-round-title,#geo-page.geo-playing .geo-scene > .geo-map-heading,#geo-page.geo-playing .geo-scene > .game-player-note,#geo-page.geo-playing #game-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#geo-page.geo-playing .geo-scene > .geo-map-tools { position: absolute; z-index: 3; left: 24px; bottom: 62px; display: flex; gap: 10px; margin: 0; padding: 7px; background: #0c1815db; border: 1px solid #ffffff26; border-radius: 12px; backdrop-filter: blur(16px); box-shadow: 0 8px 30px #0003; }
#geo-page .geo-compass { padding: 0 13px; min-width: 90px; text-align: center; }
#geo-page.geo-playing .geo-navigation-status { position: absolute; top: 93px; left: 24px; z-index: 3; margin: 0; max-width: min(420px,calc(100% - 48px)); padding: 9px 13px; color: #f0f5e9; background: #101b16cc; border: 1px solid #ffffff20; border-radius: 8px; font-size: 11px; backdrop-filter: blur(12px); }
#geo-page.geo-playing .geo-navigation-status.is-warning { color: #ffdfac; background: #292417ed; }
#geo-page.geo-playing .geo-map-panel { position: absolute; right: 24px; bottom: 56px; z-index: 4; width: min(350px,calc(100% - 48px)); padding: 12px; border: 1px solid #e0f7c347; border-radius: 16px; background: #0d1a16ed; backdrop-filter: blur(18px); box-shadow: 0 18px 70px #0006; transition: width .22s ease; }
#geo-page .geo-map-heading { margin: 0 0 10px; }
#geo-page .geo-map-heading strong { font-size: 14px; }
#geo-page .geo-map-actions { display: flex; gap: 5px; }
#geo-page .geo-map-actions .button { padding: 8px 10px; font-size: 10px; border-radius: 7px; }
#geo-page .geo-map { height: clamp(150px,27dvh,255px); border-radius: 9px; }
#geo-page .geo-map-tools { gap: 6px; margin: 8px 0; }
#geo-page .geo-map-status { margin: 8px 0; font-size: 10px; }
#geo-page .geo-map-tools .button { padding: 8px 10px; font-size: 10px; }
#geo-page .geo-selection { margin: 8px 0 12px; min-height: 0; font-size: 10px; }
#geo-page .geo-confirm { min-height: 42px; font-size: 12px; padding: 12px; }
#geo-page .geo-map-panel.is-collapsed { width: 245px; }
#geo-page .geo-map-panel.is-collapsed .geo-map-heading { margin: 0; }
#geo-page .geo-map-panel.is-expanded:not(.is-collapsed) { width: min(620px,calc(100% - 48px)); }
#geo-page .geo-map-panel.is-expanded .geo-map { height: clamp(180px,45dvh,470px); }
#geo-page .geo-load-status { padding: 110px 28px; font-size: 15px; background: radial-gradient(ellipse at center,#28402d,#0b1712); }
#geo-page.geo-playing .geo-reveal { position: absolute; left: 24px; bottom: 134px; z-index: 4; width: min(480px,calc(100% - 422px)); max-height: calc(100dvh - 240px); overflow: auto; margin: 0; padding: 24px; gap: 18px; background: #0d1b16f5; border-color: #c5f58466; box-shadow: 0 20px 70px #0006; backdrop-filter: blur(18px); }
#geo-page .geo-reveal h4 { font-size: 25px; }
#geo-page .geo-reveal .geo-distance { margin-right: auto; }
#geo-page .geo-reveal > .button { width: 100%; justify-content: center; }
#geo-page .geo-reveal .eyebrow { font-size: 8px; }
@media(max-width:1000px) {
  #geo-page.geo-playing .game-hud { gap: 12px; font-size: 10px; padding: 12px 14px; }
  #geo-page.geo-playing #game-clock { display: none; }
  #geo-page.geo-playing .geo-reveal { padding: 18px; }
  #geo-page .geo-map-panel.is-expanded:not(.is-collapsed) { width: min(510px,calc(100% - 48px)); }
}
@media(max-width:700px) {
  #geo-page > .game-shell { padding: 22px 18px 36px; }
  #geo-page .geo-intro { padding: 24px; grid-template-columns: 1fr; min-height: 0; }
  #geo-page .geo-intro-art { display: none; }
  #geo-page .game-header { margin-bottom: 20px; }
  #geo-page.geo-playing .game-header { height: 75px; padding: 12px; align-items: flex-start; }
  #geo-page.geo-playing .game-header h2 { font-size: 13px; }
  #geo-page.geo-playing .game-header .eyebrow { font-size: 7px; letter-spacing: 1px; }
  #geo-page.geo-playing .game-header .dialog-close { padding: 9px 11px; font-size: 11px; }
  #geo-page.geo-playing .game-hud { top: 67px; left: auto; right: 12px; transform: none; padding: 10px; font-size: 10px; gap: 10px; }
  #geo-page.geo-playing .geo-scene > .geo-map-tools { top: 65px; bottom: auto; left: 12px; gap: 0; padding: 3px; }
  #geo-page .geo-compass { min-width: 70px; padding: 0 8px; font-size: 9px; }
  #geo-page.geo-playing .geo-navigation-status { left: 12px; top: 114px; max-width: calc(100% - 24px); font-size: 10px; padding: 7px 10px; }
  #geo-page.geo-playing .geo-map-panel { right: 12px; bottom: 55px; width: min(350px,calc(100% - 24px)); padding: 10px; border-radius: 12px; max-height: calc(100dvh - 180px); overflow: auto; }
  #geo-page .geo-map-panel.is-collapsed { width: 230px; }
  #geo-page .geo-map-panel.is-expanded:not(.is-collapsed) { width: calc(100% - 24px); }
  #geo-page .geo-map,#geo-page .geo-map-panel.is-expanded .geo-map { height: clamp(135px,25dvh,220px); }
  #geo-page.geo-playing .geo-reveal { top: 156px; left: 12px; right: 12px; bottom: auto; width: auto; max-height: calc(100dvh - 285px); padding: 16px; gap: 12px; }
  #geo-page .geo-reveal h4 { margin: 5px 0; font-size: 20px; }
  #geo-page .geo-reveal p:not(.eyebrow) { display: none; }
  #geo-page .geo-reveal .geo-distance strong { font-size: 22px; }
  #geo-page .geo-answered .geo-map-panel:not(.is-collapsed) { z-index: 7; }
}
@media(max-height:540px) and (min-width:701px) {
  #geo-page.geo-playing .geo-map-panel { bottom: 35px; width: 320px; max-height: calc(100dvh - 106px); overflow: auto; }
  #geo-page .geo-map { height: 145px; }
  #geo-page .geo-map-status,#geo-page .geo-selection { margin: 6px 0; }
  #geo-page.geo-playing .geo-reveal { bottom: 112px; width: min(420px,calc(100% - 392px)); max-height: calc(100dvh - 205px); padding: 16px; }
  #geo-page .geo-reveal p:not(.eyebrow) { display: none; }
}
@media(prefers-reduced-motion:reduce) { #geo-page .geo-map-panel { transition: none; } }
@media(max-width:420px) { #geo-page .geo-compass { display: none; } }
@media(max-width:700px) and (max-height:540px) {
  #geo-page.geo-playing .game-hud { top: 12px; right: 90px; }
  #geo-page.geo-playing .geo-scene > .geo-map-tools { top: auto; bottom: 55px; }
  #geo-page.geo-playing .geo-navigation-status { top: 67px; }
  #geo-page.geo-playing .geo-reveal { top: 110px; max-height: calc(100dvh - 180px); }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 125px); }
}

/* 22. Compañero de expedición: conserva el personaje del perfil. */
.geo-companion { display: grid; grid-template-columns: 124px minmax(0,1fr); align-items: center; gap: 12px; width: 340px; pointer-events: none; }
#geo-page.geo-playing #game-content > .geo-companion { position: absolute; z-index: 3; left: 24px; bottom: 128px; }
.geo-companion-pet { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; color: #ecf5e4; pointer-events: auto; isolation: isolate; }
.geo-companion-pet::before { content: ''; position: absolute; bottom: 20px; left: 17%; width: 66%; height: 14px; background: #07120dcc; filter: blur(6px); border-radius: 50%; z-index: -1; }
.geo-companion-art { display: block; width: 124px; transform-origin: 50% 95%; animation: geo-companion-idle 5s ease-in-out infinite; filter: drop-shadow(0 4px 2px #09150b55) drop-shadow(0 10px 18px #0005); }
.geo-companion-art .animal-svg { display: block; width: 100%; height: auto; }
.geo-companion-name { max-width: 130px; margin-top: -6px; padding: 5px 13px; border: 1px solid #d7f0b74a; border-radius: 20px; background: #101f19e8; backdrop-filter: blur(12px); font: 500 10px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-companion-pet:hover .geo-companion-name { border-color: var(--accent); color: var(--accent); }
.geo-companion-pet:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; border-radius: 16px; }
.geo-companion-bubble { position: relative; align-self: center; margin-bottom: 22px; padding: 14px 16px; border: 1px solid #d4edb63d; border-radius: 14px 14px 14px 4px; color: #e2edda; background: #0c1b16ed; backdrop-filter: blur(16px); box-shadow: 0 8px 32px #0004; pointer-events: none; animation: geo-companion-speak .25s ease-out; }
.geo-companion-caption { display: block; color: #b8d891; font: 8px var(--display); letter-spacing: 1.5px; }
#geo-page .geo-companion-bubble p { font-size: 11px; line-height: 1.65; margin: 7px 0 0; color: #e2edda; }
.geo-companion[data-mood="happy"] .geo-companion-art { animation: geo-companion-celebrate .65s ease-in-out 2,geo-companion-idle 5s ease-in-out 1.3s infinite; }
.geo-companion[data-mood="happy"] .geo-companion-bubble { border-color: #c5f5848c; }
#geo-page .geo-companion.in-result { position: static; width: 100%; grid-template-columns: 70px minmax(0,1fr); gap: 16px; margin: 0; }
#geo-page .geo-companion.in-result .geo-companion-art { width: 70px; }
#geo-page .geo-companion.in-result .geo-companion-name { max-width: 100px; font-size: 9px; padding: 4px 9px; }
#geo-page .geo-companion.in-result .geo-companion-bubble { margin: 0; padding: 12px 14px; box-shadow: none; background: #c5f58407; }
#geo-page .geo-reveal .geo-companion-bubble p { display: block; }
#geo-page #game-content[data-view="result"] > .geo-companion { max-width: 510px; margin: 24px 0; }
@keyframes geo-companion-idle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes geo-companion-celebrate { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-12px) rotate(-5deg); } 70% { transform: translateY(-3px) rotate(4deg); } }
@keyframes geo-companion-speak { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1000px) and (min-width:701px) {
  .geo-companion { grid-template-columns: 100px minmax(0,1fr); width: 300px; gap: 8px; }
  .geo-companion-art { width: 100px; }
}
@media(max-width:700px) {
  #geo-page.geo-playing #game-content > .geo-companion { left: 12px; bottom: 56px; width: 60px; display: block; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel:not(.is-collapsed)) > .geo-companion { top: 162px; bottom: auto; }
  #geo-page.geo-playing #game-content > .geo-companion .geo-companion-art { width: 60px; }
  #geo-page.geo-playing #game-content > .geo-companion .geo-companion-name { max-width: 80px; font-size: 8px; padding: 4px 8px; }
  #geo-page.geo-playing #game-content > .geo-companion .geo-companion-bubble { position: absolute; bottom: calc(100% + 10px); left: 0; width: 205px; margin: 0; padding: 12px; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel:not(.is-collapsed)) > .geo-companion .geo-companion-bubble { top: 0; bottom: auto; left: 73px; width: min(205px,calc(100vw - 105px)); }
  #geo-page .geo-companion.in-result { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
  #geo-page .geo-companion.in-result .geo-companion-art { width: 48px; }
  #geo-page .geo-companion.in-result .geo-companion-caption { display: none; }
  #geo-page .geo-companion.in-result .geo-companion-bubble { padding: 8px 10px; }
  #geo-page .geo-companion.in-result .geo-companion-bubble p { margin: 0; font-size: 10px; }
}
@media(max-height:540px) and (min-width:701px) {
  #geo-page.geo-playing #game-content > .geo-companion { bottom: 122px; grid-template-columns: 72px minmax(0,1fr); width: 285px; }
  #geo-page.geo-playing #game-content > .geo-companion .geo-companion-art { width: 72px; }
}
@media(prefers-reduced-motion:reduce) { .geo-companion-art,.geo-companion[data-mood="happy"] .geo-companion-art,.geo-companion-bubble { animation: none; } }

/* 23. Tiempo, sonido y animación del compañero durante la expedición. */
.geo-time-settings { border: 1px solid #c5f58430; border-radius: 12px; padding: 16px 20px; margin: 20px 0; }
.geo-time-settings legend { color: #d7eac4; padding: 0 8px; font-size: 13px; }
.geo-time-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-time-choices .button { font-size: 12px; padding: 10px 15px; }
.geo-time-choices .button[aria-pressed="true"] { color: #192514; background: var(--accent); border-color: var(--accent); }
#geo-page.geo-playing #game-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; color: var(--accent); }
.geo-clock-value { font: 600 23px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.geo-clock-caption { font: 8px/1.3 var(--body); color: #c5d6b9; }
#geo-page.geo-playing .game-hud { align-items: center; padding-block: 9px; }
#geo-page.geo-playing #game-clock.clock-urgent { color: #ffc094; }
#geo-page .clock-urgent .geo-clock-value { animation: geo-clock-beat 1s ease-in-out infinite; }
.geo-time-track { position: absolute; top: 82px; left: 0; right: 0; height: 3px; z-index: 5; overflow: hidden; background: #07130c45; pointer-events: none; }
.geo-time-track > span { display: block; width: 100%; height: 100%; background: #c5f584; transform-origin: left; transition: transform .12s linear; box-shadow: 0 0 12px #c5f58499; }
.geo-time-track.is-urgent > span { background: #ffb783; }
#geo-page .game-audio-controls { display: flex; width: auto; pointer-events: auto; padding: 8px 10px; border: 1px solid #ffffff28; border-radius: 10px; background: #101e17e8; backdrop-filter: blur(16px); gap: 10px; }
#geo-page.geo-playing .game-audio-controls { position: absolute; top: 94px; right: 24px; }
#geo-page .game-volume { width: 65px; }
#geo-page #game-music-toggle { font-size: 11px; }
.geo-companion [data-motion] { transform-box: view-box; }
.geo-companion [data-motion="tail"] { transform-origin: 202px 300px; animation: geo-tail-sway 3s ease-in-out infinite; }
.geo-companion [data-motion="head"] { transform-origin: 150px 212px; animation: geo-head-look 7s ease-in-out infinite; }
.geo-companion [data-motion="eyes"] { transform-origin: 150px 154px; animation: geo-eye-blink 5s ease-in-out infinite; }
.geo-companion [data-motion="arm-left"] { transform-origin: 109px 228px; }
.geo-companion [data-motion="arm-right"] { transform-origin: 184px 228px; }
.geo-companion[data-motion="wave"] [data-motion="arm-right"],.geo-companion[data-mood="happy"] [data-motion="arm-right"] { animation: geo-paw-wave .65s ease-in-out 2; }
.geo-companion[data-motion="walk"] .geo-companion-art { animation: geo-walking .35s ease-in-out 4; }
.geo-companion[data-motion="walk"] [data-motion="arm-left"] { animation: geo-arm-walk .35s ease-in-out 4 alternate; }
.geo-companion[data-motion="walk"] [data-motion="arm-right"] { animation: geo-arm-walk .35s ease-in-out 4 alternate-reverse; }
.geo-companion[data-mood="urgent"] .geo-companion-art { animation: geo-walking .55s ease-in-out infinite; }
.geo-companion[data-mood="urgent"] .geo-companion-name { color: #ffe5c7; border-color: #e8ac70; }
.geo-companion[data-mood="encourage"] [data-motion="head"] { animation: geo-head-nod .8s ease-in-out 2; }
@keyframes geo-tail-sway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes geo-head-look { 0%,35%,100% { transform: rotate(0); } 45%,55% { transform: rotate(-4deg); } 75%,85% { transform: rotate(3deg); } }
@keyframes geo-eye-blink { 0%,42%,47%,100% { transform: scaleY(1); } 44%,45% { transform: scaleY(.08); } }
@keyframes geo-paw-wave { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-115deg); } 60% { transform: rotate(-88deg); } 80% { transform: rotate(-112deg); } }
@keyframes geo-arm-walk { from { transform: rotate(-14deg); } to { transform: rotate(15deg); } }
@keyframes geo-walking { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes geo-head-nod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(6deg) translateY(2px); } }
@keyframes geo-clock-beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media(max-width:700px) {
  #geo-page .game-header { flex-wrap: wrap; }
  #geo-page:not(.geo-playing) .game-audio-controls { order: 3; flex-basis: 100%; }
  #geo-page.geo-playing .game-hud { top: 61px; left: 12px; right: 12px; transform: none; padding: 7px 12px; justify-content: space-between; }
  #geo-page .geo-clock-value { font-size: 19px; }
  #geo-page .geo-clock-caption { font-size: 7px; }
  #geo-page.geo-playing #game-clock { min-width: 90px; }
  #geo-page .geo-time-track { top: 109px; }
  #geo-page.geo-playing .game-audio-controls { top: 120px; right: 12px; padding: 5px 7px; gap: 6px; }
  #geo-page .game-volume { width: 52px; }
  #geo-page.geo-playing .geo-scene > .geo-map-tools { top: 120px; bottom: auto; }
  #geo-page .geo-compass { display: none; }
  #geo-page.geo-playing .geo-navigation-status:not(.is-warning) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  #geo-page.geo-playing .geo-navigation-status.is-warning { top: 164px; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel:not(.is-collapsed)) > .geo-companion { top: 214px; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 228px); }
  #geo-page.geo-playing .geo-reveal { top: 169px; max-height: calc(100dvh - 290px); }
}
@media(prefers-reduced-motion:reduce) {
  #geo-page .geo-companion .geo-companion-art,#geo-page .geo-companion [data-motion],#geo-page .clock-urgent .geo-clock-value { animation: none; }
  .geo-time-track > span { transition: none; }
}

/* 24. Controles independientes para el mapa y la cámara. */
#geo-page .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
#geo-page .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#geo-page .geo-map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
#geo-page .geo-map-instruction { color: #bdcbb4; font-size: 8px; letter-spacing: 1.2px; }
#geo-page .geo-zoom-tools { display: flex; align-items: center; gap: 4px; }
#geo-page .geo-zoom-tools .button { width: 32px; min-height: 32px; padding: 0; font-size: 19px; border-radius: 7px; }
#geo-page .geo-zoom-level { min-width: 22px; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; color: #bdcbb4; }
#geo-page .geo-map-status.is-warning { color: #ffce94; }
#geo-page .geo-map-panel .geo-map-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#geo-page .geo-map-panel .geo-map-tools .button { justify-content: center; min-height: 34px; }
#geo-page .geo-map-actions .has-marker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #65bdec; }
#geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 220px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #526946 #122019; }
#geo-page .geo-camera-tools { position: absolute; top: 143px; left: 24px; z-index: 3; display: flex; gap: 5px; padding: 5px; border: 1px solid #ffffff26; border-radius: 10px; background: #0c1815db; backdrop-filter: blur(16px); }
#geo-page .geo-camera-tools .button { min-width: 38px; min-height: 36px; padding: 7px; font-size: 15px; border-radius: 6px; justify-content: center; }
#geo-page .geo-camera-tools .button:first-child { font-size: 12px; }
#geo-page .geo-answered .geo-map-panel .geo-map-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(min-width:701px) and (max-height:700px) {
  #geo-page.geo-playing .geo-map-panel { bottom: 35px; max-height: calc(100dvh - 200px); }
  #geo-page .geo-map { height: 150px; }
}
@media(max-width:700px) {
  #geo-page .geo-camera-tools { top: 174px; left: 12px; }
  #geo-page .geo-camera-tools .button { min-width: 34px; min-height: 32px; padding: 5px; }
  #geo-page.geo-playing .geo-navigation-status.is-warning { top: 216px; max-width: calc(100% - 24px); }
  #geo-page.geo-playing #game-content:has(.geo-map-panel:not(.is-collapsed)) > .geo-companion { top: 260px; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 228px); }
  #geo-page .geo-map-panel .geo-map-tools { gap: 4px; }
  #geo-page .geo-map-panel .geo-map-tools .button { min-height: 32px; padding: 6px; }
}
@media(max-width:700px) and (max-height:500px) {
  #geo-page.geo-playing .game-header { height: 54px; }
  #geo-page.geo-playing .game-hud { top: 8px; left: auto; right: 90px; width: 220px; }
  #geo-page .geo-time-track { top: 53px; }
  #geo-page.geo-playing .game-audio-controls { top: 64px; }
  #geo-page.geo-playing .geo-scene > .geo-map-tools { top: 64px; }
  #geo-page .geo-camera-tools { top: 114px; }
  #geo-page.geo-playing .geo-map-panel { bottom: 35px; width: min(320px,calc(100% - 24px)); max-height: calc(100dvh - 142px); }
  #geo-page.geo-playing #game-content:has(.geo-map-panel:not(.is-collapsed)) > .geo-companion { top: auto; bottom: 40px; }
  #geo-page.geo-playing .geo-reveal { top: 112px; max-height: calc(100dvh - 162px); }
}

/* 25. Minimap permanente: el resultado vive junto a los dos marcadores. */
#geo-page.geo-playing .geo-map-panel { display: flex; flex-direction: column; overflow: hidden; }
#geo-page .geo-map-heading,#geo-page .geo-map-toolbar { flex: 0 0 auto; }
#geo-page .geo-map-body { display: flex; flex-direction: column; min-height: 0; }
#geo-page .geo-map { flex: 0 0 auto; }
#geo-page .geo-map-details { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #526946 #122019; }
#geo-page .geo-map-panel.is-expanded .geo-map { height: clamp(140px,30dvh,300px); }
#geo-page .geo-map-result { display: grid; gap: 10px; padding: 12px 0 4px; }
#geo-page .geo-map-result[hidden] { display: none; }
#geo-page .geo-map-distance { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: #c5f5840c; border: 1px solid #c5f58435; border-radius: 10px; }
#geo-page .geo-map-distance span { font-size: 11px; color: #bed0b2; }
#geo-page .geo-map-distance strong { font: 600 clamp(24px,3vw,34px) var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
#geo-page .geo-map-result-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
#geo-page .geo-map-result-heading strong { font-size: 13px; }
#geo-page .geo-map-result-heading span,#geo-page .geo-map-result-score { font-size: 10px; color: #b6c9aa; }
#geo-page .geo-map-result > .button { width: 100%; min-height: 40px; font-size: 12px; justify-content: center; }
#geo-page .geo-map-next { flex: 0 0 auto; width: 100%; min-height: 40px; margin-top: 10px; padding: 10px; font-size: 12px; justify-content: center; }
@media(max-width:700px) {
  #geo-page .geo-map,#geo-page .geo-map-panel.is-expanded .geo-map { height: clamp(100px,23dvh,185px); }
  #geo-page .geo-map-distance { padding: 9px 12px; }
  #geo-page .geo-map-distance strong { font-size: 27px; }
}
@media(max-height:500px) {
  #geo-page .geo-map,#geo-page .geo-map-panel.is-expanded .geo-map { height: 95px; }
}

/* 26. Navegación de la expedición y recuperación de rutas sin cobertura. */
#geo-page .geo-loading > .geo-companion,#geo-page .geo-loading .geo-walk-controls,#geo-page .geo-loading .geo-camera-tools { visibility: hidden; }
#geo-page .geo-walk-controls { position: absolute; z-index: 3; left: 24px; bottom: 56px; width: min(370px,calc(100% - 435px)); padding: 12px; display: grid; gap: 9px; border: 1px solid #ffffff30; border-radius: 14px; background: #0c1815eb; backdrop-filter: blur(16px); box-shadow: 0 12px 36px #0004; }
#geo-page .geo-walk-controls > .geo-map-tools { margin: 0; align-items: center; justify-content: space-between; }
#geo-page .geo-walk-row { display: grid; grid-template-columns: 1fr 36px 1fr 36px; gap: 5px; }
#geo-page .geo-walk-row .button { min-height: 40px; padding: 7px 5px; font-size: 11px; justify-content: center; border-radius: 8px; }
#geo-page .geo-walk-row .button[aria-label] { font-size: 22px; }
#geo-page .geo-walk-hint { font-size: 9px; line-height: 1.5; color: #bdd0b2; }
#geo-page.geo-playing #game-content > .geo-companion { bottom: 225px; }
#geo-page .geo-load-status { padding: 155px max(28px,calc((100% - 420px)*.12)) 70px 28px; align-items: flex-start; width: calc(100% - 395px); }
#geo-page .geo-load-status strong { font: 500 clamp(22px,3vw,36px) var(--display); text-align: left; max-width: 480px; }
#geo-page .geo-load-status p { font-size: 14px; line-height: 1.7; text-align: left; max-width: 440px; }
@media(max-width:1000px) and (min-width:701px) {
  #geo-page .geo-walk-controls { width: calc(100% - 435px); }
  #geo-page .geo-walk-row { grid-template-columns: 1fr 32px 1fr 32px; }
  #geo-page .geo-walk-controls .geo-compass { min-width: 65px; padding: 0 6px; font-size: 9px; }
}
@media(max-width:700px) {
  #geo-page .geo-walk-controls { top: 164px; bottom: auto; left: 12px; width: calc(100% - 92px); padding: 7px; gap: 5px; }
  #geo-page .geo-walk-row { grid-template-columns: 1fr 28px 1fr 28px; gap: 3px; }
  #geo-page .geo-walk-row .button { font-size: 9px; min-height: 32px; padding: 4px; }
  #geo-page .geo-walk-row .button[aria-label] { font-size: 18px; }
  #geo-page .geo-walk-hint { font-size: 8px; }
  #geo-page .geo-camera-tools { top: 120px; left: 12px; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 340px); }
  #geo-page.geo-playing #game-content:has(.geo-map-panel) > .geo-companion { top: 164px; bottom: auto; left: auto; right: 12px; width: 56px; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel) > .geo-companion .geo-companion-art { width: 56px; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel) > .geo-companion .geo-companion-bubble { left: auto; right: 65px; top: 0; bottom: auto; width: min(205px,calc(100vw - 95px)); }
  #geo-page .geo-load-status { width: 100%; padding: 275px 18px 55px; justify-content: flex-start; }
  #geo-page .geo-load-status strong { font-size: 20px; }
  #geo-page .geo-load-status p { font-size: 12px; }
  #geo-page.geo-playing .geo-navigation-status.is-warning { top: 270px; }
}
@media(max-height:500px) and (min-width:601px) {
  #geo-page .geo-walk-controls { top: auto; bottom: 35px; width: min(310px,calc(100% - 380px)); }
  #geo-page .geo-walk-hint { display: none; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel) > .geo-companion { top: 145px; left: 12px; right: auto; width: 48px; bottom: auto; }
  #geo-page.geo-playing #game-content:has(.geo-map-panel) > .geo-companion .geo-companion-bubble { left: 62px; right: auto; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 142px); }
  #geo-page .geo-load-status { width: calc(100% - 350px); padding: 120px 18px 125px; overflow-y: auto; }
  #geo-page .geo-load-status strong { font-size: 18px; }
  #geo-page .geo-load-status p { font-size: 11px; }
}

/* 27. Expedición mundial en tres etapas. */
#geo-page:not(.geo-playing) .geo-intro { min-height: 280px; grid-template-columns: 1fr 200px; padding: 32px 36px; }
#geo-page:not(.geo-playing) .geo-intro h3 { font-size: clamp(30px,4vw,46px); }
.geo-route-summary { margin: 14px 0; color: #b1c4a4; font-size: 12px; line-height: 1.7; }
.geo-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border: 1px solid #d5edbf26; border-radius: 12px; overflow: hidden; }
.geo-journey-step { display: flex; flex-direction: column; gap: 7px; padding: 18px 22px; border-right: 1px solid #d5edbf26; }
.geo-journey-step:last-child { border-right: 0; }
.geo-journey-rounds { font-size: 8px; letter-spacing: 1.5px; color: #a2b795; }
.geo-journey-step strong { font: 500 18px var(--display); color: #c5f584; }
.geo-journey-step[data-level="2"] strong { color: #eed09b; }
.geo-journey-step[data-level="3"] strong { color: #d5b6ef; }
.geo-journey-step > span:not(.geo-journey-rounds) { font-size: 11px; color: #d6e3cb; }
.geo-journey-step p { font-size: 11px; line-height: 1.7; color: #9eb393; margin: 0; }
.geo-stage-badge { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 10px; color: #c5f584; }
.geo-stage-badge strong { color: #e4eedc; font-weight: 500; }
.geo-stage-badge[data-level="2"] { color: #eed09b; }
.geo-stage-badge[data-level="3"] { color: #d5b6ef; }
.geo-round-dots { display: flex; gap: 5px; }
.geo-round-dots span { display: grid; place-items: center; flex: 1; height: 20px; background: #ffffff06; border: 1px solid #ffffff15; border-radius: 4px; color: #849779; font-size: 9px; }
.geo-round-dots .is-current { background: #c5f58412; border-color: #c5f58477; color: #c5f584; }
.geo-round-dots [data-level="2"].is-current { background: #eed09b12; border-color: #eed09b77; color: #eed09b; }
.geo-round-dots [data-level="3"].is-current { background: #d5b6ef12; border-color: #d5b6ef77; color: #d5b6ef; }
.geo-round-dots .is-complete { color: #c5f584; background: #c5f5840a; }
#geo-page.geo-playing #game-content > .geo-companion { bottom: 280px; }
@media(max-width:700px) {
  #geo-page:not(.geo-playing) .geo-intro { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
  .geo-journey { grid-template-columns: 1fr; }
  .geo-journey-step { border-right: 0; border-bottom: 1px solid #d5edbf26; padding: 15px 18px; }
  .geo-journey-step:last-child { border-bottom: 0; }
  .geo-stage-badge { font-size: 8px; }
  .geo-round-dots { display: none; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 365px); }
}
@media(max-height:500px) and (min-width:601px) {
  .geo-round-dots { display: none; }
  #geo-page.geo-playing .geo-map-panel { max-height: calc(100dvh - 142px); }
}
/* 28. Pasaporte secreto: expedientes, pistas y sellos de viaje. */
.passport-visual { background: radial-gradient(ellipse at 70% 30%,#657c8940,transparent 65%),repeating-linear-gradient(0deg,transparent 0 29px,#98b2b709 30px),#15252b; overflow: hidden; }
.passport-preview { position: absolute; width: 145px; height: 140px; top: 40px; left: calc(50% - 85px); transform: rotate(-10deg); padding: 12px; background: #243c42; border: 1px solid #cabb864d; border-radius: 4px 12px 12px 4px; box-shadow: inset 5px 0 #0f20254d,8px 14px 25px #0005; text-align: center; color: #e4d7a6; transition: transform .3s; }
.passport-preview > span:first-child,.passport-preview small { display: block; font: 6px var(--display); letter-spacing: 1px; }
.passport-preview > strong { display: block; margin-top: 8px; font: 13px/1.4 var(--display); letter-spacing: 2px; }
.passport-cover-seal { display: grid; place-items: center; width: 70px; height: 70px; margin: 20px auto; border: 1px solid #cabb8670; outline: 1px solid #cabb8638; outline-offset: 6px; border-radius: 50%; color: #e4d7a6; font: 44px Georgia,serif; }
.passport-preview .passport-cover-seal { width: 28px; height: 28px; margin: 10px auto; font-size: 24px; outline-offset: 3px; }
.passport-preview-ticket { position: absolute; top: 128px; left: 54%; transform: rotate(9deg); padding: 14px; border: 1px dashed #c4daca70; background: #d8ddc9; color: #334d44; font: 8px/1.9 var(--display); box-shadow: 0 8px 18px #0004; }
.passport-preview-ticket b { font-size: 10px; }
.game-card:hover .passport-preview { transform: rotate(-5deg) translateY(-5px); }
#game-dialog.passport-game { width: min(1050px,calc(100% - 24px)); background: #101c1c; border: 1px solid #a1c4bd38; border-radius: 16px; scrollbar-width: thin; scrollbar-color: #49645e #101c1c; }
.passport-game .game-shell { padding: 28px 32px; background: radial-gradient(ellipse at 100% 0,#729e9620,transparent 55%); }
.passport-game .game-hud { background: #08121270; border: 1px solid #a1c4bd20; border-radius: 8px; padding: 12px 16px; }
.passport-eyebrow { color: #cbbc8c; font: 9px/1.6 var(--display); letter-spacing: 1.8px; }
.passport-intro { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; margin: 30px 0; }
.passport-book { padding: 30px 20px; text-align: center; color: #e4d7a6; background: linear-gradient(110deg,#263f42,#1c3035); box-shadow: inset 6px 0 #0002,10px 20px 35px #0004; border: 1px solid #cabb8660; border-radius: 5px 20px 20px 5px; transform: rotate(-5deg); }
.passport-book small { display: block; font: 8px/1.8 var(--display); letter-spacing: 1.6px; }
.passport-book strong { display: block; white-space: pre-line; margin-top: 25px; font: 26px/1.5 var(--display); letter-spacing: 3px; }
.passport-intro h3 { font: 500 clamp(26px,3vw,38px)/1.2 var(--display); white-space: pre-line; letter-spacing: -1px; margin: 12px 0; }
.passport-rewards { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #cbbc8c30; border-radius: 9px; overflow: hidden; }
.passport-rewards > div { text-align: center; padding: 12px 5px; background: #cbbc8c08; }
.passport-rewards > div + div { border-left: 1px solid #cbbc8c20; }
.passport-rewards strong,.passport-rewards span { display: block; }
.passport-rewards strong { color: #e4d7a6; font: 21px var(--display); }
.passport-rewards span { font-size: 10px; color: #acbbb0; margin-top: 5px; }
.passport-layout { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 22px; align-items: start; }
.passport-dossier { padding: 23px; border: 1px solid #aac5b62b; border-radius: 12px; background: #0a151566; min-width: 0; }
.passport-dossier-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font: 9px/1.6 var(--display); letter-spacing: 1px; color: #93aaa0; }
.passport-dossier-heading strong { color: #e4d7a6; font-size: 12px; letter-spacing: 0; }
.passport-stage-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.passport-stage-preview > div { border-left: 2px solid var(--stage-color); padding: 5px 10px; background: #a9c9b506; }
.passport-stage-preview small { display: block; font: 8px/1.6 var(--display); color: #99ada3; }
.passport-stage-preview strong { display: block; margin-top: 5px; font: 12px var(--display); color: var(--stage-color); }
.passport-stage-preview [data-level="0"],.passport-stage[data-level="0"] { --stage-color: #b5d89e; }
.passport-stage-preview [data-level="1"],.passport-stage[data-level="1"] { --stage-color: #e1c18c; }
.passport-stage-preview [data-level="2"],.passport-stage[data-level="2"] { --stage-color: #cbb2ec; }
.passport-stage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--stage-color); }
.passport-stage strong { font: 10px var(--display); }
.passport-stage > span:last-child { font-size: 10px; color: #93aaa0; flex-basis: 100%; }
.passport-stage-bars { display: flex; gap: 3px; align-items: end; height: 14px; }
.passport-stage-bars i { display: block; width: 4px; height: 5px; background: #95b3a522; border-radius: 1px; }
.passport-stage-bars i:nth-child(2) { height: 9px; }.passport-stage-bars i:nth-child(3) { height: 14px; }
.passport-stage-bars .is-on { background: var(--stage-color); }
.passport-dossier .question-text { font-size: 23px; margin: 17px 0; }
.passport-clues { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.passport-clue { display: flex; gap: 14px; align-items: center; min-height: 72px; border: 1px dashed #abc9bf25; border-radius: 8px; padding: 12px 14px; color: #90a49b; background: repeating-linear-gradient(135deg,transparent 0 8px,#a8bba503 8px 9px); }
.passport-clue.is-open { border-style: solid; border-color: #cbbc8c45; background: linear-gradient(100deg,#cbbc8c12,transparent); animation: passport-reveal .3s ease-out; }
.passport-clue-number { font: 19px var(--display); color: #cbbc8c; opacity: .6; }
.passport-clue small { text-transform: uppercase; letter-spacing: 1.2px; font: 8px/1.6 var(--display); }
.passport-clue p { font-size: 13px; line-height: 1.6; margin: 3px 0 0; }
.passport-clue.is-open p { color: #e1e7d9; }
#passport-reveal { width: 100%; font-size: 11px; border-style: dashed; color: #e4d7a6; }
#passport-reveal:disabled { opacity: .5; cursor: default; }
.passport-answer-label { margin: 24px 0 10px; font-size: 11px; color: #a4b9ae; }
.passport-game .answer-button { gap: 12px; padding: 12px; min-width: 0; }
.passport-option-letter { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid #b2c3af30; border-radius: 5px; color: #a3b7ad; font-size: 10px; }
.passport-journal { padding: 17px; border: 1px solid #cbbc8c25; border-radius: 12px; background: #cbbc8c05; }
.passport-journal h4 { font: 18px/1.4 var(--display); margin: 7px 0 18px; }
.passport-stamps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; gap: 10px; margin: 20px 0; }
.passport-journal .passport-stamps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.passport-stamps li { min-height: 103px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 10px 5px; gap: 6px; border: 1px dashed #b3c3aa33; border-radius: 9px; }
.passport-stamps li > span { color: #7c948955; font: 26px var(--display); }
.passport-stamps small { color: #9bafa3; font-size: 9px; line-height: 1.5; }
.passport-stamps strong { color: #dbe4cf; font: 11px/1.4 var(--display); overflow-wrap: anywhere; }
.passport-stamps img { object-fit: contain; border-radius: 2px; }
.passport-stamps .is-current { border-color: #cbbc8c99; background: #cbbc8c08; }
.passport-stamps .is-current > span { color: #cbbc8c; }
.passport-stamps .is-stamped { border: 1px solid #c5f58466; background: #c5f58408; animation: passport-reveal .3s ease-out; }
.passport-stamps .is-stamped small { color: #c5f584; }
.passport-stamps .is-missed { border-style: solid; border-color: #d4a98640; }
.passport-companion { display: flex; gap: 16px; align-items: center; padding: 10px 14px; border: 1px solid #a7c2b322; border-radius: 10px; background: #0a15154d; }
.passport-pet { width: 85px; flex: 0 0 85px; animation: passport-breathe 4s ease-in-out infinite; }
.passport-pet .animal-svg { display: block; width: 100%; height: auto; }
.passport-companion small { color: #cbbc8c; font: 9px/1.6 var(--display); }
.passport-companion p { margin: 7px 0 0; color: #b9cabc; font-size: 12px; line-height: 1.7; }
.passport-journal .passport-companion { flex-direction: column; gap: 5px; text-align: center; border: 0; padding: 8px 0; background: transparent; }
.passport-journal .passport-pet { width: 110px; flex-basis: auto; }
.passport-companion.is-happy .passport-pet { animation: passport-celebrate .55s ease-in-out 2; }
.passport-resolution { margin-top: 20px; padding: 18px; background: #cbbc8c0a; border: 1px solid #cbbc8c44; border-radius: 9px; animation: passport-reveal .3s ease-out; }
.passport-resolution > strong { font: 9px var(--display); letter-spacing: 1.5px; color: #dfc9a4; }
.passport-resolution.is-success { border-color: #c5f58466; }
.passport-resolution.is-success > strong { color: #c5f584; }
.passport-resolution p { font-size: 13px; line-height: 1.6; margin: 9px 0 15px; }
.passport-resolution .button { width: 100%; }
.passport-review { display: grid; gap: 8px; }
.passport-review details { border: 1px solid #a1c4bd30; border-radius: 8px; padding: 15px; font-size: 12px; color: #bccfbf; }
.passport-review summary { cursor: pointer; line-height: 1.7; color: #e0dec8; }
.passport-review ol { padding-left: 20px; line-height: 1.8; margin-top: 14px; }
/* El tablero visual mantiene ocultas las ilustraciones de las pistas cerradas. */
#game-dialog.passport-game { width: min(1180px,calc(100% - 24px)); }
.passport-game .game-shell { background: radial-gradient(ellipse at 90% 0,#769ba526,transparent 55%),repeating-linear-gradient(90deg,transparent 0 47px,#a9c7b503 48px),#101c1c; }
.passport-intro { grid-template-columns: 320px 1fr; gap: 48px; }
.passport-intro-art { position: relative; display: grid; place-items: center; min-height: 330px; isolation: isolate; }
.passport-intro-art::before { content: ''; position: absolute; width: 285px; height: 285px; border: 1px dashed #abc7ba40; border-radius: 50%; box-shadow: 0 0 0 28px #9db6a705,0 0 0 55px #9db6a704; z-index: -2; }
.passport-intro-art > .passport-clue-art { position: absolute; width: 155px; padding: 7px 7px 22px; background: #d8d4ba; border: 1px solid #ede5c3; box-shadow: 0 15px 25px #0005; border-radius: 3px; }
.passport-intro-art > .passport-clue-art:first-child { top: 8px; right: -8px; transform: rotate(13deg); z-index: -1; }
.passport-intro-art > .passport-clue-art:nth-child(2) { bottom: 1px; left: -10px; transform: rotate(-15deg); z-index: 1; }
.passport-intro-art .passport-book { width: 215px; transform: rotate(-6deg); }
.passport-route { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); list-style: none; padding: 18px 0 22px; margin: 0 0 20px; border-block: 1px solid #aac7b41c; }
.passport-route li { display: flex; align-items: center; flex-direction: column; gap: 9px; position: relative; text-align: center; padding: 0 5px; }
.passport-route li:not(:last-child)::after { content: ''; position: absolute; width: calc(100% - 40px); left: calc(50% + 20px); top: 18px; border-top: 1px dashed #839c8b55; }
.passport-route li > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #89a6a038; background: #182d2c; color: #93aaa0; font: 11px var(--display); }
.passport-route small { font-size: 9px; color: #849c91; line-height: 1.4; max-width: 100%; overflow-wrap: anywhere; }
.passport-route .is-current > span { background: #d9c38c; color: #23372e; border-color: #e1d2a5; box-shadow: 0 0 0 5px #d9c38c13,0 0 25px #d9c38c15; }
.passport-route .is-current small { color: #e2d7ad; }
.passport-route .is-complete > span { color: #c5f584; border-color: #c5f58477; background: #c5f58412; }
.passport-route .is-missed > span { color: #d7b08e; border-color: #d7b08e55; }
.passport-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 25px; }
.passport-dossier { background: #0b1719; box-shadow: 0 15px 35px #0002; }
.passport-prize { display: grid; gap: 7px; min-width: 125px; }
.passport-points-meter { display: flex; gap: 4px; }
.passport-points-meter span { height: 5px; flex: 1; background: #d6c18d16; border-radius: 2px; transition: background .25s; }
.passport-points-meter .is-lit { background: #d6c18d; box-shadow: 0 0 9px #d6c18d20; }
.passport-clues { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.passport-clue { position: relative; display: grid; grid-template-columns: 1fr; align-content: start; align-items: start; gap: 0; padding: 8px; overflow: hidden; border-radius: 10px; }
.passport-clue .passport-clue-art { width: 100%; border-radius: 6px; overflow: hidden; }
.passport-clue-art svg { display: block; width: 100%; height: auto; max-height: 124px; stroke: none; }
.passport-clue .passport-clue-art svg { background: #24434a; }
.passport-clue:not(.is-open) .passport-clue-art svg { background: #17292d; }
.passport-clue:not(.is-open) .passport-clue-art { opacity: .62; }
.passport-clue-number { position: absolute; top: 15px; left: 15px; color: #e1d2a8; background: #0f2429d9; border: 1px solid #d9c38c35; border-radius: 4px; padding: 5px 6px; font-size: 9px; opacity: 1; }
.passport-clue > div:last-child { padding: 10px 5px 5px; }
.passport-clue p { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.passport-clue small { font-size: 8px; color: #d4bd89; }
.passport-clue:not(.is-open) small { color: #839d94; }
.passport-clue.is-open { background: #d1c09009; }
#passport-reveal { border-style: solid; min-height: 45px; background: #d6c18d0b; border-color: #d6c18d40; }
#passport-reveal:not(:disabled):hover { background: #d6c18d1d; border-color: #d6c18d80; }
.passport-game .answer-button { position: relative; gap: 12px; padding: 13px 12px; min-height: 72px; background: #b4d2bd05; border-color: #abc8b72b; font-size: 12px; }
.passport-game .answer-button:not(:disabled):hover { border-color: #ddca9480; background: #ddca9410; transform: translateY(-2px); }
.passport-answer-flag { width: 45px; height: 34px; object-fit: cover; border: 1px solid #dce5d633; border-radius: 4px; box-shadow: 0 4px 9px #0003; flex: 0 0 45px; }
.passport-game .passport-option-letter { position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; font-size: 7px; border: 0; opacity: .6; }
.passport-game .answer-button > span:not(.passport-option-letter) { overflow-wrap: anywhere; }
.passport-game .answer-button.answer-correct { border-color: #c5f584; background: #c5f58417; }
.passport-game .answer-button.answer-wrong { border-color: #db997b; background: #db997b17; }
.passport-journal { position: relative; background: repeating-linear-gradient(0deg,transparent 0 27px,#d4c19306 28px),linear-gradient(115deg,#24342d,#182925); border-color: #d2c39545; box-shadow: inset 6px 0 #080f102e,8px 10px 30px #0002; padding: 22px; }
.passport-journal::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; border-left: 1px solid #d2c39520; }
.passport-journal h4 { color: #ece3c6; font-size: 23px; }
.passport-stamps li { border-radius: 50%; aspect-ratio: 1; min-height: 0; border: 2px dashed #b3c3aa33; padding: 13px 8px; }
.passport-stamps li.is-stamped { border: 3px double #b6d99799; border-radius: 10px; transform: rotate(-4deg); box-shadow: inset 0 0 0 3px #b6d9970a; }
.passport-stamps li.is-stamped:nth-child(even) { transform: rotate(4deg); }
.passport-stamps li.is-missed { border: 3px double #c9aa7c60; border-radius: 10px; transform: rotate(3deg); }
.passport-stamps .is-stamped img { width: 38px; height: 28px; filter: saturate(.75); }
.passport-stamps .is-current { outline: 1px solid #d8c18c22; outline-offset: 4px; }
.passport-journal .passport-companion { padding-top: 22px; }
.passport-journal .passport-pet { width: 145px; filter: drop-shadow(0 9px 9px #0004); }
.passport-journal .passport-companion > div:last-child { background: #0b191975; border: 1px solid #d2c39525; border-radius: 10px; padding: 13px; }
.passport-resolution { display: grid; grid-template-columns: 74px 1fr; column-gap: 18px; align-items: center; }
.passport-reveal-flag { grid-row: 1 / 3; width: 74px; height: 56px; object-fit: cover; border: 3px solid #dfd6b6; border-radius: 3px; transform: rotate(-5deg); box-shadow: 0 4px 12px #0003; }
.passport-resolution > strong,.passport-resolution > p { grid-column: 2; }
.passport-resolution .button { grid-column: 1 / -1; margin-top: 8px; }
.passport-game [data-view="result"] > .passport-stamps { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px; padding: 20px; border: 1px solid #cbbc8c30; border-radius: 12px; background: #cbbc8c08; }
@keyframes passport-reveal { from { opacity: .3; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes passport-breathe { 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes passport-celebrate { 50% { transform: translateY(-9px) rotate(-4deg); } }
@media(max-width:760px) {
  .passport-game .game-shell { padding: 22px 18px; }
  .passport-intro { grid-template-columns: 180px 1fr; gap: 26px; }
  .passport-intro-art { min-height: 270px; }.passport-intro-art .passport-book { width: 155px; }
  .passport-intro-art::before { width: 190px; height: 190px; box-shadow: none; }
  .passport-intro-art > .passport-clue-art { width: 110px; }
  .passport-book { padding: 22px 12px; }.passport-book strong { font-size: 18px; }
  .passport-layout { grid-template-columns: 1fr; }
  .passport-journal .passport-stamps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .passport-journal .passport-companion { flex-direction: row; text-align: left; }
  .passport-journal .passport-pet { flex: 0 0 70px; }
  .passport-journal .passport-stamps { max-width: 420px; margin-inline: auto; gap: 18px; }
  .passport-game [data-view="result"] > .passport-stamps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:480px) {
  .passport-intro { grid-template-columns: 1fr; margin-top: 20px; }
  .passport-intro-art { min-height: 230px; width: 240px; margin-inline: auto; }
  .passport-intro-art .passport-book { display: block; width: 150px; padding: 14px; }
  .passport-intro-art .passport-book strong { margin-top: 12px; font-size: 17px; }
  .passport-intro-art .passport-cover-seal { width: 48px; height: 48px; font-size: 30px; margin: 15px auto; }
  .passport-dossier { padding: 16px; }.passport-dossier .question-text { font-size: 20px; }
  .passport-rewards strong { font-size: 18px; }
  .passport-game .answer-grid { grid-template-columns: 1fr; }
  .passport-game .result-score { flex-wrap: wrap; }.passport-game .result-score strong { font-size: 28px; }
  .passport-route { padding-block: 15px; gap: 2px; }.passport-route li { padding: 0; }
  .passport-route li > span { width: 29px; height: 29px; font-size: 9px; }
  .passport-route li:not(:last-child)::after { top: 14px; width: calc(100% - 32px); left: calc(50% + 16px); }
  .passport-route small { font-size: 8px; }.passport-clues { gap: 8px; }
  .passport-clue { padding: 5px; }.passport-clue p { font-size: 11px; }
  .passport-clue-number { top: 10px; left: 10px; padding: 3px; }
  .passport-dossier-heading { align-items: start; }.passport-prize { min-width: 110px; }
  .passport-dossier-heading > span { font-size: 8px; letter-spacing: .5px; }
  .passport-game .answer-button { min-height: 60px; }
}
@media(prefers-reduced-motion:reduce) {
  .passport-clue.is-open,.passport-stamps .is-stamped,.passport-resolution,.passport-pet,.passport-companion.is-happy .passport-pet { animation: none; }
  .passport-preview { transition: none; }
  .passport-points-meter span { transition: none; }
  .passport-game .answer-button:not(:disabled):hover { transform: none; }
}