*{box-sizing:border-box}
html,body{margin:0;background:#001329;font-family:Arial,sans-serif;min-height:100%;overflow-x:hidden}
.page{position:relative;width:min(100vw,958px);margin:auto}
.bg{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hot{position:absolute;cursor:pointer;background:transparent;border:0;z-index:30}
.hot:focus-visible{outline:3px solid #fff;border-radius:10px}
.nav{bottom:0;height:7.8%}.n1{left:0;width:16.7%}.n2{left:16.7%;width:16.7%}.n3{left:33.4%;width:16.7%}.n4{left:50.1%;width:16.7%}.n5{left:66.8%;width:16.7%}.n6{left:83.5%;width:16.5%}
.toast{position:fixed;left:50%;bottom:10%;transform:translateX(-50%);background:#061a35;color:#fff;border:2px solid #12bfff;border-radius:18px;padding:12px 20px;z-index:200;display:none;font-weight:bold;white-space:nowrap}
.real-input{position:absolute;z-index:40;border:1px solid rgba(20,205,255,.85);background:rgba(1,19,42,.70);color:white;border-radius:10px;padding:0 1.1%;font-size:clamp(11px,1.8vw,18px);outline:none}
.real-input::placeholder{color:#a9b7cc}
.real-input:focus{box-shadow:0 0 12px #00cfff;border-color:#fff}
.real-check{position:absolute;z-index:40;accent-color:#1594ff;transform:scale(1.25)}
.register-btn{left:14%;top:64.4%;width:72%;height:6.6%;z-index:50}
.signin-link{left:55%;top:74.0%;width:18%;height:4%}
.apple-btn{left:15%;top:46.0%;width:70%;height:6.6%;z-index:50}
.google-btn{left:15%;top:54.2%;width:70%;height:6.6%;z-index:50}

/* GAME */
.board-overlay{position:absolute;left:7.35%;top:27.55%;width:85.2%;height:51.4%;z-index:20;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);padding:.45%;gap:.25%;pointer-events:auto}
.tile{position:relative;border-radius:10%;display:grid;place-items:center;cursor:pointer;overflow:visible;transition:transform .16s ease,filter .16s ease}
.tile img{width:88%;height:88%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));transition:transform .18s ease,opacity .18s ease}
.tile.selected{outline:3px solid #ffe157;box-shadow:0 0 15px #ffd321 inset,0 0 10px #ffd321}
.tile.swap img{transform:scale(.92)}
.tile.pop img{transform:scale(.25);opacity:0}
.tile.pop:after{content:"💥";position:absolute;font-size:clamp(14px,3vw,32px);animation:boom .35s ease-out forwards;z-index:5}
@keyframes boom{0%{transform:scale(.25);opacity:0}45%{transform:scale(1.25);opacity:1}100%{transform:scale(1.75);opacity:0}}
.rainbow-fill{position:absolute;left:15.5%;top:22.53%;width:68.8%;height:2.15%;z-index:25;overflow:hidden;border-radius:999px}
.rainbow-fill i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#ff2b2b,#ff8b1c,#ffe51e,#25e56b,#20c6ff,#4c55ff,#d42cff);box-shadow:0 0 10px #48e4ff;transition:width .3s ease}
.rainbow-count{position:absolute;right:3.5%;top:22.55%;z-index:26;color:white;font-weight:900;font-size:clamp(10px,2vw,21px);text-shadow:0 2px 3px #000}
.rainbow-orb{position:absolute;right:2.2%;top:20.9%;width:8.5%;height:5.2%;z-index:26;cursor:pointer;border-radius:50%}
.boost{top:80.6%;height:8.3%}
.b1{left:2.2%;width:12.9%}.b2{left:15.5%;width:12.9%}.b3{left:28.9%;width:12.9%}.b4{left:42.2%;width:12.9%}.b5{left:55.5%;width:12.9%}.b6{left:68.8%;width:12.9%}.b7{left:82.1%;width:15.2%}

/* WHEEL */
.spin-btn{left:31.5%;top:78.0%;width:37%;height:6.6%;z-index:70}
#wheelDisc{position:absolute;left:8.0%;top:29.0%;width:84%;aspect-ratio:1;border-radius:50%;z-index:20;pointer-events:none;transition:transform 5.2s cubic-bezier(.12,.68,.06,1);overflow:hidden}
#wheelDisc img{position:absolute;width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.0)}