/* HeecktsTCG V6 Retro Quest: real responsive staging, no video/trackers */
.intro{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:clamp(8px,2vw,22px);background:radial-gradient(circle at 50% 40%,#203858,#071127 72%);isolation:isolate;overflow:hidden}
.intro.playing{display:grid;animation:introV6Failsafe 5.4s linear both}
.intro.is-finishing{pointer-events:none;animation:introV6Close .45s ease forwards!important}
.intro-seen .intro:not(.replay){display:none!important}
.intro .skip{position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));background:#0b1f41;border:2px solid #ffdd92;color:#fff4d3;min-height:44px;padding:10px 13px;font:800 12px/1.1 ui-monospace,monospace;cursor:pointer;box-shadow:3px 3px 0 #466eb4}
.intro .gamebox{position:relative;width:min(1150px,100%);height:auto;aspect-ratio:16/9;max-height:calc(100dvh - 112px);border:4px solid #ffdf94;background:#071327;box-shadow:6px 6px 0 #416eb5,12px 12px 0 #050c20;overflow:hidden;isolation:isolate;contain:paint}
.intro-world,.intro-shop{position:absolute;inset:0;transform-origin:center;will-change:transform,opacity;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none}
.intro-world{z-index:0;background-image:url('retro-scene.webp');transform:scale(1.02);transition:opacity .4s ease,transform 1.7s ease}
.intro-shop{z-index:1;background-image:url('retro-door.webp');opacity:0;transform:scale(1.05);transition:opacity .45s ease,transform 1.55s cubic-bezier(.22,.76,.29,1)}
.intro[data-phase="1"] .intro-world{transform:scale(1.07) translateX(-1.5%)}
.intro[data-phase="2"] .intro-world,.intro[data-phase="3"] .intro-world,.intro[data-phase="4"] .intro-world{opacity:0}
.intro[data-phase="2"] .intro-shop,.intro[data-phase="3"] .intro-shop,.intro[data-phase="4"] .intro-shop{opacity:1}
.intro[data-phase="3"] .intro-shop,.intro[data-phase="4"] .intro-shop{transform:scale(1.54) translateX(-4%)}
.intro-aurora{z-index:3;position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,12,30,.06),transparent 40%,rgba(4,9,22,.7));}
.intro-pair{z-index:4;position:absolute;bottom:-31%;left:-15%;height:92%;width:auto;max-width:none;opacity:0;object-fit:contain;transform:translateX(-20%) scale(.9);filter:drop-shadow(0 8px 11px #0009);transition:transform .95s ease,opacity .35s ease,left 1.1s ease,bottom 1.1s ease}
.intro[data-phase="2"] .intro-pair{opacity:1;left:13%;bottom:-26%;transform:translateX(0) scale(.92)}
.intro[data-phase="3"] .intro-pair{opacity:0;left:39%;bottom:-27%;transform:scale(.53)}
.intro-portal{z-index:5;position:absolute;left:34%;top:21%;width:23%;height:61%;perspective:500px;opacity:0;transform:scale(.45);transition:opacity .2s, transform .65s ease;background:radial-gradient(ellipse,#fff2bd 0%,#ffe7abdd 33%,#ffb55a33 68%,transparent 80%);filter:drop-shadow(0 0 32px #ffeaa5)}
.intro-portal span{position:absolute;top:12%;width:50%;height:78%;border:3px solid #70451e;background:repeating-linear-gradient(90deg,#633a1c 0 10px,#84512a 10px 17px,#995d2b 17px 23px);box-shadow:inset 0 0 0 3px #c99855;transition:transform .65s ease}
.intro-portal span:first-child{left:0;transform-origin:left;}
.intro-portal span:last-child{right:0;transform-origin:right;}
.intro[data-phase="3"] .intro-portal,.intro[data-phase="4"] .intro-portal{opacity:.9;transform:scale(1.3)}
.intro[data-phase="3"] .intro-portal span:first-child,.intro[data-phase="4"] .intro-portal span:first-child{transform:rotateY(-75deg)}
.intro[data-phase="3"] .intro-portal span:last-child,.intro[data-phase="4"] .intro-portal span:last-child{transform:rotateY(75deg)}
.intro[data-phase="4"] .intro-portal{transform:scale(7);opacity:1}
.intro-crt{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:.1;background:repeating-linear-gradient(0deg,transparent 0 4px,#060916 4px 6px)}
.intro-hud{position:absolute;left:0;right:0;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 14px;background:#0a153bd6;border-bottom:2px solid #ffdfa0;font:900 11px/1.2 ui-monospace,monospace;letter-spacing:.07em;color:#fff5d5}
.intro-meter{position:absolute;z-index:9;top:8%;left:3%;width:min(320px,42%);padding:9px 12px;background:#0a1c3de8;border:3px solid #ffe09f;box-shadow:3px 3px #4778c9;font:800 11px ui-monospace,monospace}
.intro-meter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffebb4}
.intro-meter-rail{height:13px;border:2px solid #edd897;background:#081127;margin-top:7px;padding:2px}
.intro-meter-rail span{display:block;width:1%;height:100%;background:repeating-linear-gradient(90deg,#ffd365 0 12px,#3b64b1 12px 14px);animation:meterV6 4.2s steps(20,end) forwards}
.intro-dialog{z-index:9;position:absolute;bottom:5%;left:3%;width:min(650px,61%);display:grid;gap:4px;background:#f9edc8;color:#12254b;border:4px solid #233d6d;outline:3px solid #ffedb2;padding:12px 16px;box-shadow:5px 5px #000b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.intro-dialog small{font-size:10px;color:#7d3b42;font-weight:900;letter-spacing:.1em}
.intro-dialog strong{font-size:clamp(14px,2vw,22px);line-height:1.2;text-transform:uppercase}
.intro-dialog span{font-size:clamp(10px,1.18vw,13px);line-height:1.35}
.intro-pixels{z-index:7;position:absolute;inset:0;pointer-events:none;opacity:.5}
.intro-pixels i{position:absolute;display:block;width:12px;height:18px;border:2px solid #fff2c5;background:linear-gradient(135deg,#4577d4,#edc353);animation:pixelV6 2.4s ease-in-out infinite alternate}
.intro-pixels i:nth-child(1){left:12%;top:25%}.intro-pixels i:nth-child(2){left:32%;top:68%;animation-delay:-.7s}.intro-pixels i:nth-child(3){left:73%;top:36%;animation-delay:-1.5s}.intro-pixels i:nth-child(4){left:88%;top:69%;animation-delay:-2s}.intro-pixels i:nth-child(5){left:56%;top:13%;animation-delay:-1.1s}.intro-pixels i:nth-child(6){left:18%;top:84%;animation-delay:-.4s}.intro-pixels i:nth-child(7){left:96%;top:26%;animation-delay:-1.6s}.intro-pixels i:nth-child(8){left:52%;top:88%;animation-delay:-.2s}
.intro[data-phase="4"] .intro-pixels{opacity:1}
@keyframes pixelV6{from{transform:translate(0,0) rotate(-12deg);opacity:.3}to{transform:translate(15px,-23px) rotate(18deg);opacity:.95}}
@keyframes meterV6{from{width:1%}to{width:100%}}
@keyframes introV6Failsafe{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes introV6Close{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(max-width:700px){
 .intro{padding:0 9px}
 .intro .gamebox{height:min(690px,calc(100dvh - 105px));width:100%;aspect-ratio:auto;max-height:none;border-width:3px}
 .intro .skip{top:max(9px,env(safe-area-inset-top));right:max(11px,env(safe-area-inset-right));font-size:11px}
 .intro-hud{font-size:10px;padding:8px 7px}
 .intro-world{background-size:auto 100%;background-position:34% center;transition:background-position 1.2s ease, opacity .3s ease,transform 1.2s ease;transform:scale(1)}
 .intro[data-phase="1"] .intro-world{background-position:68% center;transform:scale(1.06)}
 .intro-shop{background-size:auto 100%;background-position:34% center;}
 .intro[data-phase="2"] .intro-shop{background-position:34% center}
 .intro[data-phase="3"] .intro-shop,.intro[data-phase="4"] .intro-shop{transform:scale(1.65) translate(4%,2%)}
 .intro-meter{left:4%;top:9%;width:60%;padding:8px;font-size:10px}
 .intro-dialog{left:5%;width:90%;bottom:4%;padding:11px 12px;gap:5px}
 .intro-dialog strong{font-size:clamp(14px,4vw,19px)}
 .intro-dialog span{font-size:11px}
 .intro-pair{bottom:-18%;height:62%;left:-20%}
 .intro[data-phase="2"] .intro-pair{left:3%;bottom:-9%;opacity:1;transform:scale(.9)}
 .intro[data-phase="3"] .intro-pair{left:28%;bottom:-15%;transform:scale(.5);opacity:0}
 .intro-portal{left:30%;top:31%;width:44%;height:42%}
}
@media(max-width:370px){.intro-meter{width:69%;top:9%}.intro-dialog strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}}

body.intro-running{overflow:hidden;overscroll-behavior:none}