/* Six Crowns Chronicle v5.52 - cinematic title opening */
.main-title-screen{
  --title-bg-x:0px;
  --title-bg-y:0px;
  --title-aura-x:0px;
  --title-aura-y:0px;
  --title-card-x:0px;
  --title-card-y:0px;
  background:#03050a;
  perspective:1100px;
  isolation:isolate;
}
.main-title-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.32;
  background:
    linear-gradient(transparent 0 48%,rgba(255,255,255,.025) 50%,transparent 52%) 0 0/100% 5px,
    radial-gradient(circle at 50% 48%,transparent 0 40%,rgba(0,0,0,.42) 82%);
  mix-blend-mode:soft-light;
}
.title-cine-bg{
  position:absolute;
  inset:-6%;
  z-index:0;
  overflow:hidden;
  background:none;
  filter:none;
  animation:none;
  transform:translate3d(var(--title-bg-x),var(--title-bg-y),-40px) scale(1.08);
  transition:transform .18s ease-out;
  will-change:transform;
}
.title-map-art{
  position:absolute;
  inset:0;
  background-image:url('assets/ui/world_map_full.webp');
  background-size:cover;
  background-position:center;
  filter:saturate(.58) brightness(.48) contrast(1.08) sepia(.1);
  opacity:0;
  animation:titleMapDeployV550 3.1s cubic-bezier(.16,.76,.24,1) forwards,
            titleMapDriftV550 34s ease-in-out 3.1s infinite alternate;
  transform-origin:center;
}
.title-map-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(18deg,transparent 0 32px,rgba(225,195,126,.025) 34px 35px,transparent 37px 70px),
    linear-gradient(115deg,rgba(255,220,138,.06),transparent 30%,rgba(100,150,255,.04) 67%,rgba(255,78,72,.05));
  mix-blend-mode:screen;
}
@keyframes titleMapDeployV550{
  0%{opacity:0;transform:scale(1.33) rotate(.7deg);filter:saturate(.15) brightness(.18) blur(12px)}
  42%{opacity:.72;filter:saturate(.48) brightness(.38) blur(2px)}
  100%{opacity:1;transform:scale(1.06) rotate(0);filter:saturate(.58) brightness(.48) contrast(1.08) sepia(.1) blur(0)}
}
@keyframes titleMapDriftV550{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  50%{transform:scale(1.13) translate3d(-1.4%,-1%,0)}
  100%{transform:scale(1.08) translate3d(1.4%,1.1%,0)}
}
.title-faction-aura{
  position:absolute;
  inset:0;
  z-index:1;
  transform:translate3d(var(--title-aura-x),var(--title-aura-y),0);
  transition:transform .24s ease-out;
  pointer-events:none;
}
.title-faction-aura i{
  position:absolute;
  width:clamp(150px,22vw,360px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  filter:blur(30px);
  animation:titleFactionAwaken 8.4s ease-in-out infinite;
  animation-delay:calc(1.7s + var(--i) * .34s);
  background:radial-gradient(circle,var(--faction-color) 0,transparent 68%);
  mix-blend-mode:screen;
}
.title-faction-aura i:nth-child(1){left:4%;top:8%;--faction-color:rgba(226,235,255,.4);--i:0}
.title-faction-aura i:nth-child(2){left:24%;bottom:2%;--faction-color:rgba(58,205,134,.34);--i:1}
.title-faction-aura i:nth-child(3){left:43%;top:2%;--faction-color:rgba(72,150,255,.36);--i:2}
.title-faction-aura i:nth-child(4){right:21%;bottom:1%;--faction-color:rgba(160,90,255,.34);--i:3}
.title-faction-aura i:nth-child(5){right:3%;top:12%;--faction-color:rgba(233,63,75,.35);--i:4}
.title-faction-aura i:nth-child(6){left:46%;top:39%;--faction-color:rgba(235,198,95,.24);--i:5}
@keyframes titleFactionAwaken{
  0%,12%,100%{opacity:0;transform:scale(.72)}
  22%,52%{opacity:.72;transform:scale(1.08)}
  68%{opacity:.16;transform:scale(1.32)}
}
.title-fog-layer{
  position:absolute;
  left:-20%;
  width:140%;
  height:42%;
  z-index:2;
  opacity:.5;
  filter:blur(18px);
  background:
    radial-gradient(ellipse at 18% 50%,rgba(190,215,255,.16),transparent 40%),
    radial-gradient(ellipse at 55% 45%,rgba(131,153,210,.14),transparent 42%),
    radial-gradient(ellipse at 82% 62%,rgba(116,77,142,.14),transparent 38%);
  pointer-events:none;
  will-change:transform;
}
.title-fog-layer.fog-one{bottom:-8%;animation:titleFogDriftOne 24s linear infinite}
.title-fog-layer.fog-two{top:3%;opacity:.22;animation:titleFogDriftTwo 31s linear infinite reverse}
@keyframes titleFogDriftOne{0%{transform:translate3d(-8%,0,0) scale(1.04)}50%{transform:translate3d(7%,-7%,0) scale(1.13)}100%{transform:translate3d(-8%,0,0) scale(1.04)}}
@keyframes titleFogDriftTwo{0%{transform:translate3d(7%,0,0)}50%{transform:translate3d(-6%,6%,0)}100%{transform:translate3d(7%,0,0)}}
.title-particle-canvas{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.82;
}
.title-cine-vignette{
  z-index:4;
  background:
    radial-gradient(circle at 50% 43%,transparent 18%,rgba(4,6,12,.3) 55%,rgba(2,3,7,.88) 100%),
    linear-gradient(180deg,rgba(3,5,10,.72),rgba(3,5,10,.12) 38%,rgba(2,3,8,.8));
}
.title-card.cinematic-title-card{
  z-index:7;
  transform:translate3d(var(--title-card-x),var(--title-card-y),45px);
  transition:transform .18s ease-out;
  animation:titleCardRevealV550 1.35s cubic-bezier(.16,.82,.28,1) 1.9s both;
  background:linear-gradient(180deg,rgba(14,19,34,.78),rgba(6,9,18,.89));
  border:1px solid rgba(239,207,123,.42);
  box-shadow:0 34px 110px rgba(0,0,0,.58),inset 0 0 55px rgba(255,211,107,.025);
  backdrop-filter:blur(9px) saturate(1.1);
}
@keyframes titleCardRevealV550{
  0%{opacity:0;transform:translate3d(var(--title-card-x),calc(28px + var(--title-card-y)),20px) scale(.965);filter:blur(8px)}
  100%{opacity:1;transform:translate3d(var(--title-card-x),var(--title-card-y),45px) scale(1);filter:blur(0)}
}
.title-crest-glow{
  z-index:2;
  opacity:.58;
  animation:titleCrestBreatheV550 4.8s ease-in-out infinite;
}
@keyframes titleCrestBreatheV550{
  0%,100%{opacity:.4;transform:translateX(-50%) scale(.96);filter:drop-shadow(0 0 15px rgba(255,184,89,.35)) drop-shadow(0 0 30px rgba(255,58,60,.18))}
  50%{opacity:.82;transform:translateX(-50%) scale(1.09);filter:drop-shadow(0 0 26px rgba(255,215,129,.75)) drop-shadow(0 0 56px rgba(255,55,64,.42))}
}
.title-crown-halo{
  position:absolute;
  width:250px;
  height:150px;
  left:50%;
  top:-73px;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
}
.title-crown-halo span{
  position:absolute;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  color:#f3d37c;
  font-size:20px;
  text-shadow:0 0 12px currentColor;
  opacity:0;
  animation:titleCrownResonance 6.6s ease-in-out infinite;
  animation-delay:calc(2s + var(--i) * .22s);
}
.title-crown-halo span:nth-child(1){left:3px;top:72px;--i:0;color:#dfe8ff}
.title-crown-halo span:nth-child(2){left:38px;top:19px;--i:1;color:#67d996}
.title-crown-halo span:nth-child(3){left:91px;top:0;--i:2;color:#77afff}
.title-crown-halo span:nth-child(4){right:91px;top:0;--i:3;color:#c58aff}
.title-crown-halo span:nth-child(5){right:38px;top:19px;--i:4;color:#ff6b78}
.title-crown-halo span:nth-child(6){right:3px;top:72px;--i:5;color:#f3d37c}
@keyframes titleCrownResonance{
  0%,12%,100%{opacity:.12;transform:scale(.8)}
  22%,44%{opacity:.92;transform:scale(1.16)}
  61%{opacity:.26;transform:scale(.95)}
}
.title-logo-magic{
  position:relative;
  display:inline-grid;
  place-items:center;
  max-width:100%;
  isolation:isolate;
  color:#fff8df;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.045em;
  text-transform:none;
  filter:drop-shadow(0 0 9px rgba(255,218,135,.25));
  animation:titleLogoInnerPulse 3.6s ease-in-out 3.1s infinite;
}
.title-logo-magic > span{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,#fffdf0 0%,#f8dda0 38%,#c89b42 65%,#fff0b8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 1px rgba(36,16,0,.65),0 0 24px rgba(255,211,114,.3);
}
.title-logo-magic::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,237,179,.35);
  text-shadow:0 0 14px rgba(255,205,94,.72),0 0 38px rgba(79,151,255,.32);
  opacity:.55;
  animation:titleLogoSoul 2.9s ease-in-out infinite alternate;
}
.title-logo-glint{
  position:absolute;
  z-index:4;
  top:-18%;
  bottom:-18%;
  width:19%;
  left:-30%;
  transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),rgba(255,250,210,.95),rgba(123,190,255,.42),transparent);
  filter:blur(.4px);
  mix-blend-mode:screen;
  animation:titleLogoGlint 5.8s cubic-bezier(.25,.75,.2,1) 3.4s infinite;
  pointer-events:none;
}
.title-logo-bolt{
  position:absolute;
  z-index:5;
  height:2px;
  width:34%;
  opacity:0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#d8f3ff 22%,#fff 55%,#76bfff 78%,transparent);
  box-shadow:0 0 7px #fff,0 0 17px #69b7ff,0 0 28px rgba(112,180,255,.8);
  transform-origin:left center;
  clip-path:polygon(0 40%,23% 0,41% 70%,62% 20%,78% 80%,100% 45%,78% 100%,59% 54%,39% 100%,21% 45%);
}
.title-logo-bolt.bolt-a{left:5%;top:23%;transform:rotate(-6deg)}
.title-logo-bolt.bolt-b{right:2%;top:61%;transform:rotate(7deg) scaleX(-1)}
.title-logo-bolt.bolt-c{left:35%;bottom:-8%;width:29%;transform:rotate(-3deg)}
.title-logo-magic.lightning-strike .title-logo-bolt{animation:titleLogoBolt .55s steps(2,end) both}
.title-logo-magic.lightning-strike .bolt-b{animation-delay:.07s}
.title-logo-magic.lightning-strike .bolt-c{animation-delay:.14s}
.title-logo-magic.lightning-strike{animation:titleLogoShock .52s steps(2,end),titleLogoInnerPulse 3.6s ease-in-out .55s infinite}
@keyframes titleLogoInnerPulse{
  0%,100%{filter:drop-shadow(0 0 7px rgba(255,209,105,.25)) brightness(.96)}
  50%{filter:drop-shadow(0 0 15px rgba(255,217,128,.72)) drop-shadow(0 0 30px rgba(83,144,255,.28)) brightness(1.12)}
}
@keyframes titleLogoSoul{from{opacity:.25;transform:scale(.992)}to{opacity:.82;transform:scale(1.012)}}
@keyframes titleLogoGlint{0%,17%{left:-30%;opacity:0}23%{opacity:.9}41%{left:112%;opacity:0}100%{left:112%;opacity:0}}
@keyframes titleLogoBolt{0%,18%,46%,100%{opacity:0}22%,34%,51%{opacity:1;filter:brightness(1.8)}28%,43%,59%{opacity:.24}}
@keyframes titleLogoShock{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}}
.title-subline-seal{
  width:min(420px,80%);
  height:1px;
  margin:17px auto 0;
  background:linear-gradient(90deg,transparent,rgba(232,198,105,.85),transparent);
  box-shadow:0 0 13px rgba(232,198,105,.45);
  position:relative;
}
.title-subline-seal::before,.title-subline-seal::after{
  content:"◆";
  position:absolute;
  top:50%;
  translate:0 -50%;
  color:#f0ce73;
  font-size:10px;
  text-shadow:0 0 10px #f0ce73;
}
.title-subline-seal::before{left:22%}.title-subline-seal::after{right:22%}
.main-title-screen .title-menu{position:relative;z-index:3}
.main-title-screen .big-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-color:rgba(235,205,119,.48);
  background:linear-gradient(180deg,rgba(64,73,106,.88),rgba(22,29,52,.92));
  box-shadow:0 9px 23px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.025);
  transition:transform .22s ease,filter .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.main-title-screen .big-btn::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2px;
  opacity:0;
  background:linear-gradient(110deg,transparent 0 28%,rgba(255,255,255,.1) 39%,rgba(255,231,157,.95) 49%,rgba(126,191,255,.32) 56%,transparent 68%);
  transform:translateX(-120%) skewX(-18deg);
}
.main-title-screen .big-btn::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:3px;
  height:1px;
  transform:scaleX(0);
  background:linear-gradient(90deg,transparent,#fff3bd 22%,#fff 50%,#8dc9ff 79%,transparent);
  box-shadow:0 0 10px #f7d878;
  transition:transform .27s ease;
}
.main-title-screen .big-btn:hover,.main-title-screen .big-btn:focus-visible{
  transform:translateY(-2px) scale(1.025);
  filter:brightness(1.16);
  border-color:rgba(255,228,146,.85);
  box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 20px rgba(232,198,105,.16);
}
.main-title-screen .big-btn:hover::before,.main-title-screen .big-btn:focus-visible::before{opacity:1;animation:titleButtonSlash .68s ease-out}
.main-title-screen .big-btn:hover::after,.main-title-screen .big-btn:focus-visible::after{transform:scaleX(1)}
.main-title-screen .title-start-btn{
  border-color:rgba(250,216,124,.86);
  background:linear-gradient(180deg,rgba(105,81,37,.94),rgba(41,32,25,.96));
  color:#fff7db;
  text-shadow:0 0 9px rgba(255,218,117,.5);
}
.main-title-screen .big-btn.button-pressed{animation:titleButtonPress .42s ease}
@keyframes titleButtonSlash{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(125%) skewX(-18deg)}}
@keyframes titleButtonPress{0%,100%{transform:scale(1)}35%{transform:scale(.965);filter:brightness(1.45)}65%{transform:scale(1.04)}}
.main-title-screen.title-screen-shake{animation:titleScreenShake .46s cubic-bezier(.36,.07,.19,.97)}
@keyframes titleScreenShake{0%,100%{transform:translate3d(0,0,0)}15%{transform:translate3d(-5px,2px,0)}30%{transform:translate3d(5px,-2px,0)}45%{transform:translate3d(-3px,-1px,0)}60%{transform:translate3d(3px,2px,0)}75%{transform:translate3d(-1px,0,0)}}

/* gate / magic-circle scene transition */
.gate-transition{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:auto;
  overflow:hidden;
  background:rgba(1,2,7,0);
  isolation:isolate;
}
.gate-transition .gate-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:51%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 16% 84%,rgba(255,255,255,.03)),
    repeating-linear-gradient(0deg,transparent 0 84px,rgba(205,173,100,.08) 85px 87px),
    linear-gradient(160deg,#121726,#050812 62%,#020308);
  box-shadow:inset 0 0 80px rgba(0,0,0,.72),0 0 50px rgba(0,0,0,.8);
  transition:transform .72s cubic-bezier(.72,.02,.25,1);
}
.gate-transition .gate-left{left:0;transform:translateX(-101%);border-right:2px solid rgba(227,193,106,.42)}
.gate-transition .gate-right{right:0;transform:translateX(101%);border-left:2px solid rgba(227,193,106,.42)}
.gate-transition.closing .gate-panel{transform:translateX(0)}
.gate-transition.opening .gate-left{transform:translateX(-101%)}
.gate-transition.opening .gate-right{transform:translateX(101%)}
.gate-transition .gate-seam{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  translate:-50% 0;
  opacity:0;
  background:#fff3c4;
  box-shadow:0 0 12px #fff,0 0 34px #e6c05f,0 0 80px rgba(88,155,255,.75);
  transition:opacity .18s ease .53s;
}
.gate-transition.closing .gate-seam{opacity:1}
.gate-transition.opening .gate-seam{opacity:0;transition-delay:0s}
.gate-magic-circle{
  position:absolute;
  left:50%;
  top:50%;
  width:min(42vw,360px);
  aspect-ratio:1;
  translate:-50% -50%;
  opacity:0;
  transform:scale(.35) rotate(-45deg);
  border:2px solid rgba(255,226,151,.9);
  border-radius:50%;
  box-shadow:0 0 22px rgba(255,225,149,.7),inset 0 0 24px rgba(89,157,255,.35);
  transition:opacity .26s ease .34s,transform .58s cubic-bezier(.16,.8,.25,1) .28s;
}
.gate-magic-circle::before,.gate-magic-circle::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:10%;
  border:1px dashed rgba(130,193,255,.85);
  animation:gateRuneSpin 4.5s linear infinite;
}
.gate-magic-circle::after{inset:24%;border-style:solid;border-color:rgba(255,218,119,.82);animation-direction:reverse;animation-duration:3.2s}
.gate-runes{
  position:absolute;
  inset:15%;
  display:grid;
  place-items:center;
  color:#fff0bc;
  font-size:clamp(34px,7vw,72px);
  text-shadow:0 0 13px #fff,0 0 35px #e9c868,0 0 60px #6ab8ff;
}
.gate-transition.closing .gate-magic-circle{opacity:1;transform:scale(1) rotate(0)}
.gate-transition.opening .gate-magic-circle{opacity:0;transform:scale(1.55) rotate(80deg);transition-delay:0s}
.gate-transition .gate-flash{
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(circle,#fff 0,rgba(255,242,194,.86) 3%,rgba(91,160,255,.38) 18%,transparent 57%);
  pointer-events:none;
}
.gate-transition.closing .gate-flash{animation:gateFlash .62s ease .48s both}
@keyframes gateRuneSpin{to{transform:rotate(360deg)}}
@keyframes gateFlash{0%{opacity:0;transform:scale(.5)}45%{opacity:.95}100%{opacity:0;transform:scale(1.6)}}

@media(max-width:760px){
  .title-card.cinematic-title-card{padding:39px 22px 28px;width:min(93vw,630px)}
  .title-logo-magic{font-size:clamp(31px,9vw,48px);line-height:1.04}
  .title-crown-halo{transform:translateX(-50%) scale(.8);top:-66px}
  .main-title-screen .title-menu{margin-top:25px;gap:10px}
  .main-title-screen .big-btn{padding:13px 15px;font-size:17px}
  .title-fog-layer{height:35%}
}
@media(prefers-reduced-motion:reduce){
  .title-map-art,.title-faction-aura i,.title-fog-layer,.title-crown-halo span,.title-logo-magic,.title-logo-glint,.title-crest-glow{animation:none!important}
  .title-map-art{opacity:1;transform:scale(1.06)!important}
  .title-card.cinematic-title-card{animation:none!important;opacity:1}
  .title-particle-canvas{display:none}
  .gate-transition .gate-panel,.gate-magic-circle{transition-duration:.12s!important}
}
.title-war-routes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.72}
.title-war-routes i{position:absolute;height:2px;width:42vw;max-width:650px;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,248,213,.95) 42%,rgba(111,180,255,.72) 58%,transparent);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px #7bb8ff);transform-origin:left center;clip-path:polygon(0 30%,30% 0,54% 64%,76% 15%,100% 52%,75% 100%,53% 50%,29% 100%);animation:titleWarRoute 7.8s ease-in-out infinite}
.title-war-routes i:nth-child(1){left:2%;top:35%;transform:rotate(14deg);animation-delay:2.45s}
.title-war-routes i:nth-child(2){right:-5%;top:63%;transform:rotate(164deg);animation-delay:3.25s}
.title-war-routes i:nth-child(3){left:31%;top:20%;width:34vw;transform:rotate(74deg);animation-delay:4.05s}
.title-impact-wave{position:absolute;left:50%;top:43%;z-index:2;width:120px;aspect-ratio:1;translate:-50% -50%;border:1px solid rgba(255,230,158,.75);border-radius:50%;opacity:0;box-shadow:0 0 25px rgba(255,214,116,.34),inset 0 0 18px rgba(106,172,255,.28);animation:titleImpactWave 8s ease-out 2.7s infinite;pointer-events:none}
@keyframes titleWarRoute{0%,12%,100%{opacity:0;scale:.4 1}18%{opacity:1}37%{opacity:.08;scale:1 1}45%{opacity:0;translate:18% 0}}
@keyframes titleImpactWave{0%,8%,100%{opacity:0;transform:scale(.25)}13%{opacity:.85}31%{opacity:0;transform:scale(5.8)}}
@media(prefers-reduced-motion:reduce){.title-war-routes,.title-impact-wave{display:none}}