:root {
  color-scheme: dark;
  --night: #090b16;
  --night-2: #101426;
  --panel: #171b30;
  --panel-2: #202641;
  --paper: #f7f3e8;
  --muted: #aeb4c8;
  --gold: #f0bd4f;
  --gold-light: #ffe096;
  --red: #ef586d;
  --green: #55d39a;
  --accent: #8c6bdf;
  --accent-soft: rgba(140, 107, 223, .2);
  --line: rgba(255,255,255,.1);
  --shadow: 0 28px 90px rgba(0,0,0,.48);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--paper);
  background: #050711;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, a { font: inherit; }
button { color: inherit; touch-action: manipulation; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.5px);
  background-size: 42px 42px; opacity: .12;
}
.ambient span { position: absolute; width: 34rem; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .13; }
.ambient span:nth-child(1) { left: -14rem; top: -10rem; background: #7050d0; }
.ambient span:nth-child(2) { right: -15rem; top: 25%; background: #1d8dad; }
.ambient span:nth-child(3) { left: 15%; bottom: -22rem; background: #c55b42; }

.game-shell {
  --accent: #8c6bdf;
  --accent-soft: rgba(140,107,223,.2);
  position: relative;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(140,107,223,.18), transparent 34rem),
    linear-gradient(180deg, #11152a 0%, var(--night) 100%);
  box-shadow: var(--shadow);
}

.screen {
  display: none;
  min-height: 100svh;
  padding: max(25px, calc(env(safe-area-inset-top) + 18px)) 20px max(92px, calc(env(safe-area-inset-bottom) + 82px));
}
.screen.is-active { display: flex; flex-direction: column; animation: screen-in .34s ease both; }

.eyebrow, .brand-kicker {
  margin: 0;
  color: var(--gold-light);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

.loading-screen { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 42%,rgba(240,189,79,.1),transparent 22rem); }
.loading-portal { position:relative; width:184px; aspect-ratio:1; margin-bottom:30px; display:grid; place-items:center; }
.loading-orbit { position:absolute; inset:0; border:1px solid rgba(240,189,79,.28); border-radius:50%; }
.loading-orbit::before,.loading-orbit::after { content:""; position:absolute; width:8px; aspect-ratio:1; border-radius:50%; background:var(--gold); box-shadow:0 0 18px var(--gold); }
.loading-orbit::before { left:17px; top:22px; }.loading-orbit::after { right:10px; bottom:40px; width:6px; }
.loading-orbit-one { animation:orbit 3s linear infinite; }
.loading-orbit-two { inset:19px -10px; border-color:rgba(140,107,223,.35); transform:rotate(56deg); animation:orbit-back 4.2s linear infinite; }
.loading-logo { position:relative; z-index:2; width:116px; aspect-ratio:1; padding:5px; overflow:hidden; border:2px solid var(--gold); border-radius:50%; background:#12162b; box-shadow:0 0 0 8px rgba(240,189,79,.055),0 0 60px rgba(240,189,79,.22); }
.loading-logo img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 46%; filter:contrast(1.05); }
.loading-star { position:absolute; z-index:3; width:5px; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; animation:twinkle 1.5s ease-in-out infinite alternate; }
.star-one { left:-12px; top:48%; }.star-two { right:3px; top:2px; animation-delay:.4s; }.star-three { right:-16px; bottom:28px; animation-delay:.8s; }
.loading-screen h1 { margin-top:8px; font-size:clamp(2rem,9vw,2.75rem); }
.loading-copy { margin:11px 0 0; color:var(--muted); font-size:.88rem; }
.loading-progress { width:min(250px,68vw); height:4px; margin-top:24px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.loading-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8c6bdf,var(--gold),#43bcbc); box-shadow:0 0 16px var(--gold); animation:loading-progress 1.5s cubic-bezier(.2,.8,.2,1) forwards; }

.topbar, .run-header, .question-header, .page-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.topbar-actions,.run-actions { display:flex; align-items:center; gap:8px; }
.sound-control { width:35px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(240,189,79,.24); border-radius:50%; color:var(--gold-light); background:rgba(240,189,79,.07); cursor:pointer; }
.sound-control span { font-size:1rem; font-weight:900; line-height:1; }
.sound-control.is-muted { color:#777e96; border-color:var(--line); background:rgba(255,255,255,.025); }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-lockup div { display: grid; gap: 2px; }
.brand-lockup strong { font-family: Georgia, serif; font-size: 1rem; }
.brand-lockup small { color: var(--muted); font-size:.75rem; }
.mini-seal { width:42px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; padding:3px; border:1px solid rgba(240,189,79,.68); border-radius:50%; background:#12162b; box-shadow:inset 0 0 0 2px #12162b,0 0 18px rgba(240,189,79,.1); }
.mini-seal img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 45%; filter:contrast(1.08) sepia(.08); }
.level-pill, .collection-count { min-height: 34px; padding: 0 13px; border: 1px solid rgba(240,189,79,.28); border-radius: 99px; color: var(--gold-light); background: rgba(240,189,79,.08); font-size:.75rem; font-weight: 800; }

.resource-row { display: flex; justify-content: space-between; gap: 8px; margin: 20px 0 17px; }
.resource { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size:.75rem; white-space: nowrap; }
.resource strong { color: var(--paper); }
.resource i { font-style: normal; }
.heart { color: var(--red); }.coin { color: var(--gold); }.flame { color: #ff855c; }

.hero-panel {
  position: relative; min-height: 430px; padding: 30px 25px 24px; overflow: hidden;
  border: 1px solid rgba(164,132,236,.32); border-radius: 26px;
  background:
    radial-gradient(circle at 80% 12%, rgba(78,193,204,.18), transparent 12rem),
    radial-gradient(circle at 10% 55%, rgba(140,107,223,.2), transparent 13rem),
    linear-gradient(145deg, rgba(32,38,65,.96), rgba(17,20,39,.98));
  box-shadow: 0 24px 55px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08);
}
.hero-panel::before { content: ""; position: absolute; width: 240px; aspect-ratio: 1; right: -95px; top: -70px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(255,255,255,.018); }
.hero-constellation { position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(circle at 18% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 73% 32%, #fff 0 1px, transparent 2px), radial-gradient(circle at 55% 12%, #fff 0 1px, transparent 2px), linear-gradient(36deg, transparent 48%, rgba(255,255,255,.09) 49%, transparent 50%); background-size: 150px 120px, 180px 150px, 210px 160px, 100% 100%; }
.hero-emblem { position:relative; width:124px; aspect-ratio:1; margin:4px auto 24px; display:grid; place-items:center; border:1px solid rgba(240,189,79,.5); border-radius:50%; background:radial-gradient(circle,rgba(240,189,79,.18),rgba(240,189,79,.025) 52%,transparent 68%); box-shadow:0 0 0 9px rgba(240,189,79,.04),0 0 44px rgba(240,189,79,.18),inset 0 0 24px rgba(240,189,79,.05); }
.hero-emblem::before, .hero-emblem::after { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; animation: orbit 18s linear infinite; }
.hero-emblem::after { inset: 25px; animation-direction: reverse; }
.hero-emblem > .emblem-orbit-dot { position:absolute; top:-5px; width:10px; aspect-ratio:1; border-radius:50%; background:var(--gold); box-shadow:0 0 16px var(--gold); }
.hourglass-widget { position:relative; width:48px; height:66px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)); animation:hourglass-flip 5.4s cubic-bezier(.55,.04,.45,.96) infinite; transform-origin:center; }
.hourglass-cap { position:relative; z-index:4; width:52px; height:7px; display:block; border:1px solid #fff0ba; border-radius:3px; background:linear-gradient(180deg,#fff0ad,#c78527 52%,#704318); box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.75); }
.hourglass-glass { position:absolute; z-index:2; left:7px; top:7px; width:34px; height:52px; display:block; overflow:hidden; border:2px solid rgba(220,240,255,.72); background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(128,188,214,.06) 36%,rgba(255,255,255,.22) 72%,rgba(255,255,255,.04)); clip-path:polygon(0 0,100% 0,68% 43%,68% 57%,100% 100%,0 100%,32% 57%,32% 43%); box-shadow:inset 0 0 8px rgba(255,255,255,.24); }
.hourglass-glass::before,.hourglass-glass::after { content:""; position:absolute; z-index:5; top:0; bottom:0; width:4px; background:linear-gradient(90deg,rgba(255,255,255,.44),transparent); }.hourglass-glass::before { left:4px; }.hourglass-glass::after { right:4px; transform:scaleX(-1); }
.hourglass-glass .sand-top { position:absolute; left:4px; right:4px; top:5px; height:18px; background:linear-gradient(#ffe8a1,#e8a33e); clip-path:polygon(0 0,100% 0,55% 100%,45% 100%); transform-origin:top; animation:sand-drain 5.4s linear infinite; }
.hourglass-glass .sand-stream { position:absolute; z-index:3; left:50%; top:21px; width:2px; height:16px; transform:translateX(-50%); background:#ffd46c; box-shadow:0 0 5px #ffd46c; animation:sand-stream 5.4s linear infinite; }
.hourglass-glass .sand-bottom { position:absolute; left:4px; right:4px; bottom:4px; height:19px; background:linear-gradient(0deg,#d28728,#ffe09a); clip-path:polygon(45% 0,55% 0,100% 100%,0 100%); transform-origin:bottom; animation:sand-fill 5.4s linear infinite; }
.hero-copy { position: relative; text-align: center; }
.hero-copy h1 { margin-top: 7px; font-size: clamp(2.35rem, 9.5vw, 3.45rem); letter-spacing: -.04em; }
.hero-copy > p:last-child { max-width: 34ch; margin: 13px auto 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.mission-progress { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 25px 0 18px; color: var(--muted); font-size: .7rem; }
.mission-progress span strong { color: var(--paper); }
.mission-progress > div { grid-column: 1/-1; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.mission-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),#ff8566); transition: width .4s ease; }

.primary-button { position: relative; width: 100%; min-height: 57px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 16px; color: #1b1420; background: linear-gradient(135deg,#ffd46c,var(--gold)); box-shadow: 0 12px 26px rgba(240,189,79,.2), inset 0 1px rgba(255,255,255,.55); font-weight: 900; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.primary-button b { font-size: 1.2rem; }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:active { transform: translateY(1px) scale(.992); }
.primary-button:disabled { opacity: .55; cursor: default; transform: none; }

.category-preview { margin-top: 25px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.section-heading h2 { margin-top: 4px; font-size: 1.45rem; }
.section-heading button { padding: 7px 0; border: 0; color: var(--gold-light); background: none; font-size:.75rem; font-weight: 800; cursor: pointer; }
.badge-row { display: flex; gap: 12px; margin-top: 15px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.badge-row::-webkit-scrollbar { display: none; }
.mini-badge { flex: 0 0 76px; text-align: center; }
.guardian-avatar { display:block; background-image:url("guardian-atlas-v1.png"); background-size:300% 200%; background-repeat:no-repeat; }
.category-antiguo { background-position:0 0; }.category-imperios { background-position:50% 0; }.category-revoluciones { background-position:100% 0; }.category-ciencia { background-position:0 100%; }.category-conflictos { background-position:50% 100%; }.category-americas { background-position:100% 100%; }
.mini-badge span { width:64px; aspect-ratio:1; margin:0 auto; border:2px solid color-mix(in srgb,var(--badge) 65%,transparent); border-radius:21px; box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.28); }
.mini-badge.is-locked span { border-color:var(--line); filter:grayscale(1) brightness(.52); }
.mini-badge small { display: block; margin-top: 7px; overflow: hidden; color: var(--muted); font-size:.75rem; text-overflow: ellipsis; white-space: nowrap; }

.bottom-nav { position: absolute; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; height: 65px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(255,255,255,.1); border-radius: 21px; background: rgba(18,22,41,.94); box-shadow: 0 13px 30px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(16px); }
.bottom-nav.is-hidden { display: none; }
.bottom-nav button { border: 0; border-radius: 18px; color: #777e96; background: none; cursor: pointer; }
.bottom-nav span, .bottom-nav b { display: block; }
.bottom-nav span { font-size: 1.25rem; line-height: 1; }
.bottom-nav b { margin-top: 5px; font-size:.75rem; }
.bottom-nav button.is-active { color: var(--gold-light); background: linear-gradient(180deg,rgba(240,189,79,.1),transparent); }

.page-header { justify-content: flex-start; }
.page-header > div { flex: 1; }
.page-header h1 { margin-top: 3px; font-size: 2rem; }
.icon-button { width: 42px; aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--paper); background: rgba(255,255,255,.04); font-size: 1.35rem; cursor: pointer; }
.page-intro { max-width: 38ch; margin: 24px 0 20px; color: var(--muted); line-height: 1.55; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.collection-card { --badge:#8c6bdf; position:relative; min-height:226px; padding:14px; overflow:hidden; border:1px solid color-mix(in srgb,var(--badge) 38%,transparent); border-radius:22px; background:linear-gradient(150deg,color-mix(in srgb,var(--badge) 13%,#171b30),#121628); }
.collection-card.is-locked { --badge:#72778a !important; filter: saturate(.4); }
.collection-symbol { width:100%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--badge) 58%,transparent); border-radius:15px; background-size:300% 200%; box-shadow:inset 0 0 35px rgba(0,0,0,.12); }
.collection-card.is-locked .collection-symbol { filter:grayscale(1) brightness(.48); }
.guardian-name { display:block; margin-top:11px; color:var(--badge); font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.collection-card h3 { position:relative; z-index:1; margin-top:5px; font-size:1.02rem; }
.collection-card p { position: relative; z-index: 1; margin: 6px 0 13px; color: var(--muted); font-size: .7rem; }
.badge-progress { position: relative; z-index: 1; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.badge-progress i { display: block; height: 100%; border-radius: inherit; background: var(--badge); }
.collection-tip { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 17px; border: 1px solid rgba(240,189,79,.18); border-radius: 18px; background: rgba(240,189,79,.055); }
.collection-tip > span { color: var(--gold); font-size: 1.3rem; }
.collection-tip p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.collection-tip strong { display: block; margin-bottom: 3px; color: var(--paper); }

.profile-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-top: 28px; padding: 24px; border: 1px solid rgba(240,189,79,.2); border-radius: 25px; background: linear-gradient(145deg,rgba(240,189,79,.09),rgba(255,255,255,.025)); }
.profile-avatar { position: relative; width: 78px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold-light); background: #171b30; box-shadow: inset 0 0 0 5px #101426; font-family: Georgia,serif; font-size: 1.2rem; }
.profile-avatar i { position: absolute; right: -3px; bottom: -2px; width: 27px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #171b30; border-radius: 50%; color: #18131e; background: var(--gold); font-family: Inter,sans-serif; font-size:.75rem; font-style: normal; font-weight: 900; }
.profile-card h2 { margin-top: 5px; font-size: 1.35rem; }
.profile-card div > p:last-child { margin: 6px 0 0; color: var(--muted); font-size:.75rem; }
.xp-track { grid-column: 1/-1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.xp-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),#ff8367); }
.profile-card > small { grid-column:1/-1; margin-top:-10px; color:var(--muted); text-align:right; font-size:.75rem; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.stats-grid article { padding:19px; border:1px solid var(--line); border-radius:19px; background:rgba(255,255,255,.035); }
.stats-grid span,.stats-grid strong { display:block; }
.stats-grid span { color:var(--muted); font-size:.7rem; }
.stats-grid strong { margin-top:6px; color:var(--gold-light); font-size:1.45rem; }
.achievement-card { display:flex; align-items:center; gap:16px; margin-top:18px; padding:18px; border:1px solid rgba(140,107,223,.24); border-radius:19px; background:rgba(140,107,223,.07); }
.achievement-icon { width:53px; aspect-ratio:1; display:grid; place-items:center; border-radius:16px; color:#b99cff; background:rgba(140,107,223,.14); font-size:1.5rem; }
.achievement-card h3 { margin-top:4px; font-size:1.05rem; }
.achievement-card p:last-child { margin:5px 0 0; color:var(--muted); font-size:.7rem; }
.legal-links { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:auto; padding-top:24px; }
.legal-links a { color:#777e96; font-size:.75rem; text-underline-offset:3px; }

.wheel-screen,.question-screen,.result-screen { padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px)); }
.run-header { min-height:46px; }
.run-progress { flex:1; text-align:center; }
.run-progress > span { color:var(--muted); font-size:.75rem; font-weight:750; }
.run-progress > div { display:flex; justify-content:center; gap:5px; margin-top:8px; }
.run-progress i { width:18px; height:4px; border-radius:99px; background:rgba(255,255,255,.09); }
.run-progress i.is-done { background:var(--gold); }
.run-progress i.is-current { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.run-progress .run-guardian-token { position:relative; width:22px; height:22px; border:1px solid rgba(255,255,255,.18); border-radius:50%; opacity:.43; background-color:#11182a; background-size:300% 200%; box-shadow:inset 0 0 8px rgba(0,0,0,.55); }
.run-progress .run-guardian-token.is-progress { opacity:.82; border-color:var(--token); box-shadow:0 0 8px color-mix(in srgb,var(--token) 45%,transparent); }
.run-progress .run-guardian-token.is-won { opacity:1; border:2px solid #ffe398; box-shadow:0 0 0 2px rgba(240,189,79,.14),0 0 11px var(--token); filter:saturate(1.14) brightness(1.08); }
.lives { min-width:66px; color:#4f566c; font-size:.86rem; letter-spacing:.06em; text-align:right; white-space:nowrap; }
.lives .is-live { color:var(--red); filter:drop-shadow(0 0 7px rgba(239,88,109,.4)); }
.wheel-copy { margin-top:32px; text-align:center; }
.wheel-copy h1 { margin-top:6px; font-size:clamp(2rem,8vw,2.75rem); }
.wheel-copy > p:last-child { margin:10px 0 0; color:var(--muted); font-size:.82rem; }
.wheel-stage { position:relative; width:min(78vw,340px); aspect-ratio:1; margin:34px auto 26px; }
.wheel-glow { position:absolute; inset:16%; z-index:0; border-radius:50%; background:rgba(140,107,223,.25); filter:blur(40px); }
.wheel-pointer { position:absolute; z-index:5; left:50%; top:-8px; width:32px; height:38px; transform:translateX(-50%); background:linear-gradient(#ffe89e,var(--gold)); clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 5px 7px rgba(0,0,0,.4)); }
.wheel { position:relative; z-index:2; width:100%; height:100%; border:8px solid #242a44; border-radius:50%; background:conic-gradient(#8c6bdf 0 51.4286deg,#dc7e43 51.4286deg 102.8571deg,#e85868 102.8571deg 154.2857deg,#31adad 154.2857deg 205.7143deg,#4d76cf 205.7143deg 257.1429deg,#d6a83e 257.1429deg 308.5714deg,#f3d277 308.5714deg 360deg); box-shadow:0 0 0 3px rgba(240,189,79,.45),0 22px 45px rgba(0,0,0,.42),inset 0 0 35px rgba(0,0,0,.35); transition:transform 2.25s cubic-bezier(.12,.72,.18,1); }
.wheel::before { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.wheel::after { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0 50.4286deg,rgba(9,11,22,.48) 50.4286deg 51.4286deg); }
.wheel-label { position:absolute; z-index:3; left:calc(50% - 27px); top:calc(50% - 27px); width:54px; height:54px; display:grid; place-items:center; transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-112px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }
.wheel-label .guardian-avatar { width:100%; height:100%; border:2px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:0 5px 14px rgba(0,0,0,.38); }
.wheel-crown { width:52px; height:52px; display:grid; place-items:center; border:2px solid #fff2bd; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff3bb,#d99d31 55%,#6c4216); box-shadow:0 0 0 4px rgba(8,12,23,.72),0 8px 20px rgba(0,0,0,.58),0 0 21px rgba(255,220,128,.48); }
.wheel-crown svg { width:34px; height:34px; fill:#2b1a09; stroke:#2b1a09; stroke-width:1.5; filter:drop-shadow(0 1px rgba(255,255,255,.35)); }
.wheel-hub { position:absolute; z-index:6; left:50%; top:50%; width:102px; aspect-ratio:1; transform:translate(-50%,-50%); overflow:hidden; padding:5px; border:3px solid var(--gold); border-radius:50%; background:#101426; box-shadow:0 0 0 7px #1a1f36,0 0 0 9px rgba(240,189,79,.36),0 12px 28px rgba(0,0,0,.5); cursor:pointer; transition:filter .18s ease,box-shadow .18s ease; }
.wheel-hub img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 46%; }
.wheel-hub span { position:absolute; left:50%; bottom:4px; min-width:56px; padding:4px 8px; transform:translateX(-50%); border-radius:99px; color:#17111e; background:linear-gradient(135deg,#ffe096,var(--gold)); box-shadow:0 3px 12px rgba(0,0,0,.45); font-size:.62rem; font-weight:950; letter-spacing:.13em; }
.wheel-hub:hover:not(:disabled) { filter:brightness(1.09); box-shadow:0 0 0 7px #1a1f36,0 0 0 10px rgba(240,189,79,.55),0 12px 28px rgba(0,0,0,.5); }
.wheel-hub:active:not(:disabled) { transform:translate(-50%,-50%) scale(.96); }
.wheel-hub.is-spinning { animation:hub-pulse .72s ease-in-out infinite alternate; }
.wheel-hub.is-selected span { background:linear-gradient(135deg,#fff,var(--accent)); }
.wheel-selection { min-height:61px; display:flex; align-items:center; gap:13px; margin-bottom:15px; padding:10px 15px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.035); }
.wheel-selection > span { width:44px; aspect-ratio:1; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:13px; color:var(--accent); background-color:var(--accent-soft); font-size:1.2rem; }
.wheel-selection div { display:grid; gap:2px; }
.wheel-selection small { color:var(--muted); font-size:.75rem; }
.wheel-selection strong { font-size:.82rem; }
.wheel-next-button.is-hidden { display:none; }
.crown-selection-avatar { color:#2b1a09!important; border-color:#fff0b0!important; background:linear-gradient(145deg,#fff0ae,#c88727)!important; box-shadow:0 0 18px rgba(240,189,79,.34); }
.guardian-conquest { width:100%; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:16px auto -9px; }
.conquest-guardian { --guardian:#8c6bdf; position:relative; min-width:0; display:grid; justify-items:center; gap:3px; padding:5px 2px 6px; border:1px solid color-mix(in srgb,var(--guardian) 24%,rgba(255,255,255,.09)); border-radius:13px; background:linear-gradient(180deg,color-mix(in srgb,var(--guardian) 9%,rgba(14,21,38,.82)),rgba(6,10,20,.78)); box-shadow:inset 0 1px rgba(255,255,255,.055); }
.conquest-guardian > span { width:34px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--guardian) 52%,#ffe8ad); border-radius:50%; filter:grayscale(.55) brightness(.72); box-shadow:0 5px 10px rgba(0,0,0,.32); }
.conquest-guardian > small { color:color-mix(in srgb,var(--guardian) 68%,white); font-size:.58rem; font-weight:950; line-height:1; }
.conquest-guardian > b { display:flex; gap:2px; }
.conquest-guardian > b i { width:5px; height:2px; border-radius:99px; background:rgba(255,255,255,.12); }
.conquest-guardian > b i.is-filled { background:var(--guardian); box-shadow:0 0 5px var(--guardian); }
.conquest-guardian.is-won { border-color:#f4ce73; background:linear-gradient(180deg,rgba(240,189,79,.18),rgba(8,13,24,.88)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 15px rgba(240,189,79,.12); }
.conquest-guardian.is-won > span { border:2px solid #ffe39a; filter:none; box-shadow:0 0 0 2px rgba(240,189,79,.12),0 6px 13px rgba(0,0,0,.4),0 0 11px var(--guardian); }
.wheel-crown-hint { display:flex; align-items:center; justify-content:center; gap:5px; margin:15px 0 -16px; color:#aeb8ca; font-size:.68rem; text-align:center; }
.wheel-crown-hint span { width:21px; height:21px; display:grid; place-items:center; flex:0 0 auto; border:1px solid #ffe3a0; border-radius:50%; color:#241707; background:linear-gradient(145deg,#fff0b0,#c98729); box-shadow:0 0 10px rgba(240,189,79,.21); }
.wheel-crown-hint strong { color:#ffe299; }

.crown-screen { overflow-y:auto; padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px)); background:radial-gradient(circle at 50% 27%,rgba(240,189,79,.23),transparent 24rem),linear-gradient(180deg,rgba(4,7,15,.38),rgba(5,8,17,.96)),url("archive-chamber-premium-v7.webp") center/cover; }
.crown-screen::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 22%,rgba(255,232,173,.035) 50%,transparent 78%); animation:crown-radiance 4.2s ease-in-out infinite alternate; }
.crown-screen > * { position:relative; z-index:1; }
.crown-progress-line { width:130px; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.run-progress .crown-progress-line i { width:100%; height:100%; display:block; background:linear-gradient(90deg,#9a651c,#fff0ad,#9a651c); box-shadow:0 0 12px #f0bd4f; }
.crown-relic { position:relative; width:150px; aspect-ratio:1; display:grid; place-items:center; margin:35px auto 23px; border:1px solid rgba(255,226,153,.5); border-radius:50%; background:radial-gradient(circle,rgba(255,218,128,.25),rgba(80,51,20,.15) 52%,rgba(4,8,17,.35) 68%); box-shadow:0 0 0 8px rgba(4,8,17,.55),0 0 0 10px rgba(240,189,79,.16),0 0 60px rgba(240,189,79,.28),inset 0 0 28px rgba(255,221,139,.13); animation:crown-float 2.4s ease-in-out infinite alternate; }
.crown-relic::before,.crown-relic::after { content:""; position:absolute; inset:13px; border:1px dashed rgba(255,230,165,.28); border-radius:50%; animation:orbit 20s linear infinite; }
.crown-relic::after { inset:-17px; border-color:rgba(113,159,255,.18); animation-direction:reverse; }
.crown-relic > span,.crown-relic > i { position:absolute; width:9px; aspect-ratio:1; border-radius:50%; background:#ffe29a; box-shadow:0 0 16px #f0bd4f; }
.crown-relic > span { top:5px; }.crown-relic > i { bottom:10px; right:17px; width:6px; }
.crown-relic svg { width:91px; height:78px; overflow:visible; fill:#f0bd4f; stroke:#fff0b0; stroke-width:2; filter:drop-shadow(0 10px 15px rgba(0,0,0,.55)) drop-shadow(0 0 13px rgba(240,189,79,.32)); }
.crown-copy { text-align:center; }
.crown-copy h1 { margin-top:7px; font-size:clamp(2.1rem,8.5vw,2.9rem); }
.crown-copy > p:last-child { max-width:39ch; margin:11px auto 0; color:#c4cbda; font-size:.86rem; line-height:1.5; }
.crown-grid { display:grid; gap:9px; margin-top:22px; }
.crown-choice { --guardian:#8c6bdf; width:100%; min-height:73px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:9px 13px 9px 9px; border:1px solid color-mix(in srgb,var(--guardian) 47%,rgba(255,229,165,.18)); border-radius:18px; text-align:left; background:linear-gradient(145deg,color-mix(in srgb,var(--guardian) 14%,rgba(23,32,54,.91)),rgba(7,12,23,.94)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 23px rgba(0,0,0,.23); cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.crown-choice:hover { transform:translateX(3px); border-color:color-mix(in srgb,var(--guardian) 75%,#ffe4a0); box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 27px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--guardian) 13%,transparent); }
.crown-choice > span { width:54px; aspect-ratio:1; border:2px solid color-mix(in srgb,var(--guardian) 65%,#ffe4a0); border-radius:16px; box-shadow:0 6px 15px rgba(0,0,0,.42); }
.crown-choice > div { display:grid; gap:3px; }
.crown-choice small { color:color-mix(in srgb,var(--guardian) 67%,white); font-size:.68rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.crown-choice strong { font-family:Georgia,serif; font-size:1rem; }
.crown-choice em { color:#c0c7d6; font-size:.69rem; font-style:normal; }
.crown-choice > b { color:#ffe099; font-size:1.2rem; }
.crown-rule { display:flex; align-items:flex-start; gap:8px; margin:16px 5px 0; color:#adb6c9; font-size:.72rem; line-height:1.45; }
.crown-rule span { color:#ffe096; }

.guardian-screen { position:relative; width:100%; height:100svh; min-height:100svh; max-height:100svh; align-items:center; justify-content:flex-start; padding:max(14px,calc(env(safe-area-inset-top) + 8px)) 16px max(12px,calc(env(safe-area-inset-bottom) + 8px)); text-align:center; overflow:hidden; overscroll-behavior:none; background:radial-gradient(circle at 50% 38%,var(--accent-soft),transparent 25rem); }
.guardian-aura { position:absolute; left:50%; top:43%; width:min(110vw,500px); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:50%; box-shadow:0 0 0 50px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 100px color-mix(in srgb,var(--accent) 3%,transparent); animation:guardian-aura 1.8s ease both; }
.guardian-scene { position:relative; z-index:2; width:100%; min-height:0; flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.guardian-scene > .eyebrow { position:relative; z-index:2; flex:0 0 auto; margin:0 0 clamp(7px,1.7svh,14px); color:color-mix(in srgb,var(--accent) 72%,white); }
.guardian-greeting { position:relative; z-index:1; width:min(92vw,45svh,410px); max-width:100%; max-height:45svh; aspect-ratio:1; flex:0 1 auto; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:30px; background-image:url("guardian-greeting-atlas-v1.png"); background-size:300% 200%; background-repeat:no-repeat; box-shadow:0 24px 80px rgba(0,0,0,.52),0 0 65px var(--accent-soft); animation:guardian-arrive .72s cubic-bezier(.2,.8,.2,1) both,guardian-float 2.2s .72s ease-in-out infinite alternate; }
.guardian-screen .guardian-message { position:relative; z-index:3; width:min(92%,390px); flex:0 0 auto; margin-top:clamp(-54px,-6.5svh,-38px); padding:clamp(13px,2.2svh,18px) 18px clamp(13px,2svh,17px); border:1px solid color-mix(in srgb,var(--accent) 43%,transparent); border-radius:22px; background:rgba(15,18,34,.91); box-shadow:0 16px 40px rgba(0,0,0,.38); backdrop-filter:blur(16px); }
.guardian-message small { color:color-mix(in srgb,var(--accent) 74%,white); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.guardian-screen .guardian-message h1 { margin-top:6px; font-size:clamp(1.6rem,4svh,2.45rem); }
.guardian-screen .guardian-message p { max-width:36ch; margin:7px auto 0; color:#c3cada; font-size:clamp(.87rem,1.9svh,.96rem); line-height:1.4; }
.guardian-footer { position:relative; z-index:4; width:100%; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding-top:clamp(5px,1.2svh,12px); }
.guardian-transition { position:relative; z-index:3; width:min(280px,76vw); margin:0; color:#b8c1d3; font-size:.75rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.guardian-transition i { display:block; width:100%; height:4px; margin-top:7px; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:99px; background:rgba(255,255,255,.08); box-shadow:inset 0 1px 3px rgba(0,0,0,.4); }
.guardian-transition i::before { content:""; display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 68%,#78a9ff),var(--accent),#ffe097); box-shadow:0 0 12px var(--accent); animation:guardian-load 3.4s linear forwards; transform-origin:left; }
.guardian-skip { min-height:38px; margin-top:5px; padding:7px 18px; border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:99px; color:color-mix(in srgb,var(--accent) 62%,white); background:color-mix(in srgb,var(--accent) 7%,rgba(7,11,22,.62)); font-size:.79rem; font-weight:850; cursor:pointer; }

.question-header > div:first-child { flex:1; }
.question-header > div:first-child > span { color:var(--muted); font-size:.7rem; font-weight:800; }
.mini-progress { width:88px; height:4px; margin-top:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.mini-progress i { display:block; width:12.5%; height:100%; background:var(--accent); transition:width .3s ease; }
.score-pill { min-width:78px; padding:7px 13px; border:1px solid var(--line); border-radius:14px; text-align:center; background:rgba(255,255,255,.035); }
.score-pill small,.score-pill strong { display:block; }
.score-pill small { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.score-pill strong { margin-top:2px; color:var(--gold-light); font-size:.85rem; }
.question-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:23px; }
.category-chip,.streak-pill { display:flex; align-items:center; min-height:35px; border-radius:99px; font-size:.75rem; }
.category-chip { gap:7px; padding:0 12px 0 7px; border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); background:var(--accent-soft); }
.category-chip i { width:23px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:var(--accent); background:rgba(255,255,255,.07); font-style:normal; }
.category-chip b { color:color-mix(in srgb,var(--accent) 72%,white); }
.category-chip.is-crown { border-color:rgba(255,224,150,.7); background:linear-gradient(135deg,rgba(240,189,79,.2),var(--accent-soft)); box-shadow:0 0 18px rgba(240,189,79,.13); }
.streak-pill { padding:0 11px; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.03); }
.streak-pill strong { margin-left:5px; color:var(--gold-light); }
.streak-pill.is-hot { animation:pulse .35s ease; border-color:rgba(240,189,79,.35); }
.question-screen { background:radial-gradient(circle at 50% 18%,var(--accent-soft),transparent 24rem); }
.question-card { position:relative; margin:18px 0 0; padding:24px 18px 18px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:25px; background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.055)),rgba(255,255,255,.018)); box-shadow:0 20px 55px rgba(0,0,0,.27),0 0 42px var(--accent-soft); }
.timer { position:absolute; right:18px; top:15px; width:58px; aspect-ratio:1; display:grid; place-items:center; }
.timer svg { position:absolute; inset:0; transform:rotate(-90deg); }
.timer circle { fill:none; stroke-width:4; }
.timer-base { stroke:rgba(255,255,255,.08); }
.timer-ring { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:169.65; transition:stroke-dashoffset .35s linear,stroke .2s; }
.timer strong { font-size:.9rem; }
.timer.is-low .timer-ring { stroke:var(--red); }
.difficulty { margin:5px 72px 14px 0; color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.question-card h2 { min-height:3.2em; margin-right:0; font-size:clamp(1.55rem,6.5vw,2.15rem); line-height:1.16; letter-spacing:-.02em; }
.answers { display:grid; gap:9px; margin-top:24px; }
.answer-button { position:relative; width:100%; min-height:55px; padding:11px 42px 11px 49px; border:1px solid rgba(255,255,255,.11); border-radius:16px; color:var(--paper); text-align:left; background:rgba(255,255,255,.032); cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease,opacity .15s; }
.answer-button::before { content:attr(data-letter); position:absolute; left:12px; top:50%; width:27px; aspect-ratio:1; transform:translateY(-50%); display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:.75rem; font-weight:900; }
.answer-button:hover:not(:disabled) { transform:translateX(2px); border-color:color-mix(in srgb,var(--accent) 60%,transparent); background:var(--accent-soft); }
.answer-button:disabled { cursor:default; }
.answer-button.is-hidden { opacity:.12; pointer-events:none; }
.answer-button.is-correct { border-color:rgba(85,211,154,.72); background:rgba(85,211,154,.14); }
.answer-button.is-wrong { border-color:rgba(239,88,109,.72); background:rgba(239,88,109,.14); }
.answer-button.is-correct::after,.answer-button.is-wrong::after { position:absolute; right:15px; top:50%; transform:translateY(-50%); font-weight:950; }
.answer-button.is-correct::after { content:"✓"; color:var(--green); }.answer-button.is-wrong::after { content:"×"; color:var(--red); }
.powerups { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px; }
.powerups button { min-height:69px; padding:9px 5px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.028); cursor:pointer; }
.powerups span,.powerups b,.powerups small { display:block; }
.powerups span { color:var(--gold-light); font-size:1rem; font-weight:900; }
.powerups b { margin-top:3px; font-size:.75rem; }.powerups small { margin-top:3px; color:var(--muted); font-size:.75rem; }
.powerups button.is-used { opacity:.35; pointer-events:none; }
.powerups button.is-active { border-color:var(--gold); background:rgba(240,189,79,.09); }
.feedback-panel { position:absolute; z-index:30; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto 1fr; align-items:start; gap:13px; padding:19px; transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none; border:1px solid var(--line); border-radius:24px; background:rgba(24,29,51,.98); box-shadow:0 -18px 60px rgba(0,0,0,.55); backdrop-filter:blur(18px); transition:transform .3s ease,opacity .3s ease; }
.feedback-panel.is-visible { transform:none; opacity:1; pointer-events:auto; }
.feedback-panel.is-wrong { border-color:rgba(239,88,109,.35); }.feedback-panel.is-correct { border-color:rgba(85,211,154,.35); }
.feedback-mark { width:42px; aspect-ratio:1; display:grid; place-items:center; border-radius:14px; color:#092016; background:var(--green); font-size:1.25rem; font-weight:900; }
.feedback-panel.is-wrong .feedback-mark { color:#270910; background:var(--red); }
.feedback-panel strong { font-size:.9rem; }.feedback-panel p { margin:5px 0 0; color:var(--muted); font-size:.76rem; line-height:1.42; }
.feedback-panel button { grid-column:1/-1; min-height:45px; border:0; border-radius:13px; color:#17111e; background:var(--gold); font-size:.78rem; font-weight:900; cursor:pointer; }

.result-screen { position:relative; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.result-rays { position:absolute; width:430px; aspect-ratio:1; top:3%; background:repeating-conic-gradient(from 0deg,rgba(240,189,79,.05) 0 9deg,transparent 9deg 18deg); border-radius:50%; animation:orbit 40s linear infinite; }
.result-crest { position:relative; width:125px; aspect-ratio:1; margin-bottom:23px; display:grid; place-content:center; border:2px solid var(--gold); border-radius:32% 32% 48% 48%; background:radial-gradient(circle,rgba(240,189,79,.17),#14182a 72%); box-shadow:0 0 0 8px rgba(240,189,79,.05),0 18px 35px rgba(0,0,0,.3); }
.result-crest::before { content:""; position:absolute; inset:9px; border:1px solid rgba(240,189,79,.25); border-radius:inherit; }
.result-crest span,.result-crest small { position:relative; display:block; }
.result-crest span { color:var(--gold-light); font-family:Georgia,serif; font-size:2rem; }.result-crest small { margin-top:4px; color:var(--muted); font-size:.75rem; letter-spacing:.12em; }
.result-screen > .eyebrow,.result-screen h1,.result-summary,.result-score,.reward-row,.result-record,.result-screen > button,.result-actions,.share-status { position:relative; }
.result-screen h1 { margin-top:6px; font-size:clamp(2.1rem,8.5vw,3.1rem); }
.result-summary { max-width:36ch; margin:12px auto 14px; color:var(--muted); font-size:.84rem; line-height:1.5; }
.result-score strong,.result-score span { display:block; }.result-score strong { color:var(--gold-light); font-size:2.35rem; line-height:1; }.result-score span { margin-top:4px; color:var(--muted); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.reward-row { width:100%; display:grid; grid-template-columns:repeat(3,1fr); margin:19px 0 15px; border-block:1px solid var(--line); }
.reward-row div { padding:13px 5px; }.reward-row div+div { border-left:1px solid var(--line); }.reward-row span,.reward-row small { display:block; }.reward-row span { color:var(--gold-light); font-weight:900; }.reward-row small { margin-top:3px; color:var(--muted); font-size:.75rem; }
.result-record { width:100%; display:flex; align-items:center; gap:11px; margin-bottom:15px; padding:12px 14px; border:1px solid rgba(140,107,223,.24); border-radius:16px; text-align:left; background:rgba(140,107,223,.07); }
.result-record > span { color:#b79cff; }.result-record p { margin:0; }.result-record strong,.result-record small { display:block; }.result-record strong { font-size:.75rem; }.result-record small { margin-top:2px; color:var(--muted); font-size:.75rem; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:100%; margin-top:10px; }
.result-actions button { min-height:44px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); font-size:.75rem; font-weight:800; cursor:pointer; }
.share-status { min-height:17px; margin:9px 0 0; color:var(--muted); font-size:.75rem; }

.toast { position:absolute; z-index:60; left:50%; bottom:95px; max-width:calc(100% - 40px); padding:11px 15px; transform:translate(-50%,18px); opacity:0; pointer-events:none; border:1px solid var(--line); border-radius:13px; color:var(--paper); background:rgba(24,29,51,.96); box-shadow:0 13px 30px rgba(0,0,0,.35); font-size:.75rem; text-align:center; transition:opacity .2s,transform .2s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

button:focus-visible,a:focus-visible { outline:3px solid var(--gold-light); outline-offset:3px; }
@keyframes screen-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes orbit-back { to { transform:rotate(-304deg); } }
@keyframes pulse { 50% { transform:scale(1.07); } }
@keyframes twinkle { to { opacity:.28; transform:scale(.65); } }
@keyframes loading-progress { 0% { width:0; } 55% { width:72%; } 100% { width:100%; } }
@keyframes hub-pulse { to { box-shadow:0 0 0 7px #1a1f36,0 0 0 12px rgba(240,189,79,.55),0 12px 28px rgba(0,0,0,.5); } }
@keyframes guardian-arrive { from { opacity:0; transform:translateY(28px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes guardian-float { to { transform:translateY(-6px); } }
@keyframes guardian-aura { from { opacity:0; transform:translate(-50%,-50%) scale(.72) rotate(-14deg); } to { opacity:1; transform:translate(-50%,-50%); } }
@keyframes guardian-load { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes crown-radiance { to { opacity:.4; transform:translateY(-5px); } }
@keyframes crown-float { to { transform:translateY(-7px) scale(1.015); } }

@media (min-width:700px) {
  body { padding:24px; }
  .game-shell { min-height:calc(100svh - 48px); border:1px solid rgba(255,255,255,.08); border-radius:28px; }
  .screen { min-height:calc(100svh - 50px); padding-inline:28px; }
  .guardian-screen { height:calc(100svh - 50px); max-height:calc(100svh - 50px); }
}
@media (max-height:760px) {
  .screen { padding-top:max(17px,calc(env(safe-area-inset-top) + 10px)); }
  .resource-row { margin-block:12px; }
  .hero-panel { min-height:386px; padding-top:20px; }
  .hero-emblem { width:88px; margin-bottom:16px; }
  .hero-emblem span { font-size:2rem; }
  .hero-copy h1 { font-size:2.15rem; }
  .wheel-copy { margin-top:16px; }.wheel-stage { width:min(63vh,300px); margin-block:21px 15px; }
  .wheel-label { transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-99px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }
  .guardian-scene .guardian-greeting { width:min(92vw,43svh,360px); max-height:43svh; }.guardian-screen .guardian-message { margin-top:clamp(-48px,-6svh,-36px); }
  .question-meta { margin-top:14px; }.question-card { margin-top:12px; padding-top:18px; }.question-card h2 { min-height:auto; font-size:1.45rem; }.answers { margin-top:17px; gap:7px; }.answer-button { min-height:48px; }.powerups button { min-height:59px; }
  .result-crest { width:105px; margin-bottom:16px; }.result-screen h1 { font-size:2rem; }.result-summary { margin-block:8px; }.reward-row { margin-block:13px; }
}
@media (max-height:620px) {
  .guardian-screen { padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:max(7px,env(safe-area-inset-bottom)); }
  .guardian-scene > .eyebrow { margin-bottom:5px; }
  .guardian-scene .guardian-greeting { width:min(86vw,38svh,265px); max-height:38svh; border-radius:24px; }
  .guardian-screen .guardian-message { margin-top:-31px; padding:10px 14px; border-radius:18px; }
  .guardian-screen .guardian-message h1 { margin-top:4px; font-size:clamp(1.35rem,4.5svh,1.7rem); }
  .guardian-screen .guardian-message p { margin-top:5px; font-size:.82rem; line-height:1.32; }
  .guardian-footer { padding-top:3px; }
  .guardian-transition { font-size:.68rem; }
  .guardian-skip { min-height:33px; padding-block:5px; }
}
@media (max-width:360px) {
  .screen { padding-inline:15px; }.resource { font-size:.75rem; }.hero-panel { padding-inline:18px; }.collection-grid { gap:9px; }.collection-card { padding:10px; }.wheel-label { width:48px; height:48px; left:calc(50% - 24px); top:calc(50% - 24px); transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-97px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }.powerups b { font-size:.75rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Ecosistema de juego */
.home-screen { overflow-y:auto; }
.mode-section,.daily-section { margin-top:28px; }
.mode-live { display:flex; align-items:center; gap:7px; color:#8be4b8; font-size:.76rem; font-weight:800; }
.mode-live i { width:8px; aspect-ratio:1; border-radius:50%; background:#55d39a; box-shadow:0 0 12px #55d39a; animation:live-pulse 1.4s ease-in-out infinite; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:15px; }
.mode-card { --mode:#8c6bdf; position:relative; min-height:148px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; overflow:hidden; border:1px solid color-mix(in srgb,var(--mode) 42%,transparent); border-radius:21px; text-align:left; background:linear-gradient(145deg,color-mix(in srgb,var(--mode) 15%,#171b30),#101426); box-shadow:inset 0 1px rgba(255,255,255,.06); cursor:pointer; }
.mode-card:first-child { grid-column:1/-1; min-height:112px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.mode-card::after { content:""; position:absolute; right:-30px; top:-30px; width:100px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--mode) 22%,transparent); border-radius:50%; box-shadow:0 0 0 18px color-mix(in srgb,var(--mode) 5%,transparent); }
.mode-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--mode) 72%,transparent); }
.mode-card > * { position:relative; z-index:1; }
.mode-icon { width:45px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--mode) 62%,transparent); border-radius:14px; color:color-mix(in srgb,var(--mode) 70%,white); background:color-mix(in srgb,var(--mode) 15%,transparent); font-size:1.28rem; font-weight:900; }
.mode-card div { display:grid; gap:5px; }
.mode-card strong { font-family:Georgia,serif; font-size:1rem; }
.mode-card small { color:var(--muted); font-size:.78rem; line-height:1.35; }
.mode-card > b { margin-top:auto; color:color-mix(in srgb,var(--mode) 58%,white); font-size:.77rem; }
.mode-classic { --mode:#f0bd4f; }.mode-hangman { --mode:#a47cec; }.mode-system { --mode:#43bcbc; }.mode-friend { --mode:#ef6577; }.mode-random { --mode:#668be8; }
.mode-timeline { --mode:#d89a45; }.mode-memory { --mode:#4dd2a0; }.mode-cipher { --mode:#38d5ef; }.mode-atlas { --mode:#e17448; }
.mode-timeline::before,.mode-memory::before,.mode-cipher::before,.mode-atlas::before { content:"NUEVO"; position:absolute; z-index:2; right:10px; top:10px; padding:4px 7px; border:1px solid color-mix(in srgb,var(--mode) 55%,transparent); border-radius:99px; color:color-mix(in srgb,var(--mode) 68%,white); background:color-mix(in srgb,var(--mode) 12%,#101426); font-size:.54rem; font-weight:950; letter-spacing:.12em; }
.daily-section { margin-bottom:18px; }
.daily-section .section-heading > span { color:var(--gold-light); font-size:.8rem; font-weight:900; }
.daily-list { display:grid; gap:9px; margin-top:14px; }
.daily-list article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.03); }
.daily-list article > span { width:38px; aspect-ratio:1; display:grid; place-items:center; border-radius:12px; color:var(--gold-light); background:rgba(240,189,79,.1); font-weight:900; }
.daily-list article > div { min-width:0; display:grid; gap:3px; }
.daily-list strong { font-size:.86rem; }.daily-list small { color:var(--muted); font-size:.76rem; }
.daily-list i { height:4px; margin-top:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.daily-list i b { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),#ef6577); transition:width .3s; }
.daily-list em { color:var(--gold-light); font-size:.75rem; font-style:normal; font-weight:900; }
.achievement-heading { margin-top:31px; }
.achievement-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.legend-badge { min-height:142px; padding:14px; border:1px solid rgba(240,189,79,.25); border-radius:19px; background:linear-gradient(145deg,rgba(240,189,79,.09),rgba(255,255,255,.02)); }
.legend-badge.is-locked { filter:grayscale(1); opacity:.48; }
.legend-badge > span { width:42px; aspect-ratio:1; display:grid; place-items:center; border-radius:14px; color:#1c1521; background:linear-gradient(135deg,#ffe39b,var(--gold)); font-size:1.18rem; font-weight:900; }
.legend-badge h3 { margin-top:12px; font-size:.98rem; }.legend-badge p { margin:6px 0 0; color:var(--muted); font-size:.76rem; line-height:1.4; }
.coin-balance { padding:8px 12px; border:1px solid rgba(240,189,79,.28); border-radius:99px; color:var(--gold-light); background:rgba(240,189,79,.08); font-size:.82rem; }

.hangman-screen { background:radial-gradient(circle at 50% 31%,rgba(164,124,236,.2),transparent 25rem); }
.hangman-stage { position:relative; width:100%; margin:20px 0 14px; }
.hangman-einstein { width:100%; aspect-ratio:1.5; border:1px solid rgba(164,124,236,.35); border-radius:23px; background-image:url("einstein-hangman-atlas-v1.png"); background-size:300% 200%; background-repeat:no-repeat; box-shadow:0 18px 48px rgba(0,0,0,.38); }
.hangman-einstein.state-0 { background-position:0 0; }.hangman-einstein.state-1 { background-position:50% 0; }.hangman-einstein.state-2 { background-position:100% 0; }.hangman-einstein.state-3 { background-position:0 100%; }.hangman-einstein.state-4 { background-position:50% 100%; }.hangman-einstein.state-5,.hangman-einstein.state-6 { background-position:100% 100%; }
.hangman-status { position:absolute; left:12px; right:12px; bottom:11px; display:flex; justify-content:space-between; gap:8px; padding:9px 12px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(9,11,22,.83); backdrop-filter:blur(10px); }
.hangman-status span { color:#d7c6ff; font-size:.8rem; font-weight:900; }.hangman-status b { color:var(--muted); font-size:.76rem; }
.hangman-puzzle { padding:17px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.035); }
.hangman-clue { margin:0 0 15px; color:var(--muted); font-size:.85rem; line-height:1.5; text-align:center; }
.hangman-word { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; min-height:45px; }
.hangman-word span { width:27px; height:38px; display:grid; place-items:center; border-bottom:2px solid #c6a8ff; color:var(--paper); font-size:1.05rem; font-weight:900; }
.hangman-word span.is-space { width:10px; border:0; }
.hangman-keyboard { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-top:18px; }
.hangman-keyboard button { min-width:0; min-height:33px; padding:0; border:1px solid rgba(255,255,255,.11); border-radius:8px; color:var(--paper); background:rgba(255,255,255,.045); font-size:.72rem; font-weight:850; cursor:pointer; }
.hangman-keyboard button:disabled { opacity:.22; }.hangman-keyboard button.is-hit { color:#0c2419; background:var(--green); opacity:1; }.hangman-keyboard button.is-miss { color:#2d0b12; background:var(--red); opacity:.75; }
.hangman-aids { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.hangman-aids button { min-height:57px; border:1px solid rgba(164,124,236,.24); border-radius:15px; background:rgba(164,124,236,.06); cursor:pointer; }.hangman-aids span,.hangman-aids b,.hangman-aids small { display:block; }.hangman-aids span { float:left; margin:5px 8px 0 5px; color:#cbb3ff; }.hangman-aids b { font-size:.78rem; }.hangman-aids small { margin-top:3px; color:var(--muted); font-size:.75rem; }
.hangman-result { display:none; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-top:12px; padding:15px; border:1px solid rgba(85,211,154,.32); border-radius:18px; background:rgba(85,211,154,.08); }
.hangman-result.is-visible { display:grid; }.hangman-result > span { width:40px; aspect-ratio:1; display:grid; place-items:center; border-radius:12px; color:#0a2318; background:var(--green); font-weight:950; }.hangman-result p { margin:3px 0 0; color:var(--muted); font-size:.76rem; }.hangman-result button { grid-column:1/-1; min-height:42px; border:0; border-radius:12px; color:#17111e; background:var(--gold); font-weight:900; cursor:pointer; }

.battle-lobby-screen,.battle-screen { padding-bottom:max(24px,env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 38%,rgba(98,137,227,.18),transparent 25rem); }
.battle-orbit { position:relative; width:170px; aspect-ratio:1; margin:64px auto 42px; display:grid; place-items:center; border:1px solid rgba(240,189,79,.28); border-radius:50%; animation:orbit 9s linear infinite; }
.battle-orbit::before,.battle-orbit::after { content:""; position:absolute; inset:21px; border:1px dashed rgba(98,137,227,.35); border-radius:50%; }.battle-orbit::after { inset:-17px; border-style:solid; opacity:.3; }
.battle-orbit > span { width:76px; aspect-ratio:1; display:grid; place-items:center; border:2px solid var(--gold); border-radius:24px; color:var(--gold-light); background:#151a30; box-shadow:0 0 45px rgba(240,189,79,.2); font-size:2rem; animation:orbit-back 9s linear infinite; }
.battle-orbit i { position:absolute; width:12px; aspect-ratio:1; border-radius:50%; background:#6990ef; box-shadow:0 0 16px #6990ef; }.battle-orbit i:first-child { top:-6px; }.battle-orbit i:last-child { bottom:-6px; }
.versus-cards { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }.versus-cards article { min-width:0; display:grid; place-items:center; padding:16px 8px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }.versus-cards > b { color:var(--gold-light); }.duel-avatar { width:50px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(240,189,79,.4); border-radius:50%; color:var(--gold-light); background:#181d34; font-family:Georgia,serif; }.versus-cards small { margin-top:9px; color:var(--muted); font-size:.75rem; }.versus-cards strong { max-width:100%; margin-top:3px; overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }.versus-cards .is-searching .duel-avatar { animation:live-pulse 1s ease-in-out infinite; }
.lobby-status { max-width:35ch; margin:22px auto; color:var(--muted); font-size:.87rem; line-height:1.5; text-align:center; }.secondary-button { width:100%; min-height:50px; margin-top:auto; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.04); font-weight:850; cursor:pointer; }
.battle-header { display:flex; align-items:center; justify-content:space-between; gap:13px; }.battle-round { flex:1; text-align:center; }.battle-round span { color:var(--muted); font-size:.78rem; font-weight:850; }.battle-round i { width:130px; height:4px; display:block; margin:7px auto 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }.battle-round i b { display:block; width:20%; height:100%; background:linear-gradient(90deg,#6990ef,var(--gold)); transition:width .3s; }
.battle-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:19px 0 14px; }.battle-scoreboard article { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }.battle-scoreboard small { max-width:90px; overflow:hidden; color:var(--muted); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }.battle-scoreboard strong { color:var(--gold-light); font-size:1.05rem; }.battle-scoreboard > span { color:#849be2; font-size:.7rem; font-weight:950; }
.battle-guardian { display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.battle-guardian.is-visible { display:flex; }.battle-guardian .guardian-greeting { width:min(80vw,340px); }.battle-guardian > div:last-child { z-index:2; width:94%; margin-top:-42px; padding:16px; border:1px solid color-mix(in srgb,var(--accent) 44%,transparent); border-radius:19px; background:rgba(15,18,34,.94); }.battle-guardian small { color:color-mix(in srgb,var(--accent) 68%,white); font-size:.72rem; font-weight:900; text-transform:uppercase; }.battle-guardian h2 { margin-top:5px; font-size:1.65rem; }.battle-guardian p { margin:7px 0 11px; color:var(--muted); font-size:.84rem; line-height:1.4; }.battle-guardian button { min-height:39px; padding:0 20px; border:0; border-radius:12px; color:#17111e; background:var(--gold); font-size:.78rem; font-weight:900; cursor:pointer; }
.battle-question-card { position:relative; display:none; padding:20px 16px 16px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:23px; background:rgba(255,255,255,.035); }.battle-question-card.is-visible { display:block; }.battle-timer { right:15px; top:13px; }.battle-question-card .difficulty { margin-top:17px; }.battle-question-card h2 { min-height:3.3em; padding-right:2px; font-size:1.5rem; line-height:1.17; }.battle-question-card .answers { margin-top:18px; }.battle-aids { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }.battle-aids button { min-height:42px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); font-size:.76rem; font-weight:850; cursor:pointer; }.battle-aids small { color:var(--gold-light); }
.battle-feedback { display:none; margin-top:11px; padding:15px; border:1px solid var(--line); border-radius:17px; background:rgba(24,29,51,.97); }.battle-feedback.is-visible { display:block; }.battle-feedback strong { font-size:.95rem; }.battle-feedback p { margin:5px 0 12px; color:var(--muted); font-size:.78rem; line-height:1.42; }.battle-feedback button { width:100%; min-height:42px; border:0; border-radius:12px; color:#17111e; background:var(--gold); font-weight:900; cursor:pointer; }
.guardian-footer .guardian-skip { position:relative; z-index:4; margin-top:5px; border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); background:color-mix(in srgb,var(--accent) 7%,rgba(7,11,22,.62)); }
.guardian-transition i::before { animation-duration:3.4s; }
@keyframes live-pulse { 50% { opacity:.45; transform:scale(.85); } }
@media (max-width:390px) { .mode-grid { grid-template-columns:1fr; }.mode-card:first-child { grid-column:auto; display:flex; min-height:148px; }.hangman-keyboard { grid-template-columns:repeat(7,1fr); } }

/* Cuatro salas especiales: cada una usa su propio lenguaje visual y sonoro. */
.arcade-screen { position:relative; padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px)); overflow:hidden; }
.arcade-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.arcade-header > div { flex:1; display:grid; gap:3px; text-align:center; }
.arcade-header p { margin:0; color:color-mix(in srgb,var(--room) 68%,white); font-size:.58rem; font-weight:950; letter-spacing:.16em; }
.arcade-header strong { font-family:Georgia,serif; font-size:.92rem; }
.arcade-progress { height:3px; margin:15px 0 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.arcade-progress i { display:block; width:0; height:100%; background:var(--room); box-shadow:0 0 12px var(--room); transition:width .35s ease; }
.arcade-stats { position:relative; z-index:3; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:14px 0; }
.arcade-stats span { min-height:31px; display:flex; align-items:center; gap:5px; padding:0 10px; border:1px solid color-mix(in srgb,var(--room) 24%,var(--line)); border-radius:99px; color:var(--muted); background:rgba(8,10,20,.48); font-size:.68rem; }
.arcade-stats b { color:color-mix(in srgb,var(--room) 64%,white); }.arcade-stats i { color:var(--gold); font-style:normal; }
.arcade-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:9px; margin-top:13px; }
.arcade-actions button,.museum-hint,.cipher-hint,.atlas-hint { min-height:52px; border:1px solid color-mix(in srgb,var(--room) 32%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--room) 7%,rgba(255,255,255,.025)); cursor:pointer; }
.arcade-actions span,.arcade-actions b,.arcade-actions small,.museum-hint span,.museum-hint b,.museum-hint small,.cipher-hint span,.cipher-hint b,.cipher-hint small,.atlas-hint span,.atlas-hint b,.atlas-hint small { display:block; }
.arcade-actions span,.museum-hint span,.cipher-hint span,.atlas-hint span { color:color-mix(in srgb,var(--room) 66%,white); font-weight:950; }
.arcade-actions b,.museum-hint b,.cipher-hint b,.atlas-hint b { margin-top:2px; font-size:.75rem; }
.arcade-actions small,.museum-hint small,.cipher-hint small,.atlas-hint small { margin-top:2px; color:var(--muted); font-size:.64rem; }
.arcade-actions .arcade-primary { border:0; color:#17111e; background:linear-gradient(135deg,color-mix(in srgb,var(--room) 55%,white),var(--room)); box-shadow:0 10px 24px color-mix(in srgb,var(--room) 18%,transparent); font-size:.78rem; font-weight:950; }
.arcade-actions button:disabled,.museum-hint:disabled,.cipher-hint:disabled,.atlas-hint:disabled { opacity:.38; cursor:default; }
.arcade-feedback { position:absolute; z-index:30; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); padding:18px; transform:translateY(calc(100% + 26px)); opacity:0; pointer-events:none; border:1px solid var(--line); border-radius:22px; background:rgba(16,20,37,.98); box-shadow:0 -22px 70px rgba(0,0,0,.58); backdrop-filter:blur(18px); transition:transform .3s ease,opacity .3s ease; }
.arcade-feedback.is-visible { transform:none; opacity:1; pointer-events:auto; }
.arcade-feedback.is-correct { border-color:rgba(85,211,154,.48); }.arcade-feedback.is-wrong { border-color:rgba(239,88,109,.48); }
.arcade-feedback strong { color:var(--paper); font-family:Georgia,serif; font-size:1.08rem; }
.arcade-feedback p { margin:7px 0 13px; color:var(--muted); font-size:.76rem; line-height:1.48; }
.arcade-feedback button { width:100%; min-height:44px; border:0; border-radius:12px; color:#15101d; background:linear-gradient(135deg,#ffe096,var(--gold)); font-size:.78rem; font-weight:950; cursor:pointer; }

/* Cronología: metal, engranajes y tarjetas verticales. */
.timeline-screen { --room:#d89a45; background:radial-gradient(circle at 50% 24%,rgba(216,154,69,.18),transparent 25rem),linear-gradient(180deg,#17140f,#090b16 72%); }
.timeline-screen::before { content:""; position:absolute; inset:0; opacity:.08; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 29px,#f4ca88 30px),repeating-linear-gradient(0deg,transparent 0 29px,#f4ca88 30px); mask-image:linear-gradient(transparent,#000 30%,transparent 85%); }
.timeline-hero { position:relative; z-index:2; display:grid; grid-template-columns:92px 1fr; align-items:center; gap:17px; margin:24px 0 5px; }
.timeline-hero h1 { margin-top:5px; font-size:2rem; }.timeline-hero p:last-child { margin:8px 0 0; color:#baa990; font-size:.78rem; line-height:1.42; }
.timeline-machine { position:relative; width:94px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(216,154,69,.52); border-radius:50%; background:radial-gradient(circle,#5b3d1d,#1b160f 66%); box-shadow:0 0 0 7px rgba(216,154,69,.05),inset 0 0 28px rgba(0,0,0,.62),0 14px 30px rgba(0,0,0,.38); }
.timeline-machine::before,.timeline-machine::after { content:""; position:absolute; inset:9px; border:1px dashed rgba(255,221,157,.42); border-radius:50%; animation:timeline-gear 9s linear infinite; }.timeline-machine::after { inset:19px; border-style:solid; border-color:rgba(255,221,157,.12); animation-direction:reverse; animation-duration:6s; }
.timeline-machine > i { position:absolute; width:18px; aspect-ratio:1; border:2px dotted #a16c31; border-radius:50%; animation:timeline-gear 3s linear infinite; }.timeline-machine > i:first-child { left:-4px; top:12px; }.timeline-machine > i:last-child { right:-7px; bottom:13px; animation-direction:reverse; }
.hourglass-small { width:32px; height:45px; animation-duration:4.2s; }.hourglass-small .hourglass-cap { width:35px; height:5px; }.hourglass-small .hourglass-glass { left:5px; top:5px; width:22px; height:35px; }.hourglass-small .sand-top { height:12px; }.hourglass-small .sand-stream { top:14px; height:10px; }.hourglass-small .sand-bottom { height:13px; }
.chronology-console { position:relative; z-index:2; margin-top:8px; padding:12px 12px 14px 20px; border:1px solid rgba(216,154,69,.38); border-radius:21px; background:linear-gradient(145deg,rgba(92,58,25,.36),rgba(17,14,11,.86)); box-shadow:inset 0 1px rgba(255,238,199,.08),inset 0 0 35px rgba(0,0,0,.28),0 16px 40px rgba(0,0,0,.22); }
.chronology-console::before,.chronology-console::after { content:"✦"; position:absolute; width:20px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(216,154,69,.4); border-radius:50%; color:#d89a45; background:#21170e; font-size:.5rem; }.chronology-console::before { left:-8px; top:-8px; }.chronology-console::after { right:-8px; bottom:-8px; }
.chronology-console-head { display:flex; justify-content:space-between; align-items:center; padding:0 2px 9px 24px; border-bottom:1px solid rgba(216,154,69,.13); }.chronology-console-head span { color:#f2cb91; font-family:Georgia,serif; font-size:.86rem; }.chronology-console-head small { color:#977c5d; font-size:.58rem; font-weight:900; letter-spacing:.09em; }.chronology-console-head i { padding:0 4px; color:#d89a45; font-style:normal; }
.timeline-era { position:relative; z-index:2; margin:9px 0 10px 24px; color:#d5a665; font-size:.62rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.timeline-slots { position:relative; z-index:2; display:grid; gap:7px; padding-left:17px; }
.timeline-slots::before { content:""; position:absolute; left:16px; top:20px; bottom:20px; width:3px; border-radius:99px; background:linear-gradient(#ffe3a6,var(--room) 45%,#6b3e1a); box-shadow:0 0 12px rgba(216,154,69,.55); }
.timeline-slot { position:relative; min-height:64px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:7px 10px 7px 0; border:1px dashed rgba(216,154,69,.24); border-radius:16px; color:#9a8c79; text-align:left; background:linear-gradient(90deg,rgba(216,154,69,.045),rgba(255,255,255,.018)); box-shadow:inset 0 1px rgba(255,255,255,.025); cursor:pointer; }
.timeline-index { z-index:2; width:44px; aspect-ratio:1; display:grid; place-content:center; margin-left:-21px; border:2px solid #b87a31; border-radius:50%; color:#edc383; text-align:center; background:radial-gradient(circle,#4a3018,#17130e 72%); box-shadow:0 0 0 4px #17120d,0 0 0 5px rgba(216,154,69,.22),0 5px 12px rgba(0,0,0,.45); }.timeline-index em { font-size:.67rem; font-style:normal; font-weight:950; }.timeline-index small { margin-top:1px; color:#95714a; font-size:.43rem; letter-spacing:.1em; }
.timeline-slot > div { min-width:0; display:grid; gap:4px; }.timeline-slot > div small { color:#806f5c; font-size:.51rem; font-weight:900; letter-spacing:.1em; }.timeline-slot > div b { color:#f4ead8; font-family:Georgia,serif; font-size:.76rem; line-height:1.18; }.timeline-slot > strong { min-width:49px; padding:6px 7px; border:1px solid rgba(216,154,69,.2); border-radius:8px; color:#aa8a65; font-size:.58rem; text-align:center; background:rgba(0,0,0,.2); }
.timeline-slot.is-filled { border-style:solid; border-color:rgba(216,154,69,.4); background:linear-gradient(90deg,rgba(216,154,69,.14),rgba(255,255,255,.025)); animation:timeline-lock .25s ease both; }.timeline-slot.is-revealed > strong { color:#17110b; border-color:#ffdc91; background:linear-gradient(135deg,#ffe3a2,#d99a43); box-shadow:0 4px 12px rgba(0,0,0,.3); }.timeline-slot.is-success { border-color:rgba(85,211,154,.5); }.timeline-slot.is-correction { border-color:rgba(239,176,88,.45); }
.timeline-pool { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.timeline-event { min-height:67px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid rgba(216,154,69,.24); border-radius:16px; color:#efe3d0; text-align:left; background:linear-gradient(145deg,rgba(98,60,24,.23),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.12); cursor:pointer; }
.timeline-event .event-seal { width:28px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,222,156,.4); border-radius:50%; color:#f1bd73; background:radial-gradient(circle,#69431f,#26180e); box-shadow:0 0 0 3px rgba(216,154,69,.05); font-size:.67rem; font-style:normal; }.timeline-event div { display:grid; gap:4px; }.timeline-event small { color:#8e7456; font-size:.48rem; font-weight:900; letter-spacing:.08em; }.timeline-event span { font-family:Georgia,serif; font-size:.7rem; line-height:1.25; }.timeline-event > b { color:#dca85f; font-size:1rem; }

/* Memoria: museo esmeralda, focos y cartas con giro 3D. */
.memory-screen { --room:#4dd2a0; background:radial-gradient(circle at 50% 22%,rgba(77,210,160,.17),transparent 24rem),linear-gradient(180deg,#0b1b19,#090b16 72%); }
.memory-screen::before { content:""; position:absolute; inset:0; opacity:.2; pointer-events:none; background:linear-gradient(110deg,transparent 18%,rgba(113,255,202,.13) 19%,transparent 35%),linear-gradient(250deg,transparent 18%,rgba(113,255,202,.1) 19%,transparent 38%); animation:museum-lights 5s ease-in-out infinite alternate; }
.museum-marquee { position:relative; z-index:2; margin:22px 0 6px; padding:18px 18px 16px; border:1px solid rgba(77,210,160,.25); border-radius:22px; text-align:center; background:linear-gradient(145deg,rgba(77,210,160,.09),rgba(5,19,18,.78)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 17px 40px rgba(0,0,0,.24); }
.museum-marquee::before,.museum-marquee::after { content:""; position:absolute; top:-8px; width:45px; height:1px; background:#7ce8bf; box-shadow:0 0 14px #4dd2a0; }.museum-marquee::before { left:28px; transform:rotate(-18deg); }.museum-marquee::after { right:28px; transform:rotate(18deg); }
.museum-marquee h1 { margin-top:6px; font-size:1.86rem; }.museum-marquee > p:last-child { margin:8px auto 0; max-width:35ch; color:#9cbfb4; font-size:.76rem; line-height:1.42; }
.museum-lamp { position:absolute; left:50%; top:-17px; width:28px; height:10px; transform:translateX(-50%); border-radius:8px 8px 2px 2px; background:#d4fff0; box-shadow:0 9px 25px rgba(107,255,203,.38); }
.memory-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; perspective:1100px; }
.memory-card { min-height:112px; padding:0; border:0; border-radius:17px; background:transparent; cursor:pointer; perspective:900px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.24)); }
.memory-inner { position:relative; width:100%; height:100%; min-height:112px; display:block; transform-style:preserve-3d; transition:transform .54s cubic-bezier(.2,.78,.2,1),filter .25s; }
.memory-card.is-open .memory-inner { transform:rotateY(180deg); }.memory-card.is-matched .memory-inner { filter:drop-shadow(0 0 9px rgba(77,210,160,.4)); }
.memory-front,.memory-back { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:8px; border-radius:17px; backface-visibility:hidden; font-style:normal; }
.memory-front { border:1px solid rgba(255,220,139,.55); color:#f5d691; background:radial-gradient(circle at 50% 42%,rgba(77,210,160,.14),transparent 45%),repeating-linear-gradient(135deg,rgba(255,224,155,.035) 0 7px,transparent 7px 14px),linear-gradient(145deg,#173d35,#071a18); box-shadow:inset 0 0 0 3px #0b211d,inset 0 0 0 4px rgba(255,222,151,.32),inset 0 0 24px rgba(0,0,0,.38); }
.memory-front::before,.memory-front::after { content:"✦"; position:absolute; color:rgba(255,221,145,.48); font-size:.5rem; }.memory-front::before { left:8px; top:7px; }.memory-front::after { right:8px; bottom:7px; }
.memory-logo-frame { position:relative; width:58px; aspect-ratio:1; display:block; overflow:hidden; padding:3px; border:1px solid #f1c66f; border-radius:50%; background:#10241f; box-shadow:0 0 0 4px rgba(255,213,125,.06),0 8px 18px rgba(0,0,0,.38); }.memory-logo-frame::after { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.28); border-radius:50%; }.memory-logo-frame img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 45%; filter:sepia(.18) contrast(1.1); }.memory-front > small { position:relative; margin-top:8px; color:#d9bc7d; font-family:Inter,sans-serif; font-size:.5rem; font-weight:950; letter-spacing:.12em; }
.memory-back { transform:rotateY(180deg); border:1px solid rgba(255,225,151,.5); color:#f7f3e8; background:radial-gradient(circle at 50% 18%,rgba(77,210,160,.26),transparent 48%),linear-gradient(145deg,#28584c,#0e2621); box-shadow:inset 0 0 0 3px #102d27,inset 0 0 0 4px rgba(255,222,151,.2),0 10px 22px rgba(0,0,0,.28); text-align:center; }
.memory-watermark { position:absolute; right:-14px; bottom:-10px; width:70px; aspect-ratio:1; border-radius:50%; object-fit:cover; opacity:.08; filter:sepia(1); transform:rotate(-9deg); }.memory-back b { position:relative; width:32px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,224,150,.48); border-radius:50%; color:#ffe096; background:rgba(10,31,27,.58); box-shadow:0 0 14px rgba(255,224,150,.08); font-size:.82rem; }.memory-back strong { position:relative; margin-top:7px; font-family:Georgia,serif; font-size:.7rem; line-height:1.12; }.memory-back small { position:relative; margin-top:4px; color:#a9d6c7; font-size:.52rem; line-height:1.22; }
.memory-card.is-matched .memory-back { border-color:rgba(100,242,185,.82); background:radial-gradient(circle at 50% 20%,rgba(255,220,139,.16),transparent 38%),linear-gradient(145deg,#286955,#102f28); box-shadow:inset 0 0 0 3px #103229,inset 0 0 0 4px rgba(255,222,151,.28),0 0 20px rgba(77,210,160,.22); }
.museum-hint,.cipher-hint,.atlas-hint { position:relative; z-index:3; width:100%; margin-top:11px; }

/* Cifrado: consola cian, barrido electrónico y claves compactas. */
.cipher-screen { --room:#38d5ef; background:radial-gradient(circle at 50% 26%,rgba(56,213,239,.14),transparent 24rem),linear-gradient(180deg,#06171d,#070914 74%); }
.cipher-screen::before { content:""; position:absolute; inset:0; opacity:.1; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,#54e9ff 4px); }
.cipher-console { position:relative; z-index:2; margin:24px 0 8px; padding:22px 17px 19px; overflow:hidden; border:1px solid rgba(56,213,239,.36); border-radius:21px; background:rgba(3,19,24,.78); box-shadow:inset 0 0 35px rgba(56,213,239,.06),0 18px 45px rgba(0,0,0,.34); }
.cipher-console::before { content:""; position:absolute; inset:8px; border:1px solid rgba(56,213,239,.08); border-radius:14px; pointer-events:none; }
.cipher-scan { position:absolute; z-index:0; left:0; right:0; height:48px; top:-50px; background:linear-gradient(transparent,rgba(76,232,255,.13),transparent); animation:cipher-scan 2.8s linear infinite; }
.cipher-wheel { position:relative; width:105px; height:105px; margin:0 auto 13px; display:grid; place-items:center; border:1px dashed rgba(56,213,239,.5); border-radius:50%; animation:cipher-orbit 11s linear infinite; }
.cipher-wheel::before,.cipher-wheel::after { content:""; position:absolute; inset:13px; border:1px solid rgba(56,213,239,.24); border-radius:50%; }.cipher-wheel::after { inset:27px; border-style:dashed; }
.cipher-wheel span { color:#9ef4ff; font-size:1.7rem; text-shadow:0 0 15px #38d5ef; animation:cipher-counter 11s linear infinite; }.cipher-wheel i { position:absolute; color:#63dced; font-size:.53rem; font-style:normal; font-weight:900; letter-spacing:.18em; }.cipher-wheel i:first-child { top:8px; }.cipher-wheel i:last-child { bottom:8px; transform:rotate(180deg); }
.cipher-status { position:relative; margin:0; color:#67bdca; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.57rem; letter-spacing:.08em; text-align:center; }.cipher-status span { display:inline-block; width:6px; aspect-ratio:1; margin-right:4px; border-radius:50%; background:#54e99a; box-shadow:0 0 8px #54e99a; animation:live-pulse 1.1s infinite; }
.cipher-console h1 { position:relative; margin-top:12px; color:#cffaff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1rem; letter-spacing:.16em; text-align:center; text-transform:uppercase; }
.cipher-code { position:relative; margin:12px 0 10px; color:#7ceeff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(1.85rem,9vw,2.7rem); font-weight:950; letter-spacing:.16em; text-align:center; text-shadow:0 0 16px rgba(56,213,239,.5); animation:cipher-glitch 2.2s step-end infinite; }
.cipher-clue { position:relative; max-width:38ch; margin:0 auto; color:#94b9c0; font-size:.76rem; line-height:1.45; text-align:center; }
.cipher-choices { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cipher-choices button { min-height:57px; display:flex; align-items:center; gap:9px; padding:9px; border:1px solid rgba(56,213,239,.2); border-radius:14px; color:#dffaff; text-align:left; background:rgba(56,213,239,.04); cursor:pointer; }
.cipher-choices span { width:27px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(56,213,239,.35); border-radius:7px; color:#55d8eb; font-family:ui-monospace,monospace; font-size:.56rem; }.cipher-choices b { min-width:0; overflow:hidden; font-family:ui-monospace,monospace; font-size:.69rem; text-overflow:ellipsis; }
.cipher-choices button.is-correct { border-color:rgba(85,211,154,.7); color:#b8ffdc; background:rgba(85,211,154,.12); }.cipher-choices button.is-wrong { border-color:rgba(239,88,109,.7); background:rgba(239,88,109,.12); }.cipher-choices button.is-eliminated { opacity:.18; text-decoration:line-through; }

/* Atlas: tablero de expedición, regiones y brújula física. */
.atlas-screen { --room:#e17448; background:radial-gradient(circle at 50% 33%,rgba(225,116,72,.16),transparent 26rem),linear-gradient(180deg,#201510,#090b16 76%); }
.atlas-screen::before { content:""; position:absolute; inset:0; opacity:.09; pointer-events:none; background-image:radial-gradient(circle,#ffd49b 1px,transparent 1.5px),linear-gradient(32deg,transparent 49%,#ffd49b 50%,transparent 51%); background-size:31px 31px,100% 100%; }
.atlas-heading { position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin:25px 0 14px; }.atlas-heading h1 { margin-top:5px; font-size:2rem; }
.atlas-compass { position:relative; width:76px; aspect-ratio:1; display:grid; place-items:start center; padding-top:7px; flex:0 0 auto; border:1px solid rgba(225,116,72,.48); border-radius:50%; background:radial-gradient(circle,#4b2c1e,#19110e 70%); box-shadow:0 0 0 5px rgba(225,116,72,.05),inset 0 0 18px rgba(0,0,0,.6); }
.atlas-compass::before { content:"S"; position:absolute; bottom:6px; color:#9f725c; font-size:.58rem; font-weight:900; }.atlas-compass b { color:#ffd09f; font-size:.58rem; }.atlas-compass i { position:absolute; left:50%; top:50%; width:9px; height:45px; transform:translate(-50%,-50%) rotate(24deg); background:linear-gradient(#ffcc91 0 48%,#5a3425 49% 100%); clip-path:polygon(50% 0,100% 48%,65% 48%,65% 100%,35% 100%,35% 48%,0 48%); animation:compass-seek 2.7s ease-in-out infinite alternate; }
.atlas-mission { position:relative; z-index:3; padding:15px 60px 15px 17px; border:1px solid rgba(225,116,72,.36); border-radius:18px; background:linear-gradient(145deg,rgba(101,52,29,.42),rgba(23,16,12,.9)); box-shadow:inset 0 1px rgba(255,232,192,.06),0 12px 28px rgba(0,0,0,.2); }.atlas-mission::after { content:""; position:absolute; right:14px; top:50%; width:38px; aspect-ratio:1; transform:translateY(-50%) rotate(-8deg); border:1px solid rgba(255,197,142,.58); border-radius:50%; background:url("brand-einstein-premium-v7.webp") center/cover; box-shadow:0 0 0 4px rgba(225,116,72,.05),0 5px 12px rgba(0,0,0,.4); filter:contrast(1.06); }.atlas-mission small { color:#d69b7c; font-size:.61rem; font-weight:950; letter-spacing:.15em; }.atlas-mission h2 { margin-top:6px; color:#ffe3c4; font-size:1.45rem; }.atlas-mission p { margin:7px 0 0; color:#c8ad9b; font-size:.76rem; line-height:1.4; }
.atlas-map-frame { position:relative; z-index:2; width:100%; aspect-ratio:1.48; margin-top:11px; overflow:hidden; border:3px solid #603a20; border-radius:20px; background-image:linear-gradient(rgba(4,9,12,.06),rgba(4,9,12,.1)),url("atlas-map-premium-v2.png"); background-size:cover; background-position:center; box-shadow:0 0 0 1px #c28a4c,0 0 0 5px #24150d,0 16px 42px rgba(0,0,0,.48),inset 0 0 28px rgba(0,0,0,.35); }
.atlas-map-frame::before { content:""; position:absolute; inset:8px; z-index:1; border:1px solid rgba(255,218,154,.42); border-radius:13px; pointer-events:none; }.atlas-map-frame::after { content:"CARTOGRAPHIA • ARCHIVUM"; position:absolute; z-index:3; left:50%; bottom:8px; transform:translateX(-50%); padding:3px 9px; border:1px solid rgba(255,212,144,.28); border-radius:99px; color:#e7bd7a; background:rgba(22,13,8,.76); font-family:Georgia,serif; font-size:.47rem; letter-spacing:.1em; white-space:nowrap; }
.atlas-map-shine { position:absolute; z-index:2; inset:-50% -25%; pointer-events:none; background:linear-gradient(115deg,transparent 38%,rgba(255,235,190,.12) 48%,transparent 58%); animation:atlas-shine 5.5s ease-in-out infinite; }
.atlas-corner { position:absolute; z-index:4; width:22px; aspect-ratio:1; display:grid; place-items:center; color:#e1a963; background:#3a2112; border:1px solid #b77837; border-radius:50%; font-size:.45rem; box-shadow:0 2px 7px rgba(0,0,0,.45); }.atlas-corner.corner-one { left:5px; top:5px; }.atlas-corner.corner-two { right:5px; bottom:5px; }
.atlas-board { position:absolute; z-index:3; inset:0; }
.atlas-zone { position:absolute; z-index:2; min-width:78px; min-height:42px; display:grid; grid-template-columns:27px 1fr; align-items:center; gap:6px; padding:6px 8px; transform:translate(-50%,-50%); border:1px solid rgba(255,214,147,.62); border-radius:12px; color:#fff2d6; text-align:left; background:linear-gradient(145deg,rgba(26,18,14,.88),rgba(58,36,22,.82)); box-shadow:0 4px 12px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(3px); cursor:pointer; transition:transform .18s,border-color .18s,opacity .18s,box-shadow .18s; }.atlas-zone:hover:not(:disabled) { transform:translate(-50%,-56%) scale(1.03); border-color:#ffe0a6; box-shadow:0 7px 16px rgba(0,0,0,.55),0 0 13px rgba(239,174,95,.2); }
.atlas-zone::after { content:""; position:absolute; left:50%; bottom:-7px; width:2px; height:7px; background:#e8aa64; box-shadow:0 0 6px #e8aa64; }.atlas-zone span { width:27px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,214,151,.43); border-radius:50%; color:#ffc886; background:rgba(0,0,0,.28); font-size:.67rem; }.atlas-zone b { font-family:Georgia,serif; font-size:.65rem; line-height:1.08; }
.atlas-zone.zone-northamerica { left:21%; top:31%; }.atlas-zone.zone-mesoamerica { left:25%; top:53%; }.atlas-zone.zone-southamerica { left:36%; top:72%; }.atlas-zone.zone-europe { left:52%; top:28%; }.atlas-zone.zone-africa { left:51%; top:52%; }.atlas-zone.zone-eastasia { left:76%; top:37%; }
.atlas-zone.is-correct { border-color:rgba(120,255,193,.94); color:#d7ffeb; background:linear-gradient(145deg,rgba(20,75,55,.94),rgba(12,43,35,.92)); box-shadow:0 0 22px rgba(85,211,154,.42),0 6px 16px rgba(0,0,0,.5); animation:atlas-found .5s ease both; }.atlas-zone.is-wrong { border-color:rgba(255,107,125,.9); background:rgba(77,21,30,.9); }.atlas-zone.is-eliminated { opacity:.12; filter:grayscale(1); }

@keyframes timeline-gear { to { transform:rotate(360deg); } }
@keyframes hourglass-flip { 0%,43% { transform:rotate(0deg); } 50%,93% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }
@keyframes sand-drain { 0%,5% { transform:scaleY(1); } 41%,49.9% { transform:scaleY(.06); } 50%,55% { transform:scaleY(1); } 91%,100% { transform:scaleY(.06); } }
@keyframes sand-fill { 0%,5% { transform:scaleY(.08); } 41%,49.9% { transform:scaleY(1); } 50%,55% { transform:scaleY(.08); } 91%,100% { transform:scaleY(1); } }
@keyframes sand-stream { 0%,4%,43%,50%,54%,93%,100% { opacity:0; } 8%,40%,58%,90% { opacity:1; } }
@keyframes timeline-lock { from { opacity:.2; transform:translateX(14px); } }
@keyframes museum-lights { to { opacity:.36; transform:translateX(8px); } }
@keyframes cipher-scan { to { top:100%; } }
@keyframes cipher-orbit { to { transform:rotate(360deg); } }
@keyframes cipher-counter { to { transform:rotate(-360deg); } }
@keyframes cipher-glitch { 92% { transform:none; } 94% { transform:translateX(2px); color:#fff; } 96% { transform:translateX(-2px); } }
@keyframes compass-seek { 0% { transform:translate(-50%,-50%) rotate(-34deg); } 55% { transform:translate(-50%,-50%) rotate(28deg); } 100% { transform:translate(-50%,-50%) rotate(8deg); } }
@keyframes atlas-shine { 0%,25% { transform:translateX(-28%); } 70%,100% { transform:translateX(28%); } }
@keyframes atlas-found { 50% { transform:translate(-50%,-50%) scale(1.09); box-shadow:0 0 24px rgba(85,211,154,.4); } }

@media (max-height:760px) {
  .timeline-hero { margin-top:16px; }.timeline-machine { width:72px; }.timeline-hero { grid-template-columns:74px 1fr; }.timeline-hero h1 { font-size:1.7rem; }
  .memory-inner,.memory-card { min-height:86px; }.museum-marquee { margin-top:15px; padding:14px; }.museum-marquee h1 { font-size:1.55rem; }
  .cipher-console { margin-top:16px; padding-top:14px; }.cipher-wheel { width:80px; height:80px; margin-bottom:8px; }.cipher-code { margin:8px 0; }
  .atlas-heading { margin-top:17px; }.atlas-map-frame { aspect-ratio:1.56; }
}
@media (max-width:360px) {
  .timeline-pool { grid-template-columns:1fr; }.timeline-event { min-height:46px; }
  .memory-grid { gap:5px; }.memory-inner,.memory-card { min-height:92px; }.memory-back strong { font-size:.61rem; }
  .cipher-choices { grid-template-columns:1fr; }.cipher-choices button { min-height:46px; }
}

/* Edición Súper Premium v7 · Archivo del Tiempo */
:root {
  --night:#050814;
  --night-2:#0b1020;
  --panel:#11182b;
  --panel-2:#18223a;
  --paper:#fffaf0;
  --muted:#b7bfd2;
  --gold:#dba84a;
  --gold-light:#ffe7a2;
  --champagne:#fff2c6;
  --blue:#6aa9ff;
  --glass:rgba(13,19,35,.78);
  --line:rgba(255,236,187,.14);
  --shadow:0 30px 90px rgba(0,0,0,.62);
}

body {
  background:
    radial-gradient(circle at 50% 0,rgba(76,107,183,.22),transparent 42rem),
    linear-gradient(135deg,#02040a,#080d1b 55%,#03050b);
}

.game-shell {
  width:min(100%,560px);
  isolation:isolate;
  background:#070b16;
  border-inline:1px solid rgba(255,224,154,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 30px 110px rgba(0,0,0,.74);
}
.game-shell::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,6,14,.08),rgba(3,6,14,.94)),
    url("archive-chamber-premium-v7.webp") center top/auto 820px no-repeat;
  opacity:.55;
}
.game-shell::after {
  content:"";
  position:absolute;
  z-index:80;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 100px rgba(0,0,0,.38);
  background-image:linear-gradient(115deg,transparent 0 44%,rgba(255,240,199,.025) 49%,transparent 54%);
  mix-blend-mode:screen;
  animation:premium-shell-glint 12s ease-in-out infinite;
}
.screen { position:relative; z-index:1; padding-inline:22px; }
.screen.is-active { animation:premium-screen-in .48s cubic-bezier(.2,.78,.2,1) both; }
h1,h2,h3 { text-shadow:0 2px 18px rgba(0,0,0,.36); }
.eyebrow,.brand-kicker { color:#f6cf79; text-shadow:0 0 16px rgba(233,181,75,.22); }

/* Carga cinematográfica */
.loading-screen {
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(2,5,12,.36),rgba(3,6,14,.88)),
    url("archive-chamber-premium-v7.webp") center/cover;
}
.loading-screen::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 46%,transparent 0 8rem,rgba(2,4,10,.38) 20rem,rgba(2,4,10,.8));
  animation:premium-breathe 4s ease-in-out infinite alternate;
}
.loading-screen > * { position:relative; z-index:1; }
.loading-portal { width:214px; margin-bottom:34px; }
.loading-portal::before,.loading-portal::after {
  content:"";
  position:absolute;
  inset:-18px;
  border:1px solid rgba(255,220,137,.2);
  border-radius:50%;
  box-shadow:inset 0 0 35px rgba(92,134,255,.12),0 0 60px rgba(218,167,70,.12);
}
.loading-portal::after { inset:-35px; border-style:dashed; animation:orbit 19s linear infinite reverse; }
.loading-logo { width:128px; padding:6px; border:2px solid #ffe098; box-shadow:0 0 0 6px #10172b,0 0 0 8px rgba(255,225,150,.32),0 0 60px rgba(102,150,255,.4); }
.loading-orbit-one { border-color:rgba(255,218,132,.62); box-shadow:inset 0 0 20px rgba(240,189,79,.08); }
.loading-orbit-two { border-color:rgba(106,169,255,.52); }
.loading-screen h1 { color:var(--champagne); font-size:clamp(2.15rem,9vw,3.05rem); }
.loading-copy { color:#d0d6e4; }
.loading-progress { height:7px; padding:1px; border:1px solid rgba(255,224,150,.22); background:rgba(2,5,12,.62); }
.loading-progress i { background:linear-gradient(90deg,#5079cf,#f5c760 55%,#80e3dc); }

/* Barra de marca y recursos */
.topbar {
  position:relative;
  z-index:4;
  margin:-4px -4px 0;
  padding:10px 11px;
  border:1px solid rgba(255,224,154,.13);
  border-radius:19px;
  background:linear-gradient(145deg,rgba(12,18,34,.88),rgba(9,13,25,.67));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.2);
  backdrop-filter:blur(15px);
}
.mini-seal { width:45px; padding:3px; border:1px solid #e4b758; box-shadow:inset 0 0 0 2px #0c1324,0 0 0 4px rgba(224,177,78,.08),0 5px 18px rgba(0,0,0,.42); }
.brand-lockup strong { color:var(--champagne); font-size:1.05rem; letter-spacing:.01em; }
.brand-lockup small { color:#aeb9cf; }
.sound-control,.level-pill,.collection-count,.coin-balance {
  border-color:rgba(255,221,142,.24);
  background:linear-gradient(145deg,rgba(255,216,126,.1),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 7px 18px rgba(0,0,0,.2);
}
.sound-control { width:39px; }
.sound-control span { text-shadow:0 0 9px rgba(255,222,149,.55); }
.resource-row { gap:7px; margin:14px 0 15px; }
.resource {
  flex:1;
  justify-content:center;
  min-height:42px;
  padding:0 8px;
  border:1px solid rgba(255,229,168,.11);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(18,27,48,.8),rgba(8,13,25,.7));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
}
.resource i { width:18px; height:18px; display:grid; place-items:center; }
.resource i svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.resource .heart svg,.resource .flame svg { fill:currentColor; stroke:none; }

/* Portada principal */
.home-screen {
  background:
    linear-gradient(180deg,rgba(3,6,15,.18) 0,rgba(5,9,18,.86) 650px,#060914 100%),
    url("archive-chamber-premium-v7.webp") center top/auto 700px no-repeat;
}
.hero-panel {
  min-height:468px;
  padding:33px 25px 25px;
  border:1px solid rgba(255,221,143,.34);
  border-radius:30px;
  background:
    linear-gradient(180deg,rgba(7,11,22,.28),rgba(8,13,25,.94) 73%),
    url("archive-chamber-premium-v7.webp") center/cover;
  box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -50px 90px rgba(3,5,12,.45),0 26px 65px rgba(0,0,0,.48),0 0 0 5px rgba(229,181,82,.025);
}
.hero-panel::before { width:260px; right:-100px; top:-78px; border-color:rgba(255,225,158,.16); box-shadow:0 0 0 34px rgba(255,225,158,.025),0 0 0 68px rgba(103,151,255,.018); animation:orbit 34s linear infinite; }
.hero-panel::after {
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  border:1px solid rgba(255,238,190,.08);
  border-radius:23px;
}
.hero-constellation { opacity:.5; animation:premium-stars 8s ease-in-out infinite alternate; }
.hero-emblem { width:139px; margin:5px auto 25px; border-color:rgba(255,221,137,.72); background:radial-gradient(circle,rgba(255,206,98,.24),rgba(26,41,72,.35) 48%,rgba(4,8,17,.5) 69%); box-shadow:0 0 0 7px rgba(6,11,23,.72),0 0 0 9px rgba(255,217,128,.18),0 0 52px rgba(92,139,246,.33),inset 0 0 28px rgba(255,213,117,.11); }
.hero-emblem::before { border-color:rgba(255,234,179,.28); }
.hero-emblem::after { border-color:rgba(105,161,255,.28); }
.hourglass-widget { width:54px; height:73px; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(255,197,80,.2)); }
.hourglass-cap { width:58px; height:8px; }
.hourglass-glass { left:8px; top:8px; width:38px; height:57px; }
.hero-copy h1 { color:#fff8e7; text-shadow:0 3px 22px rgba(0,0,0,.8),0 0 30px rgba(255,211,116,.1); }
.hero-copy > p:last-child { color:#cbd2e1; }
.mission-progress { padding:12px 13px; border:1px solid rgba(255,226,160,.13); border-radius:14px; background:rgba(5,9,19,.52); backdrop-filter:blur(8px); }
.mission-progress > div { height:6px; border:1px solid rgba(255,255,255,.05); }
.mission-progress i { background:linear-gradient(90deg,#5e91ed,#f4c661 62%,#ef8065); box-shadow:0 0 12px rgba(241,190,79,.42); }
.variety-status {
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:10px;
  margin:-7px 0 17px;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid rgba(102,162,255,.25);
  border-radius:15px;
  background:linear-gradient(115deg,rgba(36,66,119,.35),rgba(8,14,27,.78) 58%,rgba(212,162,67,.14));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 9px 22px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
}
.variety-status::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 12%,rgba(130,180,255,.09) 34%,transparent 52%); transform:translateX(-100%); animation:variety-scan 5.5s ease-in-out infinite; }
.variety-seal { width:38px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,222,144,.55); border-radius:50%; color:#ffe29a; background:radial-gradient(circle,rgba(91,141,238,.33),rgba(9,15,29,.92) 70%); box-shadow:0 0 0 4px rgba(97,150,250,.045),0 0 18px rgba(101,155,255,.18); font:700 1.35rem Georgia,serif; }
.variety-status div { min-width:0; display:grid; gap:2px; }
.variety-status strong { color:#f8f2e3; font-size:.75rem; letter-spacing:.025em; }
.variety-status small { overflow:hidden; color:#aebbd1; font-size:.64rem; white-space:nowrap; text-overflow:ellipsis; }
.variety-status em { color:#b8c6dd; font-size:.62rem; font-style:normal; white-space:nowrap; }
.primary-button {
  min-height:60px;
  overflow:hidden;
  border:1px solid #ffe59c;
  color:#21160a;
  background:linear-gradient(145deg,#fff0b4,#e2ad4e 56%,#b87823);
  box-shadow:inset 0 2px rgba(255,255,255,.64),inset 0 -2px rgba(99,54,12,.26),0 14px 32px rgba(220,166,67,.26),0 0 0 4px rgba(230,181,83,.04);
  letter-spacing:.01em;
}
.primary-button::before { content:""; position:absolute; top:-40%; left:-35%; width:25%; height:180%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:premium-button-shine 4.8s ease-in-out infinite; }

/* Sala de desafíos */
.mode-section,.daily-section,.category-preview { position:relative; z-index:2; }
.mode-section { padding-top:3px; }
.mode-grid { gap:12px; }
.mode-card {
  min-height:158px;
  gap:12px;
  padding:17px;
  border-color:color-mix(in srgb,var(--mode) 48%,rgba(255,225,156,.18));
  border-radius:23px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--mode) 18%,rgba(18,25,44,.94)),rgba(7,11,21,.96)),
    radial-gradient(circle at 90% 8%,color-mix(in srgb,var(--mode) 24%,transparent),transparent 40%);
  box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -1px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.28);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.mode-card:first-child { min-height:124px; }
.mode-card::after { right:-38px; top:-38px; width:124px; border-color:color-mix(in srgb,var(--mode) 30%,transparent); box-shadow:0 0 0 18px color-mix(in srgb,var(--mode) 6%,transparent),0 0 0 37px color-mix(in srgb,var(--mode) 3%,transparent); }
.mode-card::before { box-shadow:0 5px 14px rgba(0,0,0,.34); }
.mode-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--mode) 75%,#ffe6a8); box-shadow:inset 0 1px rgba(255,255,255,.13),0 18px 38px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--mode) 12%,transparent); }
.mode-icon {
  width:51px;
  border-color:color-mix(in srgb,var(--mode) 72%,#ffe9b5);
  border-radius:16px;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.15),color-mix(in srgb,var(--mode) 17%,rgba(5,10,19,.75)));
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 8px 18px rgba(0,0,0,.3),0 0 0 4px color-mix(in srgb,var(--mode) 5%,transparent);
}
.mode-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--mode) 55%,transparent)); }
.mode-card strong { color:#fff7e8; font-size:1.05rem; }
.mode-card small { color:#b8c2d5; }
.mode-card > b { padding:5px 8px; border:1px solid color-mix(in srgb,var(--mode) 32%,transparent); border-radius:8px; background:color-mix(in srgb,var(--mode) 8%,rgba(0,0,0,.24)); }

.daily-list article,.stats-grid article,.achievement-card,.collection-tip {
  border-color:rgba(255,226,160,.13);
  background:linear-gradient(145deg,rgba(20,28,47,.78),rgba(8,13,25,.84));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.18);
}
.daily-list article > span { border:1px solid rgba(255,220,139,.23); background:radial-gradient(circle,rgba(240,189,79,.18),rgba(26,23,27,.7)); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.daily-list i { height:5px; }
.daily-list i b { box-shadow:0 0 10px rgba(240,189,79,.28); }

/* Colección, perfil y navegación */
.collection-screen,.profile-screen {
  background:linear-gradient(180deg,rgba(4,7,15,.38),#060a14 55%),url("archive-chamber-premium-v7.webp") center top/auto 620px no-repeat;
}
.collection-card {
  min-height:242px;
  padding:15px;
  border-color:color-mix(in srgb,var(--badge) 48%,rgba(255,224,154,.16));
  background:linear-gradient(155deg,color-mix(in srgb,var(--badge) 17%,#151d32),#080d1b 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.3);
}
.collection-card::before { content:""; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--badge) 18%,transparent); border-radius:16px; pointer-events:none; }
.collection-symbol { border-color:color-mix(in srgb,var(--badge) 76%,#ffe8b2); box-shadow:inset 0 0 38px rgba(0,0,0,.22),0 9px 24px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--badge) 5%,transparent); }
.mini-badge span { border-color:color-mix(in srgb,var(--badge) 74%,#ffe8b0); box-shadow:inset 0 1px rgba(255,255,255,.18),0 10px 22px rgba(0,0,0,.36),0 0 0 4px color-mix(in srgb,var(--badge) 5%,transparent); }
.legend-badge { border-color:rgba(255,220,136,.27); background:linear-gradient(145deg,rgba(73,54,25,.28),rgba(10,14,25,.9)); box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.22); }
.profile-card { border-color:rgba(255,221,142,.34); background:linear-gradient(145deg,rgba(68,49,22,.38),rgba(11,16,30,.9)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.35); }
.profile-avatar { overflow:visible; padding:4px; background:#0a1121; box-shadow:inset 0 0 0 3px #0a1121,0 0 0 5px rgba(240,189,79,.08),0 12px 25px rgba(0,0,0,.4); }
.profile-avatar img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 44%; filter:sepia(.08) contrast(1.08); }
.bottom-nav {
  position:fixed;
  left:50%;
  right:auto;
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(calc(100% - 30px),530px);
  height:72px;
  transform:translateX(-50%);
  border-color:rgba(255,224,154,.2);
  border-radius:23px;
  background:linear-gradient(180deg,rgba(18,27,47,.94),rgba(7,12,23,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 18px 45px rgba(0,0,0,.55),0 0 0 4px rgba(255,218,133,.025);
}
.bottom-nav button { position:relative; color:#7f8aa3; }
.bottom-nav button+button::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:rgba(255,229,168,.07); }
.bottom-nav span { width:26px; height:26px; margin:0 auto; display:grid; place-items:center; }
.bottom-nav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav button.is-active { color:#ffe39a; background:radial-gradient(circle at 50% 15%,rgba(240,189,79,.16),transparent 60%); }
.bottom-nav button.is-active span { filter:drop-shadow(0 0 8px rgba(240,189,79,.45)); }

/* Ruleta principal */
.wheel-screen {
  background:linear-gradient(180deg,rgba(3,6,14,.24),rgba(5,8,17,.92)),url("archive-chamber-premium-v7.webp") center/auto 100% no-repeat;
}
.wheel-stage { width:min(82vw,370px); margin-top:30px; }
.wheel-glow { inset:9%; background:radial-gradient(circle,rgba(108,157,255,.3),rgba(220,167,74,.16) 50%,transparent 70%); filter:blur(26px); animation:premium-wheel-aura 2.8s ease-in-out infinite alternate; }
.wheel-pointer { top:-13px; width:36px; height:44px; border:1px solid #fff0b8; background:linear-gradient(90deg,#98641f,#fff0a9 50%,#a66b20); filter:drop-shadow(0 7px 8px rgba(0,0,0,.62)) drop-shadow(0 0 9px rgba(255,218,126,.45)); }
.wheel {
  border:10px solid #121a2b;
  background:conic-gradient(#7353c7 0 51.4286deg,#c26b36 51.4286deg 102.8571deg,#c83c55 102.8571deg 154.2857deg,#218f92 154.2857deg 205.7143deg,#365fb2 205.7143deg 257.1429deg,#bc8a2d 257.1429deg 308.5714deg,#f2d078 308.5714deg 360deg);
  box-shadow:0 0 0 2px #f2c66c,0 0 0 7px #3d2b18,0 0 0 10px rgba(255,224,153,.2),0 28px 58px rgba(0,0,0,.58),inset 0 0 52px rgba(0,0,0,.42);
}
.wheel::before { inset:8px; border:2px solid rgba(255,241,201,.38); box-shadow:inset 0 0 0 8px rgba(5,8,16,.12); }
.wheel::after { background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.06) 0 1deg,transparent 1deg 9deg,rgba(5,8,16,.62) 50.4286deg 51.4286deg); mix-blend-mode:overlay; }
.wheel-label { width:58px; height:58px; left:calc(50% - 29px); top:calc(50% - 29px); transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-123px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }
.wheel-label .guardian-avatar { border:3px solid #f8dfa3; box-shadow:0 0 0 4px rgba(8,12,23,.7),0 7px 18px rgba(0,0,0,.55),0 0 12px rgba(255,222,145,.22); }
.wheel-hub { width:108px; padding:6px; border-color:#ffe39b; background:#0a1020; box-shadow:0 0 0 7px #111a2d,0 0 0 10px #7b5729,0 0 0 12px rgba(255,230,167,.3),0 15px 34px rgba(0,0,0,.6),0 0 34px rgba(92,139,238,.18); }
.wheel-hub span { bottom:2px; padding:5px 10px; border:1px solid #fff0b8; background:linear-gradient(145deg,#fff0ae,#d89d39); }
.wheel-selection { border-color:rgba(255,224,154,.18); background:linear-gradient(145deg,rgba(20,29,50,.82),rgba(8,13,25,.9)); box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 25px rgba(0,0,0,.22); }

/* Guardianes, preguntas y batalla */
.guardian-screen,.question-screen,.battle-lobby-screen,.battle-screen,.result-screen,.hangman-screen {
  background:linear-gradient(180deg,rgba(4,7,15,.4),rgba(5,8,17,.94)),url("archive-chamber-premium-v7.webp") center/cover;
}
.guardian-screen::before,.question-screen::before,.battle-screen::before,.hangman-screen::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 35%,var(--accent-soft),transparent 42%),linear-gradient(180deg,transparent,rgba(3,5,12,.55));
}
.guardian-screen > *,.question-screen > *,.battle-screen > *,.hangman-screen > * { position:relative; z-index:1; }
.guardian-greeting { border:1px solid color-mix(in srgb,var(--accent) 72%,#ffe4a1); border-radius:34px; box-shadow:0 0 0 6px rgba(5,9,18,.75),0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 30px 90px rgba(0,0,0,.64),0 0 72px var(--accent-soft); }
.guardian-message { border-color:color-mix(in srgb,var(--accent) 48%,#ffe2a0); background:linear-gradient(145deg,rgba(18,25,44,.94),rgba(7,11,22,.96)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 52px rgba(0,0,0,.5); }
.question-card,.battle-question-card {
  border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,226,159,.24));
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 10%,rgba(23,32,54,.94)),rgba(7,12,24,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 0 40px rgba(4,7,14,.28),0 24px 60px rgba(0,0,0,.46),0 0 45px var(--accent-soft);
}
.question-card::before,.battle-question-card::before { content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid color-mix(in srgb,var(--accent) 12%,transparent); border-radius:18px; }
.timer { width:61px; border-radius:50%; background:radial-gradient(circle,rgba(21,29,49,.92),rgba(7,11,22,.98)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 18px rgba(0,0,0,.3); }
.answer-button { min-height:59px; border-color:rgba(255,229,169,.13); background:linear-gradient(145deg,rgba(28,37,60,.68),rgba(9,14,27,.8)); box-shadow:inset 0 1px rgba(255,255,255,.045); }
.answer-button::before { border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,229,169,.2)); color:color-mix(in srgb,var(--accent) 62%,white); background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.3)); }
.answer-button:hover:not(:disabled) { transform:translateX(4px); box-shadow:0 8px 18px rgba(0,0,0,.2),0 0 18px var(--accent-soft); }
.powerups button,.battle-aids button,.hangman-aids button { border-color:rgba(255,226,161,.13); background:linear-gradient(145deg,rgba(22,30,51,.72),rgba(8,13,25,.83)); box-shadow:inset 0 1px rgba(255,255,255,.055); }
.hangman-einstein { border-color:rgba(255,221,145,.33); box-shadow:0 0 0 5px rgba(235,182,76,.035),0 22px 58px rgba(0,0,0,.5); }
.hangman-puzzle { border-color:rgba(255,222,151,.16); background:linear-gradient(145deg,rgba(22,30,51,.86),rgba(8,13,25,.92)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.25); }
.battle-orbit > span { border-color:#ffe09a; background:linear-gradient(145deg,#182440,#080e1d); box-shadow:0 0 0 6px rgba(236,184,79,.05),0 0 50px rgba(92,141,245,.35); }
.versus-cards article,.battle-scoreboard article { border-color:rgba(255,225,158,.16); background:linear-gradient(145deg,rgba(22,31,52,.8),rgba(8,13,25,.86)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.2); }
.duel-avatar { overflow:hidden; padding:3px; border-color:#efc567; box-shadow:0 0 0 4px rgba(239,192,93,.05),0 8px 18px rgba(0,0,0,.35); }
.duel-avatar img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 44%; }

/* Resultado y recompensas */
.result-screen { background-position:center; }
.result-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 33%,rgba(240,189,79,.17),transparent 23rem),linear-gradient(180deg,rgba(3,6,14,.3),rgba(4,7,15,.9)); }
.result-crest { border-color:#ffe39a; background:radial-gradient(circle at 45% 34%,rgba(255,222,145,.25),rgba(12,18,32,.96) 70%); box-shadow:0 0 0 6px rgba(5,9,18,.75),0 0 0 8px rgba(240,189,79,.3),0 22px 50px rgba(0,0,0,.5),0 0 45px rgba(240,189,79,.17); }
.reward-row { border:1px solid rgba(255,225,158,.14); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,rgba(22,30,51,.8),rgba(8,13,25,.87)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.24); }
.result-record { border-color:rgba(128,158,255,.27); background:linear-gradient(145deg,rgba(77,94,169,.18),rgba(9,14,27,.86)); }

/* Bóveda de Cronología */
.timeline-screen {
  --room:#e0a64d;
  background:linear-gradient(180deg,rgba(8,7,7,.28),rgba(7,8,13,.94)),url("chronology-vault-premium-v7.webp") center/cover;
}
.timeline-screen::before { inset:0; opacity:1; background:linear-gradient(180deg,rgba(3,5,10,.1),rgba(6,7,12,.72) 46%,rgba(5,7,13,.96)); mask-image:none; }
.timeline-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.36),transparent 28% 72%,rgba(0,0,0,.36)); }
.timeline-screen > * { position:relative; z-index:2; }
.timeline-machine { border-color:rgba(255,222,149,.68); background:radial-gradient(circle,#795126,#19130d 67%); box-shadow:0 0 0 6px rgba(5,7,11,.72),0 0 0 8px rgba(224,166,77,.18),inset 0 0 30px rgba(0,0,0,.68),0 14px 34px rgba(0,0,0,.48),0 0 24px rgba(224,166,77,.18); }
.chronology-console { border-color:rgba(255,215,133,.43); background:linear-gradient(145deg,rgba(47,34,22,.9),rgba(9,10,14,.94)); box-shadow:inset 0 1px rgba(255,241,204,.11),inset 0 0 50px rgba(0,0,0,.28),0 22px 55px rgba(0,0,0,.4),0 0 0 4px rgba(224,166,77,.035); backdrop-filter:blur(12px); }
.timeline-slots::before { width:4px; background:linear-gradient(#fff1ba,#efa94a 48%,#835122); box-shadow:0 0 18px rgba(235,173,76,.76); }
.timeline-slot { min-height:69px; border-color:rgba(232,175,85,.3); background:linear-gradient(90deg,rgba(123,80,32,.16),rgba(20,18,16,.7)); box-shadow:inset 0 1px rgba(255,255,255,.05),0 7px 18px rgba(0,0,0,.14); }
.timeline-index { border-color:#e5aa54; background:radial-gradient(circle at 38% 28%,#85582a,#21170f 72%); box-shadow:0 0 0 4px #0f0d0b,0 0 0 6px rgba(231,174,83,.22),0 7px 17px rgba(0,0,0,.55); }
.timeline-event { border-color:rgba(239,186,96,.29); background:linear-gradient(145deg,rgba(112,72,29,.31),rgba(15,15,17,.82)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 23px rgba(0,0,0,.25); }

/* Galería Esmeralda */
.memory-screen {
  --room:#57d9a8;
  background:linear-gradient(180deg,rgba(3,11,12,.25),rgba(4,11,13,.91) 53%,#050a12),url("memory-museum-premium-v7.webp") center/cover;
}
.memory-screen::before { inset:0; opacity:1; background:linear-gradient(180deg,rgba(1,8,9,.12),rgba(3,10,12,.68) 48%,rgba(4,8,14,.94)); animation:premium-museum-light 6s ease-in-out infinite alternate; }
.memory-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 34%,rgba(88,218,170,.06),transparent 55%); }
.memory-screen > * { position:relative; z-index:2; }
.museum-marquee { border-color:rgba(104,237,187,.36); background:linear-gradient(145deg,rgba(18,57,48,.78),rgba(5,19,20,.9)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 48px rgba(0,0,0,.38),0 0 0 4px rgba(77,210,160,.025); backdrop-filter:blur(12px); }
.memory-grid { gap:10px; perspective:1400px; }
.memory-card { min-height:120px; filter:drop-shadow(0 11px 15px rgba(0,0,0,.33)); }
.memory-inner { min-height:120px; transition:transform .62s cubic-bezier(.18,.78,.18,1),filter .28s; }
.memory-front { border:1px solid rgba(255,220,139,.78); background:radial-gradient(circle at 50% 37%,rgba(91,222,175,.16),transparent 45%),repeating-linear-gradient(135deg,rgba(255,224,155,.045) 0 6px,transparent 6px 12px),linear-gradient(145deg,#17493c,#061b19); box-shadow:inset 0 0 0 3px #071b18,inset 0 0 0 5px rgba(255,222,151,.35),inset 0 0 32px rgba(0,0,0,.45),0 0 0 2px rgba(5,10,14,.65); }
.memory-logo-frame { width:62px; border-color:#ffdb83; box-shadow:0 0 0 4px rgba(255,213,125,.08),0 9px 20px rgba(0,0,0,.45),0 0 18px rgba(77,210,160,.12); }
.memory-back { border-color:rgba(255,225,151,.68); background:radial-gradient(circle at 50% 16%,rgba(93,233,179,.32),transparent 49%),linear-gradient(145deg,#286a57,#0b2621); box-shadow:inset 0 0 0 3px #092821,inset 0 0 0 5px rgba(255,222,151,.22),0 12px 28px rgba(0,0,0,.35); }
.memory-card.is-matched .memory-back { animation:premium-match 1.2s ease both; }

/* Terminal cifrado */
.cipher-screen { --room:#52ddf2; background:radial-gradient(circle at 50% 23%,rgba(46,170,207,.19),transparent 28rem),linear-gradient(180deg,#04141b,#050712 76%); }
.cipher-console { border-color:rgba(93,231,252,.48); background:linear-gradient(145deg,rgba(3,31,39,.9),rgba(3,13,22,.94)); box-shadow:inset 0 0 55px rgba(56,213,239,.08),inset 0 1px rgba(255,255,255,.09),0 22px 52px rgba(0,0,0,.42),0 0 0 4px rgba(56,213,239,.025); }
.cipher-wheel { border-color:rgba(111,239,255,.67); box-shadow:0 0 0 6px rgba(56,213,239,.03),inset 0 0 25px rgba(56,213,239,.07),0 0 26px rgba(56,213,239,.12); }
.cipher-choices button { border-color:rgba(94,226,247,.27); background:linear-gradient(145deg,rgba(13,51,64,.48),rgba(4,17,27,.86)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.18); }

/* Atlas imperial */
.atlas-screen { --room:#e58a55; background:radial-gradient(circle at 50% 30%,rgba(225,116,72,.18),transparent 27rem),linear-gradient(180deg,#1a110e,#060912 80%); }
.atlas-heading { margin-top:22px; }
.atlas-compass { border-color:rgba(255,210,143,.67); background:radial-gradient(circle at 35% 28%,#7f4c2b,#22140e 65%); box-shadow:0 0 0 5px rgba(5,8,14,.65),0 0 0 7px rgba(225,116,72,.16),inset 0 0 24px rgba(0,0,0,.68),0 12px 26px rgba(0,0,0,.42); }
.atlas-mission { border-color:rgba(255,195,133,.44); background:linear-gradient(145deg,rgba(102,52,29,.66),rgba(15,12,12,.94)); box-shadow:inset 0 1px rgba(255,235,200,.1),0 15px 34px rgba(0,0,0,.3); }
.atlas-map-frame { border:4px solid #54301a; border-radius:23px; box-shadow:0 0 0 1px #e0a25a,0 0 0 6px #1b100b,0 0 0 8px rgba(224,162,90,.12),0 22px 58px rgba(0,0,0,.6),inset 0 0 35px rgba(0,0,0,.38); }
.atlas-map-frame::before { inset:9px; border-color:rgba(255,221,158,.58); }
.atlas-zone { border-color:rgba(255,219,158,.76); background:linear-gradient(145deg,rgba(27,19,15,.94),rgba(72,44,25,.91)); box-shadow:0 5px 14px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.13),0 0 0 3px rgba(255,213,145,.035); }
.atlas-zone::before { content:""; position:absolute; left:50%; bottom:-13px; width:8px; aspect-ratio:1; transform:translateX(-50%) rotate(45deg); border-right:1px solid #f0b66d; border-bottom:1px solid #f0b66d; background:#452918; }

/* Acabados compartidos */
.arcade-header,.page-header,.run-header,.question-header { filter:drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.icon-button { border-color:rgba(255,229,168,.16); background:linear-gradient(145deg,rgba(24,33,54,.8),rgba(8,13,25,.86)); box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.22); }
.arcade-stats span { border-color:color-mix(in srgb,var(--room) 31%,rgba(255,225,158,.13)); background:rgba(5,9,17,.67); box-shadow:inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(8px); }
.arcade-actions button,.museum-hint,.cipher-hint,.atlas-hint { box-shadow:inset 0 1px rgba(255,255,255,.055),0 9px 20px rgba(0,0,0,.2); }
.feedback-panel,.arcade-feedback,.battle-feedback,.hangman-result { border-color:rgba(255,226,159,.2); background:linear-gradient(145deg,rgba(23,32,53,.97),rgba(7,11,22,.98)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 -22px 70px rgba(0,0,0,.62); }
.toast { border-color:rgba(255,225,158,.2); background:linear-gradient(145deg,rgba(24,33,55,.97),rgba(8,13,25,.98)); }

@keyframes premium-shell-glint { 0%,35% { transform:translateX(-45%); opacity:0; } 52% { opacity:.5; } 70%,100% { transform:translateX(45%); opacity:0; } }
@keyframes premium-screen-in { from { opacity:0; transform:translateY(13px) scale(.992); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes premium-breathe { to { opacity:.76; transform:scale(1.035); } }
@keyframes premium-stars { to { opacity:.72; transform:translateY(-3px); } }
@keyframes premium-button-shine { 0%,56% { left:-35%; } 78%,100% { left:125%; } }
@keyframes premium-wheel-aura { to { transform:scale(1.07); opacity:.74; } }
@keyframes premium-museum-light { to { filter:brightness(1.1); background-color:rgba(58,219,166,.025); } }
@keyframes premium-match { 0% { filter:brightness(1); } 38% { filter:brightness(1.32); box-shadow:0 0 34px rgba(77,210,160,.5); } 100% { filter:brightness(1.08); } }
@keyframes variety-scan { 0%,58% { transform:translateX(-100%); } 82%,100% { transform:translateX(100%); } }

@media (min-width:700px) {
  .game-shell { min-height:calc(100svh - 48px); border:1px solid rgba(255,225,158,.17); border-radius:32px; }
  .bottom-nav { bottom:23px; }
}
@media (max-height:760px) {
  .hero-panel { min-height:408px; }
  .hero-emblem { width:96px; }
  .wheel-stage { width:min(64vh,318px); }
  .wheel-label { width:50px; height:50px; left:calc(50% - 25px); top:calc(50% - 25px); transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-105px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }
}
@media (max-width:390px) {
  .resource { padding-inline:5px; font-size:.7rem; }
  .resource i { width:16px; height:16px; }
  .mode-card:first-child { min-height:158px; }
  .variety-status { grid-template-columns:38px 1fr; }
  .variety-status em { display:none; }
  .wheel-label { width:49px; height:49px; left:calc(50% - 24.5px); top:calc(50% - 24.5px); transform:rotate(calc(var(--i)*51.4286deg + 25.7143deg)) translateY(-101px) rotate(calc(var(--i)*-51.4286deg - 25.7143deg)); }
}