/* Full-screen title screen. The game HUD returns after Enter. */
body.welcome-active{height:100dvh;min-height:100dvh;overflow:hidden;background:#100c20}
body.welcome-active>.topbar,body.welcome-active>.footer,body.welcome-active>.world-glow{display:none}
body.welcome-active>main{padding:0;margin:0;max-width:none;width:100%;height:100dvh;flex:none}
.title-screen{position:relative;isolation:isolate;height:100%;width:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#3b2855 0,#221630 31%,#100e23 70%)}
.title-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-2}
.title-haze{position:absolute;top:-12%;width:75%;height:120%;filter:blur(30px);opacity:.7}
.haze-fire{left:-24%;background:radial-gradient(ellipse at 55% 44%,#ec7e314f 0,#b43f2140 28%,#9e422414 50%,transparent 73%)}
.haze-ice{right:-24%;background:radial-gradient(ellipse at 45% 44%,#319dd35c 0,#1477983b 28%,#156f9019 50%,transparent 73%)}
.title-rays{position:absolute;inset:-60%;opacity:.3;background:repeating-conic-gradient(from 200deg at 50% 47%,transparent 0deg 16deg,#d2b9ff0b 16.4deg 17deg,transparent 18deg 24deg);transform:rotate(-5deg)}
.title-ridge{position:absolute;left:-4%;width:108%;height:32%;bottom:0;clip-path:polygon(0 55%,4% 30%,9% 45%,13% 0,17% 40%,23% 18%,27% 72%,32% 46%,38% 80%,44% 53%,49% 84%,54% 60%,61% 72%,65% 42%,69% 58%,76% 10%,79% 45%,85% 5%,91% 49%,96% 20%,100% 48%,100% 100%,0 100%);background:#100f2288}
.ridge-back{bottom:4%;opacity:.7;background:linear-gradient(90deg,#5c2e3055,#251a39,#1c506055);transform:scaleY(1.2)}
.ridge-front{bottom:-8%;background:#0a0a198a}
.title-floor{position:absolute;bottom:-29%;left:10%;width:80%;height:46%;border-radius:50%;border:1px solid #bc8dda26;background:radial-gradient(ellipse,#8f778b30,transparent 67%);box-shadow:0 -22px 90px #c6a6cb0e}
.clash-trail{position:absolute;top:52%;height:2px;width:47%;opacity:.48;box-shadow:0 0 25px currentColor}
.trail-fire{left:-4%;background:linear-gradient(90deg,transparent,#f8aa67,transparent);color:#e37639;transform:rotate(-14deg)}
.trail-ice{right:-4%;background:linear-gradient(90deg,transparent,#81d2f4,transparent);color:#449cbc;transform:rotate(14deg)}
.title-particles{position:absolute;inset:0}
.title-particles i{position:absolute;left:var(--px);top:var(--py);height:3px;width:3px;border-radius:50%;background:#ffc786;box-shadow:0 0 8px #ffbd81;opacity:.55;animation:title-spark var(--time) ease-in-out var(--delay) infinite}
.title-particles i:nth-child(even){background:#91e2f8;box-shadow:0 0 8px #94e0ff}
.dragon-company{position:absolute;top:1%;width:37%;height:98%;max-width:700px;z-index:1;pointer-events:none}
.company-left{left:0;--slide-from:-110vw}
.company-right{right:0;--slide-from:110vw}
.title-dragon{position:absolute;width:var(--size);top:var(--y);opacity:0;transform:translateX(var(--slide-from));z-index:var(--depth);will-change:transform}
.company-left .title-dragon{left:var(--x)}
.company-right .title-dragon{right:var(--x)}
.dragon-slot-0{--x:-5%;--y:1%;--size:65%;--depth:1;--light:.68}
.dragon-slot-1{--x:36%;--y:1%;--size:57%;--depth:2;--light:.88}
.dragon-slot-2{--x:-13%;--y:35%;--size:77%;--depth:3;--light:.85}
.dragon-slot-3{--x:4%;--y:64%;--size:69%;--depth:5;--light:.95}
.dragon-slot-4{--x:28%;--y:28%;--size:80%;--depth:4;--light:1.06}
.intro-ready .title-dragon{animation:dragon-entrance 1150ms cubic-bezier(.15,.73,.22,1) var(--entry-delay) both}
.dragon-hover{width:100%;height:auto;animation:clash-hover var(--hover-time) ease-in-out var(--hover-offset) infinite;transform-origin:50% 65%}
.title-dragon img{width:100%;height:auto;display:block;object-fit:contain;filter:brightness(var(--light)) saturate(1.1) drop-shadow(0 12px 16px #030510bb);user-select:none}
.company-left .title-dragon img{transform:scaleX(-1)}
.company-right .dragon-hover{animation-name:clash-hover-right}
.title-center-shade{position:absolute;z-index:3;pointer-events:none;left:24%;top:0;width:52%;height:100%;background:radial-gradient(ellipse at 50% 49%,#171027cb 0,#19112c80 32%,#18112b30 49%,transparent 70%)}
.title-lockup{position:absolute;z-index:5;top:48%;left:50%;width:43%;max-width:660px;text-align:center;transform:translate(-50%,-50%);padding:0 0 10px}
.title-crest{display:flex;gap:14px;align-items:center;justify-content:center;margin:0 auto 17px;color:#f4c678;opacity:.9}
.title-crest>span{width:44px;height:1px;background:linear-gradient(90deg,transparent,#f4c678)}
.title-crest>span:last-child{transform:scaleX(-1)}
.title-crest svg{width:24px;height:24px;filter:drop-shadow(0 0 12px #e9a34055)}
.game-title{margin:0;position:relative;transform:rotate(-3deg);filter:drop-shadow(0 11px 2px #060514a0);isolation:isolate}
.title-word{display:block;position:relative;font-family:'Bangers',Impact,cursive;font-weight:400;letter-spacing:2px;line-height:.95;padding:4px 0;white-space:nowrap}
.title-word:before{content:attr(data-word);position:absolute;inset:4px 0 0;z-index:-1;color:#371825;-webkit-text-stroke:7px #311525;text-shadow:0 5px #753d30,0 8px #2b1523,2px 10px #140d20}
.title-munchin{font-size:clamp(52px,6.4vw,108px);color:#fff0ca;background:linear-gradient(#fff7df 5%,#ffe2a4 51%,#f6b95f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #f9d7a9}
.title-dragons{font-size:clamp(76px,9.3vw,157px);color:#ffcb64;background:linear-gradient(#fff1bb 2%,#ffdd7f 36%,#f7b344 57%,#ee8c36 88%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #f4b868;letter-spacing:2px}
.title-divider{display:flex;align-items:center;justify-content:center;gap:11px;margin:27px auto 30px;color:#d69c5b;opacity:.65}
.title-divider>span{height:1px;width:70px;background:linear-gradient(90deg,transparent,#d69c5b)}
.title-divider>span:last-child{transform:scaleX(-1)}
.title-divider>b{height:5px;width:5px;background:#eec98d;transform:rotate(45deg);box-shadow:0 0 12px #ffcd8244}
.title-menu{display:flex;flex-direction:column;gap:15px;align-items:center}
.title-menu button{width:min(290px,82%);min-height:56px;position:relative;border-radius:12px;letter-spacing:2.5px;display:flex;align-items:center;justify-content:center;gap:16px}
.title-enter{background:linear-gradient(180deg,#fff0ad 0,#fbd775 44%,#f0b24e 100%);border:1px solid #fff3bb;box-shadow:inset 0 0 0 4px #f7d687,0 5px 0 #926034,0 7px 0 #241328,0 10px 28px #05031080;color:#382036;font-family:'Bangers',Impact,cursive;font-size:32px;padding:13px 24px}
.title-enter:before{content:'';position:absolute;inset:6px;border:1px solid #8e60243b;border-radius:6px;pointer-events:none}
.title-enter:hover{filter:brightness(1.1);transform:translateY(-3px);box-shadow:inset 0 0 0 4px #ffe3a3,0 7px 0 #926034,0 9px 0 #241328,0 13px 35px #eaa45027}
.title-enter svg{width:24px;height:24px}
.title-howto{border:1px solid #b597bd65;background:linear-gradient(#392b47aa,#1e172dbb);box-shadow:inset 0 0 0 3px #bc8dce08,0 4px 12px #07031155;color:#eddaed;font:500 12px 'Fredoka',sans-serif;padding:16px 20px;backdrop-filter:blur(6px)}
.title-howto:hover{background:#4a365dd9;border-color:#ddc19e99;color:#fff0d6;transform:translateY(-2px)}
.title-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 160px #06061580;background:linear-gradient(#07061577 0,transparent 17%,transparent 82%,#07061588)}
@keyframes dragon-entrance{0%{transform:translateX(var(--slide-from)) scale(.9);opacity:0}22%{opacity:1}78%{transform:translateX(calc(var(--slide-from)*-.015)) scale(1.012)}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes clash-hover{0%,100%{transform:translate(0,0) rotate(-1deg)}45%{transform:translate(5px,-15px) rotate(1.2deg)}75%{transform:translate(-3px,-7px) rotate(.2deg)}}
@keyframes clash-hover-right{0%,100%{transform:translate(0,-4px) rotate(1deg)}45%{transform:translate(-5px,-18px) rotate(-1.2deg)}75%{transform:translate(3px,-9px) rotate(-.2deg)}}
@keyframes title-spark{0%,100%{transform:translate(0,10px) scale(.7);opacity:.15}50%{transform:translate(8px,-18px) scale(1.1);opacity:.65}}
@media(min-aspect-ratio:2/1){.dragon-company{width:35%;top:0;height:100%}.dragon-slot-0{--x:-1%;--y:-15%;--size:54%}.dragon-slot-1{--x:40%;--y:-13%;--size:46%}.dragon-slot-2{--x:-20%;--y:24%;--size:68%}.dragon-slot-3{--x:4%;--y:59%;--size:54%}.dragon-slot-4{--x:24%;--y:17%;--size:74%}.title-lockup{top:49%;width:42%}.title-crest{margin-bottom:8px}.title-munchin{font-size:clamp(38px,7.1vh,80px)}.title-dragons{font-size:clamp(56px,12vh,125px)}.title-divider{margin:16px auto 18px}.title-menu{gap:11px}.title-menu button{min-height:43px;width:min(248px,85%)}.title-enter{font-size:26px;padding:9px 22px}.title-howto{font-size:11px;padding:12px 18px}.title-vignette{box-shadow:inset 0 0 100px #06061570}}
@media(max-width:1100px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:2/1){.dragon-company{width:39%}.dragon-slot-1{--x:34%;--y:3%;--size:60%}.dragon-slot-4{--x:22%;--y:31%;--size:80%}.title-lockup{width:44%;top:49%}.title-menu button{width:240px}.title-word:before{-webkit-text-stroke:5px #311525}.title-munchin{font-size:7vw}.title-dragons{font-size:10vw}}
@media(max-aspect-ratio:1/1){.dragon-company{width:50%;height:100%;top:0}.dragon-slot-0{--x:-9%;--y:9%;--size:89%;--light:.85}.dragon-slot-1{--x:37%;--y:-1%;--size:74%;--light:.92}.dragon-slot-2{--x:-42%;--y:34%;--size:88%;--light:.7}.dragon-slot-3{--x:-17%;--y:70%;--size:95%;--light:.96}.dragon-slot-4{--x:24%;--y:77%;--size:90%;--light:1.06}.title-lockup{width:83%;top:47%;max-width:520px}.title-munchin{font-size:clamp(55px,13vw,93px)}.title-dragons{font-size:clamp(80px,19vw,137px)}.title-center-shade{left:2%;width:96%;background:radial-gradient(ellipse at 50% 45%,#171027d9 0,#19112c91 25%,#18112b38 45%,transparent 69%)}.title-crest{margin-bottom:12px}.title-divider{margin:21px auto 25px}.title-menu{gap:13px}.title-menu button{width:245px;min-height:50px}.title-enter{font-size:29px;padding:12px 24px}.title-howto{font-size:11px;padding:15px 20px}.title-vignette{box-shadow:inset 0 0 75px #06061560;background:linear-gradient(#07061566,transparent 18%,transparent 85%,#07061588)}.title-haze{width:100%;height:110%}.haze-fire{left:-48%}.haze-ice{right:-48%}.clash-trail{top:30%;width:55%}.title-word:before{-webkit-text-stroke:5px #311525}}
@media(max-height:400px) and (orientation:landscape){.title-crest{margin-bottom:5px;gap:8px}.title-crest svg{width:17px;height:17px}.title-lockup{top:49%}.title-munchin{font-size:37px}.title-dragons{font-size:62px}.title-divider{margin:12px auto 13px}.title-menu{gap:10px}.title-menu button{min-height:42px;width:208px}.title-enter{font-size:24px;padding:8px 18px}.title-howto{font-size:10px;padding:11px 17px}.title-word:before{-webkit-text-stroke:4px #311525;text-shadow:0 4px #753d30,0 6px #2b1523}.title-munchin{-webkit-text-stroke:.5px #f9d7a9}.title-dragons{-webkit-text-stroke:.75px #f4b868}}
body.reduced-motion .title-dragon{opacity:1;transform:none;animation:none!important}body.reduced-motion .dragon-hover,body.reduced-motion .title-particles i{animation:none!important}
@media(prefers-reduced-motion:reduce){.title-dragon{opacity:1;transform:none;animation:none!important}.dragon-hover,.title-particles i{animation:none!important}}