.trivia-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.trivia-mode{min-height:96px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-align:left}.trivia-mode b,.trivia-mode small{display:block}.trivia-mode small{margin-top:7px;color:var(--muted)}.trivia-mode.learning{border-color:var(--accent)}.trivia-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0}.trivia-stats span{padding:8px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--line)}.rank-table{margin-top:18px;text-align:left}.rank-table h3{color:var(--accent)}.rank-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;margin-top:7px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.rank-row.champion{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.champion-banner{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:14px;margin-bottom:10px;border:2px solid var(--accent);border-radius:16px;background:var(--surface2)}.champion-banner img{grid-column:1/-1;width:min(100%,420px);max-height:150px;object-fit:contain;background:#fff;border-radius:8px}.game-modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(8,20,31,.72);backdrop-filter:blur(5px)}.game-modal{width:min(100%,460px);padding:28px;border:1px solid var(--accent);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 20px 70px rgba(0,0,0,.35);text-align:center;animation:modal-in .18s ease-out}.modal-mark{font-size:2.4rem}.modal-copy{color:var(--muted);line-height:1.5}.modal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.modal-secondary{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:12px;padding:11px 15px}.modal-label{display:grid;gap:7px;margin-top:16px;text-align:left;color:var(--muted)}.modal-label input{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text)}.champion-creator{margin-top:24px;padding:20px;border:1px solid var(--accent);border-radius:22px;background:linear-gradient(145deg,var(--surface),var(--surface2));text-align:left}.creator-heading{display:flex;gap:14px;align-items:center}.creator-heading h3{margin:2px 0}.creator-heading p{margin:4px 0;color:var(--muted)}.creator-badge{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:var(--accent);font-size:1.8rem}.creator-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:18px;margin-top:18px}.creator-preview{padding:10px;border-radius:16px;background:rgba(255,255,255,.12)}#champion-canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}.creator-tools{display:grid;gap:10px;align-content:start}.tool-label{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted)}.tool-label input[type=color]{width:42px;height:30px;padding:0;border:0;background:transparent}.tool-group{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding-top:5px}.tool-group>span{grid-column:1/-1;color:var(--muted);font-size:.82rem}.tool,.symbol-tool{padding:9px 7px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}.tool.active{border-color:var(--accent);background:var(--accent);color:#fff}.symbol-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.symbol-tool{font-size:1.2rem;padding:6px}.creator-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}.creator-actions button{flex:1}.creator-actions .trivia-next{min-width:100%}@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:700px){.creator-layout{grid-template-columns:1fr}.trivia-mode-grid{grid-template-columns:1fr}.champion-banner{grid-template-columns:1fr}.game-modal{padding:22px}}@media(prefers-reduced-motion:reduce){.game-modal{animation:none}}.temporary-creator-entry,.collection-link{display:block;width:100%;margin-top:16px;padding:13px;border:1px dashed var(--accent);border-radius:14px;background:color-mix(in srgb,var(--surface2) 80%,var(--accent));color:var(--text);font-weight:900}.created-flags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:20px}.created-flag-card{padding:13px;border:1px solid var(--line);border-radius:18px;background:var(--surface2);text-align:left}.created-flag-image{display:grid;place-items:center;min-height:115px;border-radius:12px;background:#fff;overflow:hidden}.created-flag-image img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain}.created-flag-card h3{margin:12px 0 6px}.created-flag-card p{margin:0 0 5px;color:var(--muted)}.created-flag-card small{color:var(--subtle)} .created-flag-showcase{margin:26px auto 0;padding:24px;border:2px solid var(--accent);border-radius:24px;background:linear-gradient(145deg,var(--surface),var(--surface2));text-align:center}.created-flag-showcase h2{margin:6px 0}.created-flag-showcase>p:not(.eyebrow){color:var(--muted)}.created-flag-stage{position:relative;display:grid;place-items:center;min-height:260px;margin:18px 0;padding:18px;border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}.created-flag-stage canvas{display:block;width:min(100%,700px);height:auto;aspect-ratio:3/2}.created-flag-stage img{display:none} .animated-created-card{width:100%;color:var(--text);font:inherit}.animated-created-card .created-flag-image{min-height:115px}.animated-created-card canvas{display:block;width:100%;aspect-ratio:3/2}.animated-created-card img{display:none}.created-flag-dialog{position:relative;width:min(900px,calc(100vw - 28px));max-height:90vh;overflow:auto;padding:28px;border:1px solid var(--accent);border-radius:24px;background:var(--surface);color:var(--text);text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.5)}.created-flag-dialog h2{margin:4px 0}.created-flag-dialog>p:not(.eyebrow){color:var(--muted)}.created-close{position:absolute;right:18px;top:18px;font-size:1.5rem}.created-large-stage{display:grid;place-items:center;min-height:340px;margin-top:20px;padding:22px;border-radius:20px;background:#fff;overflow:hidden}.created-large-stage canvas{display:block;width:min(100%,760px);height:auto;aspect-ratio:3/2}.created-large-stage img{display:none} .creator-tools [data-enh-tool="clean"]{display:none} .v2-editor{max-width:1180px;margin:auto;text-align:center}.v2-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,360px);gap:18px;text-align:left}.v2-board{padding:14px;border-radius:22px;background:linear-gradient(145deg,var(--surface),var(--surface2));box-shadow:var(--shadow)}#v2-canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:12px;background:#fff;touch-action:none}.v2-panel{display:grid;gap:12px;align-content:start;padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.v2-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v2-tools label,.v2-text-tools label{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--muted)}.v2-tools button,.v2-tabs button,.v2-library button,.v2-shapes button,.v2-text-tools button,.v2-text-tools select{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);padding:7px}.v2-tabs{display:flex;flex-wrap:wrap;gap:5px}.v2-tabs button{font-size:.72rem}.v2-library{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-height:185px;overflow:auto}.v2-library button{font-size:1.35rem;padding:4px}.v2-shapes{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.v2-text-tools{display:grid;gap:8px}.v2-text-tools select{width:100%}.v2-actions{display:flex;gap:8px}.v2-actions button{flex:1}.v2-editor input[type=range]{accent-color:var(--accent)}@media(max-width:800px){.v2-workspace{grid-template-columns:1fr}.v2-library{max-height:220px}} #trivia .trivia-stats .trivia-countdown{display:inline-flex;align-items:center;gap:.45em;padding:3px 11px;font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:900;line-height:1.05;transition:background-color .16s,color .16s,border-color .16s} #trivia .trivia-countdown>span{font-size:.68em;font-weight:800} #trivia .trivia-countdown>b{font-size:clamp(1.55rem,4vw,2.25rem);font-variant-numeric:tabular-nums;line-height:1;min-width:1.15em;text-align:center} #trivia .trivia-countdown.is-warning{color:#fbbf24;border-color:#d99a17;background:color-mix(in srgb,#f59e0b 17%,var(--surface2))} #trivia .trivia-countdown.is-critical{color:#fff;border-color:#ef4444;background:#991b1b;animation:trivia-clock-pulse 1s ease-in-out infinite} @keyframes trivia-clock-pulse{50%{transform:scale(1.035);box-shadow:0 0 0 3px rgba(239,68,68,.18)}} @media(prefers-reduced-motion:reduce){#trivia .trivia-countdown.is-critical{animation:none}} /* RV3 Trivia: capa visual aislada; no altera tiempos, puntuación ni validación. */ #trivia .game-shell:has(.answers){ position:relative;isolation:isolate;border:1px solid color-mix(in srgb,var(--focus) 42%,var(--line)); border-radius:clamp(18px,2.2vw,30px); background:radial-gradient(ellipse at 19% 48%,rgba(25,117,171,.18),transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#081226),color-mix(in srgb,var(--bg2) 74%,#081226)); box-shadow:0 22px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.08),0 0 30px rgba(37,190,255,.08); animation:trivia-scene-enter .55s cubic-bezier(.2,.75,.25,1) both; } #trivia .game-shell:has(.answers)::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,transparent 22%,rgba(104,230,255,.055) 47%,transparent 70%);background-size:220% 100%;animation:trivia-light-sweep 8s ease-in-out infinite;} #trivia .game-shell:has(.answers)>.eyebrow{color:var(--focus);font-weight:950;letter-spacing:.16em;text-shadow:0 0 18px color-mix(in srgb,var(--focus) 45%,transparent);} #trivia .trivia-stats{gap:clamp(6px,1vw,12px);} #trivia .trivia-stats>span{position:relative;padding:7px 13px;border:1px solid color-mix(in srgb,var(--focus) 25%,var(--line));border-radius:13px;background:linear-gradient(150deg,color-mix(in srgb,var(--surface2) 88%,#172b4b),color-mix(in srgb,var(--surface) 92%,#071427));box-shadow:inset 0 1px rgba(255,255,255,.07),0 7px 18px rgba(0,0,0,.16);font-weight:800;} #trivia .trivia-stats>span b{color:var(--text);font-variant-numeric:tabular-nums;} #trivia #trivia-countdown{min-width:116px;justify-content:center;border-color:color-mix(in srgb,var(--accent) 46%,var(--line));box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 18px color-mix(in srgb,var(--accent) 15%,transparent);} #trivia .trivia-countdown>b{font-size:clamp(1.8rem,4.5vw,2.7rem);text-shadow:0 0 18px currentColor;} #trivia .trivia-countdown.is-warning{box-shadow:0 0 22px rgba(245,158,11,.28),inset 0 1px rgba(255,255,255,.12);} #trivia .trivia-countdown.is-critical{box-shadow:0 0 28px rgba(239,68,68,.42),inset 0 1px rgba(255,255,255,.13);} #trivia .flag-stage{position:relative;isolation:isolate;display:grid;place-items:center;border:1px solid rgba(105,220,255,.28);border-radius:22px;background:radial-gradient(ellipse at 50% 54%,rgba(37,130,191,.28),rgba(9,25,48,.46) 62%,rgba(4,12,25,.22))!important;box-shadow:inset 0 0 30px rgba(38,185,255,.12),0 12px 32px rgba(0,0,0,.22);} #trivia .flag-stage::before{content:"";position:absolute;z-index:-1;width:min(66%,440px);aspect-ratio:1;border-radius:50%;background:rgba(22,169,238,.18);filter:blur(38px);animation:trivia-flag-aura 3.8s ease-in-out infinite;pointer-events:none;} #trivia #trivia-cloth{filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(63,211,255,.22));} #trivia .game-shell:has(.answers)>h2{color:var(--text);font-weight:900;text-wrap:balance;text-shadow:0 3px 18px rgba(0,0,0,.28);} #trivia .answers button{position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--focus) 28%,var(--line));border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 94%,#183d61),color-mix(in srgb,var(--surface) 94%,#07152a));color:var(--text);font-weight:850;box-shadow:inset 0 1px rgba(255,255,255,.09),0 9px 20px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;} #trivia .answers button::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.11) 48%,transparent 72%);transform:translateX(-130%);} @media(hover:hover){#trivia .answers button:not(:disabled):hover{transform:translateY(-3px) scale(1.015);border-color:var(--focus);box-shadow:0 0 0 1px color-mix(in srgb,var(--focus) 30%,transparent),0 13px 26px rgba(0,0,0,.28),0 0 22px color-mix(in srgb,var(--focus) 18%,transparent);}#trivia .answers button:not(:disabled):hover::before{animation:trivia-answer-shine .65s ease-out;}} #trivia .answers button:not(:disabled):active{transform:translateY(1px) scale(.99);} #trivia .answers button:disabled:not(.is-correct):not(.is-wrong){opacity:.78;} #trivia .answers button.is-correct{border-color:#55f2bb;background:linear-gradient(135deg,#087c61,#11b884 58%,#53e6a9)!important;box-shadow:0 0 0 1px rgba(85,242,187,.36),0 0 30px rgba(16,185,129,.4),inset 0 1px rgba(255,255,255,.25);animation:trivia-answer-correct .52s cubic-bezier(.2,.8,.2,1) both;} #trivia .answers button.is-wrong{border-color:#ff7c90;background:linear-gradient(135deg,#7e2139,#d6405a 58%,#fa7180)!important;box-shadow:0 0 0 1px rgba(255,124,144,.34),0 0 26px rgba(225,55,85,.34);animation:trivia-answer-wrong .38s ease both;} #trivia .trivia-actions button{border-radius:13px;font-weight:900;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;} @media(hover:hover){#trivia .trivia-actions button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.23);}} #trivia .trivia-hint{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));} #trivia .trivia-next{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#ff7b38));box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 20%,transparent);} #trivia .game-shell:has(.answers)>.result{padding:8px 12px;border-radius:12px;font-weight:850;} #trivia .game-shell:has(.answers)>.result.good{color:#b9ffe5;background:rgba(5,150,105,.16);animation:trivia-result-in .32s ease-out both;} #trivia .game-shell:has(.answers)>.result.bad{color:#ffd0d7;background:rgba(190,35,65,.17);animation:trivia-result-in .32s ease-out both;} #trivia .trivia-menu .trivia-mode{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--focus) 28%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 95%,#154370),color-mix(in srgb,var(--surface) 94%,#081328));box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.2);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;} #trivia .trivia-menu .trivia-mode:nth-child(1){--mode-glow:#27c9ff;}#trivia .trivia-menu .trivia-mode:nth-child(2){--mode-glow:#a78bfa;}#trivia .trivia-menu .trivia-mode:nth-child(3){--mode-glow:#34d399;}#trivia .trivia-menu .trivia-mode.learning{--mode-glow:#fbbf24;} @media(hover:hover){#trivia .trivia-menu .trivia-mode:hover{transform:translateY(-4px);border-color:var(--mode-glow,var(--focus));box-shadow:0 0 0 1px color-mix(in srgb,var(--mode-glow,var(--focus)) 34%,transparent),0 16px 30px rgba(0,0,0,.26),0 0 24px color-mix(in srgb,var(--mode-glow,var(--focus)) 18%,transparent);}} #trivia .trivia-menu .trivia-mode b{color:var(--mode-glow,var(--focus));} @keyframes trivia-scene-enter{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} @keyframes trivia-light-sweep{0%,15%{background-position:130% 0}70%,100%{background-position:-120% 0}} @keyframes trivia-flag-aura{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}} @keyframes trivia-answer-shine{to{transform:translateX(130%)}} @keyframes trivia-answer-correct{0%{transform:scale(.96);filter:brightness(1.5)}55%{transform:scale(1.035)}100%{transform:scale(1)}} @keyframes trivia-answer-wrong{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}} @keyframes trivia-result-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @media(max-height:440px) and (orientation:landscape){#trivia .game-shell:has(.answers){border-radius:16px}#trivia .trivia-stats>span{padding:4px 8px}#trivia .flag-stage{border-radius:14px}#trivia .answers button{border-radius:11px}} @media(prefers-reduced-motion:reduce){#trivia .game-shell:has(.answers),#trivia .game-shell:has(.answers)::before,#trivia .flag-stage::before{animation:none}} /* RV3 Trivia: selector de dificultad y escenario de bandera. Solo presentación. */ #trivia .trivia-menu{ position:relative;isolation:isolate;box-sizing:border-box;width:min(100%,1080px);max-width:calc(100vw - 28px);margin-inline:auto; padding:clamp(18px,3vw,38px);border:1px solid rgba(104,222,255,.42);border-radius:clamp(20px,2.5vw,30px); background:radial-gradient(ellipse at 4% 0%,rgba(28,194,255,.2),transparent 43%),radial-gradient(ellipse at 96% 100%,rgba(151,83,255,.18),transparent 42%),linear-gradient(145deg,rgba(13,31,55,.97),rgba(5,14,31,.98)); box-shadow:0 24px 65px rgba(0,0,0,.38),0 0 38px rgba(29,181,255,.12),inset 0 1px rgba(255,255,255,.1); animation:trivia-difficulty-enter .58s cubic-bezier(.2,.75,.25,1) both; } #trivia .trivia-menu::before{content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 20%,rgba(101,228,255,.1) 48%,transparent 72%);background-size:220% 100%;animation:trivia-difficulty-sweep 8s ease-in-out infinite;} #trivia .trivia-menu::after{content:"";position:absolute;z-index:2;inset:1px;border:1px solid rgba(255,255,255,.055);border-radius:inherit;pointer-events:none;} #trivia .trivia-menu>*{position:relative;z-index:1;} #trivia .trivia-menu>.eyebrow{color:#68e8ff;font-weight:950;letter-spacing:.16em;text-shadow:0 0 18px rgba(68,220,255,.48);} #trivia .trivia-menu>h2{margin:8px 0;color:#f2f8ff;font-size:clamp(1.45rem,3vw,2.2rem);font-weight:950;text-shadow:0 4px 22px rgba(34,174,255,.24);} #trivia .trivia-menu .trivia-help{color:rgba(221,235,255,.78);} #trivia .trivia-menu .trivia-mode-grid{gap:clamp(8px,1.2vw,14px);margin-top:clamp(14px,2.2vw,24px);} #trivia .trivia-menu .trivia-mode{position:relative;isolation:isolate;display:flex;min-height:clamp(102px,12vh,138px);flex-direction:column;justify-content:center;gap:5px;overflow:hidden;padding:clamp(13px,1.8vw,21px);border:1px solid color-mix(in srgb,var(--mode-glow,var(--focus)) 48%,rgba(255,255,255,.13));border-radius:19px;text-align:left;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--mode-glow,var(--focus)) 25%,transparent),transparent 58%),linear-gradient(145deg,rgba(25,50,79,.96),rgba(8,20,39,.98));box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 24px rgba(0,0,0,.26),0 0 22px color-mix(in srgb,var(--mode-glow,var(--focus)) 11%,transparent);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease;animation:trivia-mode-arrive .48s cubic-bezier(.2,.75,.25,1) both;} #trivia .trivia-menu .trivia-mode:nth-child(1){animation-delay:.06s;--mode-glow:#2ed6ff;} #trivia .trivia-menu .trivia-mode:nth-child(2){animation-delay:.12s;--mode-glow:#b496ff;} #trivia .trivia-menu .trivia-mode:nth-child(3){animation-delay:.18s;--mode-glow:#43edb0;} #trivia .trivia-menu .trivia-mode.learning{animation-delay:.24s;--mode-glow:#ffc94f;} #trivia .trivia-menu .trivia-mode::after{content:"";position:absolute;z-index:0;top:16%;bottom:16%;left:0;width:3px;border-radius:0 4px 4px 0;background:var(--mode-glow,var(--focus));box-shadow:0 0 14px var(--mode-glow,var(--focus));opacity:.9;pointer-events:none;} #trivia .trivia-menu .trivia-mode b,#trivia .trivia-menu .trivia-mode small{position:relative;z-index:1;} #trivia .trivia-menu .trivia-mode b{font-size:clamp(1rem,1.35vw,1.2rem);text-shadow:0 0 16px color-mix(in srgb,var(--mode-glow,var(--focus)) 35%,transparent);} #trivia .trivia-menu .trivia-mode small{margin-top:3px;color:rgba(231,241,255,.78);font-size:clamp(.72rem,.9vw,.82rem);line-height:1.35;} @media(hover:hover){#trivia .trivia-menu .trivia-mode:hover{transform:translateY(-6px) scale(1.018);filter:brightness(1.13);border-color:var(--mode-glow,var(--focus));box-shadow:inset 0 1px rgba(255,255,255,.18),0 18px 34px rgba(0,0,0,.34),0 0 32px color-mix(in srgb,var(--mode-glow,var(--focus)) 27%,transparent);}} #trivia .trivia-menu .trivia-mode:focus-visible{outline:3px solid color-mix(in srgb,var(--mode-glow,var(--focus)) 80%,white);outline-offset:3px;} #trivia .trivia-menu .trivia-mode:active{transform:translateY(-1px) scale(.99);} #trivia .flag-stage{position:relative;isolation:isolate;overflow:visible;min-height:clamp(210px,40vh,460px);padding:clamp(14px,3vw,34px);border:1px solid rgba(112,226,255,.48)!important;border-radius:clamp(18px,2.4vw,28px);background:radial-gradient(ellipse at 50% 48%,rgba(42,190,255,.28),transparent 56%),radial-gradient(ellipse at 50% 100%,rgba(109,89,255,.16),transparent 48%),linear-gradient(155deg,rgba(15,39,68,.94),rgba(5,16,34,.98))!important;box-shadow:inset 0 0 48px rgba(35,174,255,.16),inset 0 1px rgba(255,255,255,.12),0 18px 44px rgba(0,0,0,.3),0 0 30px rgba(28,172,255,.12);animation:trivia-stage-arrive .5s ease-out both;} #trivia .flag-stage::before{content:"";position:absolute;z-index:0;inset:9% 13%;border-radius:50%;background:radial-gradient(ellipse,rgba(39,190,255,.36),rgba(46,101,255,.12) 43%,transparent 72%);filter:blur(28px);animation:trivia-flag-aura 4.8s ease-in-out infinite;pointer-events:none;} #trivia .flag-stage::after{content:"";position:absolute;z-index:2;inset:10px;border:1px solid rgba(162,232,255,.12);border-radius:inherit;box-shadow:inset 0 0 24px rgba(31,169,255,.08);pointer-events:none;} #trivia #trivia-cloth{position:relative;z-index:1;display:block;width:min(100%,720px);height:auto;filter:drop-shadow(0 22px 20px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(57,204,255,.25));transform-origin:center;animation:trivia-flag-emerge .62s cubic-bezier(.2,.75,.25,1) both;} @keyframes trivia-difficulty-enter{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} @keyframes trivia-difficulty-sweep{0%,12%{background-position:140% 0}72%,100%{background-position:-130% 0}} @keyframes trivia-mode-arrive{from{opacity:0;transform:translateY(13px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes trivia-stage-arrive{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}} @keyframes trivia-flag-emerge{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:700px){#trivia .trivia-menu{max-width:calc(100vw - 20px);padding:16px;border-radius:20px}#trivia .trivia-menu .trivia-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#trivia .trivia-menu .trivia-mode{min-height:78px;padding:10px 12px;border-radius:15px}#trivia .flag-stage{min-height:220px;padding:12px}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu{padding:10px 14px;border-radius:16px}#trivia .trivia-menu>h2{margin:3px 0;font-size:1.35rem}#trivia .trivia-menu .trivia-help{margin:3px 0 8px;font-size:.78rem}#trivia .trivia-menu .trivia-mode-grid{margin-top:8px;gap:7px}#trivia .trivia-menu .trivia-mode{min-height:62px;padding:7px 10px;border-radius:12px}#trivia .trivia-menu .trivia-mode small{font-size:.68rem}#trivia .flag-stage{min-height:180px;padding:9px}} @media(prefers-reduced-motion:reduce){#trivia .trivia-menu,#trivia .trivia-menu::before,#trivia .trivia-menu .trivia-mode,#trivia .flag-stage,#trivia .flag-stage::before,#trivia #trivia-cloth{animation:none!important;transition:none!important}} /* RV3 Trivia selector: mission grid fills the available screen area. */ #trivia.active:has(.trivia-menu){box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(4px,1vh,10px);width:100%;max-width:none;height:100dvh;min-height:100dvh;padding:clamp(6px,1.2vh,12px) clamp(10px,3vw,42px);overflow:auto;} #trivia .trivia-menu{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:column;justify-content:flex-start;gap:clamp(8px,1.4vh,16px);align-self:stretch;width:min(100%,1480px);max-width:none;min-height:0;margin:0 auto;padding:clamp(14px,2.2vh,28px) clamp(14px,2.2vw,32px);} #trivia .trivia-menu>.eyebrow{margin:0;text-align:center;font-size:clamp(.78rem,1.2vw,1rem);} #trivia .trivia-menu>h2{margin:0;text-align:center;font-size:clamp(1.5rem,2.8vw,2.5rem);} #trivia .trivia-menu .trivia-help{margin:0;text-align:center;font-size:clamp(.85rem,1.25vw,1.05rem);} #trivia .trivia-menu .trivia-mode-grid{display:grid;flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;gap:clamp(10px,1.5vw,20px);width:100%;min-height:0;margin:clamp(4px,1vh,12px) 0 0;} #trivia .trivia-menu .trivia-mode{--mode-glow:#42dfff;position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(54px,8vw,108px) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,24px);min-width:0;min-height:0;height:100%;padding:clamp(12px,2vw,28px);overflow:hidden;border:1px solid color-mix(in srgb,var(--mode-glow) 70%,white 10%);border-radius:clamp(18px,2vw,28px);text-align:left;background:radial-gradient(ellipse at 15% 10%,color-mix(in srgb,var(--mode-glow) 24%,transparent),transparent 58%),linear-gradient(145deg,rgba(22,46,77,.98),rgba(6,17,35,.99));box-shadow:inset 0 1px rgba(255,255,255,.15),inset 5px 0 var(--mode-glow),0 18px 35px rgba(0,0,0,.31),0 0 30px color-mix(in srgb,var(--mode-glow) 14%,transparent);text-align:left;transition:transform .22s ease,filter .22s ease,border-color .22s ease,box-shadow .22s ease;animation:trivia-mission-enter .58s cubic-bezier(.18,.74,.22,1) both;} #trivia .trivia-menu .trivia-mode:nth-child(1){--mode-glow:#35dcff;animation-delay:.06s;} #trivia .trivia-menu .trivia-mode:nth-child(2){--mode-glow:#b58aff;animation-delay:.13s;} #trivia .trivia-menu .trivia-mode:nth-child(3){--mode-glow:#ff735f;animation-delay:.2s;} #trivia .trivia-menu .trivia-mode.learning{--mode-glow:#f3c45a;animation-delay:.27s;} #trivia .trivia-menu .trivia-mode::before{content:"";position:relative;z-index:1;display:grid;place-items:center;justify-self:center;width:clamp(50px,7vw,92px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--mode-glow) 72%,white 20%);border-radius:28%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--mode-glow) 70%,white 20%),color-mix(in srgb,var(--mode-glow) 35%,#0a1a31) 53%,#091426 100%);box-shadow:0 0 0 6px color-mix(in srgb,var(--mode-glow) 9%,transparent),0 0 28px color-mix(in srgb,var(--mode-glow) 38%,transparent),inset 0 2px 8px rgba(255,255,255,.35),inset 0 -8px 12px rgba(0,0,0,.42);transform:rotate(-8deg);} #trivia .trivia-menu .trivia-mode::after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(112deg,transparent 28%,color-mix(in srgb,var(--mode-glow) 15%,transparent) 48%,transparent 68%);background-size:230% 100%;background-position:140% 0;pointer-events:none;transition:background-position .55s ease;} #trivia .trivia-menu .trivia-mode .mode-emblem{position:absolute;z-index:2;left:clamp(12px,2vw,28px);top:50%;display:grid;place-items:center;width:clamp(50px,7vw,92px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;} #trivia .trivia-menu .trivia-mode .mode-emblem::before,#trivia .trivia-menu .trivia-mode .mode-emblem::after{content:"";position:absolute;inset:-7px;border:1px solid color-mix(in srgb,var(--mode-glow) 38%,transparent);border-radius:30%;transform:rotate(22deg);} #trivia .trivia-menu .trivia-mode .mode-emblem::after{inset:-14px;border-color:color-mix(in srgb,var(--mode-glow) 21%,transparent);transform:rotate(47deg);} #trivia .trivia-menu .trivia-mode .mode-emblem i{font-style:normal;font-size:clamp(1.45rem,3.2vw,3rem);font-weight:1000;line-height:1;color:#fff;text-shadow:0 2px 10px #00101f,0 0 16px var(--mode-glow);transform:rotate(8deg);} #trivia .trivia-menu .trivia-mode .mode-copy{position:relative;z-index:2;display:grid;gap:clamp(4px,.7vh,9px);min-width:0;} #trivia .trivia-menu .trivia-mode b{color:#f5faff;font-size:clamp(1.2rem,2.2vw,2rem);font-weight:1000;line-height:1.08;text-shadow:0 2px 14px color-mix(in srgb,var(--mode-glow) 45%,transparent);} #trivia .trivia-menu .trivia-mode .mode-description{margin:0;color:rgba(233,243,255,.9);font-size:clamp(.82rem,1.2vw,1.05rem);line-height:1.35;} #trivia .trivia-menu .trivia-mode .mode-rules{margin:0;color:color-mix(in srgb,var(--mode-glow) 68%,white);font-size:clamp(.74rem,1vw,.92rem);font-weight:850;line-height:1.35;} #trivia .trivia-menu .trivia-mode .mode-state{justify-self:start;padding:4px 9px;border:1px solid color-mix(in srgb,var(--mode-glow) 52%,transparent);border-radius:999px;color:var(--mode-glow);font-size:.7rem;font-weight:950;letter-spacing:.09em;} #trivia .trivia-menu .trivia-mode.is-locked{filter:saturate(.76);} #trivia .trivia-menu .trivia-mode.is-locked .mode-state{color:#ffe1a0;background:rgba(74,49,12,.52);} #trivia .trivia-menu .trivia-mode.is-unlocked{--mode-glow:#68f3bd;} @media(hover:hover){#trivia .trivia-menu .trivia-mode:hover{z-index:3;transform:translateY(-5px) scale(1.012);filter:brightness(1.12);border-color:var(--mode-glow);box-shadow:inset 0 1px rgba(255,255,255,.2),inset 5px 0 var(--mode-glow),0 24px 46px rgba(0,0,0,.4),0 0 42px color-mix(in srgb,var(--mode-glow) 31%,transparent)}#trivia .trivia-menu .trivia-mode:hover::after{background-position:-130% 0}#trivia .trivia-menu .trivia-mode:hover .mode-emblem{filter:brightness(1.16);transform:translateY(-50%) scale(1.08)}} #trivia .trivia-menu .trivia-mode:focus-visible{outline:3px solid color-mix(in srgb,var(--mode-glow) 80%,white);outline-offset:4px;} @media(max-width:700px){#trivia.active:has(.trivia-menu){padding-inline:8px}#trivia .trivia-menu{padding:12px;gap:8px}#trivia .trivia-menu .trivia-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}#trivia .trivia-menu .trivia-mode{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:10px;border-radius:16px}#trivia .trivia-menu .trivia-mode::before,#trivia .trivia-menu .trivia-mode .mode-emblem{width:44px}#trivia .trivia-menu .trivia-mode .mode-emblem{left:10px}#trivia .trivia-menu .trivia-mode .mode-emblem i{font-size:1.45rem}#trivia .trivia-menu .trivia-mode b{font-size:clamp(1rem,2.8vw,1.35rem)}#trivia .trivia-menu .trivia-mode .mode-description{font-size:clamp(.68rem,1.8vw,.82rem)}#trivia .trivia-menu .trivia-mode .mode-rules{font-size:clamp(.62rem,1.6vw,.75rem)}} @media(max-height:440px) and (orientation:landscape){#trivia.active:has(.trivia-menu){gap:3px;padding-block:3px}#trivia .trivia-menu{padding:8px 12px;gap:5px;border-radius:17px}#trivia .trivia-menu>.eyebrow{font-size:.68rem}#trivia .trivia-menu>h2{font-size:1.25rem}#trivia .trivia-menu .trivia-help{font-size:.7rem}#trivia .trivia-menu .trivia-mode-grid{gap:6px;margin-top:2px}#trivia .trivia-menu .trivia-mode{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:8px 10px;border-radius:14px}#trivia .trivia-menu .trivia-mode::before,#trivia .trivia-menu .trivia-mode .mode-emblem{width:38px}#trivia .trivia-menu .trivia-mode .mode-emblem{left:10px}#trivia .trivia-menu .trivia-mode .mode-emblem i{font-size:1.25rem}#trivia .trivia-menu .trivia-mode b{font-size:clamp(.9rem,2.5vw,1.2rem)}#trivia .trivia-menu .trivia-mode .mode-description{font-size:clamp(.62rem,1.6vw,.75rem)}#trivia .trivia-menu .trivia-mode .mode-rules{font-size:clamp(.6rem,1.4vw,.7rem)}} @media(max-width:520px) and (orientation:portrait){#trivia .trivia-menu .trivia-mode-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(104px,auto);flex:none}#trivia .trivia-menu .trivia-mode{min-height:104px}} @keyframes trivia-mission-enter{from{opacity:0;transform:translateY(22px) scale(.965);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} @media(prefers-reduced-motion:reduce){#trivia .trivia-menu .trivia-mode,#trivia .trivia-menu .trivia-mode::after{animation:none!important;transition:none!important}} #trivia.active:has(.trivia-menu){padding-bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));} @media(max-height:440px) and (orientation:landscape){#trivia.active:has(.trivia-menu){padding-bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));}} /* RV3 Trivia: ambient movement remains visible in normal mode; reduced mode stays calm. */ @keyframes trivia-menu-drift{0%,100%{background-position:0% 0%,100% 100%,center}50%{background-position:100% 28%,0% 72%,center}} @keyframes trivia-menu-glow{0%,100%{opacity:.35}50%{opacity:1}} @keyframes trivia-mission-float{0%,100%{translate:0 1px}50%{translate:0 -11px}} @keyframes trivia-mission-sheen{0%,12%{background-position:140% 0}58%,100%{background-position:-140% 0}} @keyframes trivia-emblem-orbit{from{transform:rotate(22deg) scale(.84)}50%{transform:rotate(202deg) scale(1.12)}to{transform:rotate(382deg) scale(.84)}} @keyframes trivia-emblem-orbit-reverse{from{transform:rotate(47deg) scale(1.1)}50%{transform:rotate(-133deg) scale(.88)}to{transform:rotate(-313deg) scale(1.1)}} @keyframes trivia-emblem-bob{0%,100%{transform:rotate(8deg) translateY(3px)}50%{transform:rotate(-4deg) translateY(-9px)}} @keyframes trivia-emblem-aura{0%,100%{filter:brightness(.76);box-shadow:0 0 0 5px color-mix(in srgb,var(--mode-glow) 10%,transparent),0 0 14px color-mix(in srgb,var(--mode-glow) 25%,transparent),inset 0 2px 8px rgba(255,255,255,.3),inset 0 -8px 12px rgba(0,0,0,.42)}50%{filter:brightness(1.48);box-shadow:0 0 0 13px color-mix(in srgb,var(--mode-glow) 23%,transparent),0 0 52px color-mix(in srgb,var(--mode-glow) 64%,transparent),inset 0 2px 14px rgba(255,255,255,.62),inset 0 -8px 12px rgba(0,0,0,.4)}} @keyframes trivia-copy-orb{0%,100%{translate:18px -47%;scale:.74;opacity:.16}50%{translate:-25px -52%;scale:1.22;opacity:.48}} #trivia.active:has(.trivia-menu) .trivia-menu{background-size:140% 140%,150% 150%,100% 100%;} #trivia .trivia-menu::before{animation:trivia-difficulty-sweep 7.4s ease-in-out infinite,trivia-menu-glow 5.2s ease-in-out infinite;} #trivia .trivia-menu .trivia-mode{animation-name:trivia-mission-enter,trivia-mission-float;animation-duration:.58s,3.4s;animation-timing-function:cubic-bezier(.18,.74,.22,1),ease-in-out;animation-delay:.06s,.7s;animation-iteration-count:1,infinite;animation-fill-mode:both,none;} #trivia .trivia-menu .trivia-mode::after{background:linear-gradient(112deg,transparent 27%,color-mix(in srgb,var(--mode-glow) 36%,transparent) 46%,rgba(255,255,255,.16) 50%,transparent 68%);background-size:230% 100%;animation:trivia-mission-sheen 3.8s ease-in-out infinite;} #trivia .trivia-menu .trivia-mode::before{animation:trivia-emblem-aura 2.6s ease-in-out infinite;} #trivia .trivia-menu .trivia-mode .mode-emblem::before{animation:trivia-emblem-orbit 4.8s linear infinite;} #trivia .trivia-menu .trivia-mode .mode-emblem::after{animation:trivia-emblem-orbit-reverse 6.8s linear infinite;} #trivia .trivia-menu .trivia-mode .mode-emblem i{animation:trivia-emblem-bob 2s ease-in-out infinite;} #trivia .trivia-menu .trivia-mode .mode-copy>*{position:relative;z-index:1;} #trivia .trivia-menu .trivia-mode .mode-copy::after{content:"";position:absolute;z-index:0;top:50%;right:-8%;width:clamp(80px,10vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mode-glow) 54%,white 12%),color-mix(in srgb,var(--mode-glow) 24%,transparent) 38%,transparent 72%);filter:blur(7px);pointer-events:none;animation:trivia-copy-orb 3.6s ease-in-out infinite;} #trivia .trivia-menu .trivia-mode:nth-child(2){animation-delay:.13s,1.6s;} #trivia .trivia-menu .trivia-mode:nth-child(3){animation-delay:.2s,2.4s;} #trivia .trivia-menu .trivia-mode:nth-child(4){animation-delay:.27s,3.2s;} /* An explicit normal setting wins over the operating-system reduced-motion query. */ :root[data-motion="full"] #trivia .trivia-menu{animation-name:trivia-difficulty-enter,trivia-menu-drift!important;animation-duration:.58s,12s!important;animation-timing-function:cubic-bezier(.2,.75,.25,1),ease-in-out!important;animation-delay:0s,0s!important;animation-iteration-count:1,infinite!important;animation-fill-mode:both,none!important;} :root[data-motion="full"] #trivia .trivia-menu::before{animation-name:trivia-difficulty-sweep,trivia-menu-glow!important;animation-duration:5.8s,3.8s!important;animation-timing-function:ease-in-out,ease-in-out!important;animation-delay:0s,0s!important;animation-iteration-count:infinite,infinite!important;} :root[data-motion="full"] #trivia .trivia-mode{animation-name:trivia-mission-enter,trivia-mission-float!important;animation-duration:.58s,3.4s!important;animation-timing-function:cubic-bezier(.18,.74,.22,1),ease-in-out!important;animation-delay:.06s,.7s!important;animation-iteration-count:1,infinite!important;animation-fill-mode:both,none!important;} :root[data-motion="full"] #trivia .trivia-mode:nth-child(2){animation-delay:.13s,1.6s!important} :root[data-motion="full"] #trivia .trivia-mode:nth-child(3){animation-delay:.2s,2.4s!important} :root[data-motion="full"] #trivia .trivia-mode:nth-child(4){animation-delay:.27s,3.2s!important} :root[data-motion="full"] #trivia .trivia-mode::after{animation-name:trivia-mission-sheen!important;animation-duration:3.8s!important;animation-timing-function:ease-in-out!important;animation-delay:0s!important;animation-iteration-count:infinite!important;} :root[data-motion="full"] #trivia .trivia-mode::before{animation-name:trivia-emblem-aura!important;animation-duration:2.6s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;} :root[data-motion="full"] #trivia .trivia-mode .mode-emblem::before{animation-name:trivia-emblem-orbit!important;animation-duration:4.8s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;} :root[data-motion="full"] #trivia .trivia-mode .mode-emblem::after{animation-name:trivia-emblem-orbit-reverse!important;animation-duration:6.8s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;} :root[data-motion="full"] #trivia .trivia-mode .mode-emblem i{animation-name:trivia-emblem-bob!important;animation-duration:2s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;} :root[data-motion="full"] #trivia .trivia-mode .mode-copy::after{animation-name:trivia-copy-orb!important;animation-duration:3.6s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;} /* RV3 question scene: visual layer only; grid geometry and game state stay unchanged. */ #trivia.active .game-shell:has(.answers)>.flag-stage{ position:relative;isolation:isolate;overflow:visible; border:1px solid rgba(116,226,255,.48); background:radial-gradient(ellipse at 50% 48%,rgba(20,106,161,.30),rgba(5,19,39,.73) 66%,rgba(3,10,24,.82))!important; box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 36px rgba(31,164,229,.20),0 18px 44px rgba(0,0,0,.34),0 0 30px rgba(28,181,245,.12); } #trivia.active .game-shell:has(.answers)>.flag-stage::before{ z-index:0;width:min(68%,440px);filter:blur(29px);opacity:.72; background:radial-gradient(circle,rgba(40,192,255,.40),rgba(43,115,255,.13) 47%,transparent 72%); animation:trivia-question-aura 4.6s ease-in-out infinite; } #trivia.active .game-shell:has(.answers)>.flag-stage::after{ content:"";position:absolute;z-index:0;inset:9% 12%;border:1px solid rgba(115,218,255,.16);border-radius:18px; background:linear-gradient(125deg,transparent 35%,rgba(121,232,255,.11) 49%,transparent 63%); background-size:240% 100%;box-shadow:inset 0 0 25px rgba(55,175,239,.08),0 0 24px rgba(38,181,255,.08); pointer-events:none;animation:trivia-question-scan 6.2s ease-in-out infinite; } #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth{position:relative;z-index:1;max-width:88%;max-height:88%;object-fit:contain;animation:trivia-flag-arrive .62s cubic-bezier(.18,.78,.2,1) both;} #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth-source{position:relative;z-index:1;max-width:88%;max-height:88%;object-fit:contain;} #trivia.active .game-shell:has(.answers)>.answers{perspective:900px;} #trivia.active .game-shell:has(.answers)>.answers button{ position:relative;isolation:isolate;overflow:hidden;min-height:48px; border-color:color-mix(in srgb,var(--focus) 34%,var(--line)); background:linear-gradient(155deg,color-mix(in srgb,var(--surface2) 88%,#1e3a60),color-mix(in srgb,var(--surface) 92%,#071327)); box-shadow:inset 0 1px rgba(255,255,255,.13),0 7px 18px rgba(0,0,0,.24); transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s,filter .18s; animation:trivia-answer-enter .42s cubic-bezier(.2,.8,.25,1) both; } #trivia.active .game-shell:has(.answers)>.answers button:nth-child(2){animation-delay:.07s} #trivia.active .game-shell:has(.answers)>.answers button:nth-child(3){animation-delay:.14s} #trivia.active .game-shell:has(.answers)>.answers button:nth-child(4){animation-delay:.21s} #trivia.active .game-shell:has(.answers)>.answers button::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.12) 49%,transparent 70%);transform:translateX(-120%);transition:transform .48s ease;pointer-events:none;} #trivia.active .game-shell:has(.answers)>.answers button:hover:not(:disabled){transform:translateY(-3px) scale(1.012);border-color:var(--focus);box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 24px rgba(0,0,0,.3),0 0 22px rgba(50,196,255,.16);filter:brightness(1.12);} #trivia.active .game-shell:has(.answers)>.answers button:hover:not(:disabled)::after{transform:translateX(120%)} #trivia.active .game-shell:has(.answers)>.answers button:active:not(:disabled){transform:translateY(1px) scale(.985);} #trivia.active .game-shell:has(.answers)>.answers button.is-correct{animation:trivia-answer-correct .58s ease both;background:linear-gradient(135deg,#087b62,#12a77c);box-shadow:0 0 28px rgba(16,185,129,.38),inset 0 1px rgba(255,255,255,.25);} #trivia.active .game-shell:has(.answers)>.answers button.is-wrong{animation:trivia-answer-wrong .42s ease both;background:linear-gradient(135deg,#9b2438,#d43d52);box-shadow:0 0 25px rgba(239,68,68,.34),inset 0 1px rgba(255,255,255,.2);} #trivia.active .game-shell:has(.answers) .trivia-stats>span{box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 20px rgba(0,0,0,.22);} #trivia.active .game-shell:has(.answers) #trivia-countdown{position:relative;overflow:hidden;} #trivia.active .game-shell:has(.answers) #trivia-countdown.is-warning{box-shadow:0 0 25px rgba(245,158,11,.36),inset 0 0 14px rgba(245,158,11,.12);} #trivia.active .game-shell:has(.answers) #trivia-countdown.is-critical{animation:trivia-clock-pulse 1s ease-in-out infinite, trivia-clock-glow 1s ease-in-out infinite;} #trivia.active .game-shell:has(.answers)>.result.good{animation:trivia-result-pop .4s cubic-bezier(.16,.84,.25,1) both;text-shadow:0 0 18px rgba(52,211,153,.35);} #trivia.active .game-shell:has(.answers)>.result.bad{animation:trivia-result-pop .4s cubic-bezier(.16,.84,.25,1) both;text-shadow:0 0 18px rgba(248,113,113,.32);} @keyframes trivia-question-aura{0%,100%{opacity:.42;transform:scale(.86)}50%{opacity:.88;transform:scale(1.08)}} @keyframes trivia-question-scan{0%,100%{background-position:180% 0;opacity:.55}50%{background-position:-80% 0;opacity:1}} @keyframes trivia-flag-arrive{from{opacity:0;transform:translateY(13px) scale(.94);filter:drop-shadow(0 0 0 transparent)}to{opacity:1;transform:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(63,211,255,.22))}} @keyframes trivia-answer-enter{from{opacity:0;transform:translateY(11px) scale(.985)}to{opacity:1;transform:none}} @keyframes trivia-answer-correct{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}} @keyframes trivia-answer-wrong{0%,100%{translate:0}25%{translate:-5px}75%{translate:5px}} @keyframes trivia-clock-glow{50%{filter:brightness(1.25)}} @keyframes trivia-result-pop{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ #trivia.active .game-shell:has(.answers)>.flag-stage::before, #trivia.active .game-shell:has(.answers)>.flag-stage::after, #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth, #trivia.active .game-shell:has(.answers)>.answers button, #trivia.active .game-shell:has(.answers)>.result.good, #trivia.active .game-shell:has(.answers)>.result.bad{animation:none;transition:none;} #trivia.active .game-shell:has(.answers)>.answers button:hover:not(:disabled){transform:none;} } :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.flag-stage::before{animation:trivia-question-aura 4.6s ease-in-out infinite!important;} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.flag-stage::after{animation:trivia-question-scan 6.2s ease-in-out infinite!important;} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth{animation:trivia-flag-arrive .62s cubic-bezier(.18,.78,.2,1) both!important;} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button{animation:trivia-answer-enter .42s cubic-bezier(.2,.8,.25,1) both!important;} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button:nth-child(2){animation-delay:.07s!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button:nth-child(3){animation-delay:.14s!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button:nth-child(4){animation-delay:.21s!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button.is-correct{animation:trivia-answer-correct .58s ease both!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button.is-wrong{animation:trivia-answer-wrong .42s ease both!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers) #trivia-countdown.is-critical{animation:trivia-clock-pulse 1s ease-in-out infinite,trivia-clock-glow 1s ease-in-out infinite!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.result.good, :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.result.bad{animation:trivia-result-pop .4s cubic-bezier(.16,.84,.25,1) both!important} :root[data-motion="full"] #trivia.active .game-shell:has(.answers)>.answers button{transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s,filter .18s!important} /* RV3 Trivia question layout: remove nested flag frames and preserve intrinsic flag ratio. */ #trivia.active .game-shell:has(.answers)>.flag-stage{ border:0!important; border-radius:0; background:transparent!important; box-shadow:none; } #trivia.active .game-shell:has(.answers)>.flag-stage::after{display:none;content:none;} #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth, #trivia.active .game-shell:has(.answers)>.flag-stage #trivia-cloth-source{ width:auto!important; height:auto!important; max-width:98%; max-height:96%; flex:0 1 auto; object-fit:contain; } /* RV3 difficulty missions: bespoke atlas scenes built with real catalogue flags. */ #trivia .trivia-menu .trivia-mode{display:block;} #trivia .trivia-menu .trivia-mode::before{content:none;display:none;} #trivia .trivia-menu .trivia-mode .mode-emblem{display:none;} #trivia .trivia-menu .trivia-mode .mode-copy{position:relative;z-index:3;display:grid;gap:clamp(4px,.8vh,9px);width:min(68%,460px);max-width:68%;min-height:100%;align-content:center;} #trivia .trivia-menu .trivia-mode .mode-copy::after{right:-30%;z-index:-1;opacity:.24;} #trivia .trivia-menu .trivia-mode .mode-copy>b{font-size:clamp(1.18rem,2.1vw,2rem);letter-spacing:.01em;} #trivia .trivia-menu .trivia-mode .mode-description{font-size:clamp(.72rem,1.05vw,.95rem);} #trivia .trivia-menu .trivia-mode .mode-rules{font-size:clamp(.67rem,.92vw,.84rem);font-weight:750;color:rgba(237,246,255,.91);} #trivia .trivia-menu .trivia-mode .mode-state{width:max-content;padding:4px 9px;border:1px solid color-mix(in srgb,var(--mode-glow) 62%,transparent);border-radius:999px;color:var(--mode-glow);font-size:.68rem;font-weight:950;letter-spacing:.12em;background:rgba(4,13,29,.72);} #trivia .trivia-menu .trivia-mode.is-locked .mode-state{color:#ffe2a1;border-color:rgba(255,210,111,.6);} #trivia .trivia-menu .mode-art{position:absolute;z-index:1;right:1.5%;top:50%;display:block;width:clamp(150px,34%,340px);height:88%;max-height:190px;transform:translateY(-50%);pointer-events:none;perspective:800px;} #trivia .trivia-menu .mode-art::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse, color-mix(in srgb,var(--mode-glow) 26%,transparent),transparent 68%);filter:blur(10px);animation:mission-light-breathe 4.8s ease-in-out infinite;} #trivia .trivia-menu .mission-flag{position:absolute;z-index:4;display:block;width:clamp(48px,8.2vw,94px);aspect-ratio:3/2;padding:2px;border:1px solid rgba(255,255,255,.68);border-radius:3px;background:rgba(240,247,255,.88);box-shadow:0 7px 16px rgba(0,0,0,.46),0 0 14px color-mix(in srgb,var(--mode-glow) 30%,transparent);transform-style:preserve-3d;animation:mission-flag-hover 4.8s ease-in-out infinite;} #trivia .trivia-menu .mission-flag img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px;} #trivia .trivia-menu .mission-flag-uy{left:9%;top:21%;transform:rotate(-9deg) rotateY(-15deg);} #trivia .trivia-menu .mission-flag-jp{right:9%;top:8%;transform:rotate(8deg) rotateY(13deg);animation-delay:-1.4s;} #trivia .trivia-menu .mission-flag-fr{left:22%;bottom:8%;transform:rotate(6deg) rotateY(-12deg);animation-delay:-2.6s;} #trivia .trivia-menu .scene-globe{position:absolute;z-index:2;left:34%;top:50%;width:clamp(76px,12vw,142px);aspect-ratio:1;overflow:hidden;border:1px solid rgba(127,233,255,.78);border-radius:50%;background:radial-gradient(circle at 34% 28%,#70eaff 0,#218bb6 18%,#16447f 55%,#071a39 86%);box-shadow:0 0 18px rgba(50,207,255,.5),inset -14px -8px 24px rgba(0,0,0,.62),inset 5px 4px 14px rgba(225,252,255,.3);transform:translate(-50%,-50%);animation:mission-globe-drift 7s ease-in-out infinite;} #trivia .trivia-menu .scene-globe-grid{position:absolute;inset:-8%;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(152,241,255,.22) 14px 15px,transparent 16px 27px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(152,241,255,.18) 18px 19px,transparent 20px 35px);mask-image:radial-gradient(ellipse,black 52%,transparent 73%);} #trivia .trivia-menu .scene-globe-shine{position:absolute;inset:7% 36% 8% 4%;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.26),transparent);filter:blur(5px);} #trivia .trivia-menu .scene-orbit{position:absolute;z-index:3;left:50%;top:50%;width:88%;height:55%;border:1px solid color-mix(in srgb,var(--mode-glow) 76%,white);border-radius:50%;box-shadow:0 0 12px color-mix(in srgb,var(--mode-glow) 34%,transparent);} #trivia .trivia-menu .scene-orbit-one{transform:translate(-50%,-50%) rotate(-24deg);} #trivia .trivia-menu .scene-orbit-two{width:72%;height:78%;transform:translate(-50%,-50%) rotate(38deg);border-color:rgba(255,255,255,.32);} #trivia .trivia-menu .scene-art-easy{animation:mission-scene-float 5.6s ease-in-out infinite;} #trivia .trivia-menu .scene-art-normal::before{inset:9% 4%;border-radius:18%;} #trivia .trivia-menu .scene-atlas-sheet{position:absolute;left:13%;top:13%;width:76%;height:74%;overflow:hidden;border:1px solid rgba(195,224,255,.66);border-radius:12px;background:linear-gradient(135deg,rgba(24,59,88,.96),rgba(6,21,40,.96));box-shadow:0 12px 25px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.22);transform:rotate(-5deg) skewY(-2deg);} #trivia .trivia-menu .scene-atlas-sheet::before{content:"";position:absolute;inset:0;background:linear-gradient(25deg,transparent 42%,rgba(80,209,255,.2) 43%,transparent 44%),linear-gradient(155deg,transparent 35%,rgba(80,209,255,.16) 36%,transparent 37%),repeating-linear-gradient(0deg,transparent 0 17px,rgba(157,210,255,.11) 18px 19px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(157,210,255,.1) 23px 24px);} #trivia .trivia-menu .scene-contour{position:absolute;z-index:1;border:1px solid rgba(119,222,255,.42);border-radius:50%;transform:rotate(-25deg);} #trivia .trivia-menu .contour-a{left:17%;top:21%;width:47%;height:34%;}.contour-b{right:4%;bottom:7%;width:54%;height:42%;} #trivia .trivia-menu .scene-coordinate{position:absolute;z-index:2;left:8%;top:7%;color:#c4efff;font-size:clamp(.48rem,.65vw,.7rem);font-weight:900;letter-spacing:.12em;} #trivia .trivia-menu .scene-route{position:absolute;z-index:2;left:20%;top:42%;width:55%;height:24%;border-top:2px dashed #70f4d0;border-radius:50%;transform:rotate(-23deg);filter:drop-shadow(0 0 5px #70f4d0);} #trivia .trivia-menu .scene-art-normal .mission-flag-in{left:8%;top:6%;width:clamp(42px,6.4vw,72px);} #trivia .trivia-menu .scene-art-normal .mission-flag-it{right:1%;top:27%;width:clamp(42px,6.4vw,72px);animation-delay:-1.8s;} #trivia .trivia-menu .scene-art-normal .mission-flag-za{left:25%;bottom:0;width:clamp(42px,6.4vw,72px);animation-delay:-3s;} #trivia .trivia-menu .scene-art-hard{--mode-glow:#ff735f;} #trivia .trivia-menu .scene-challenge-core{position:absolute;z-index:3;left:44%;top:50%;display:grid;place-items:center;width:clamp(74px,11vw,128px);aspect-ratio:1;border:2px solid rgba(255,208,147,.82);border-radius:50%;background:radial-gradient(circle at 36% 25%,#ffbc69,#a53b3c 45%,#21152a 78%);box-shadow:0 0 0 7px rgba(255,115,95,.13),0 0 30px rgba(255,97,76,.48),inset 0 4px 13px rgba(255,255,255,.32);transform:translate(-50%,-50%);animation:mission-challenge-pulse 2.4s ease-in-out infinite;} #trivia .trivia-menu .scene-challenge-core b{font-size:clamp(1.65rem,3vw,3rem);line-height:1;color:white;text-shadow:0 3px 10px rgba(39,5,12,.65);} #trivia .trivia-menu .scene-challenge-core small{margin-top:-10px;color:#ffe9bc;font-size:clamp(.48rem,.65vw,.68rem);font-weight:950;letter-spacing:.25em;} #trivia .trivia-menu .scene-timer-ring{position:absolute;inset:-10%;border:2px solid transparent;border-top-color:#fff1c6;border-right-color:#ffb55e;border-radius:50%;filter:drop-shadow(0 0 7px #ff8a62);animation:mission-ring-turn 7s linear infinite;} #trivia .trivia-menu .scene-flare{position:absolute;z-index:2;right:13%;top:9%;width:34%;height:23%;border-radius:50%;background:rgba(255,122,85,.42);filter:blur(22px);animation:mission-light-breathe 2.7s ease-in-out infinite;} #trivia .trivia-menu .scene-art-hard .mission-flag-br{left:5%;top:14%;width:clamp(44px,7vw,78px);} #trivia .trivia-menu .scene-art-hard .mission-flag-jp{right:1%;top:17%;width:clamp(44px,7vw,78px);} #trivia .trivia-menu .scene-art-hard .mission-flag-za{right:17%;bottom:0;width:clamp(44px,7vw,78px);animation-delay:-2.3s;} #trivia .trivia-menu .scene-art-learning{--mode-glow:#f3c45a;} #trivia .trivia-menu .scene-atlas-book{position:absolute;z-index:2;left:15%;top:16%;width:74%;height:68%;filter:drop-shadow(0 11px 14px rgba(0,0,0,.5));transform:rotate(3deg);animation:mission-book-breathe 4.4s ease-in-out infinite;} #trivia .trivia-menu .book-page{position:absolute;top:4%;width:49%;height:88%;border:1px solid rgba(255,226,153,.8);background:linear-gradient(145deg,#f2d992,#a77a36 58%,#624627);box-shadow:inset 0 0 18px rgba(95,55,18,.34);} #trivia .trivia-menu .book-left{left:0;border-radius:12px 4px 4px 12px;transform:skewY(5deg);}.book-right{right:0;border-radius:4px 12px 12px 4px;transform:skewY(-5deg);} #trivia .trivia-menu .book-spine{position:absolute;z-index:2;left:49%;top:5%;width:3%;height:86%;background:linear-gradient(90deg,#49351e,#ffe7a0,#60411f);} #trivia .trivia-menu .scene-atlas-line{position:absolute;z-index:3;height:1px;background:rgba(86,54,21,.48);transform:rotate(-18deg);} #trivia .trivia-menu .atlas-line-a{left:11%;top:37%;width:31%;}.atlas-line-b{right:10%;top:58%;width:30%;transform:rotate(17deg);} #trivia .trivia-menu .scene-art-learning .mission-flag-es{left:2%;top:1%;width:clamp(44px,6.5vw,74px);} #trivia .trivia-menu .scene-art-learning .mission-flag-ca{right:0;top:10%;width:clamp(44px,6.5vw,74px);animation-delay:-1.8s;} #trivia .trivia-menu .scene-art-learning .mission-flag-gr{right:17%;bottom:0;width:clamp(44px,6.5vw,74px);animation-delay:-3.2s;} @keyframes mission-scene-float{0%,100%{translate:0 3px}50%{translate:0 -7px}} @keyframes mission-flag-hover{0%,100%{translate:0 2px;filter:brightness(.94)}50%{translate:0 -5px;filter:brightness(1.08)}} @keyframes mission-light-breathe{0%,100%{opacity:.36;scale:.88}50%{opacity:.85;scale:1.08}} @keyframes mission-globe-drift{0%,100%{translate:0 0;filter:brightness(.94)}50%{translate:0 -4px;filter:brightness(1.12)}} @keyframes mission-challenge-pulse{0%,100%{box-shadow:0 0 0 5px rgba(255,115,95,.12),0 0 23px rgba(255,97,76,.35),inset 0 4px 13px rgba(255,255,255,.28)}50%{box-shadow:0 0 0 11px rgba(255,115,95,.2),0 0 42px rgba(255,97,76,.65),inset 0 4px 16px rgba(255,255,255,.42)}} @keyframes mission-ring-turn{to{rotate:360deg}} @keyframes mission-book-breathe{0%,100%{translate:0 3px;rotate:-1deg}50%{translate:0 -5px;rotate:1deg}} @media(hover:hover){#trivia .trivia-menu .trivia-mode:hover .mode-art{filter:brightness(1.2) saturate(1.16);scale:1.045;}#trivia .trivia-menu .trivia-mode:hover .mission-flag{box-shadow:0 10px 21px rgba(0,0,0,.5),0 0 21px color-mix(in srgb,var(--mode-glow) 54%,transparent);}} @media(max-width:700px){#trivia .trivia-menu .trivia-mode .mode-copy{width:70%;max-width:70%;gap:4px}#trivia .trivia-menu .mode-art{right:0;width:38%;height:84%;}#trivia .trivia-menu .mission-flag{width:clamp(36px,10vw,60px);}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .trivia-mode .mode-copy{width:68%;max-width:68%;gap:2px}#trivia .trivia-menu .trivia-mode .mode-copy>b{font-size:clamp(.9rem,2.3vh,1.25rem)}#trivia .trivia-menu .trivia-mode .mode-description{font-size:clamp(.58rem,1.55vh,.72rem)}#trivia .trivia-menu .trivia-mode .mode-rules{font-size:clamp(.55rem,1.35vh,.68rem)}#trivia .trivia-menu .mode-art{width:38%;height:82%;}} @media(prefers-reduced-motion:reduce){#trivia .trivia-menu .mode-art,#trivia .trivia-menu .mode-art::before,#trivia .trivia-menu .mission-flag,#trivia .trivia-menu .scene-globe,#trivia .trivia-menu .scene-challenge-core,#trivia .trivia-menu .scene-timer-ring,#trivia .trivia-menu .scene-flare,#trivia .trivia-menu .scene-atlas-book{animation:none!important;transition:none!important;}} :root[data-motion="full"] #trivia .trivia-menu .scene-art-easy{animation:mission-scene-float 5.6s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .mode-art::before{animation:mission-light-breathe 4.8s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .mission-flag{animation:mission-flag-hover 4.8s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .scene-globe{animation:mission-globe-drift 7s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .scene-challenge-core{animation:mission-challenge-pulse 2.4s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .scene-timer-ring{animation:mission-ring-turn 7s linear infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .scene-flare{animation:mission-light-breathe 2.7s ease-in-out infinite!important;}:root[data-motion="full"] #trivia .trivia-menu .scene-atlas-book{animation:mission-book-breathe 4.4s ease-in-out infinite!important;} /* Narrow landscape guard: reserve clear text/art columns on compact screens. */ #trivia .trivia-menu .trivia-mode .mode-copy{width:61%;max-width:61%;} #trivia .trivia-menu .scene-art-normal .scene-atlas-sheet{animation:mission-map-drift 7s ease-in-out infinite;} @keyframes mission-map-drift{0%,100%{translate:0 2px;rotate:-1deg}50%{translate:0 -4px;rotate:1deg}} @media(max-width:700px){#trivia .trivia-menu .trivia-mode .mode-copy{width:58%;max-width:58%;gap:4px}#trivia .trivia-menu .mode-art{right:0;width:36%;height:84%}#trivia .trivia-menu .mission-flag{width:clamp(34px,7.5vw,52px)}#trivia .trivia-menu .mission-learning .mode-copy>b{font-size:clamp(.8rem,1.95vw,1rem);line-height:1.08}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .trivia-mode .mode-copy{width:60%;max-width:60%;gap:2px}#trivia .trivia-menu .mode-art{width:36%;height:82%}#trivia .trivia-menu .mission-learning .mode-copy>b{font-size:clamp(.78rem,1.9vh,.95rem);line-height:1.05}} @media(prefers-reduced-motion:reduce){#trivia .trivia-menu .scene-atlas-sheet{animation:none!important;}} :root[data-motion="full"] #trivia .trivia-menu .scene-atlas-sheet{animation:mission-map-drift 7s ease-in-out infinite!important;} /* RV3 difficulty card motion: still cards, animated flags, hover intensifies motion. */ #trivia .trivia-menu .trivia-mode{animation:trivia-mission-enter .58s cubic-bezier(.18,.74,.22,1) .06s 1 both;translate:none;} #trivia .trivia-menu .trivia-mode:nth-child(2){animation-delay:.13s;} #trivia .trivia-menu .trivia-mode:nth-child(3){animation-delay:.2s;} #trivia .trivia-menu .trivia-mode:nth-child(4){animation-delay:.27s;} :root[data-motion="full"] #trivia .trivia-menu .trivia-mode{animation-name:trivia-mission-enter!important;animation-duration:.58s!important;animation-timing-function:cubic-bezier(.18,.74,.22,1)!important;animation-delay:.06s!important;animation-iteration-count:1!important;animation-fill-mode:both!important;translate:none!important;} :root[data-motion="full"] #trivia .trivia-menu .trivia-mode:nth-child(2){animation-delay:.13s!important;} :root[data-motion="full"] #trivia .trivia-menu .trivia-mode:nth-child(3){animation-delay:.2s!important;} :root[data-motion="full"] #trivia .trivia-menu .trivia-mode:nth-child(4){animation-delay:.27s!important;} #trivia .trivia-menu .mission-flag{animation:mission-flag-idle 4s ease-in-out infinite;} @keyframes mission-flag-idle{0%,100%{translate:0 2px;rotate:-2deg;filter:brightness(.96)}25%{translate:-2px -2px;rotate:1deg;filter:brightness(1.02)}50%{translate:1px -4px;rotate:-1deg;filter:brightness(1.07)}75%{translate:2px 0;rotate:2deg;filter:brightness(1)}} @keyframes mission-flag-hover{0%,100%{translate:0 2px;rotate:-4deg;filter:brightness(.96)}25%{translate:-5px -5px;rotate:5deg;filter:brightness(1.1)}50%{translate:1px -9px;rotate:-4deg;filter:brightness(1.2)}75%{translate:6px 1px;rotate:5deg;filter:brightness(1.1)}} :root[data-motion="full"] #trivia .trivia-menu .mission-flag{animation:mission-flag-idle 4s ease-in-out infinite!important;} @media(hover:hover){#trivia .trivia-menu .trivia-mode:hover .mission-flag{animation:mission-flag-hover 1.35s ease-in-out infinite!important;filter:brightness(1.13);}} :root[data-motion="full"] #trivia .trivia-menu .trivia-mode:hover .mission-flag{animation:mission-flag-hover 1.35s ease-in-out infinite!important;} #trivia .trivia-menu .scene-normal-core{position:absolute;z-index:3;left:52%;top:53%;display:grid;place-items:center;width:clamp(56px,8.1vw,92px);aspect-ratio:1;border:2px solid rgba(222,200,255,.9);border-radius:50%;background:radial-gradient(circle at 34% 24%,#bda2ff,#6551bf 46%,#161a45 82%);box-shadow:0 0 0 6px rgba(181,138,255,.14),0 0 28px rgba(172,132,255,.54),inset 0 4px 12px rgba(255,255,255,.32),inset 0 -8px 12px rgba(4,10,34,.52);transform:translate(-50%,-50%);animation:mission-normal-pulse 3.2s ease-in-out infinite;} #trivia .trivia-menu .scene-normal-core>b{color:#fff;font-size:clamp(1.55rem,2.8vw,2.3rem);line-height:1;text-shadow:0 2px 10px rgba(22,10,59,.72);} #trivia .trivia-menu .scene-normal-core>small{margin-top:-9px;color:#eee4ff;font-size:clamp(.45rem,.58vw,.62rem);font-weight:950;letter-spacing:.24em;} #trivia .trivia-menu .scene-normal-ring{position:absolute;inset:-11%;border:2px solid transparent;border-top-color:#fff;border-right-color:#c8aaff;border-bottom-color:rgba(185,143,255,.55);border-radius:50%;filter:drop-shadow(0 0 7px #bb91ff);animation:mission-ring-turn 6.8s linear infinite;} :root[data-motion="full"] #trivia .trivia-menu .scene-normal-ring{animation:mission-ring-turn 6.8s linear infinite!important;} :root[data-motion="full"] #trivia .trivia-menu .scene-normal-core{animation:mission-normal-pulse 3.2s ease-in-out infinite!important;} #trivia .trivia-menu .scene-art-normal .mission-flag-in{left:1%;top:1%;width:clamp(38px,6.4vw,62px);} #trivia .trivia-menu .scene-art-normal .mission-flag-it{right:0;top:4%;width:clamp(38px,6.4vw,62px);} #trivia .trivia-menu .scene-art-normal .mission-flag-za{left:27%;bottom:-2%;width:clamp(38px,6.4vw,62px);} @keyframes mission-normal-pulse{0%,100%{box-shadow:0 0 0 5px rgba(181,138,255,.12),0 0 22px rgba(172,132,255,.38),inset 0 4px 12px rgba(255,255,255,.27),inset 0 -8px 12px rgba(4,10,34,.5)}50%{box-shadow:0 0 0 10px rgba(181,138,255,.2),0 0 38px rgba(172,132,255,.7),inset 0 4px 15px rgba(255,255,255,.42),inset 0 -8px 12px rgba(4,10,34,.48)}} @media(max-width:700px){#trivia .trivia-menu .scene-normal-core{width:clamp(48px,7.3vw,60px)}#trivia .trivia-menu .scene-art-normal .mission-flag-in,#trivia .trivia-menu .scene-art-normal .mission-flag-it,#trivia .trivia-menu .scene-art-normal .mission-flag-za{width:clamp(31px,5.8vw,40px)}} @media(prefers-reduced-motion:reduce){#trivia .trivia-menu .mission-flag,#trivia .trivia-menu .scene-normal-ring,#trivia .trivia-menu .scene-normal-core{animation:none!important}#trivia .trivia-menu .trivia-mode:hover .mission-flag{animation:none!important;}} :root[data-motion="reduced"] #trivia .trivia-menu .trivia-mode{animation:none!important;transition:none!important;translate:none!important;} :root[data-motion="reduced"] #trivia .trivia-menu .mode-art,:root[data-motion="reduced"] #trivia .trivia-menu .mode-art::before,:root[data-motion="reduced"] #trivia .trivia-menu .mission-flag,:root[data-motion="reduced"] #trivia .trivia-menu .scene-normal-ring,:root[data-motion="reduced"] #trivia .trivia-menu .scene-normal-core,:root[data-motion="reduced"] #trivia .trivia-menu .scene-globe,:root[data-motion="reduced"] #trivia .trivia-menu .scene-timer-ring,:root[data-motion="reduced"] #trivia .trivia-menu .scene-atlas-book,:root[data-motion="reduced"] #trivia .trivia-menu .scene-challenge-core{animation:none!important;transition:none!important;} :root[data-motion="reduced"] #trivia .trivia-menu .trivia-mode:hover{transform:none!important;} /* RV3 difficulty scenes: cloth flags, catalog rotation, and an opening learning atlas. */ #trivia .trivia-menu .mission-flag{overflow:visible;transform-style:preserve-3d;transition:opacity .38s ease,filter .35s ease;} #trivia .trivia-menu .mission-flag>img{transition:opacity .2s ease;} #trivia .trivia-menu .mission-flag.has-cloth>img{opacity:0;} #trivia .trivia-menu .mission-flag-cloth{position:absolute;left:-5%;top:-8%;width:110%;height:116%;z-index:1;display:block;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.22));} #trivia .trivia-menu .mission-flag::after{content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(255,255,255,.58);border-radius:2px;pointer-events:none;box-shadow:inset 0 0 3px rgba(255,255,255,.35);} #trivia .trivia-menu .mission-flag.is-switching{opacity:0;} #trivia .trivia-menu .scene-art-easy .mission-flag-slot-easy-0{left:8%;top:18%;width:clamp(42px,6.2vw,70px);transform:rotate(-8deg) rotateY(-14deg);} #trivia .trivia-menu .scene-art-easy .mission-flag-slot-easy-1{right:6%;top:5%;width:clamp(42px,6.2vw,70px);transform:rotate(7deg) rotateY(12deg);} #trivia .trivia-menu .scene-art-easy .mission-flag-slot-easy-2{left:20%;bottom:5%;width:clamp(42px,6.2vw,70px);transform:rotate(5deg) rotateY(-10deg);} #trivia .trivia-menu .scene-art-normal .mission-flag-slot-normal-0{left:5%;top:3%;width:clamp(38px,5.7vw,62px);transform:rotate(-7deg) rotateY(-13deg);} #trivia .trivia-menu .scene-art-normal .mission-flag-slot-normal-1{right:1%;top:4%;width:clamp(38px,5.7vw,62px);transform:rotate(7deg) rotateY(12deg);} #trivia .trivia-menu .scene-art-normal .mission-flag-slot-normal-2{left:26%;bottom:1%;width:clamp(38px,5.7vw,62px);transform:rotate(-3deg) rotateY(-9deg);} #trivia .trivia-menu .scene-art-hard .mission-flag-slot-hard-0{left:3%;top:13%;width:clamp(40px,6vw,68px);transform:rotate(-8deg) rotateY(-14deg);} #trivia .trivia-menu .scene-art-hard .mission-flag-slot-hard-1{right:0;top:12%;width:clamp(40px,6vw,68px);transform:rotate(8deg) rotateY(13deg);} #trivia .trivia-menu .scene-art-hard .mission-flag-slot-hard-2{right:16%;bottom:0;width:clamp(40px,6vw,68px);transform:rotate(-4deg) rotateY(-9deg);} #trivia .trivia-menu .scene-atlas-book{animation:none!important;transform:rotate(2deg);transition:transform .58s cubic-bezier(.2,.8,.2,1),filter .45s ease;transform-style:preserve-3d;} #trivia .trivia-menu .book-page{overflow:hidden;backface-visibility:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s ease;} #trivia .trivia-menu .book-left{transform-origin:right center;transform:skewY(5deg) rotateY(0deg);} #trivia .trivia-menu .book-right{transform-origin:left center;transform:skewY(-5deg) rotateY(0deg);} #trivia .trivia-menu .book-map-lines{position:absolute;inset:12% 9%;opacity:.46;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(97,91,59,.26) 13px 14px,transparent 15px 23px),repeating-linear-gradient(90deg,transparent 0 15px,rgba(97,91,59,.2) 16px 17px,transparent 18px 27px);mask-image:radial-gradient(ellipse at 45% 48%,#000 35%,transparent 73%);} #trivia .trivia-menu .map-lines-right{transform:rotate(9deg);} #trivia .trivia-menu .book-mini-label{position:absolute;left:7%;bottom:7%;color:#60451f;font-size:clamp(.35rem,.48vw,.54rem);font-weight:950;letter-spacing:.12em;} #trivia .trivia-menu .scene-book-title{position:absolute;z-index:4;left:25%;top:42%;width:50%;color:#684a22;text-align:center;font-size:clamp(.36rem,.55vw,.62rem);font-weight:1000;letter-spacing:.13em;line-height:1.25;text-shadow:0 1px rgba(255,255,255,.55);transition:opacity .3s ease,transform .5s ease;} #trivia .trivia-menu .scene-art-learning .learning-pop{z-index:5;width:clamp(22px,3.1vw,37px);opacity:0;visibility:hidden;transform:translate(0,12px) scale(.28);transition:opacity .26s ease,transform .52s cubic-bezier(.16,.8,.22,1),visibility 0s linear .52s;} #trivia .trivia-menu .scene-art-learning .learning-pop.has-cloth>img{opacity:0;} #trivia .trivia-menu .scene-art-learning .learning-pop::after{opacity:0;transition:opacity .3s ease .18s;} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book{transform:rotate(0) translateY(-2px);filter:drop-shadow(0 16px 18px rgba(0,0,0,.58)) brightness(1.08);} #trivia .trivia-menu .mission-learning:hover .book-left{transform:perspective(500px) skewY(5deg) rotateY(-27deg);filter:brightness(1.12);} #trivia .trivia-menu .mission-learning:hover .book-right{transform:perspective(500px) skewY(-5deg) rotateY(24deg);filter:brightness(1.08);} #trivia .trivia-menu .mission-learning:hover .learning-pop{opacity:1;visibility:visible;transform:translate(0,0) scale(1);transition-delay:var(--flag-delay,0s),var(--flag-delay,0s),0s;} #trivia .trivia-menu .mission-learning:hover .learning-pop::after{opacity:1;} #trivia .trivia-menu .learning-0{left:0;top:1%;--flag-delay:0s;} #trivia .trivia-menu .learning-1{left:28%;top:0;--flag-delay:.06s;} #trivia .trivia-menu .learning-2{right:0;top:4%;--flag-delay:.12s;} #trivia .trivia-menu .learning-3{right:0;top:42%;--flag-delay:.18s;} #trivia .trivia-menu .learning-4{right:5%;bottom:0;--flag-delay:.24s;} #trivia .trivia-menu .learning-5{left:34%;bottom:0;--flag-delay:.3s;} #trivia .trivia-menu .learning-6{left:0;bottom:6%;--flag-delay:.36s;} #trivia .trivia-menu .learning-7{left:0;top:42%;--flag-delay:.42s;} @media(max-width:700px){#trivia .trivia-menu .mission-flag-cloth{left:-4%;top:-6%;width:108%;height:112%;}#trivia .trivia-menu .scene-art-learning .learning-pop{width:clamp(18px,4vw,27px)}#trivia .trivia-menu .scene-book-title{font-size:clamp(.34rem,.78vw,.48rem)}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .scene-art-learning .learning-pop{width:clamp(18px,2.6vh,26px)}#trivia .trivia-menu .scene-book-title{font-size:clamp(.32rem,.95vh,.46rem)}} @media(prefers-reduced-motion:reduce){:root:not([data-motion="full"]) #trivia .trivia-menu .mission-flag-cloth{display:none!important}:root:not([data-motion="full"]) #trivia .trivia-menu .mission-flag.has-cloth>img{opacity:1!important}:root:not([data-motion="full"]) #trivia .trivia-menu .mission-learning .learning-pop{opacity:0!important;visibility:hidden!important}:root:not([data-motion="full"]) #trivia .trivia-menu .scene-atlas-book,:root:not([data-motion="full"]) #trivia .trivia-menu .book-page{transition:none!important}} :root[data-motion="reduced"] #trivia .trivia-menu .mission-flag-cloth{display:none!important} :root[data-motion="reduced"] #trivia .trivia-menu .mission-flag.has-cloth>img{opacity:1!important} :root[data-motion="reduced"] #trivia .trivia-menu .mission-learning .learning-pop{opacity:0!important;visibility:hidden!important} /* Owner refinement: remove pale flag frames and make Learning read as an opening encyclopedia. */ #trivia .trivia-menu .mission-flag{padding:0!important;border:0!important;background:transparent!important;box-shadow:0 5px 13px rgba(0,0,0,.38),0 0 12px color-mix(in srgb,var(--mode-glow) 28%,transparent)!important;} #trivia .trivia-menu .mission-flag::after{display:none!important;} #trivia .trivia-menu .mission-flag-cloth{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)) drop-shadow(0 0 3px rgba(255,255,255,.16));} #trivia .trivia-menu .scene-atlas-book{left:12%!important;top:10%!important;width:82%!important;height:80%!important;filter:drop-shadow(0 13px 17px rgba(0,0,0,.58));perspective:900px;transform:none!important;animation:none!important;} #trivia .trivia-menu .atlas-book-back{position:absolute;z-index:0;inset:3% 2%;border:2px solid #c49b4b;border-radius:9px 13px 13px 8px;background:linear-gradient(110deg,#243f4a,#102638 42%,#09202c);box-shadow:inset 0 0 0 3px rgba(237,200,111,.18),0 12px 20px rgba(0,0,0,.5);} #trivia .trivia-menu .atlas-page-stack{position:absolute;z-index:1;inset:7% 5% 7% 7%;border:1px solid #e4d4a9;border-radius:5px 9px 9px 5px;background:repeating-linear-gradient(0deg,#e8dfc5 0 2px,#c8b788 3px 4px);box-shadow:2px 3px 4px rgba(0,0,0,.4);} #trivia .trivia-menu .scene-atlas-book .book-page{z-index:2;top:8%;height:84%;width:45%;overflow:hidden;border:1px solid rgba(222,202,153,.95);border-radius:4px 2px 2px 4px;background:linear-gradient(135deg,#f4edda 0%,#d9cca9 60%,#c4b58c 100%);box-shadow:inset 0 0 14px rgba(88,66,34,.2),inset 0 1px rgba(255,255,255,.75);} #trivia .trivia-menu .scene-atlas-book .book-left{left:7%;transform-origin:right center;transform:rotateY(0deg) skewY(1deg);} #trivia .trivia-menu .scene-atlas-book .book-right{right:7%;transform-origin:left center;transform:rotateY(0deg) skewY(-1deg);} #trivia .trivia-menu .book-page-heading{position:absolute;left:9%;right:7%;top:10%;padding-bottom:4%;border-bottom:1px solid rgba(80,87,67,.44);color:#41564b;font-size:clamp(.34rem,.49vw,.56rem);font-weight:1000;letter-spacing:.12em;text-align:center;} #trivia .trivia-menu .book-map-lines{inset:25% 10% 17%;opacity:.62;background:radial-gradient(ellipse at 34% 44%,transparent 0 17%,rgba(67,105,96,.52) 18% 19%,transparent 20% 26%,rgba(67,105,96,.43) 27% 28%,transparent 29%),radial-gradient(ellipse at 68% 58%,transparent 0 13%,rgba(67,105,96,.45) 14% 15%,transparent 16% 25%,rgba(67,105,96,.38) 26% 27%,transparent 28%),repeating-linear-gradient(0deg,transparent 0 10px,rgba(83,94,74,.15) 11px 12px,transparent 13px 20px);mask-image:radial-gradient(ellipse,#000 28%,transparent 77%);} #trivia .trivia-menu .book-mini-label{left:8%;right:6%;bottom:8%;color:#5e543b;font-size:clamp(.28rem,.4vw,.45rem);letter-spacing:.04em;text-align:center;} #trivia .trivia-menu .book-page-number{position:absolute;bottom:2%;left:48%;color:#6f654d;font-size:clamp(.3rem,.4vw,.44rem);font-weight:800;} #trivia .trivia-menu .book-spine{z-index:6;left:48%;top:6%;width:4%;height:88%;border-radius:3px;background:linear-gradient(90deg,#56401f,#d9b466 45%,#71552a);box-shadow:0 0 5px rgba(0,0,0,.52);} #trivia .trivia-menu .atlas-front-cover{position:absolute;z-index:8;inset:4% 3% 4% 4%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;border:2px solid #d8b45f;border-radius:9px 14px 14px 9px;background:radial-gradient(ellipse at 47% 42%,rgba(91,169,166,.3),transparent 51%),linear-gradient(128deg,#204653 0%,#0c2938 48%,#071d2c 100%);box-shadow:inset 0 0 0 3px rgba(220,183,93,.17),inset 4px 0 8px rgba(255,255,255,.12),0 7px 13px rgba(0,0,0,.48);transform-origin:left center;backface-visibility:hidden;transition:transform .72s cubic-bezier(.18,.78,.2,1),opacity .5s ease,filter .6s ease;} #trivia .trivia-menu .atlas-front-cover::before{content:"";position:absolute;inset:5%;border:1px solid rgba(226,194,116,.58);border-radius:6px 10px 10px 6px;} #trivia .trivia-menu .atlas-cover-emblem{position:relative;display:grid;place-items:center;width:34%;aspect-ratio:1;border:1px solid #e8c86e;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a9ba4,#153b4b 69%,#071d2a);box-shadow:0 0 16px rgba(75,210,218,.28),inset 0 0 12px rgba(255,255,255,.2);} #trivia .trivia-menu .atlas-cover-emblem i{position:absolute;inset:19%;border:1px solid rgba(232,200,110,.86);border-radius:50%;} #trivia .trivia-menu .atlas-cover-emblem b{color:#ffe5a2;font-size:clamp(.62rem,1.1vw,1.1rem);text-shadow:0 1px 8px rgba(0,0,0,.75);} #trivia .trivia-menu .atlas-cover-title{position:relative;color:#f7e8bd;font-size:clamp(.43rem,.7vw,.78rem);font-weight:1000;letter-spacing:.13em;text-shadow:0 2px 6px rgba(0,0,0,.7);} #trivia .trivia-menu .atlas-cover-subtitle{position:relative;color:#d9c38d;text-align:center;font-size:clamp(.35rem,.52vw,.6rem);font-weight:850;letter-spacing:.12em;line-height:1.4;} #trivia .trivia-menu .atlas-cover-rule{position:relative;width:48%;height:1px;background:linear-gradient(90deg,transparent,#e2be67,transparent);} #trivia .trivia-menu .mission-learning:hover .atlas-front-cover{transform:perspective(700px) rotateY(-112deg);opacity:.25;filter:brightness(1.25);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-left{transform:perspective(700px) rotateY(-9deg) skewY(1deg);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-right{transform:perspective(700px) rotateY(8deg) skewY(-1deg);} #trivia .trivia-menu .scene-art-learning .learning-pop{left:49%!important;top:47%!important;right:auto!important;bottom:auto!important;width:clamp(20px,3vw,34px);opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.16) rotate(-14deg);transition:left .68s cubic-bezier(.16,.8,.22,1),top .68s cubic-bezier(.16,.8,.22,1),opacity .28s ease,transform .68s cubic-bezier(.16,.8,.22,1),visibility 0s linear .68s;} #trivia .trivia-menu .mission-learning:hover .learning-pop{left:var(--flag-end-x)!important;top:var(--flag-end-y)!important;opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1) rotate(var(--flag-tilt));transition-delay:var(--flag-delay,0s),var(--flag-delay,0s),var(--flag-delay,0s),var(--flag-delay,0s),0s;} #trivia .trivia-menu .learning-0{--flag-end-x:10%;--flag-end-y:10%;--flag-tilt:-9deg;--flag-delay:0s;} #trivia .trivia-menu .learning-1{--flag-end-x:48%;--flag-end-y:4%;--flag-tilt:5deg;--flag-delay:.06s;} #trivia .trivia-menu .learning-2{--flag-end-x:88%;--flag-end-y:10%;--flag-tilt:8deg;--flag-delay:.12s;} #trivia .trivia-menu .learning-3{--flag-end-x:94%;--flag-end-y:49%;--flag-tilt:-5deg;--flag-delay:.18s;} #trivia .trivia-menu .learning-4{--flag-end-x:84%;--flag-end-y:89%;--flag-tilt:7deg;--flag-delay:.24s;} #trivia .trivia-menu .learning-5{--flag-end-x:50%;--flag-end-y:95%;--flag-tilt:-6deg;--flag-delay:.3s;} #trivia .trivia-menu .learning-6{--flag-end-x:14%;--flag-end-y:88%;--flag-tilt:5deg;--flag-delay:.36s;} #trivia .trivia-menu .learning-7{--flag-end-x:5%;--flag-end-y:50%;--flag-tilt:-7deg;--flag-delay:.42s;} @media(max-width:700px){#trivia .trivia-menu .scene-atlas-book{left:7%!important;width:92%!important;height:82%!important}#trivia .trivia-menu .scene-art-learning .learning-pop{width:clamp(17px,3.8vw,26px)}#trivia .trivia-menu .atlas-cover-title{font-size:clamp(.38rem,.8vw,.58rem)}#trivia .trivia-menu .atlas-cover-subtitle{font-size:clamp(.3rem,.62vw,.44rem)}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .scene-atlas-book{top:8%!important;height:84%!important}#trivia .trivia-menu .scene-art-learning .learning-pop{width:clamp(17px,2.4vh,25px)}} @media(prefers-reduced-motion:reduce){:root:not([data-motion="full"]) #trivia .trivia-menu .atlas-front-cover,:root:not([data-motion="full"]) #trivia .trivia-menu .book-page,:root:not([data-motion="full"]) #trivia .trivia-menu .learning-pop{transition:none!important}} #trivia .trivia-menu .scene-atlas-book .atlas-front-cover>.atlas-cover-title{font-size:clamp(.3rem,.45vw,.48rem);letter-spacing:.08em;white-space:nowrap;max-width:90%;} #trivia .trivia-menu .scene-atlas-book .atlas-front-cover>.atlas-cover-subtitle{font-size:clamp(.27rem,.37vw,.42rem);letter-spacing:.08em;line-height:1.35;} #trivia .trivia-menu .scene-atlas-book .atlas-front-cover>.atlas-cover-title{font-size:clamp(.4rem,.65vw,.68rem);letter-spacing:.06em;} #trivia .trivia-menu .scene-atlas-book .atlas-front-cover>.atlas-cover-subtitle{font-size:clamp(.32rem,.48vw,.52rem);letter-spacing:.07em;} #trivia .trivia-menu .scene-atlas-book .atlas-cover-emblem>b{font-size:clamp(.5rem,.75vw,.75rem);} /* Atlas Maestro: premium 3/4 hard-cover illustration, with flags emerging from its pages. */ #trivia .trivia-menu .scene-atlas-book{left:8%!important;top:6%!important;width:90%!important;height:88%!important;perspective:1000px;transform:rotateY(-8deg) rotateX(2deg)!important;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .5s ease;filter:drop-shadow(0 13px 17px rgba(0,0,0,.58));} #trivia .trivia-menu .atlas-book-back{position:absolute;z-index:0;inset:2% 2% 3% 2%;border:2px solid #c5a25f;border-radius:8px 15px 14px 8px;background:linear-gradient(118deg,#182d54 0%,#111d3b 46%,#091c35 100%);box-shadow:inset 0 0 0 3px rgba(231,192,108,.15),inset 4px 0 11px rgba(255,255,255,.08),0 14px 20px rgba(0,0,0,.48);transform:translateZ(-3px);} #trivia .trivia-menu .atlas-page-stack{position:absolute;z-index:1;inset:6% 5% 7% 7%;border:1px solid #dbc998;border-radius:5px 10px 10px 5px;background:repeating-linear-gradient(0deg,#e8dfc5 0 2px,#bda977 3px 4px);box-shadow:2px 3px 5px rgba(0,0,0,.42);} #trivia .trivia-menu .scene-atlas-book .book-page{z-index:2;top:8%;height:84%;width:45%;padding:0;border:1px solid rgba(227,211,172,.95);border-radius:5px 2px 2px 5px;background:linear-gradient(135deg,#f5f0e2 0%,#e0d6bd 64%,#cfc09d 100%);box-shadow:inset 0 0 16px rgba(65,75,79,.14),inset 0 1px rgba(255,255,255,.9);transform-style:preserve-3d;transition:transform .66s cubic-bezier(.18,.78,.2,1),filter .55s ease;} #trivia .trivia-menu .scene-atlas-book .book-left{left:7%;transform-origin:right center;transform:rotateY(0deg) skewY(1deg);} #trivia .trivia-menu .scene-atlas-book .book-right{right:7%;transform-origin:left center;transform:rotateY(0deg) skewY(-1deg);} #trivia .trivia-menu .book-page-heading{position:absolute;left:8%;right:7%;top:9%;padding-bottom:4%;border-bottom:1px solid rgba(62,78,104,.38);color:#334e70;font-size:clamp(.34rem,.47vw,.54rem);font-weight:1000;letter-spacing:.08em;text-align:center;} #trivia .trivia-menu .atlas-world-map{position:absolute;inset:25% 8% 19%;overflow:hidden;border:1px solid rgba(75,119,151,.27);border-radius:45% 52% 44% 48%;background:radial-gradient(ellipse at 42% 46%,rgba(68,154,179,.17),transparent 68%),repeating-radial-gradient(ellipse at 50% 50%,transparent 0 12px,rgba(63,103,134,.16) 13px 14px);} #trivia .trivia-menu .atlas-map-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(67,111,143,.14) 14px 15px,transparent 16px 25px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(67,111,143,.12) 19px 20px,transparent 21px 31px);mask-image:radial-gradient(ellipse,#000 38%,transparent 85%);} #trivia .trivia-menu .atlas-map-contours{position:absolute;inset:14% 10%;border:1px solid rgba(75,126,135,.48);border-radius:58% 34% 62% 38%;transform:rotate(-17deg);box-shadow:inset 14px -4px 0 -13px rgba(48,98,116,.8),inset -18px 9px 0 -17px rgba(48,98,116,.75),0 0 0 8px rgba(76,125,139,.07);} #trivia .trivia-menu .atlas-compass-rose{position:absolute;right:8%;bottom:7%;width:18px;aspect-ratio:1;border:1px solid #ae8747;border-radius:50%;background:linear-gradient(45deg,transparent 47%,#ad874a 48% 52%,transparent 53%),linear-gradient(-45deg,transparent 47%,#ad874a 48% 52%,transparent 53%);} #trivia .trivia-menu .atlas-compass-rose::after{content:"";position:absolute;left:35%;top:15%;width:28%;height:70%;background:linear-gradient(180deg,#547d93 0 48%,#bd9859 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} #trivia .trivia-menu .book-mini-label{position:absolute;left:7%;right:7%;bottom:8%;color:#4e5a61;font-size:clamp(.27rem,.38vw,.43rem);letter-spacing:.04em;text-align:center;} #trivia .trivia-menu .book-page-number{position:absolute;bottom:2%;left:48%;color:#6f654d;font-size:clamp(.28rem,.36vw,.4rem);font-weight:800;} #trivia .trivia-menu .book-spine{z-index:6;left:48%;top:5%;width:4%;height:90%;border:1px solid rgba(227,193,119,.72);border-radius:4px;background:linear-gradient(90deg,#3a2d56,#cfaa62 38%,#62513d 68%,#182747);box-shadow:0 0 7px rgba(0,0,0,.55);} #trivia .trivia-menu .atlas-front-cover{position:absolute;z-index:8;inset:3% 3% 3% 4%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;border:2px solid #dfbb6b;border-radius:8px 15px 14px 8px;background:radial-gradient(ellipse at 53% 44%,rgba(57,155,184,.24),transparent 52%),linear-gradient(128deg,#253b70 0%,#141e43 46%,#0a1e38 100%);box-shadow:inset 0 0 0 3px rgba(225,189,105,.17),inset 5px 0 10px rgba(255,255,255,.09),0 8px 14px rgba(0,0,0,.5);transform-origin:left center;backface-visibility:hidden;transition:transform .72s cubic-bezier(.18,.78,.2,1),filter .62s ease;} #trivia .trivia-menu .atlas-front-cover::before{content:"";position:absolute;inset:5%;border:1px solid rgba(226,194,116,.6);border-radius:5px 11px 10px 5px;box-shadow:inset 0 0 12px rgba(93,179,206,.08);} #trivia .trivia-menu .atlas-cover-kicker{position:relative;color:#b8d8ee;font-size:clamp(.28rem,.4vw,.45rem);font-weight:950;letter-spacing:.13em;text-align:center;} #trivia .trivia-menu .atlas-cover-world{position:relative;display:grid;place-items:center;width:34%;aspect-ratio:1;border:1px solid rgba(232,200,110,.92);border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(82,195,213,.46),rgba(17,58,89,.91) 67%,#111b3e);box-shadow:0 0 17px rgba(64,210,222,.22),inset 0 0 12px rgba(255,255,255,.13);} #trivia .trivia-menu .atlas-cover-world::before{content:"";position:absolute;inset:12%;border:1px solid rgba(214,207,159,.6);border-radius:50%;transform:rotate(-27deg) scaleX(.52);} #trivia .trivia-menu .atlas-cover-longitude{position:absolute;inset:8% 28%;border:1px solid rgba(182,218,219,.43);border-radius:50%;} #trivia .trivia-menu .atlas-cover-world>b{color:#f6d98d;font-size:clamp(.48rem,.72vw,.72rem);font-weight:1000;text-shadow:0 2px 7px rgba(0,0,0,.75);} #trivia .trivia-menu .scene-atlas-book .atlas-cover-title{position:relative;color:#fbefcf;font-size:clamp(.4rem,.63vw,.64rem);font-weight:1000;letter-spacing:.1em;line-height:1.2;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.75);} #trivia .trivia-menu .atlas-cover-mosaic{position:relative;display:flex;gap:3px;padding:2px 4px;border-top:1px solid rgba(232,200,110,.58);border-bottom:1px solid rgba(232,200,110,.58);} #trivia .trivia-menu .atlas-cover-mosaic img{display:block;width:clamp(13px,1.8vw,22px);height:auto;aspect-ratio:3/2;object-fit:cover;box-shadow:0 2px 5px rgba(0,0,0,.38);} #trivia .trivia-menu .atlas-cover-edition{position:relative;color:#d5c18e;font-size:clamp(.27rem,.38vw,.42rem);font-weight:850;letter-spacing:.15em;} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book{transform:rotateY(0deg) rotateX(0deg) translateY(-2px)!important;filter:drop-shadow(0 18px 21px rgba(0,0,0,.65)) brightness(1.05);} #trivia .trivia-menu .mission-learning:hover .atlas-front-cover{transform:perspective(760px) rotateY(-105deg);filter:brightness(1.24);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-left{transform:perspective(760px) rotateY(-7deg) skewY(1deg);filter:brightness(1.08);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-right{transform:perspective(760px) rotateY(7deg) skewY(-1deg);filter:brightness(1.1);} #trivia .trivia-menu .scene-art-learning .learning-pop{left:49%!important;top:47%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) scale(.12) rotate(-18deg);transition:left .68s cubic-bezier(.16,.8,.22,1),top .68s cubic-bezier(.16,.8,.22,1),opacity .3s ease,transform .68s cubic-bezier(.16,.8,.22,1),visibility 0s linear .68s;} #trivia .trivia-menu .mission-learning:hover .learning-pop{transform:translate(-50%,-50%) scale(1) rotate(var(--flag-tilt));} @media(max-width:700px){#trivia .trivia-menu .scene-atlas-book{left:5%!important;width:95%!important;height:88%!important}#trivia .trivia-menu .atlas-cover-title{font-size:clamp(.37rem,.72vw,.56rem)}#trivia .trivia-menu .atlas-cover-mosaic img{width:clamp(11px,2vw,16px)}#trivia .trivia-menu .atlas-cover-kicker,#trivia .trivia-menu .atlas-cover-edition{font-size:clamp(.24rem,.46vw,.34rem)}} @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .scene-atlas-book{top:4%!important;height:92%!important}} /* Atlas vertical: hard cover with visible spine, curved spread and restrained gold detailing. */ #trivia .trivia-menu .scene-atlas-book{ left:17%!important;top:2%!important;width:69%!important;height:96%!important; overflow:visible;transform:none!important;animation:none!important; filter:drop-shadow(0 12px 15px rgba(0,0,0,.62)); } #trivia .trivia-menu .atlas-book-back{ inset:1% 2% 2% 4%;border:1px solid #d5b96e; border-radius:6px 9px 9px 5px; background:linear-gradient(105deg,#0b1b35 0%,#172d50 45%,#0b1b34 100%); box-shadow:inset 0 0 0 2px rgba(218,190,117,.15),inset 5px 0 9px rgba(255,255,255,.08),4px 8px 12px rgba(0,0,0,.48); } #trivia .trivia-menu .atlas-page-stack{ inset:4% 4% 5% 10%;border:1px solid #e0d3b2;border-radius:4px 7px 7px 4px; background:repeating-linear-gradient(0deg,#f1ead8 0 2px,#cdbf9d 2.5px 3.5px); box-shadow:2px 4px 6px rgba(0,0,0,.42); } #trivia .trivia-menu .scene-atlas-book .book-page{ top:6%;height:88%;width:45%;overflow:hidden; border:1px solid rgba(226,216,190,.95); background:linear-gradient(100deg,#e8dfc8 0%,#f7f2e6 14%,#eee6d3 76%,#d5c8a8 100%); box-shadow:inset 0 0 16px rgba(70,64,48,.18),inset 0 1px 0 rgba(255,255,255,.9),0 3px 5px rgba(0,0,0,.2); } #trivia .trivia-menu .scene-atlas-book .book-page::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(51,48,40,.17),transparent 18%,rgba(255,255,255,.28) 49%,transparent 75%,rgba(48,42,31,.12)); } #trivia .trivia-menu .scene-atlas-book .book-left{left:5%;border-radius:10px 2px 3px 7px;transform:perspective(700px) rotateY(2deg);transform-origin:right center;} #trivia .trivia-menu .scene-atlas-book .book-right{right:4%;border-radius:2px 10px 7px 3px;transform:perspective(700px) rotateY(-2deg);transform-origin:left center;} #trivia .trivia-menu .book-page-heading{font-size:clamp(.27rem,.39vw,.42rem);letter-spacing:.05em;color:#29465c;} #trivia .trivia-menu .atlas-world-map{inset:25% 7% 20%;border-radius:52% 46% 49% 44%;background:radial-gradient(ellipse at 48% 43%,rgba(70,150,158,.2),transparent 70%),repeating-radial-gradient(ellipse at 50% 50%,transparent 0 9px,rgba(63,103,134,.17) 10px 11px);} #trivia .trivia-menu .atlas-map-grid{background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(67,111,143,.13) 9px 10px,transparent 11px 16px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(67,111,143,.12) 10px 11px,transparent 12px 18px);} #trivia .trivia-menu .atlas-map-contours{inset:18% 12%;border-color:rgba(54,116,130,.5);border-radius:57% 35% 62% 39%;} #trivia .trivia-menu .atlas-compass-rose{width:12px;right:6%;bottom:6%;} #trivia .trivia-menu .book-mini-label{font-size:clamp(.23rem,.31vw,.33rem);letter-spacing:.015em;color:#4a5a61;} #trivia .trivia-menu .book-page-number{font-size:.28rem;} #trivia .trivia-menu .book-spine{ left:4%;top:1%;width:13%;height:98%;z-index:9; border:1px solid rgba(220,190,112,.9);border-radius:7px 3px 3px 7px; background:linear-gradient(90deg,#07162b 0%,#213c5d 28%,#b28d4a 48%,#20334e 67%,#09172e 100%); box-shadow:inset 2px 0 4px rgba(255,255,255,.2),inset -2px 0 4px rgba(0,0,0,.4),2px 1px 5px rgba(0,0,0,.45); } #trivia .trivia-menu .book-spine::after{ content:"ATLAS";position:absolute;left:50%;top:50%;color:#e8d39c; font-size:clamp(.25rem,.34vw,.36rem);font-weight:900;letter-spacing:.16em; writing-mode:vertical-rl;transform:translate(-50%,-50%);text-shadow:0 1px 4px #061326; } #trivia .trivia-menu .atlas-front-cover{ inset:1% 2% 2% 15%;z-index:8;gap:5%;padding:8% 4% 7%; border:1px solid #ddbd72;border-radius:3px 9px 8px 3px; background:radial-gradient(ellipse at 62% 43%,rgba(70,167,193,.23),transparent 47%),linear-gradient(112deg,#142544 0%,#102345 48%,#08182e 100%); box-shadow:inset 0 0 0 2px rgba(222,190,112,.13),inset 4px 0 8px rgba(255,255,255,.08),0 5px 10px rgba(0,0,0,.44); transform-origin:left center;transition:transform .72s cubic-bezier(.2,.78,.17,1),filter .6s ease; } #trivia .trivia-menu .atlas-front-cover::before{inset:4%;border:1px solid rgba(221,191,121,.58);border-radius:2px 7px 6px 2px;box-shadow:inset 0 0 14px rgba(99,196,211,.1);} #trivia .trivia-menu .atlas-cover-kicker{font-size:clamp(.24rem,.32vw,.34rem);letter-spacing:.09em;color:#b9d6e7;} #trivia .trivia-menu .atlas-cover-world{width:38%;border-color:rgba(232,202,131,.9);box-shadow:0 0 13px rgba(71,210,218,.2),inset 0 0 12px rgba(255,255,255,.15);} #trivia .trivia-menu .atlas-cover-title{font-size:clamp(.39rem,.56vw,.59rem)!important;letter-spacing:.09em!important;line-height:1.22;} #trivia .trivia-menu .atlas-cover-mosaic{gap:3px;padding:2px 5px;border-color:rgba(220,192,124,.38);background:rgba(4,15,29,.28);} #trivia .trivia-menu .atlas-cover-mosaic img{width:clamp(9px,.9vw,12px);aspect-ratio:3/2;border:1px solid rgba(245,232,197,.54);box-shadow:0 1px 3px rgba(0,0,0,.4);} #trivia .trivia-menu .atlas-cover-edition{font-size:clamp(.23rem,.3vw,.31rem)!important;letter-spacing:.12em;color:#e4d09b;} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book{transform:none!important;filter:drop-shadow(0 15px 17px rgba(0,0,0,.66)) brightness(1.03);} #trivia .trivia-menu .mission-learning:hover .atlas-front-cover{transform:perspective(760px) rotateY(-148deg) translateX(-7%);filter:brightness(1.16);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-left{transform:perspective(700px) rotateY(-9deg) skewY(.6deg);filter:brightness(1.1);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-right{transform:perspective(700px) rotateY(8deg) skewY(-.6deg);filter:brightness(1.12);} @media(max-width:700px){ #trivia .trivia-menu .scene-atlas-book{left:20%!important;width:66%!important;height:96%!important;} #trivia .trivia-menu .atlas-cover-title{font-size:clamp(.37rem,.72vw,.54rem)!important;} #trivia .trivia-menu .atlas-cover-kicker,#trivia .trivia-menu .atlas-cover-edition{font-size:clamp(.22rem,.44vw,.3rem)!important;} } @media(max-height:440px) and (orientation:landscape){#trivia .trivia-menu .scene-atlas-book{top:2%!important;height:96%!important;}} /* Refinamiento de la tarjeta de Aprendizaje: libro más reconocible y portada sin mosaico. */ #trivia .trivia-menu .atlas-book-back{border-radius:7px 10px 10px 6px;box-shadow:inset 0 0 0 2px rgba(218,190,117,.13),inset 6px 0 10px rgba(255,255,255,.07),5px 9px 13px rgba(0,0,0,.5);} #trivia .trivia-menu .atlas-page-stack{inset:4% 3% 5% 9%;background:repeating-linear-gradient(0deg,#f2ecdc 0 2px,#c9ba96 2.5px 3.5px);} #trivia .trivia-menu .book-spine{left:4%!important;top:1%!important;width:13%!important;height:98%!important;z-index:9;background:linear-gradient(90deg,#08152a 0%,#1c3554 26%,#c09b57 47%,#20334d 66%,#09172c 100%);transition:left .66s cubic-bezier(.2,.76,.18,1),width .66s cubic-bezier(.2,.76,.18,1),filter .5s ease;} #trivia .trivia-menu .atlas-front-cover{inset:1% 2% 2% 15%;padding:7% 4%;gap:5%;border-radius:3px 10px 9px 3px;background:radial-gradient(ellipse at 61% 44%,rgba(83,168,190,.18),transparent 48%),linear-gradient(110deg,#172944 0%,#10213e 53%,#0a192f 100%);box-shadow:inset 0 0 0 2px rgba(222,190,112,.12),inset 5px 0 10px rgba(255,255,255,.08),0 7px 12px rgba(0,0,0,.46);} #trivia .trivia-menu .atlas-front-cover::before{inset:4%;border:1px solid rgba(221,191,121,.47);border-radius:2px 7px 6px 2px;} #trivia .trivia-menu .atlas-front-cover::after{content:"";position:absolute;inset:2% 3% 2% 0;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,.08),transparent 16% 76%,rgba(106,180,202,.08));} #trivia .trivia-menu .atlas-cover-kicker{font-size:clamp(.22rem,.28vw,.3rem)!important;letter-spacing:.17em;color:#a9c8da;} #trivia .trivia-menu .atlas-cover-world{width:32%;border-color:rgba(225,197,131,.78);background:radial-gradient(circle at 34% 27%,rgba(82,195,213,.38),rgba(17,58,89,.94) 68%,#111b3e);} #trivia .trivia-menu .atlas-cover-title{font-size:clamp(.43rem,.66vw,.62rem)!important;letter-spacing:.055em!important;line-height:1.16!important;color:#fff2d3!important;text-shadow:0 2px 7px rgba(0,0,0,.8);} #trivia .trivia-menu .atlas-cover-edition{font-size:clamp(.22rem,.29vw,.3rem)!important;letter-spacing:.105em!important;line-height:1.45;text-align:center;color:#d8c28c!important;} #trivia .trivia-menu .mission-learning:hover .book-spine{left:47%!important;width:6%!important;filter:brightness(1.1);} #trivia .trivia-menu .mission-learning:hover .atlas-front-cover{transform:perspective(760px) rotateY(-155deg) translateX(-9%);filter:brightness(1.12);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-left{transform:perspective(700px) rotateY(-11deg) skewY(.8deg);filter:brightness(1.1);} #trivia .trivia-menu .mission-learning:hover .scene-atlas-book .book-right{transform:perspective(700px) rotateY(10deg) skewY(-.8deg);filter:brightness(1.12);} @media(max-width:700px){#trivia .trivia-menu .atlas-cover-title{font-size:clamp(.39rem,.73vw,.54rem)!important;}#trivia .trivia-menu .atlas-cover-edition{font-size:clamp(.21rem,.43vw,.27rem)!important;}} /* Ranking 05: separated star standings, historic points, and nonblocking reused VFX. */ .trivia-vfx-canvas{position:fixed;inset:0;z-index:12000;width:100vw;height:100vh;pointer-events:none} .trivia-vfx-sr-only{position:fixed!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .trivia-vfx-skip.hidden{display:none!important} .trivia-vfx-skip{position:fixed;z-index:12001;top:12px;right:12px;padding:8px 12px;border:1px solid rgba(115,232,244,.65);border-radius:10px;background:#10243a;color:#e8fbff;font-weight:800;box-shadow:0 0 20px rgba(88,223,236,.25)} #trivia .trivia-stars-game .trivia-stats>span:first-child{color:#ffe49a} #trivia .trivia-stars-game .trivia-stats>span:first-child{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap} #trivia .trivia-stars-game .trivia-stats>span:first-child::before{content:"";display:inline-block;flex:0 0 1.05em;width:1.05em;height:1.05em;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23fff4bf'/%3E%3Cstop offset='.48' stop-color='%23ffd15a'/%3E%3Cstop offset='1' stop-color='%23e9892d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='m16 2.7 4.15 8.4 9.27 1.35-6.71 6.54 1.58 9.23L16 23.86l-8.29 4.36 1.58-9.23-6.71-6.54 9.27-1.35z' fill='url(%23g)' stroke='%23fff0ad' stroke-width='1.15' stroke-linejoin='round'/%3E%3Cpath d='m16 5.7 2.85 5.78 6.38.93-4.62 4.5 1.09 6.35L16 20.26l-5.7 3 1.09-6.35-4.62-4.5 6.38-.93z' fill='%23fff4c9' opacity='.25'/%3E%3C/svg%3E");filter:drop-shadow(0 0 5px rgba(255,199,77,.48));} #trivia .trivia-stars-game #trivia-score{color:#fff0b8;text-shadow:0 0 14px rgba(255,194,72,.45)} #trivia .trivia-stars-game .trivia-countdown{min-width:92px} #trivia .trivia-record-message{padding:12px 16px;border:1px solid rgba(126,226,240,.38);border-radius:14px;background:linear-gradient(115deg,rgba(25,76,102,.55),rgba(25,35,71,.72));font-weight:800} #trivia .trivia-record-message.is-new-record{border-color:rgba(255,210,93,.8);color:#ffe69b;box-shadow:0 0 24px rgba(255,201,77,.18)} #ranking .ranking-view-tabs,#ranking .ranking-difficulty-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0} #ranking .ranking-view-tabs button,#ranking .ranking-difficulty-tabs button{border:1px solid rgba(112,185,224,.3);border-radius:12px;padding:10px 15px;background:linear-gradient(145deg,#142a43,#0b1728);color:#c9deef;font-weight:850;cursor:pointer} #ranking .ranking-view-tabs button.active,#ranking .ranking-difficulty-tabs button.active{border-color:#5be5eb;color:#f4fdff;background:linear-gradient(130deg,rgba(25,144,159,.6),rgba(61,77,148,.65));box-shadow:0 0 20px rgba(73,222,235,.19)} #ranking .ranking-private-note{margin:12px 0 18px;padding:12px 15px;border-left:2px solid #59d9e5;border-radius:8px;background:rgba(13,33,52,.75);color:#c4d7e8;font-size:.88rem;line-height:1.45} #ranking .ranking-private-note button{border:0;background:none;color:#7cf3f0;text-decoration:underline;font-weight:900;cursor:pointer} #ranking .ranking-podium{margin:12px 0 20px;padding:16px;border:1px solid rgba(245,195,82,.4);border-radius:18px;background:radial-gradient(ellipse at 50% 0,rgba(224,178,72,.15),transparent 65%),linear-gradient(135deg,rgba(16,37,57,.93),rgba(21,26,58,.93))} #ranking .ranking-podium h3{margin:0 0 12px;color:#ffe29a} #ranking .ranking-podium>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end} #ranking .ranking-podium-card{display:grid;gap:8px;min-width:0;padding:13px;border:1px solid rgba(140,181,215,.28);border-radius:14px;background:rgba(8,20,36,.82);text-align:center} #ranking .ranking-podium-card.podium-1{transform:translateY(-5px);border-color:rgba(255,218,113,.75);box-shadow:0 0 22px rgba(255,196,73,.16)} #ranking .ranking-podium-card .podium-place{color:#ffe49b;font-size:.83rem;font-weight:900} #ranking .ranking-podium-card .podium-identity{display:grid;justify-items:center;gap:7px;overflow-wrap:anywhere} #ranking .ranking-podium-card .podium-identity img{width:48px;height:32px;object-fit:cover;border-radius:5px;box-shadow:0 0 12px rgba(93,221,236,.25)} #ranking .ranking-podium-card strong{color:#fff0b9} #ranking .ranking-star-table .rank-row strong{color:#ffe7a4} #ranking .ranking-history-table>p{color:#a9c2d8;font-size:.9rem} #ranking .ranking-empty{margin:18px 0;padding:28px 20px;border:1px dashed rgba(98,206,226,.42);border-radius:17px;background:radial-gradient(ellipse at 50% 0,rgba(55,145,174,.16),transparent 70%);text-align:center;color:#d5e6f5} #ranking .ranking-empty b{font-size:1.1rem;color:#9beaf0} #ranking .ranking-empty p{margin:8px 0 0;color:#aec4d7} @media(max-width:620px){#ranking .ranking-podium>div{grid-template-columns:1fr}#ranking .ranking-podium-card.podium-1{transform:none}#ranking .ranking-podium-card{grid-template-columns:auto 1fr auto;align-items:center;text-align:left}#ranking .ranking-podium-card .podium-identity{display:flex;justify-content:flex-start}#ranking .ranking-view-tabs button,#ranking .ranking-difficulty-tabs button{flex:1 1 auto;padding:9px 10px}} @media(prefers-reduced-motion:reduce){.trivia-vfx-canvas{animation:none!important}} /* CORRECCIONES-01: ranking centrado en la lista, sin alterar su contenido. */ #ranking .ranking-stars-page{width:min(1120px,calc(100% - 24px));max-width:1120px;margin:0 auto;padding-block:12px} #ranking .ranking-stars-page>.eyebrow{margin:0 0 3px;font-size:.76rem} #ranking .ranking-stars-page>h2{margin:2px 0 8px;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.12} #ranking .ranking-stars-page .community-nav{margin:6px 0;gap:6px} #ranking .ranking-view-tabs,#ranking .ranking-difficulty-tabs{gap:6px;margin:6px 0} #ranking .ranking-view-tabs button,#ranking .ranking-difficulty-tabs button{min-height:34px;padding:7px 11px;border-radius:10px;font-size:.9rem} #ranking .ranking-private-note{margin:7px 0 9px;padding:8px 11px;font-size:.8rem;line-height:1.35} #ranking .ranking-podium{margin:8px 0 10px;padding:9px 11px;border-radius:14px} #ranking .ranking-podium h3{margin:0 0 6px;font-size:.98rem} #ranking .ranking-podium>div{gap:7px} #ranking .ranking-podium-card{gap:4px;padding:7px 9px;border-radius:11px} #ranking .ranking-podium-card.podium-1{transform:translateY(-2px)} #ranking .ranking-podium-card .podium-place{font-size:.72rem} #ranking .ranking-podium-card .podium-identity{gap:4px;font-size:.88rem} #ranking .ranking-podium-card .podium-identity img{width:40px;height:27px} #ranking .ranking-podium-card strong{font-size:.92rem} #ranking .ranking-podium>div:has(.ranking-podium-card:only-child){grid-template-columns:minmax(0,320px);justify-content:center} #ranking .ranking-podium>div:has(.ranking-podium-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center} #ranking .ranking-star-table{margin-top:8px} #ranking .ranking-star-table h3{margin:0 0 5px;font-size:1rem} #ranking .ranking-star-table .rank-row{min-height:42px;box-sizing:border-box;align-items:center;padding:5px 10px;margin-top:4px;border-radius:10px} #ranking .ranking-star-table .rank-identity{display:flex;gap:8px;align-items:center;min-width:0} #ranking .ranking-star-table .rank-emblem{width:36px;height:24px;flex:0 0 36px;overflow:hidden} #ranking .ranking-star-table .rank-emblem img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px} #ranking .ranking-star-table .rank-row strong{white-space:nowrap;font-size:.96rem} @media(max-width:620px){ #ranking .ranking-stars-page{width:calc(100% - 16px);padding-block:8px} #ranking .ranking-podium>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} #ranking .ranking-podium-card{padding:6px 4px;overflow-wrap:anywhere} #ranking .ranking-podium-card .podium-identity{display:grid;justify-items:center;gap:3px;font-size:.75rem} #ranking .ranking-podium-card .podium-identity img{width:34px;height:23px} #ranking .ranking-podium-card strong{font-size:.83rem} #ranking .ranking-star-table .rank-row{gap:6px;padding:5px 7px} #ranking .ranking-star-table .rank-identity{min-width:0;font-size:.84rem} #ranking .ranking-star-table .rank-emblem{width:32px;height:22px;flex-basis:32px} } /* RANKING-UI-02: podio editorial y banderas con tejido visible. */ #ranking .ranking-stars-page{width:min(1600px,calc(100% - 36px))!important;max-width:1600px!important;padding:clamp(14px,2vw,28px)!important} #ranking .ranking-stars-page>.eyebrow{font-size:.86rem;letter-spacing:.17em} #ranking .ranking-stars-page>h2{font-size:clamp(2rem,3.3vw,3.35rem);line-height:1.08;margin:5px 0 15px} #ranking .ranking-stars-page .community-nav{gap:10px;margin:10px 0 12px} #ranking .ranking-stars-page .community-nav button,#ranking .ranking-stars-page .ranking-view-tabs button,#ranking .ranking-stars-page .ranking-difficulty-tabs button{min-height:44px;padding:10px 17px;font-size:1rem;border-radius:12px} #ranking .ranking-stars-page .ranking-view-tabs,#ranking .ranking-stars-page .ranking-difficulty-tabs{gap:9px;margin:10px 0} #ranking .ranking-private-note{margin:13px 0 17px;padding:12px 16px;font-size:.9rem;line-height:1.5} #ranking .ranking-podium{margin:16px 0 20px;padding:16px;border-radius:18px} #ranking .ranking-podium h3{font-size:1.2rem;margin:0 0 12px} #ranking .ranking-podium>div{gap:14px} #ranking .ranking-podium-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:5px;min-height:128px;padding:15px 18px;border-radius:16px;overflow:hidden;text-align:left;background:linear-gradient(115deg,rgba(10,25,43,.96),rgba(25,35,57,.92));box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 26px rgba(0,0,0,.18)} #ranking .ranking-podium-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 0,rgba(74,206,236,.13),transparent 55%)} #ranking .ranking-podium-card.podium-1{transform:translateY(-3px);border-color:#f7ca47;box-shadow:0 0 25px rgba(255,196,43,.2),inset 0 1px rgba(255,255,255,.12)} #ranking .ranking-podium-card .podium-place{grid-column:1;grid-row:1/3;align-self:center;font-size:1.45rem;white-space:nowrap} #ranking .ranking-podium-card .podium-identity{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-content:start;gap:12px;min-width:0;font-size:1.16rem} #ranking .ranking-podium-card .podium-identity b{overflow-wrap:anywhere} #ranking .ranking-podium-card .ranking-podium-flag,#ranking .ranking-podium-card .rank-emblem{position:relative;display:block;isolation:isolate;width:clamp(88px,8vw,126px);height:clamp(58px,5.3vw,84px);flex:none;overflow:hidden;border:1px solid rgba(134,220,247,.8);border-radius:7px;background:rgba(7,20,38,.72);box-shadow:0 0 15px rgba(36,203,235,.2)} #ranking .ranking-podium-card .ranking-podium-flag img,#ranking .ranking-podium-card .rank-emblem img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0} #ranking .ranking-podium-card .ranking-podium-flag.rv3-cloth-ready img{opacity:0!important} #ranking .ranking-podium-card .ranking-podium-flag>.rv3-cloth-canvas{position:absolute!important;inset:0!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;transform:none!important;pointer-events:none!important} #ranking .ranking-podium-card strong{position:relative;z-index:1;grid-column:2;font-size:clamp(1.2rem,1.7vw,1.7rem);line-height:1.1;white-space:nowrap} #ranking .ranking-podium>div:has(.ranking-podium-card:only-child){grid-template-columns:minmax(0,520px);justify-content:center} #ranking .ranking-podium>div:has(.ranking-podium-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center} #ranking .ranking-star-table{margin-top:20px} #ranking .ranking-star-table h3{font-size:1.28rem;margin:0 0 10px} #ranking .ranking-star-table .rank-row{position:relative;isolation:isolate;min-height:72px;box-sizing:border-box;align-items:center;padding:8px 16px;margin-top:7px;border-radius:14px;background:linear-gradient(105deg,rgba(12,31,52,.96),rgba(12,25,45,.92));overflow:hidden} #ranking .ranking-star-table .rank-row.is-current-player{border-color:#f6c844;box-shadow:0 0 0 1px rgba(246,200,68,.35),0 0 20px rgba(246,200,68,.12)} #ranking .ranking-star-table .rank-identity{position:relative;z-index:1;display:flex;gap:14px;align-items:center;min-width:0;font-size:1.13rem} #ranking .ranking-star-table .rank-emblem{position:relative;isolation:isolate;display:block;width:88px;height:58px;flex:0 0 88px;overflow:hidden;border:1px solid rgba(111,207,234,.72);border-radius:7px;background:#07192b;box-shadow:0 0 11px rgba(40,188,225,.12)} #ranking .ranking-star-table .rank-emblem.rv3-cloth-active img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:0;transform-origin:left center;animation:ranking-row-cloth-wave 4.4s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} #ranking .ranking-star-table .rank-emblem.rv3-cloth-active:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(108deg,transparent 24%,rgba(255,255,255,.20) 48%,rgba(255,255,255,.035) 59%,transparent 76%);background-size:220% 100%;animation:ranking-row-cloth-sheen 5.2s ease-in-out infinite;mix-blend-mode:screen} #ranking .ranking-star-table .rank-row:hover .rank-emblem.rv3-cloth-active img{animation-duration:2.4s} #ranking .ranking-star-table .rank-row:hover .rank-emblem.rv3-cloth-active:after{animation-duration:2.8s} #ranking .ranking-star-table .rank-row strong{position:relative;z-index:1;white-space:nowrap;font-size:1.3rem;color:#ffe7a4} @keyframes ranking-row-cloth-wave{0%,100%{transform:perspective(420px) rotateY(-2.3deg) skewY(.35deg) scaleX(.985)}50%{transform:perspective(420px) rotateY(3deg) skewY(-.45deg) scaleX(1.015)}} @keyframes ranking-row-cloth-sheen{0%,100%{background-position:160% 0;opacity:.55}50%{background-position:-60% 0;opacity:.95}} @media(max-width:760px){ #ranking .ranking-stars-page{width:calc(100% - 18px)!important;padding:12px!important} #ranking .ranking-podium>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #ranking .ranking-podium-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;gap:6px;min-height:148px;padding:10px 7px;text-align:center} #ranking .ranking-podium-card .podium-place{grid-column:1;grid-row:auto;font-size:1rem} #ranking .ranking-podium-card .podium-identity{grid-template-columns:1fr;justify-items:center;gap:5px;text-align:center;font-size:.9rem} #ranking .ranking-podium-card strong{grid-column:1;font-size:1rem} #ranking .ranking-podium-card .ranking-podium-flag{width:clamp(66px,14vw,94px);height:clamp(44px,9.4vw,63px)} #ranking .ranking-star-table .rank-row{min-height:65px;padding:7px 9px;gap:7px} #ranking .ranking-star-table .rank-identity{gap:9px;font-size:.92rem} #ranking .ranking-star-table .rank-emblem{width:68px;height:45px;flex-basis:68px} #ranking .ranking-star-table .rank-row strong{font-size:1.02rem} } @media(max-width:430px){ #ranking .ranking-podium{padding:10px 6px} #ranking .ranking-podium-card{min-height:134px;padding:8px 4px} #ranking .ranking-podium-card .podium-place{font-size:.82rem} #ranking .ranking-podium-card .podium-identity{font-size:.75rem} #ranking .ranking-podium-card .ranking-podium-flag{width:56px;height:38px} #ranking .ranking-podium-card strong{font-size:.82rem} #ranking .ranking-star-table .rank-row{min-height:58px;padding:6px} #ranking .ranking-star-table .rank-emblem{width:56px;height:38px;flex-basis:56px} #ranking .ranking-star-table .rank-identity{font-size:.8rem;gap:6px} #ranking .ranking-star-table .rank-row strong{font-size:.88rem} } @media(prefers-reduced-motion:reduce){:root:not(.rv3-motion-normal) #ranking .ranking-star-table .rank-emblem img,:root:not(.rv3-motion-normal) #ranking .ranking-star-table .rank-emblem:after{animation:none!important;transform:none!important}} :root.rv3-motion-reduced #ranking .ranking-star-table .rank-emblem img,:root.rv3-motion-reduced #ranking .ranking-star-table .rank-emblem:after{animation:none!important;transform:none!important} @media(min-width:1000px){ #ranking .ranking-stars-page{display:grid!important;text-align:left;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow eyebrow" "title community" "score difficulty" "note note" "content content";column-gap:14px;align-items:center} #ranking .ranking-stars-page>.eyebrow{grid-area:eyebrow} #ranking .ranking-stars-page>h2{grid-area:title;white-space:nowrap;font-size:clamp(2rem,2.5vw,3rem);margin:0} #ranking .ranking-stars-page>.community-nav{grid-area:community;justify-self:end;margin:0} #ranking .ranking-stars-page>.ranking-view-tabs{grid-area:score;justify-self:start;margin:0} #ranking .ranking-stars-page>.ranking-difficulty-tabs{grid-area:difficulty;justify-self:end;margin:0} #ranking .ranking-stars-page>.ranking-private-note{grid-area:note;width:auto;box-sizing:border-box} #ranking .ranking-stars-page>#ranking-content{grid-area:content;min-width:0;width:100%} } /* RANKING-FLAG-EDGE-01: mostrar la tela sin marco y dejar holgura al flameo. */ #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{ width:clamp(136px,10vw,164px); height:clamp(104px,7.2vw,120px); overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #ranking .ranking-podium-card .ranking-podium-flag img, #ranking .ranking-podium-card .rank-emblem img{ position:absolute; top:0; bottom:0; left:14px; margin:auto 0; width:calc(100% - 28px); height:auto; max-height:calc(100% - 28px); object-fit:contain; transform:none; filter:drop-shadow(0 5px 7px rgba(0,0,0,.4)); } #ranking .ranking-podium-card .ranking-podium-flag>.rv3-cloth-canvas{ overflow:visible!important; } #ranking .ranking-star-table .rank-emblem{ width:112px; height:86px; flex:0 0 112px; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #ranking .ranking-star-table .rank-emblem img{ position:absolute; width:calc(100% - 24px); max-height:calc(100% - 20px); height:auto; top:0; bottom:0; left:12px; margin:auto 0; object-fit:contain; transform-origin:left center; } #ranking .ranking-star-table .rank-emblem:after{ inset:10px 12px; border-radius:1px; } @media(max-width:760px){ #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{width:clamp(82px,14vw,110px);height:76px} #ranking .ranking-podium-card .ranking-podium-flag img, #ranking .ranking-podium-card .rank-emblem img{width:calc(100% - 22px);max-height:calc(100% - 22px)} #ranking .ranking-star-table .rank-emblem{width:78px;height:62px;flex-basis:78px} #ranking .ranking-star-table .rank-emblem img{width:calc(100% - 18px);max-height:calc(100% - 16px)} #ranking .ranking-star-table .rank-emblem:after{inset:8px 9px} } @media(max-width:430px){ #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{width:68px;height:62px} #ranking .ranking-podium-card .ranking-podium-flag img, #ranking .ranking-podium-card .rank-emblem img{width:calc(100% - 18px);max-height:calc(100% - 18px);left:9px} #ranking .ranking-podium-card .ranking-podium-flag img{width:calc(100% - 18px);max-height:calc(100% - 18px);left:9px} #ranking .ranking-star-table .rank-emblem{width:66px;height:54px;flex-basis:66px} #ranking .ranking-star-table .rank-emblem img{width:calc(100% - 16px);max-height:calc(100% - 14px)} #ranking .ranking-star-table .rank-emblem:after{inset:7px 8px} } /* RV3-ESTILO-01: jerarquía premium y biblioteca gráfica del Ranking. */ #ranking .ranking-stars-page{row-gap:8px} #ranking .ranking-stars-page>.ranking-heading{display:flex;align-items:center;gap:10px} #ranking .ranking-heading>img{width:34px;height:38px;flex:none;filter:drop-shadow(0 0 11px rgba(255,198,54,.38))} #ranking .ranking-podium h3{display:flex;align-items:center;gap:9px} #ranking .ranking-podium-trophy{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 10px rgba(255,198,54,.4))} #ranking .ranking-private-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 9px;padding:7px 10px;border:1px solid rgba(72,177,212,.18);border-left:3px solid rgba(70,224,241,.65);border-radius:9px;background:linear-gradient(90deg,rgba(9,29,48,.56),rgba(9,29,48,.18));color:#b7cbe0;font-size:.78rem;line-height:1.35} #ranking .ranking-private-note button{flex:none;margin:0;padding:5px 10px;border:1px solid rgba(65,218,236,.42);border-radius:8px;background:rgba(17,65,91,.38);color:#85f4fb;font-weight:850} #ranking .ranking-private-note button:hover{background:rgba(20,112,139,.48);box-shadow:0 0 14px rgba(55,224,241,.2)} #ranking .ranking-podium{padding:13px;margin:10px 0 13px} #ranking .ranking-podium>div{align-items:stretch} #ranking .ranking-podium:has(.ranking-podium-card:only-child){width:min(100%,560px);justify-self:center} #ranking .ranking-podium:has(.ranking-podium-card:nth-child(2):last-child){width:min(100%,960px);justify-self:center} #ranking .ranking-podium-card{min-height:116px;padding:11px 14px} #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{width:clamp(120px,9.3vw,146px);height:clamp(82px,6.5vw,94px)} #ranking .ranking-podium-card .ranking-podium-flag img, #ranking .ranking-podium-card .rank-emblem img{width:calc(100% - 28px);max-height:calc(100% - 22px)} #ranking .ranking-podium-card .podium-place{display:flex;align-items:center;gap:8px} #ranking .ranking-podium-card .podium-place img{width:48px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.36))} #ranking .ranking-podium-card .podium-place>span{color:#e8f5ff;font-size:.96rem;font-weight:900;text-shadow:0 0 12px rgba(79,218,245,.22)} #ranking .ranking-star-table{margin-top:13px} #ranking .ranking-star-table .rank-row{min-height:62px;padding:4px 12px;margin-top:4px;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease} #ranking .ranking-star-table .rank-emblem{width:94px;height:70px;flex-basis:94px} #ranking .ranking-star-table .rank-emblem img{width:calc(100% - 20px);max-height:calc(100% - 18px);left:10px} #ranking .ranking-star-table .rank-emblem:after{inset:9px 10px} #ranking .ranking-star-table .rank-emblem.rv3-cloth-ready>img{opacity:0!important;animation:none!important;transform:none!important} #ranking .ranking-star-table .rank-emblem>.rv3-cloth-canvas{position:absolute!important;inset:0!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;transform:none!important;pointer-events:none!important} #ranking .ranking-star-table .rank-row.podium-1{border-color:rgba(255,204,67,.78);background:linear-gradient(105deg,rgba(73,53,19,.5),rgba(12,25,45,.94) 42%);box-shadow:inset 0 0 24px rgba(255,193,48,.07)} #ranking .ranking-star-table .rank-row.podium-2{border-color:rgba(156,207,234,.46)} #ranking .ranking-star-table .rank-row.podium-3{border-color:rgba(206,142,98,.52)} #ranking .ranking-star-table .rank-identity b{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.2} #ranking .rank-medal-inline{width:31px;height:36px;flex:0 0 31px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))} #ranking .ranking-star-score{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;color:#ffe5a0!important;font-variant-numeric:tabular-nums} #ranking .ranking-star-score img{width:27px;height:27px;flex:none;filter:drop-shadow(0 0 8px rgba(255,205,76,.35))} #ranking .ranking-view-tabs button,#ranking .ranking-difficulty-tabs button,#ranking .community-nav button{border-color:rgba(68,190,226,.38);transition:box-shadow .2s ease,border-color .2s ease,background .2s ease} #ranking .ranking-view-tabs button:hover,#ranking .ranking-difficulty-tabs button:hover,#ranking .community-nav button:hover{border-color:#53e7f7;box-shadow:0 0 16px rgba(49,211,237,.22)} #ranking .ranking-view-tabs button.active,#ranking .ranking-difficulty-tabs button.active,#ranking .community-nav button.active{border-color:#6ef3ff;box-shadow:0 0 18px rgba(55,219,239,.25),inset 0 0 15px rgba(55,219,239,.1)} @media(max-width:760px){ #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{width:clamp(82px,14vw,110px);height:76px} #ranking .ranking-podium-card .ranking-podium-flag img, #ranking .ranking-podium-card .rank-emblem img{width:calc(100% - 22px);max-height:calc(100% - 22px)} #ranking .ranking-star-table .rank-emblem{width:78px;height:62px;flex-basis:78px} #ranking .ranking-star-table .rank-emblem img{width:calc(100% - 18px);max-height:calc(100% - 16px);left:9px} #ranking .ranking-star-table .rank-emblem:after{inset:8px 9px} #ranking .ranking-private-note{align-items:flex-start;font-size:.72rem} #ranking .ranking-podium{padding:10px 8px;margin:8px 0 10px} #ranking .ranking-podium-card .podium-place img{width:37px;height:43px} #ranking .ranking-star-table .rank-row{min-height:64px;padding:5px 8px} #ranking .rank-medal-inline{width:25px;height:30px;flex-basis:25px} #ranking .ranking-star-score img{width:22px;height:22px} } @media(max-width:430px){ #ranking .ranking-stars-page>.ranking-heading{gap:7px} #ranking .ranking-heading>img{width:27px;height:31px} #ranking .ranking-private-note{gap:6px;padding:6px 7px;font-size:.68rem} #ranking .ranking-private-note button{padding:4px 7px;font-size:.68rem} #ranking .ranking-podium-card .ranking-podium-flag, #ranking .ranking-podium-card .rank-emblem{width:68px;height:62px} #ranking .ranking-star-table .rank-emblem{width:66px;height:54px;flex-basis:66px} #ranking .ranking-star-table .rank-emblem img{width:calc(100% - 16px);max-height:calc(100% - 14px);left:8px} #ranking .ranking-star-table .rank-emblem:after{inset:7px 8px} #ranking .ranking-podium-card .podium-place img{width:31px;height:37px} #ranking .ranking-star-table .rank-identity b{gap:4px;font-size:.78rem} #ranking .rank-medal-inline{width:21px;height:26px;flex-basis:21px} } @media(prefers-reduced-motion:reduce){#ranking .ranking-view-tabs button,#ranking .ranking-difficulty-tabs button,#ranking .community-nav button{transition:none!important}} /* RV3-ESTILO-02: medallas circulares limpias y navegación sin pictogramas genéricos. */ #ranking .community-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px} #ranking .community-nav button{min-height:38px;padding:8px 15px;border:1px solid rgba(74,195,226,.42);border-radius:11px;background:linear-gradient(145deg,rgba(19,42,67,.96),rgba(11,25,45,.96));color:#eaf6ff;font-weight:850;letter-spacing:.015em} #ranking .community-nav button.active{border-color:#68edfa;background:linear-gradient(135deg,rgba(26,94,125,.92),rgba(36,52,99,.94));box-shadow:0 0 18px rgba(62,213,237,.18),inset 0 0 14px rgba(80,218,241,.08)} #ranking .community-nav button:focus-visible{outline:2px solid #9af7ff;outline-offset:2px} #ranking .ranking-podium-card .podium-place img,#ranking .rank-medal-inline{display:block;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))} #ranking .ranking-podium-card .podium-place img{width:64px;height:80px} #ranking .rank-medal-inline{width:36px;height:44px;flex-basis:36px} #ranking .ranking-podium-card.podium-1 .podium-place img{filter:drop-shadow(0 0 10px rgba(255,203,74,.34))} #ranking .ranking-podium-card.podium-2 .podium-place img{filter:drop-shadow(0 0 8px rgba(207,226,240,.22))} #ranking .ranking-podium-card.podium-3 .podium-place img{filter:drop-shadow(0 0 8px rgba(214,145,88,.2))} #ranking .ranking-podium-card .podium-place>span{text-shadow:none;color:#f0f5fb} @media(max-width:620px){#ranking .ranking-podium-card .podium-place img{width:54px;height:68px}#ranking .rank-medal-inline{width:31px;height:38px;flex-basis:31px}} @media(prefers-reduced-motion:reduce){#ranking .community-nav button{transition:none!important}} /* RV3-RANKING-HEADER-03: una barra de control real; desaparecen filas y nota permanente. */ #ranking.active .ranking-stars-page{display:flex!important;flex-direction:column;gap:10px!important;width:min(1600px,100%)!important;max-width:1600px!important;min-height:0;margin:0 auto;padding:0!important;text-align:left;} #ranking .ranking-control-bar{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(350px,1.12fr) minmax(475px,1.48fr) minmax(300px,.96fr);align-items:center;gap:10px;min-height:82px;padding:9px 12px;border:1px solid rgba(73,210,235,.58);border-radius:15px;background:linear-gradient(110deg,rgba(9,34,56,.97),rgba(15,31,58,.97) 58%,rgba(28,27,65,.96));box-shadow:inset 0 1px rgba(207,249,255,.11),0 9px 28px rgba(0,0,0,.2),0 0 18px rgba(37,202,235,.08);} #ranking .ranking-control-bar:before{content:"";position:absolute;inset:1px;border-radius:13px;pointer-events:none;z-index:-1;background:linear-gradient(100deg,rgba(74,211,232,.06),transparent 48%,rgba(137,111,255,.07));} #ranking .ranking-bar-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;min-width:0;} #ranking .ranking-bar-identity>.back{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:6px 9px;border:1px solid rgba(83,209,232,.42);border-radius:9px;background:linear-gradient(145deg,rgba(20,55,79,.88),rgba(12,31,52,.94));color:#dff8ff;font-size:.78rem;white-space:nowrap;} #ranking .ranking-bar-heading{min-width:0;} #ranking .ranking-bar-heading>.ranking-heading{display:flex;align-items:center;gap:6px;margin:0 0 3px;color:#6ff3f2;font-size:.62rem;font-weight:900;letter-spacing:.12em;line-height:1.05;white-space:nowrap;} #ranking .ranking-bar-heading>.ranking-heading img{width:17px;height:17px;flex:none;filter:drop-shadow(0 0 6px rgba(255,198,54,.35));} #ranking .ranking-bar-heading>h2{margin:0;color:#f2f8ff;font-size:clamp(1.08rem,1.65vw,1.42rem);font-weight:900;line-height:1.08;letter-spacing:-.025em;white-space:nowrap;} #ranking .ranking-control-filters{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;} #ranking .ranking-control-filters .ranking-view-tabs,#ranking .ranking-control-filters .ranking-difficulty-tabs{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:4px;min-width:0;margin:0;padding:0;} #ranking .ranking-control-filters .ranking-view-tabs{padding-right:8px;border-right:1px solid rgba(93,177,210,.27);} #ranking .ranking-control-filters .ranking-view-tabs button,#ranking .ranking-control-filters .ranking-difficulty-tabs button{min-height:35px;padding:6px 9px;border-radius:9px;font-size:.78rem;line-height:1.05;white-space:nowrap;} #ranking .ranking-bar-destinations{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;padding-left:9px;border-left:1px solid rgba(93,177,210,.27);} #ranking .ranking-bar-destinations .community-nav{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;margin:0;} #ranking .ranking-bar-destinations .community-nav button,#ranking .ranking-bar-destinations>#ranking-choose-flag{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:6px 9px;border:1px solid rgba(75,189,220,.37);border-radius:9px;background:linear-gradient(145deg,rgba(18,44,68,.96),rgba(11,27,47,.96));color:#e9f7ff;font-size:.78rem;font-weight:850;white-space:nowrap;} #ranking .ranking-bar-destinations .community-nav button.active{border-color:#6ce9f4;background:linear-gradient(135deg,rgba(24,91,117,.88),rgba(35,52,96,.92));box-shadow:inset 0 0 12px rgba(89,223,237,.1),0 0 12px rgba(55,203,232,.12);} #ranking .ranking-bar-destinations>#ranking-choose-flag{border-color:rgba(255,205,80,.56);background:linear-gradient(145deg,rgba(81,61,25,.62),rgba(20,39,58,.95));color:#ffe7a5;} #ranking .ranking-bar-destinations button:hover,#ranking .ranking-bar-identity>.back:hover{border-color:#75eff9;box-shadow:0 0 13px rgba(56,212,236,.19);} #ranking .ranking-control-bar button:focus-visible{outline:2px solid #a1f7ff;outline-offset:2px;} #ranking .ranking-stars-page>#ranking-content{flex:1 0 auto;min-width:0;width:100%;} #ranking .ranking-stars-page .ranking-podium{margin:0 0 7px;padding:9px 12px;border-radius:14px;} #ranking .ranking-stars-page .ranking-podium h3{margin:0 0 6px;font-size:1rem;} #ranking .ranking-stars-page .ranking-podium-card{min-height:116px;padding:7px 10px;} #ranking .ranking-stars-page .ranking-star-table{margin-top:7px;} #ranking .ranking-stars-page .ranking-star-table h3{margin:0 0 5px;font-size:1.05rem;} #ranking .ranking-stars-page .ranking-star-table .rank-row{min-height:62px;margin-top:5px;padding:5px 12px;} @media(max-width:1199px){ #ranking .ranking-control-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity destinations" "filters filters";gap:7px 12px;min-height:0;padding:8px 10px;} #ranking .ranking-bar-identity{grid-area:identity;} #ranking .ranking-control-filters{grid-area:filters;justify-content:flex-start;padding-top:6px;border-top:1px solid rgba(93,177,210,.2);} #ranking .ranking-bar-destinations{grid-area:destinations;border-left:0;padding-left:0;} } @media(max-width:760px){ #ranking .ranking-control-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "filters" "destinations";gap:6px;padding:8px;} #ranking .ranking-bar-identity{gap:7px;} #ranking .ranking-bar-identity>.back{min-height:32px;padding:5px 7px;font-size:.72rem;} #ranking .ranking-bar-heading>.ranking-heading{font-size:.56rem;} #ranking .ranking-bar-heading>h2{font-size:clamp(1rem,3.3vw,1.28rem);white-space:normal;} #ranking .ranking-control-filters{justify-content:space-between;gap:5px;padding:0;border-top:0;} #ranking .ranking-control-filters .ranking-view-tabs,#ranking .ranking-control-filters .ranking-difficulty-tabs{gap:3px;} #ranking .ranking-control-filters .ranking-view-tabs{padding-right:5px;} #ranking .ranking-control-filters .ranking-view-tabs button,#ranking .ranking-control-filters .ranking-difficulty-tabs button{min-height:32px;padding:5px 7px;font-size:.69rem;} #ranking .ranking-bar-destinations{justify-content:flex-start;gap:5px;padding:5px 0 0;border-top:1px solid rgba(93,177,210,.2);} #ranking .ranking-bar-destinations .community-nav button,#ranking .ranking-bar-destinations>#ranking-choose-flag{min-height:31px;padding:5px 8px;font-size:.7rem;} #ranking .ranking-stars-page .ranking-podium{padding:8px 7px;} #ranking .ranking-stars-page .ranking-podium>div{gap:5px;} #ranking .ranking-stars-page .ranking-podium-card{min-height:124px;padding:7px 4px;} #ranking .ranking-stars-page .ranking-podium-card .ranking-place img{width:46px;height:58px;} #ranking .ranking-stars-page .ranking-podium-card .ranking-podium-flag,#ranking .ranking-stars-page .ranking-podium-card .rank-emblem{width:clamp(70px,14vw,100px);height:68px;} #ranking .ranking-stars-page .ranking-podium-card .podium-identity{gap:4px;font-size:.82rem;} #ranking .ranking-stars-page .ranking-podium-card strong{font-size:.92rem;} #ranking .ranking-stars-page .ranking-star-table .rank-row{min-height:58px;padding:5px 8px;} } @media(max-width:620px){ #ranking .ranking-control-bar{grid-template-areas:"identity" "filters" "destinations";} #ranking .ranking-control-filters{display:grid;grid-template-columns:1fr;justify-items:stretch;gap:5px;} #ranking .ranking-control-filters .ranking-view-tabs,#ranking .ranking-control-filters .ranking-difficulty-tabs{justify-content:stretch;} #ranking .ranking-control-filters .ranking-view-tabs button{flex:1 1 0;} #ranking .ranking-control-filters .ranking-difficulty-tabs button{flex:1 1 0;} #ranking .ranking-stars-page .ranking-podium>div{grid-template-columns:repeat(3,minmax(0,1fr));} } @media(max-width:430px){ #ranking .ranking-bar-heading>.ranking-heading{font-size:.5rem;letter-spacing:.08em;} #ranking .ranking-bar-heading>h2{font-size:1rem;} #ranking .ranking-bar-destinations .community-nav button,#ranking .ranking-bar-destinations>#ranking-choose-flag{padding:5px 7px;font-size:.67rem;} } @media(prefers-reduced-motion:reduce){#ranking .ranking-control-bar button{transition:none!important;}} :root.rv3-motion-reduced #ranking .ranking-control-bar button{transition:none!important;} /* Header fit refinements: prevent flex compression and keep landscape controls on two rows. */ #ranking .ranking-control-bar{flex:0 0 auto;height:auto;min-height:82px;} @media(max-width:760px){ #ranking .ranking-control-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity destinations" "filters filters";align-items:center;} #ranking .ranking-control-filters{display:flex;flex-wrap:nowrap;justify-content:space-between;} #ranking .ranking-bar-heading>h2{white-space:nowrap;} #ranking .ranking-bar-destinations{padding:0;border:0;} } @media(max-width:620px) and (min-width:431px){ #ranking .ranking-bar-heading>h2{font-size:.96rem;} #ranking .ranking-bar-destinations{gap:3px;} #ranking .ranking-bar-destinations .community-nav{gap:3px;} #ranking .ranking-bar-destinations .community-nav button,#ranking .ranking-bar-destinations>#ranking-choose-flag{padding:5px 6px;font-size:.65rem;} #ranking .ranking-control-filters{gap:5px;} #ranking .ranking-control-filters .ranking-view-tabs,#ranking .ranking-control-filters .ranking-difficulty-tabs{flex:none;} #ranking .ranking-control-filters .ranking-view-tabs button,#ranking .ranking-control-filters .ranking-difficulty-tabs button{flex:none;padding:5px 6px;font-size:.66rem;} } @media(max-width:430px){ #ranking .ranking-control-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "filters" "destinations";} #ranking .ranking-control-filters{display:flex;flex-wrap:wrap;} #ranking .ranking-control-filters .ranking-view-tabs,#ranking .ranking-control-filters .ranking-difficulty-tabs{flex:1 1 100%;} #ranking .ranking-control-filters .ranking-view-tabs button,#ranking .ranking-control-filters .ranking-difficulty-tabs button{flex:1 1 0;} #ranking .ranking-bar-destinations{padding-top:5px;border-top:1px solid rgba(93,177,210,.2);} #ranking .ranking-bar-heading>h2{font-size:.94rem;} } /* A solo podium member is shown inline so the ranking starts higher, including on phones. */ #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;width:min(100%,720px);margin:0 auto 7px;padding:8px 10px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child)>h3{margin:0;white-space:nowrap;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child)>div{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);align-items:center;column-gap:9px;row-gap:0;min-height:104px;padding:5px 8px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .podium-place{grid-column:1;grid-row:1;align-self:center;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .podium-identity{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;font-size:.9rem;text-align:left;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-flag{width:clamp(90px,8vw,120px);height:76px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-flag img{width:calc(100% - 20px);max-height:calc(100% - 14px);left:10px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card>strong{grid-column:3;grid-row:1;align-self:center;} @media(max-width:760px){ #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child){gap:6px;padding:7px 6px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child)>h3{font-size:.82rem;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card{grid-template-columns:auto minmax(0,1fr) auto;min-height:82px;column-gap:5px;padding:5px 4px;text-align:left;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .podium-place img{width:34px;height:43px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .podium-identity{display:flex;justify-items:initial;gap:4px;font-size:.74rem;text-align:left;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-flag{width:clamp(68px,13vw,88px);height:58px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-flag img{width:calc(100% - 14px);max-height:calc(100% - 10px);left:7px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card>strong{font-size:.84rem;} } @media(max-width:430px){ #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child){grid-template-columns:1fr;gap:4px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child)>h3{justify-self:start;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card{grid-template-columns:auto minmax(0,1fr) auto;min-height:72px;} } /* 568x320: compactar solo el podio individual y liberar la primera fila. */ @media(max-width:620px) and (min-width:431px){ #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-card{min-height:56px;} #ranking .ranking-stars-page .ranking-podium:has(.ranking-podium-card:only-child) .ranking-podium-flag{height:44px;} #ranking .ranking-stars-page .ranking-star-table .rank-row{height:auto;min-height:60px;padding:4px 8px;gap:6px;} } #ranking .ranking-flag-open{cursor:zoom-in;outline:none}#ranking .ranking-flag-open:focus-visible{outline:2px solid #67e8f9;outline-offset:3px;box-shadow:0 0 0 4px rgba(103,232,249,.22)}