/* ==========================================================================
   v3 SPLASH POLISH (sp1) — subtle fiery aura, premium title, forged PLAY.
   Layout, court panel and beat timing are unchanged (splash.js).
   Motion is opacity/transform only; reduced-motion turns it all off.
   ========================================================================== */

/* warm ambient flicker over the throne room (opacity only) */
.splash-v2 .splash-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 72%,rgba(255,120,40,.16),transparent 70%),
             radial-gradient(ellipse 40% 30% at 50% 30%,rgba(255,170,80,.07),transparent 70%);
  opacity:.55;animation:v3sp-flicker 7.3s ease-in-out infinite;will-change:opacity}
@keyframes v3sp-flicker{0%,100%{opacity:.5}18%{opacity:.62}31%{opacity:.52}47%{opacity:.68}63%{opacity:.55}80%{opacity:.64}}

/* glass panel: thin gold rim + soft inner shadow */
.splash-v2 .splash-stage{outline:0!important;border:1px solid rgba(222,182,96,.34)!important;
  box-shadow:0 10px 44px rgba(0,0,0,.42),0 0 36px rgba(255,120,40,.07),
    inset 0 1px 0 rgba(255,236,190,.16),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 46px rgba(0,0,0,.42)!important}

/* dark readability pool behind the type (sits above portraits, below text) */
.splash-v2 .splash-stage > .v3sp-vignette{position:absolute!important;z-index:1!important;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 34% at 50% 50%,rgba(6,4,3,.5),rgba(6,4,3,.22) 55%,transparent 78%);
  opacity:0;transition:opacity 1.2s ease}
.splash-v2.splash-beat-crest .splash-stage > .v3sp-vignette{opacity:1}

/* crest aura: breathing ember glow behind the forged crest */
.splash-v2 .splash-stage > .v3sp-aura{height:0;margin:0;overflow:visible;z-index:2}
.splash-v2 .v3sp-aura::before{content:"";position:absolute;left:50%;top:56px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,165,70,.95) 0,rgba(245,105,35,.5) 26%,rgba(210,70,25,.16) 48%,transparent 66%);mix-blend-mode:screen;
  opacity:0;transform:scale(.9);will-change:opacity,transform}
.splash-v2.splash-beat-crest .v3sp-aura::before{animation:v3sp-aura-in 1.4s cubic-bezier(.22,.61,.36,1) .15s forwards,v3sp-breathe 5.2s ease-in-out 1.6s infinite alternate}
@keyframes v3sp-aura-in{to{opacity:.32;transform:scale(1)}}
@keyframes v3sp-breathe{from{opacity:.32;transform:scale(1)}to{opacity:.45;transform:scale(1.06)}}
.splash-v2 .splash-crest{filter:drop-shadow(0 0 10px rgba(255,140,60,.35)) drop-shadow(0 3px 6px rgba(0,0,0,.7))!important}

/* kicker */
.splash-v2 .splash-kicker{letter-spacing:.42em;font-weight:700;color:rgba(240,214,150,.9)}

/* title: crisp metallic gold, fine bevel via drop-shadow (not text-shadow), one glint sweep */
.splash-v2 .splash-title{
  font-family:"Cinzel",Georgia,serif;font-weight:800;letter-spacing:.13em;line-height:1.05;
  color:#e8c46a;
  background:
    linear-gradient(100deg,transparent 42%,rgba(255,250,230,.85) 50%,transparent 58%) -150% 0/250% 100% no-repeat,
    linear-gradient(180deg,#fff4cf 0%,#f6d987 24%,#d9a443 48%,#b07a26 56%,#e9c26a 74%,#fbe7a6 88%,#c38d34 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none!important;
  filter:drop-shadow(0 1px 0 rgba(70,36,6,.95)) drop-shadow(0 -1px 0 rgba(255,236,180,.25)) drop-shadow(0 4px 8px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(255,130,50,.16))}
.splash-v2.splash-beat-title .splash-title{animation:splash-v2-soft-in 1.25s cubic-bezier(.22,.61,.36,1) forwards}
.splash-v2.splash-beat-tag .splash-title{animation:splash-v2-soft-in 1.25s cubic-bezier(.22,.61,.36,1) forwards,v3sp-glint 1.6s cubic-bezier(.4,0,.2,1) .2s 1 both}
@keyframes v3sp-glint{from{background-position:-150% 0,0 0}to{background-position:250% 0,0 0}}

/* tagline: tighter tracking, ivory, crisp */
.splash-v2 .splash-tagline{letter-spacing:.14em;font-family:"Cinzel",Georgia,serif;font-weight:600;color:rgba(240,228,200,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.85)}

/* element icons: matched size, soft element glow on a fine gold ring */
.splash-v2 .splash-element-icon{border-radius:50%;padding:2px;background:rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(222,182,96,.45),0 2px 6px rgba(0,0,0,.6)}
.splash-v2 .splash-element-fire{filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 5px rgba(255,100,40,.55))}
.splash-v2 .splash-element-wind{filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 5px rgba(255,200,90,.5))}
.splash-v2 .splash-element-water{filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 5px rgba(80,160,255,.5))}
.splash-v2 .splash-element-earth{filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 5px rgba(110,210,110,.45))}

/* PLAY: forged gold with ember glow; hover/press use scale/translate (independent of entry animation) */
.splash-v2 .splash-skip{
  font-family:"Cinzel",Georgia,serif;font-weight:800;letter-spacing:.28em;font-size:.92rem;
  padding:14px 46px 14px 50px;border-radius:10px;color:#2b1505;
  border:1px solid rgba(255,231,166,.85);
  background:linear-gradient(180deg,#fbe3a0 0%,#efc66b 28%,#cf963b 55%,#a9681f 100%);
  text-shadow:0 1px 0 rgba(255,240,200,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(110,50,8,.45),
    0 0 0 1px rgba(50,24,4,.85),0 6px 16px rgba(0,0,0,.55),0 0 22px rgba(255,130,40,.26);
  transition:scale .18s cubic-bezier(.2,.8,.3,1),translate .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,filter .2s ease;filter:none}
.splash-v2 .splash-skip::after{content:"";position:absolute;inset:-6px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 26px 4px rgba(255,140,50,.45);opacity:0;transition:opacity .25s ease}
.splash-v2 .splash-skip:hover,.splash-v2 .splash-skip:focus-visible{scale:1.035;color:#2b1505;border-color:#fff0c4;filter:none}
.splash-v2 .splash-skip:hover::after,.splash-v2 .splash-skip:focus-visible::after{opacity:1}
.splash-v2 .splash-skip:active{scale:.985;translate:0 1px;
  box-shadow:inset 0 2px 6px rgba(90,40,5,.55),0 0 0 1px rgba(50,24,4,.85),0 3px 8px rgba(0,0,0,.5),0 0 16px rgba(255,130,40,.22)}
.splash-v2 .splash-skip:focus-visible{outline:2px solid rgba(255,231,166,.9);outline-offset:3px}

@media (max-width:560px){
  .splash-v2 .v3sp-aura::before{top:42px;width:190px;height:190px;margin:-95px 0 0 -95px}
}
@media (prefers-reduced-motion: reduce){
  .splash-v2 .splash-bg::after,.splash-v2 .v3sp-aura::before{animation:none!important;opacity:.32!important;transform:none!important}
  .splash-v2.splash-beat-tag .splash-title{animation:splash-v2-soft-in .01s forwards}
}

.splash-v2 .splash-bg::before{content:"";position:absolute;left:50%;top:52%;width:min(900px,120vw);height:min(700px,110vh);margin:-350px 0 0 calc(min(900px,120vw)/-2);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,110,40,.13),rgba(255,90,30,.05) 45%,transparent 70%);z-index:0;animation:v3sp-breathe2 6s ease-in-out infinite alternate;will-change:opacity}
@keyframes v3sp-breathe2{from{opacity:.7}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.splash-v2 .splash-bg::before{animation:none}}

/* ===== sp4: burning cracked crest aura (canvas, v3-crest-fx.js) ===== */
.splash-v2 .splash-stage > canvas.v3sp-crestfx{position:absolute!important;z-index:2!important;pointer-events:none;opacity:0;transform:scale(.92);will-change:opacity,transform}
.splash-v2.splash-beat-crest .splash-stage > canvas.v3sp-crestfx{animation:v3sp-fx-in 1.6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes v3sp-fx-in{to{opacity:1;transform:scale(1)}}
.splash-v2 .splash-stage > .splash-crest{z-index:3!important}
.splash-v2 .v3sp-aura::before{display:none}

/* element icons: ~1.7x, fully opaque on a solid disc, own breathing aura */
.splash-v2 .splash-realms{max-width:none!important;gap:22px!important}
.splash-v2 .v3sp-el{position:relative;display:inline-grid;place-items:center;border-radius:50%;isolation:isolate}
.splash-v2 .v3sp-el::before{content:"";position:absolute;inset:-55%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--el) 0,color-mix(in srgb,var(--el) 45%,transparent) 32%,transparent 66%);
  opacity:.35;transform:scale(.9);animation:v3sp-el-breathe 4.6s ease-in-out infinite alternate;will-change:opacity,transform}
.splash-v2 .v3sp-el-fire{--el:rgba(255,95,35,.85)}
.splash-v2 .v3sp-el-wind{--el:rgba(255,205,90,.8);}
.splash-v2 .v3sp-el-water{--el:rgba(70,150,255,.85)}
.splash-v2 .v3sp-el-earth{--el:rgba(90,200,95,.8)}
.splash-v2 .v3sp-el-wind::before{animation-delay:-1.3s}
.splash-v2 .v3sp-el-water::before{animation-delay:-2.7s;animation-duration:5.1s}
.splash-v2 .v3sp-el-earth::before{animation-delay:-3.8s;animation-duration:4.9s}
@keyframes v3sp-el-breathe{from{opacity:.28;transform:scale(.88)}to{opacity:.62;transform:scale(1.08)}}
.splash-v2 .splash-element-icon{width:58px!important;height:58px!important;padding:3px!important;background:#120b07!important;opacity:1!important;
  box-shadow:0 0 0 1.5px rgba(222,182,96,.7),0 0 0 4px #120b07,0 3px 10px rgba(0,0,0,.75)!important;filter:none!important;mix-blend-mode:normal!important}
@media (orientation:landscape) and (max-height:520px){
  .splash-v2 .splash-element-icon{width:36px!important;height:36px!important;padding:2px!important}
  .splash-v2 .splash-realms{gap:16px!important}
}
@media (max-width:560px){ .splash-v2 .splash-element-icon{width:52px!important;height:52px!important} .splash-v2 .splash-realms{gap:18px!important} }

/* desktop: bigger brand line */
@media (min-width:900px) and (min-height:600px){
  .splash-v2 .splash-kicker{font-size:.98rem!important;letter-spacing:.4em!important;margin-bottom:14px!important}
}
@media (prefers-reduced-motion: reduce){
  .splash-v2 .v3sp-el::before{animation:none!important;opacity:.45}
  .splash-v2.splash-beat-crest .splash-stage > canvas.v3sp-crestfx{animation:none;opacity:1;transform:none}
}