:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#061017;color:#e5edf0;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}button,a{font:inherit}a{color:inherit}
body{background:radial-gradient(ellipse 75% 55% at 78% 15%,#1c3942 0%,transparent 70%),radial-gradient(ellipse 70% 55% at 0% 90%,#33221d 0%,transparent 60%),#061017}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#bfd6e303 6px 7px);mix-blend-mode:screen}
.shell{position:relative;max-width:1560px;margin:auto;padding:clamp(16px,3vw,38px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:clamp(15px,2vw,26px);border-bottom:1px solid #55737d53}
.eyebrow{font-size:10px;letter-spacing:.21em;font-weight:800;color:#93b6bf}.back{text-decoration:none;color:#aac4cc;font-size:12px;white-space:nowrap}.back:hover{color:white}
.top .state{font-size:10px;color:#f3be91;border:1px solid #ddaf7b69;border-radius:50px;padding:9px 12px;letter-spacing:.09em}
.hero{padding:clamp(30px,5vw,75px) 0 26px;position:relative}.hero h1{margin:9px 0 12px;font-weight:1000;font-stretch:condensed;letter-spacing:-.063em;line-height:.85;font-size:clamp(57px,10vw,170px);text-transform:uppercase}
.hero h1 span{display:block;color:#ecc9a8;text-shadow:0 4px 65px #d86c2c46}.tag{color:#93b0bc;font-size:clamp(12px,1.2vw,16px);max-width:570px;line-height:1.65;margin:22px 0 0}
.hero:after{content:"";position:absolute;right:3%;bottom:10%;width:22vw;height:22vw;max-width:300px;max-height:300px;pointer-events:none;background:radial-gradient(circle,transparent 0 22%,#5c8d9455 23% 23.5%,transparent 24% 31%,#b18b6252 32% 33%,transparent 34%);transform:rotate(-15deg);filter:drop-shadow(0 0 22px #89dbd028)}
.game-frame{border:1px solid #6c929e8a;background:#02090d;min-height:260px;box-shadow:0 24px 100px #000c,inset 0 0 45px #4f939011;border-radius:14px;overflow:hidden;position:relative}
.frame-head{padding:12px 17px;display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #48636d6e;background:linear-gradient(90deg,#122832,#0d141b)}
.indicator{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.16em;color:#b7d4dc;font-weight:800}.indicator:before{content:"";width:7px;height:7px;background:#64f1d4;border-radius:50%;box-shadow:0 0 12px #63f1c9}
.frame-action{display:flex;gap:8px;flex-wrap:wrap}.btn{border-radius:8px;border:1px solid #56858f;background:#132a34;color:#e4f3f2;padding:10px 15px;cursor:pointer;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.08em;transition:background .2s,border-color .2s}
.btn:hover,.btn:focus-visible{background:#20535c;border-color:#9ee8e0;outline:none}.btn.main{color:#081b21;border-color:#a5e4dd;background:linear-gradient(140deg,#b3f8ef,#71c6c4);box-shadow:0 4px 20px #67e2d32b}
.frame-body{position:relative;aspect-ratio:16/9;min-height:min(55vh,330px);display:grid;place-items:center;background:radial-gradient(ellipse 45% 44% at 50% 38%,#204b55 0%,#081924 70%,#030b11 100%)}
.welcome{display:grid;justify-items:center;gap:15px;text-align:center;padding:20px;z-index:1}.welcome strong{font-size:clamp(19px,3vw,30px);letter-spacing:.035em}.welcome p{font-size:12px;line-height:1.7;color:#9db8c1;max-width:390px;margin:0}.symbol{font-size:47px;color:#7ae4d4;text-shadow:0 0 35px #76e6e0;line-height:1}
iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#02080d;display:none}iframe.loaded{display:block}
.loader{display:none;position:absolute;inset:0;background:#030a10f2;z-index:2;place-items:center;color:#98d2d2;letter-spacing:.15em;font-size:12px}.loader.show{display:grid}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 20px}
.info div{padding:17px 18px;border:1px solid #698c9451;background:linear-gradient(135deg,#132731c9,#0c151cd0);border-radius:10px}
.info b{display:block;color:#dcebe9;margin-bottom:8px;letter-spacing:.06em;font-size:12px}
.info span{font-size:11px;line-height:1.65;color:#a8bdc4}
.note{font-size:11px;line-height:1.6;color:#8ca4ad;text-align:center;margin:25px auto 0;max-width:640px}
@media(max-width:720px){.top .state{display:none}.hero:after{opacity:.33}.info{grid-template-columns:1fr}.frame-body{aspect-ratio:4/5;min-height:330px}.frame-head{align-items:flex-start;flex-direction:column}.frame-action{width:100%}.frame-action .btn{flex:1;text-align:center}.hero h1{font-size:clamp(58px,13vw,100px)}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}