:root{--blue:#20bdff;--deep:#041531;--border:#31cbff}
*{box-sizing:border-box} html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#001021;color:white;font-family:Arial,'Helvetica Neue',sans-serif;overscroll-behavior:none}button,input{font-family:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} button:focus-visible,input:focus-visible{outline:3px solid white;outline-offset:2px}
#app{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#05142e}.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}.screen>.bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hit{position:absolute;border:0;background:transparent;color:transparent;z-index:6;opacity:1;padding:0;border-radius:12px}.hit:focus-visible{color:white;outline:3px solid cyan;background:#00b3ff35}.hit:active{background:#42caff33}
#introBar{position:absolute;left:33%;top:90.8%;height:2.1%;width:33%;border-radius:60px;overflow:hidden;z-index:4}#introBar>i{display:block;width:0;height:100%;background:linear-gradient(90deg,#128bff,#76f4ff);box-shadow:0 0 10px #5be8ff;animation:fill 3s linear forwards} @keyframes fill{to{width:100%}}
#rotate{display:none;position:fixed;inset:0;z-index:9999;background:#001534 url('assets/rotate.png') center/cover no-repeat}
@media (orientation:portrait){#rotate{display:block}#app{visibility:hidden}}
.back{position:absolute;z-index:7;top:2.8%;left:27.5%;background:linear-gradient(165deg,#1258ab,#041b4f);border:1.7px solid #53dcff;border-radius:10px;box-shadow:0 0 13px #00c3ffb0;color:#fff;font-size:clamp(11px,2.1vw,20px);font-weight:900;padding:.36em .82em;white-space:nowrap}
#game .back{top:2.6%;left:1.6%;width:5.5%;height:9%;opacity:0}
.playerHud{position:absolute;z-index:8;left:64.2%;top:2.9%;width:33.4%;height:9.2%;border:2px solid #46cfff;border-radius:14px;box-shadow:0 0 16px #009dffa8,inset 0 0 10px #0080ff52;background:linear-gradient(104deg,#0c3671,#020f35 75%);display:flex;align-items:center;gap:2.5%;padding:0.7% 1.1%;font-size:clamp(10px,1.25vw,20px);color:#fff;text-align:left}
.playerHud .emblem{display:grid;place-items:center;flex:0 0 auto;width:auto;height:80%;aspect-ratio:1;border-radius:100%;border:2px solid #2cb4fa;background:#09214d;font-size:clamp(14px,2.1vw,29px);overflow:hidden}
.playerHud .emblem img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.playerHud .data{flex:1;min-width:0;display:flex;flex-direction:column;gap:5%}.playerHud b{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:clamp(10px,1.5vw,24px)} .rowXp{display:flex;gap:7px;align-items:center}.playerHud .lev{font-size:clamp(8px,1.02vw,15px);font-weight:700;white-space:nowrap}.track{flex:1;height:clamp(3px,1.5vh,14px);border-radius:15px;background:#093a79;overflow:hidden}.track i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#ffe875,#ffa810);border-radius:10px}.playerHud .star{font-size:clamp(11px,1.6vw,25px);font-weight:900;white-space:nowrap}.playerHud .star:before{content:'⭐';margin-right:3px}
#game .playerHud{left:69.1%;top:2.3%;width:28.3%;height:9.6%}
#game .playerHud .data b{font-size:clamp(9px,1.16vw,17px)}
.topQuest{position:absolute;z-index:4;left:33.7%;top:14.2%;width:33.4%;height:11.2%;border-radius:8px;border:1px solid #5bd5ff;box-shadow:0 0 12px #00afffaa;background:linear-gradient(160deg,#17468c,#020c2c 88%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.1%;}
.topQuest small{font-size:clamp(8px,1vw,15px);font-weight:750;color:#d4ecff}.topQuest strong{display:block;font-weight:900;font-size:clamp(11px,1.40vw,23px);line-height:1.05;overflow:hidden}
.gameHeader{position:absolute;z-index:4;left:15.1%;top:3%;height:8.4%;width:20.6%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(95deg,#123671,#071841);padding:.2% 1.2%;border-radius:7px}.gameHeader strong{font-size:clamp(12px,1.7vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gameHeader small{font-size:clamp(9px,1.2vw,18px);color:#eaf7ff;font-weight:bold}
#board{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}#board .glowBlue{filter:drop-shadow(0 0 8px #19aeff)}#board .glowRed{filter:drop-shadow(0 0 7px #ff3e44)}
.answer{position:absolute;z-index:6;top:73.4%;height:15.8%;width:29.1%;background:transparent;color:#fff;border:0;border-radius:13px;padding:0;text-align:left}.answer:focus-visible,.answer:active{outline:2px solid #b3f5ff;box-shadow:0 0 20px cyan}.answer:hover{box-shadow:inset 0 0 25px #3fd8ff4b}
.answer .copy{position:absolute;left:35.8%;right:4%;top:22%;bottom:16%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#092656 0%,#051a4f 80%,#061b4f 100%);padding:3px 1%;border-radius:7px;gap:3px}.answer strong{font-size:clamp(10px,1.28vw,22px);line-height:1.05;text-transform:uppercase}.answer small{font-size:clamp(8px,1.02vw,15px);color:#c6e8ff;line-height:1.14}
#answer0{left:3.6%}#answer1{left:36%}#answer2{left:66.4%}
.gameTap{position:absolute;z-index:8;border:0;background:transparent;color:transparent}#hint{left:36.6%;top:91%;width:13%;height:7%}#replay{left:51.1%;top:91%;width:12.3%;height:7%}
#hudName{position:absolute;z-index:2;top:13.7%;left:79%;width:18%;font-size:clamp(10px,1.3vw,21px);color:white;text-align:center;display:none}
#modal{position:fixed;z-index:500;inset:0;display:none;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(8px);padding:3vw}#modal.open{display:flex}.panel{border-radius:18px;border:2px solid #4cd9ff;background:linear-gradient(165deg,#104080,#020d2d 86%);box-shadow:0 0 28px #008affbd;padding:clamp(16px,3vw,30px);width:min(680px,88vw);max-height:88dvh;overflow-y:auto;position:relative;color:#fff}.panel h2{margin:0 44px 10px 0;font-size:clamp(16px,3vw,30px)}.panel p{font-size:clamp(11px,1.6vw,19px);line-height:1.43;margin:.5em 0;color:#e1f0ff}.panel .close{position:absolute;right:12px;top:10px;color:#fff;background:#124a86;border:1px solid #6ddaff;border-radius:9px;padding:5px 12px}.buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.buttons button,.profile .avatar{border-radius:9px;background:linear-gradient(#168ada,#08428c);border:1.5px solid #80d9ff;box-shadow:0 0 10px #0980ff99;color:white;padding:10px 17px;font-weight:850;font-size:clamp(11px,1.4vw,18px)}.buttons button.alt{background:#051d47}.profile input{margin-top:6px;width:100%;padding:10px;font-size:18px;border-radius:9px;color:#fff;background:#0b2b56;border:1px solid #64bcff}.profile label{font-weight:bold}.avatars{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.profile .avatar{font-size:clamp(17px,2.1vw,30px);min-width:56px;padding:8px}.profile .avatar[aria-pressed=true]{outline:3px solid #ffda4b}
#backFromCategory{top:2.4%;left:28%}#backFromFormat{top:2.4%;left:27%}
@media (max-height:440px){.panel{max-height:91dvh}.buttons{margin-top:10px}.playerHud{border-width:1px}}