/* Cartoon medallions and regional motion. No video or continuous canvas rendering. */
.rvl-pin { gap:2px; filter:drop-shadow(0 3px 3px #102b4c60); }
.rvl-pin-symbol { width:76px; height:78px; border:0; background:none; border-radius:0; box-shadow:none; animation:rvl-marker-float 5s var(--pin-phase) ease-in-out infinite; }
.rvl-pin-symbol > .rvl-marker-art { width:100%; height:100%; overflow:visible; }
.rvl-pin-label { margin-top:-4px; position:relative; background:linear-gradient(#fff9e8,#f0ddba); border:1px solid #b58a48; padding:5px 10px; box-shadow:0 2px 0 #573d2740,inset 0 0 0 1px #fff9e8; font-size:10px; text-shadow:0 1px #fff7df; }
.rvl-pin:hover .rvl-pin-symbol { transform:scale(1.13); box-shadow:none; animation-play-state:paused; }
.rvl-pin.is-selected .rvl-pin-symbol { background:none; border:0; box-shadow:none; filter:drop-shadow(0 0 7px #ffe38e) drop-shadow(0 0 17px #ffcc5480); }
.rvl-pin.is-selected .rvl-pin-symbol::after { content:''; position:absolute; inset:-2px -1px 5px; border:2px solid #ffe7a7b3; border-radius:50%; animation:rvl-marker-ring 3.4s ease-out infinite; pointer-events:none; }
.rvl-pin.is-selected .rvl-pin-label { background:linear-gradient(#fff9da,#ffdc81); border-color:#b68022; }
.rvl-marker-glyph { transform-origin:36px 35px; }
.rvl-pin:hover .rvl-marker-glyph { animation:rvl-glyph-hello .5s ease-out; }
.rvl-effect-toggle { display:flex; gap:6px; align-items:center; padding:0; border:0; background:none; color:#897347; font-size:9px; }
.rvl-effect-toggle svg { width:12px; height:12px; }
.rvl-effect-toggle:hover { color:#173e5a; }
.rvl-atlas-fx { position:absolute; z-index:2; inset:0; overflow:hidden; border-radius:5px; pointer-events:none; contain:paint; }
.rvl-atlas-clouds { position:absolute; inset:0; opacity:.55; }
.rvl-atlas-clouds i { position:absolute; top:2%; left:-25%; width:60%; height:25%; background:radial-gradient(ellipse,#f5f5eb4a,transparent 65%); animation:rvl-cloud-travel 44s linear infinite; }
.rvl-atlas-clouds i+ i { top:45%; width:45%; height:19%; opacity:.5; animation-duration:57s; animation-delay:-31s; }
.rvl-atlas-water { position:absolute; left:4%; top:53%; width:20%; height:13%; }
.rvl-atlas-water i { position:absolute; inset:15%; border:1px solid #c8fbff99; border-radius:50%; opacity:0; animation:rvl-water-ring 6s ease-out infinite; }
.rvl-atlas-water i:nth-child(2) { animation-delay:2s; }
.rvl-atlas-water i:nth-child(3) { animation-delay:4s; }
.rvl-atlas-lighthouse { position:absolute; left:14%; top:42%; width:24%; height:19%; transform-origin:5% 10%; clip-path:polygon(0 0,100% 40%,95% 100%); background:linear-gradient(90deg,#fff4b866,#fff4b800); animation:rvl-lighthouse-sweep 11s ease-in-out infinite alternate; mix-blend-mode:screen; }
.rvl-atlas-forge { position:absolute; left:71%; top:55%; width:23%; height:25%; background:radial-gradient(ellipse,#ffb33130,transparent 70%); animation:rvl-forge-glow 4.5s ease-in-out infinite alternate; }
.rvl-ember,.rvl-glowfly,.rvl-crystal-mote { position:absolute; left:var(--fx-x); top:var(--fx-y); width:3px; height:3px; border-radius:50%; opacity:0; animation:rvl-mote-rise var(--fx-time) var(--fx-delay) ease-in-out infinite; }
.rvl-ember { background:#ffd45d; box-shadow:0 0 6px #ff9c24; }
.rvl-atlas-grove { position:absolute; left:27%; top:34%; width:22%; height:28%; }
.rvl-glowfly { width:3px; height:3px; background:#e7ffac; box-shadow:0 0 7px #abff75; animation-name:rvl-glowfly-dance; }
.rvl-atlas-capital { position:absolute; left:46%; top:12%; width:18%; height:26%; }
.rvl-crystal-mote { width:4px; height:4px; transform:rotate(45deg); border-radius:0; background:#e3ffff; box-shadow:0 0 9px #55dfff; }
.rvl-page .rvl-atlas-lightning { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:#d2f7ff; stroke-width:.35; stroke-linejoin:bevel; filter:drop-shadow(0 0 4px #83d6ff); }
.rvl-atlas-lightning path { opacity:0; }
.rvl-bolt-a { animation:rvl-lightning 9s -3s linear infinite; }
.rvl-bolt-b { animation:rvl-lightning 12s -7s linear infinite; }
.rvl-page .rvl-atlas-birds { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#193e4a; stroke-width:1.8; stroke-linecap:round; }
.rvl-atlas-birds g { animation:rvl-birds-fly 30s -11s linear infinite; }
.rvl-atlas-aurora { position:absolute; left:15%; top:8%; width:30%; height:29%; background:radial-gradient(ellipse at 50% 70%,#ccb1ff27,transparent 70%); animation:rvl-aurora 10s ease-in-out infinite alternate; }
.rvl-atlas-cursor-glow { position:absolute; inset:0; background:radial-gradient(circle 110px at var(--atlas-light-x,50%) var(--atlas-light-y,50%),#fff3c029,transparent 80%); opacity:0; transition:opacity .4s; }
.rvl-map:hover .rvl-atlas-cursor-glow { opacity:1; }
.rvl-map-title { z-index:4; }
.rvl-story-button { display:block; position:relative; isolation:isolate; width:100%; aspect-ratio:3.2; min-height:78px; padding:0; background:none; border:0; color:#fff2ce; filter:drop-shadow(0 5px 2px #68421d35); transition:filter .25s,transform .25s; }
.rvl-story-button-art { position:absolute; inset:0; background:url('/duel/lore-art-v1/story-button-v2.webp') center/100% 100% no-repeat; z-index:-2; }
.rvl-story-button-label { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:0 12% 0 18%; font-family:'Fraunces',Georgia,serif; font-size:clamp(13px,1.2vw,20px); font-weight:900; line-height:1.2; text-shadow:0 2px #0a213b; }
.rvl-story-button-label small { display:block; margin-top:5px; font:600 7px/1.3 'DM Sans',sans-serif; color:#d9c399; letter-spacing:.04em; text-shadow:0 1px #0a213b; }
.rvl-story-button-shine { position:absolute; z-index:-1; inset:24% 10% 25% 21%; border-radius:4px; overflow:hidden; pointer-events:none; }
.rvl-story-button-shine::after { content:''; position:absolute; inset:-30% -120%; background:linear-gradient(105deg,transparent 35%,#fff3bf3b 48%,transparent 61%); transform:translateX(-30%); animation:rvl-button-sheen 7s 2s ease-in-out infinite; }
.rvl-story-button:hover { transform:translateY(-3px) scale(1.025); filter:drop-shadow(0 6px 3px #68421d44) drop-shadow(0 0 9px #e8be5c55); }
.rvl-story-button:active { transform:translateY(2px) scale(.99); }
.rvl-cinematic-fx { position:absolute; inset:0; overflow:clip; pointer-events:none; contain:paint; }
.rvl-cinematic-rays { position:absolute; inset:-20%; opacity:.7; transform:rotate(-15deg); }
.rvl-cinematic-rays i { position:absolute; width:14%; height:110%; top:-15%; left:38%; transform-origin:50% 0; background:linear-gradient(180deg,#ffe5a622,#ffe5a609,transparent); clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); animation:rvl-sun-ray 15s ease-in-out infinite alternate; }
.rvl-cinematic-rays i:nth-child(2) { width:8%; left:56%; animation-delay:-7s; opacity:.6; }
.rvl-cinematic-rays i:nth-child(3) { width:22%; left:69%; animation-delay:-11s; opacity:.4; }
.rvl-cinematic-sparks { position:absolute; inset:0; }
.rvl-cinematic-spark { position:absolute; left:var(--fx-x); top:var(--fx-y); width:4px; height:4px; background:#ffdf91; border-radius:50%; box-shadow:0 0 16px #ffd58f; opacity:0; animation:rvl-mote-rise calc(var(--fx-time) * 1.8) var(--fx-delay) ease-in-out infinite; }
.rvl-page .rvl-cinematic-routes { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.8s; }
.rvl-cinematic-routes > path { fill:none; stroke:#ffe6a0; stroke-width:1.8; stroke-dasharray:7 11; stroke-linecap:round; filter:drop-shadow(0 0 6px #f4d897); animation:rvl-travel-light 14s linear infinite; }
.rvl-cinematic-routes circle { fill:#d6faff; stroke:#fff4c4; stroke-width:2; filter:drop-shadow(0 0 9px #80efff); animation:rvl-constellation 4s ease-in-out infinite alternate; }
.rvl-cinematic-routes circle:nth-child(2n) { animation-delay:-2s; }
.rvl-intro[data-scene='2'] .rvl-cinematic-routes { opacity:.65; }
.rvl-cinematic-bells { position:absolute; left:54%; right:3%; top:19%; height:45%; opacity:0; transition:opacity 1.4s; }
.rvl-cinematic-bells span { position:absolute; top:calc(var(--bell-i) * 6%); left:calc(var(--bell-i) * 14%); width:clamp(25px,4vw,65px); transform-origin:50% 0; opacity:calc(.65 - var(--bell-i) * .06); animation:rvl-silent-bell 5s calc(var(--bell-i) * -.6s) ease-in-out infinite alternate; }
.rvl-cinematic-bells svg { width:100%; height:auto; fill:#ead3a033; stroke:#f4e5beaa; stroke-width:1.1; }
.rvl-intro[data-scene='1'] .rvl-cinematic-bells { opacity:1; }
.rvl-intro[data-scene='1'] .rvl-cinematic-rays { opacity:.2; }
.rvl-intro[data-scene='1'] .rvl-cinematic-spark { background:#c9e9f6; box-shadow:0 0 14px #b6e6ff; }
.rvl-cinematic-portal { position:absolute; top:45%; left:67%; width:min(45vw,600px); aspect-ratio:1; opacity:0; transform:translate(-50%,-50%); }
.rvl-cinematic-portal i { position:absolute; inset:0; border:1px solid #f5d99570; border-radius:50%; box-shadow:0 0 35px #d6efff18,inset 0 0 25px #ffe29d15; }
.rvl-cinematic-portal i:nth-child(2) { inset:13%; border-style:dashed; animation:rvl-rune 30s linear infinite reverse; }
.rvl-cinematic-portal i:nth-child(3) { inset:27%; border-width:2px; border-color:#c8efff88; }
.rvl-cinematic-party { position:absolute; right:5%; bottom:20%; width:35%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px 5px; opacity:0; transform:translateY(30px); transition:opacity 1.7s,transform 1.7s; }
.rvl-cinematic-party > span { display:flex; flex-direction:column; align-items:center; animation:rvl-companion-float 6s calc(var(--hero-i) * -.6s) ease-in-out infinite; }
.rvl-cinematic-party img { width:clamp(65px,8vw,135px); height:auto; object-fit:contain; filter:drop-shadow(0 0 16px #ffdda366); mask-image:linear-gradient(#000 75%,transparent); }
.rvl-cinematic-party small { color:#ffe7b2; font-family:'Fraunces',Georgia,serif; font-size:14px; margin-top:-6px; text-shadow:0 2px 6px #071a33; }
.rvl-intro[data-scene='3'] .rvl-cinematic-party { opacity:1; transform:translateY(0); }
.rvl-intro[data-scene='3'] .rvl-intro-story { width:50%; }
.rvl-intro[data-scene='3'] .rvl-intro-story h2 { font-size:clamp(38px,5vw,87px); }
.rvl-star-streak { position:absolute; left:var(--fx-x); top:calc(var(--fx-y) * .7); width:110px; height:1px; background:linear-gradient(90deg,transparent,#ffeac2,transparent); box-shadow:0 0 8px #ffdf9d; opacity:0; transform:rotate(-24deg); animation:rvl-shooting-star 16s var(--fx-delay) ease-in-out infinite; }
.rvl-intro-shot.is-active { animation-duration:35s; }
.rvl-intro-rune { opacity:.2; }
.rvl-intro-beam { opacity:.8; }
.rvl-intro-elements span { animation:rvl-element-glow 4s ease-in-out infinite alternate; }
.rvl-intro-elements span:nth-child(2) { animation-delay:-.8s; }
.rvl-intro-elements span:nth-child(3) { animation-delay:-1.6s; }
.rvl-intro-elements span:nth-child(4) { animation-delay:-2.4s; }
.rvl-intro-elements span:nth-child(5) { animation-delay:-3.2s; }
.rvl-motion-paused .rvl-atlas-fx *, .rvl-motion-paused .rvl-pin *, .rvl-motion-paused .rvl-pin *::after, .rvl-motion-paused .rvl-map-paths *, .rvl-motion-paused .rvl-map-shimmer, .rvl-motion-paused .rvl-story-button-shine::after,
.rvl-fx-offscreen .rvl-atlas-fx *, .rvl-fx-offscreen .rvl-pin *, .rvl-fx-offscreen .rvl-pin *::after, .rvl-fx-offscreen .rvl-map-paths *, .rvl-fx-offscreen .rvl-map-shimmer { animation-play-state:paused !important; }
@keyframes rvl-marker-float { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-5px) rotate(1.5deg); } }
@keyframes rvl-marker-ring { 0% { opacity:.7; transform:scale(.9); } 85%,100% { opacity:0; transform:scale(1.5); } }
@keyframes rvl-glyph-hello { 30% { transform:rotate(-7deg); } 70% { transform:rotate(5deg); } }
@keyframes rvl-cloud-travel { from { transform:translateX(0); } to { transform:translateX(260%); } }
@keyframes rvl-water-ring { 0% { opacity:0; transform:scale(.25); } 25% { opacity:.7; } 100% { opacity:0; transform:scale(1.9); } }
@keyframes rvl-lighthouse-sweep { from { transform:rotate(-25deg); opacity:.15; } to { transform:rotate(30deg); opacity:.5; } }
@keyframes rvl-forge-glow { to { opacity:.4; } }
@keyframes rvl-mote-rise { 0%,100% { opacity:0; transform:translate(0,15px); } 25%,60% { opacity:.9; } 90% { opacity:0; transform:translate(var(--fx-drift),-50px); } }
@keyframes rvl-glowfly-dance { 0%,100% { opacity:.1; transform:translate(0,0); } 35% { opacity:.9; transform:translate(10px,-13px); } 70% { opacity:.4; transform:translate(-8px,-5px); } }
@keyframes rvl-lightning { 0%,74%,79%,100% { opacity:0; } 75.5%,77% { opacity:.85; } }
@keyframes rvl-birds-fly { from { transform:translate(-220px,-35px); opacity:0; } 10%,85% { opacity:.7; } to { transform:translate(1000px,15px); opacity:0; } }
@keyframes rvl-aurora { from { opacity:.4; transform:translateX(-4%); } to { opacity:1; transform:translateX(6%); } }
@keyframes rvl-button-sheen { 0%,65%,100% { transform:translateX(-35%); opacity:0; } 70% { opacity:1; } 88% { transform:translateX(35%); opacity:0; } }
@keyframes rvl-sun-ray { from { transform:rotate(-9deg); opacity:.3; } to { transform:rotate(8deg); opacity:.8; } }
@keyframes rvl-travel-light { to { stroke-dashoffset:-250; } }
@keyframes rvl-constellation { to { opacity:.4; transform:translateY(-3px); } }
@keyframes rvl-silent-bell { from { transform:rotate(-12deg) translateY(0); } to { transform:rotate(12deg) translateY(8px); } }
@keyframes rvl-companion-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes rvl-shooting-star { 0%,82%,100% { opacity:0; transform:translate(0,0) rotate(-24deg); } 84% { opacity:.85; } 92% { opacity:0; transform:translate(230px,-100px) rotate(-24deg); } }
@keyframes rvl-element-glow { to { color:#fff5d6; border-color:#ffe1a7a0; box-shadow:0 0 16px #ffda7c30; transform:translateY(-3px); } }
@media(max-width:1150px) {
  .rvl-pin-symbol { width:49px; height:53px; }
  .rvl-pin-label { font-size:8px; padding:4px 7px; }
  .rvl-story-button-label { font-size:14px; }
  .rvl-cinematic-party { width:31%; right:3%; }
}
@media(max-width:850px) {
  .rvl-pin-symbol { width:54px; height:58px; }
  .rvl-pin-label { font-size:9px; }
  .rvl-cinematic-party { bottom:20%; width:31%; gap:18px 5px; }
  .rvl-cinematic-party img { width:70px; }
  .rvl-cinematic-party small { font-size:11px; }
  .rvl-intro[data-scene='3'] .rvl-intro-story h2 { font-size:44px; }
}
@media(max-width:540px) {
  .rvl-pin { gap:1px; }
  .rvl-pin-symbol { width:53px; height:55px; }
  .rvl-pin-label { font-size:7.5px; padding:3px 4px; margin-top:-2px; }
  .rvl-effect-toggle { font-size:8px; }
  .rvl-effect-toggle svg { width:11px; height:11px; }
  .rvl-story-button { min-height:88px; }
  .rvl-story-button-label { font-size:17px; }
  .rvl-story-button-label small { font-size:7px; }
  .rvl-cinematic-bells { left:46%; right:0; top:15%; height:30%; }
  .rvl-cinematic-party { right:6%; left:6%; width:auto; bottom:16%; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
  .rvl-cinematic-party img { width:100%; }
  .rvl-cinematic-party small { font-size:9px; margin-top:-3px; }
  .rvl-intro[data-scene='3'] .rvl-intro-story { width:calc(100% - 46px); top:41%; }
  .rvl-intro[data-scene='3'] .rvl-intro-story h2 { font-size:clamp(33px,8vw,44px); }
  .rvl-intro[data-scene='3'] .rvl-intro-elements { display:none; }
  .rvl-cinematic-portal { width:75vw; left:60%; }
  .rvl-cinematic-rays { opacity:.4; }
  .rvl-cinematic-spark:nth-child(n+13), .rvl-star-streak:nth-child(n+3) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .rvl-page *, .rvl-page *::before, .rvl-page *::after { animation:none !important; transition:none !important; }
  .rvl-atlas-clouds,.rvl-atlas-lightning,.rvl-atlas-birds,.rvl-atlas-cursor-glow,.rvl-atlas-forge,.rvl-atlas-grove,.rvl-atlas-capital,.rvl-cinematic-sparks,.rvl-cinematic-streaks,.rvl-cinematic-rays,.rvl-cinematic-bells { display:none; }
  .rvl-pin.is-selected .rvl-pin-symbol::after { animation:none; opacity:.8; }
}

.rvl-marker-generated{object-fit:contain;user-select:none;filter:drop-shadow(0 2px 1px #142b3c90)}
.rvl-pin-symbol::before{content:"";position:absolute;inset:10% 2% 6%;border:1.5px solid #e2bd6f;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a5d73e8,#15344ee8);box-shadow:0 2px 5px #09263799;z-index:0}.rvl-pin-symbol>.rvl-marker-generated{position:relative;z-index:1;filter:drop-shadow(0 1px 0 #ffe5a6) drop-shadow(0 2px 2px #102b4caa)}
