:root{color-scheme:dark;--ink:#0d0818;--purple:#8d26e1;--magenta:#ef22c5;--green:#aaff25;--cyan:#26e5f3}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;margin:0;overflow:hidden;background:#050309;font-family:Trebuchet MS,Arial,sans-serif;color:#fff;touch-action:none}body{display:grid;place-items:center}#stage{position:relative;aspect-ratio:16/9;width:min(100vw,177.77778dvh);max-height:100dvh;overflow:hidden;background:#160c23;box-shadow:0 0 80px #650e8d55;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.screen{position:absolute;inset:0;overflow:hidden}.hidden{display:none!important}#loading{z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;background:radial-gradient(ellipse at center,#3b155a,#0d0718 66%);font-weight:900;letter-spacing:.14em;font-size:clamp(10px,1.4vw,18px)}.loading-logo{font-family:Impact,Arial Black,sans-serif;font-size:clamp(28px,5vw,70px);font-style:italic;letter-spacing:-.035em;color:#c8ff39;text-shadow:4px 4px #7124bf,0 0 30px #abf822}.loading-logo b{color:#ff3bdb;display:block;text-align:center}.loadline{width:42%;height:9px;background:#25133a;border:2px solid #913aff;border-radius:20px;overflow:hidden}.loadline i{display:block;height:100%;width:0;background:linear-gradient(90deg,#adf52b,#2ce8dc);transition:width .25s}#menu{z-index:20;background:radial-gradient(circle at 80% 60%,#48146f,#0a0710 77%)}.menu-art{position:absolute;right:-3%;top:-8%;height:119%;width:73%;background-image:url('assets/ui/hero.jpg');background-position:center center;background-size:cover;filter:saturate(1.17) contrast(1.10);animation:artfloat 7s ease-in-out infinite alternate}@keyframes artfloat{from{transform:scale(1.01)}to{transform:scale(1.055) translateY(-1%)}}.menu-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080511 0%,#10091df5 28%,#160822a8 51%,#1a0a2400 84%),linear-gradient(0deg,#090512bc,transparent 25%,transparent 80%,#0905128c)}.menu-panel{position:absolute;left:5%;top:6%;width:48%;z-index:2}.eyebrow{font-size:clamp(8px,1.1vw,15px);letter-spacing:.17em;font-weight:900;color:#e5c3ff}.spark{color:#c5ff36}.graffiti{font-family:Impact,Arial Black,sans-serif;font-style:italic;letter-spacing:-.025em;font-weight:900;line-height:.89;font-size:clamp(32px,6.4vw,94px);margin:3.5% 0 0;color:#39def6;-webkit-text-stroke:1px #150326;text-shadow:4px 5px #511398,0 0 22px #8a2dd2}.graffiti em{color:#b5ff36;font-style:inherit}.graffiti span{display:block;font-size:.63em;color:#fb45d5;margin-top:.12em;text-shadow:4px 5px #53137a,0 0 19px #fb45d5}.menu-tag{font-size:clamp(8px,1.32vw,17px);font-weight:900;letter-spacing:.09em;color:#f3c7ff;margin:3% 0 4%}.menu-buttons{display:flex;flex-direction:column;gap:min(1.2vh,9px);width:min(76%,340px)}button{border:2px solid #8534c3;background:linear-gradient(180deg,#322044,#190e2b);border-radius:12px;color:white;padding:.63em 1.2em;cursor:pointer;font-size:clamp(10px,1.25vw,17px);font-weight:1000;letter-spacing:.06em;font-family:Trebuchet MS,Arial,sans-serif;box-shadow:0 3px 0 #080512,0 0 12px #6622b244;text-align:center}button:hover{filter:brightness(1.15);transform:translateY(-1px)}button:active{transform:translateY(2px)}button.primary{background:linear-gradient(180deg,#d5ff45,#87e900);border-color:#edffab;color:#10220a;box-shadow:0 4px 0 #356d00,0 0 24px #9dff3e71}button.primary span{font-size:1.1em}.menu-best{margin-top:3%;font-size:clamp(10px,1.15vw,14px);font-weight:900;letter-spacing:.09em;color:#b8a7d4}.menu-best strong{color:#c9ff55;font-size:1.5em;padding-left:.5em}.menu-footer{position:absolute;bottom:2.1%;left:4%;right:4%;text-align:center;color:#bd9ad1;letter-spacing:.19em;font-weight:900;font-size:clamp(7px,.9vw,12px)}.menu-footer span{color:#c9ff51;margin:0 1.5%}.pause-btn{position:absolute;z-index:10;right:2.1%;top:3.2%;width:55px;height:48px;padding:0;border-color:#7f5ea4;background:#1a1133c9;font-size:25px;border-radius:12px}.modal{z-index:35;background:radial-gradient(ellipse at center,#3d1b55da,#090617f3 70%);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.modal-box{max-height:94%;overflow:auto;width:min(76%,850px);border:3px solid #9945d8;border-radius:22px;background:linear-gradient(135deg,#241036ef,#100b20f7);box-shadow:0 0 0 5px #05051088,0 0 50px #b23ee569;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,1.2vh,13px);padding:clamp(16px,2.8vw,35px)}.modal-box h2{font-family:Impact,Arial Black,sans-serif;font-style:italic;letter-spacing:.03em;color:#f742d2;text-shadow:3px 3px #65218f;font-size:clamp(28px,5vw,65px);margin:0}.small-title{font-size:clamp(10px,1vw,14px);font-weight:900;color:#baff3d;letter-spacing:.22em}.compact{width:min(62%,560px)}.compact button{width:75%}.compact p{color:#cdbbdb;margin:0 0 12px}.result-box{width:min(78%,810px)}.record{font-size:clamp(12px,1.5vw,22px);color:#bafa37;font-weight:900;text-shadow:0 0 12px #aaf63d}.final-label{font-size:clamp(11px,1vw,16px);letter-spacing:.2em;color:#c2a9d1;font-weight:900}.final-score{font-family:Impact,Arial Black,sans-serif;font-size:clamp(45px,7vw,100px);line-height:1;color:white;text-shadow:0 0 18px #ae42fe}.stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:9px}.stats>div{background:#130d25;border:1px solid #753cac;border-radius:10px;display:flex;flex-direction:column;gap:3px;padding:10px 5px}.stats b{font-size:clamp(15px,2vw,29px)}.stats span{font-size:clamp(7px,.75vw,11px);color:#bcacce;font-weight:900;letter-spacing:.06em}.personal{display:flex;justify-content:center;gap:12px;color:#fbd44b;font-weight:900;font-size:clamp(10px,1.5vw,20px)}.personal strong{color:white}.result-buttons{display:flex;width:100%;gap:12px;justify-content:center}.result-buttons button{width:38%}.info-box{width:min(79%,820px);align-items:stretch}.info-box h2{text-align:center;font-size:clamp(22px,4vw,48px)}#infoContent{font-size:clamp(10px,1.3vw,18px);color:#e4d5ee;text-align:left;line-height:1.55;max-height:48vh;overflow:auto}#infoContent p{margin:.3em 0 .8em}#infoContent b{color:#c4ff43}#infoContent .score-row{display:flex;justify-content:space-between;border-bottom:1px solid #51336d;padding:5px 0}#infoBackBtn{align-self:center;width:50%}.rotate-screen{z-index:50;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;background:#0b0714ef;padding:20px}.rotate-screen h2{font-family:Impact,Arial Black,sans-serif;color:#baff32;font-size:clamp(24px,6vw,44px);margin:0}.rotate-screen p{font-size:16px}.rotate-icon{font-size:66px;color:#d474ff}.rotate-icon span{color:#aaff36}@media (max-aspect-ratio:1/1){#stage{height:auto}.menu-panel{top:6%}.modal-box{width:94%;padding:10px}.menu-buttons{gap:3px}}@media (max-height:420px){.pause-btn{height:34px;width:40px;font-size:18px}.modal-box{gap:5px;padding:10px}.compact button{padding:5px}.result-box{width:88%}.stats>div{padding:4px}.menu-panel{top:4%}.menu-tag{margin:2% 0 2%}}
