:root{color-scheme:dark;--bg:#06090c;--ice:#a6e5e4;--white:#f3f6f4}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{font-family:Arial,Helvetica,sans-serif;color:var(--white)}
.teaser{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 47%,#132729 0%,#0b151b 35%,#06090c 75%)}
.nebula{position:absolute;inset:-20%;opacity:.65;background:radial-gradient(ellipse at 65% 45%,#38656325,transparent 37%),radial-gradient(ellipse at 35% 60%,#51678920,transparent 40%);filter:blur(40px);transform:rotate(-20deg)}
.stars{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1px 1px at 12% 22%,#cbebef 60%,transparent),radial-gradient(1px 1px at 25% 65%,#bce5ea 60%,transparent),radial-gradient(1px 1px at 74% 28%,#ccebed 60%,transparent),radial-gradient(1px 1px at 88% 48%,#a0bebe 60%,transparent),radial-gradient(1px 1px at 62% 17%,#a0bebe 60%,transparent),radial-gradient(1px 1px at 36% 32%,#a0bebe 60%,transparent),radial-gradient(1px 1px at 83% 72%,#a0bebe 60%,transparent)}
canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.portal-wrap{--size:min(61vw,590px);position:absolute;width:var(--size);height:var(--size);left:50%;top:48%;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));transition:transform 1.8s ease-out}
.portal-halo{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,transparent 42%,#80d4d61a 49%,#749eac0b 57%,transparent 70%);filter:blur(18px);animation:breathe 8s ease-in-out infinite alternate}
.portal{position:absolute;inset:6%;border-radius:50%;padding:2px;background:conic-gradient(from 35deg,#c1fffb 0deg,#497775 55deg,#183533 93deg,#75d9d6 160deg,#d4fff9 197deg,#305758 263deg,#90d0cc 310deg,#c1fffb 360deg);box-shadow:0 0 8px #d4ffef50,0 0 38px #8bfff128,inset 0 0 22px #83e8e329;transform:rotate(-25deg)}
.portal-inner{height:100%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#0b151a 0,#070d11 62%,#111e23 94%,#517371 100%);box-shadow:inset 0 0 36px #88e2e220}
.portal:after{content:"";position:absolute;inset:-5px;border:1px solid #a3e0df25;border-radius:50%;filter:blur(1px)}
.portal-shine{position:absolute;width:28%;height:4%;top:11%;left:55%;border-radius:50%;background:#c5fff922;filter:blur(17px);transform:rotate(30deg)}
.orbit{position:absolute;border:1px solid #9cdfd419;border-radius:50%}
.orbit-one{inset:1%;transform:rotate(-25deg) scaleX(1.04)}
.orbit-two{inset:-4%;border-color:#8fced00c;transform:rotate(25deg) scaleY(.98)}
.horizon{position:absolute;left:-20%;right:-20%;height:32%;bottom:-18%;border-radius:50%;background:#070b0e;box-shadow:0 -1px 0 #8adfda22,0 -14px 60px #6fffe00a;transform:rotate(-4deg)}
.ground{position:absolute;bottom:-10%;height:30%;width:100%;background:radial-gradient(ellipse at center,#5e9b9212,transparent 55%);filter:blur(25px)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 23%,#03060966 78%,#020405a8 100%)}
.frame{position:absolute;inset:32px;pointer-events:none}
.frame i{position:absolute;width:18px;height:18px;border-color:#9ebfc030;border-style:solid;border-width:0}
.frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.emblem{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:25px;opacity:.65}
.emblem svg{display:block;width:100%;stroke:#bde4df;stroke-width:1}
.announcement{text-align:center;position:relative;margin-top:-1vh;padding:48px 22px;width:100%;animation:arrive 1.6s ease-out both}
.announcement p{font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:#aecac9;margin:0 0 27px}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,8.7vw,126px);font-weight:400;line-height:1.07;letter-spacing:-.055em;margin:0;text-shadow:0 4px 36px #0009}
h1 span{color:#b5d9d4}
.signal{display:flex;align-items:center;justify-content:center;gap:5px;height:15px;margin-bottom:24px}
.signal span{height:3px;width:3px;border-radius:50%;background:#b6efe0;box-shadow:0 0 8px #a8ffdd70}
.signal span:nth-child(2){width:4px;height:4px;opacity:.95}.signal span:first-child,.signal span:last-child{opacity:.35}
.rule{width:102px;height:1px;margin:39px auto 0;background:linear-gradient(90deg,transparent,#adcdc64d,transparent);position:relative}
.rule span{position:absolute;left:50%;width:4px;height:4px;top:-1.5px;transform:rotate(45deg);background:#bfd9d2}
.coordinates{position:absolute;bottom:7%;display:flex;gap:15px;align-items:center;opacity:.4}
.coordinates span{width:26px;height:1px;background:linear-gradient(90deg,transparent,#97c6c1)}
.coordinates span:last-child{transform:rotate(180deg)}
.coordinates i{width:5px;height:5px;border:1px solid #b4d8d0;border-radius:50%}
@keyframes breathe{from{opacity:.5;transform:scale(.98)}to{opacity:1;transform:scale(1.035)}}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.portal-wrap{--size:112vw;top:47%}.frame{inset:20px}.emblem{top:8%;width:23px}.announcement p{font-size:9px;letter-spacing:.23em;margin-bottom:25px}h1{font-size:clamp(49px,12.6vw,76px)}.announcement{margin-top:-2vh;padding:40px 18px}.rule{margin-top:32px}.coordinates{bottom:8%}}
@media(max-height:500px) and (min-width:601px){.portal-wrap{--size:80vh}.emblem{top:5%;width:18px}.announcement{padding:35px 20px}.signal{margin-bottom:12px}.announcement p{margin-bottom:15px}h1{font-size:65px}.rule{margin-top:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.emblem{width:auto;text-align:center;opacity:.85}
.emblem svg{width:25px;margin:0 auto}
.game-name{display:block;margin-top:13px;padding-left:.3em;font-size:14px;line-height:1.2;letter-spacing:.3em;text-transform:uppercase;color:#d4e9e5}
@media(max-height:500px) and (min-width:601px){.emblem{display:flex;align-items:center;gap:12px}.emblem svg{width:18px}.game-name{margin-top:0;font-size:11px}}