: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%}}

/* V2 — distinct home screen with uncluttered action hierarchy. */
.mode-info{display:flex;gap:7px;flex-wrap:wrap;width:95%;margin:2% 0 4%}
.mode-info strong,.mode-info span{font-size:clamp(8px,.9vw,12px);font-weight:900;letter-spacing:.055em;padding:7px 9px;border:1px solid #8037b6aa;border-radius:7px;background:#1b0d2dd0;color:#d5cbe6}
.mode-info strong{color:#baff3a;border-color:#a4ff3b88;background:#21371dcc}
.landscape-note{color:#c0b4ca;font-size:clamp(10px,1vw,13px);font-weight:bold;margin:14px 0 0;letter-spacing:.025em}
.menu-best{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
#menu{background:#0a0712}
.menu-art{right:-2%;top:-4%;height:112%;width:77%;background-position:50% 52%}
.menu-shade{background:linear-gradient(90deg,#080410 0%,#10091cf9 26%,#130920d2 46%,#12081d12 83%),linear-gradient(0deg,#07050bc9,transparent 30%,transparent 77%,#08041077)}
.menu-panel{top:7%;width:51%}.graffiti{font-size:clamp(32px,5.9vw,86px);margin:4% 0 0}
.menu-buttons{width:min(74%,355px);gap:9px}.menu-buttons button{min-height:43px}
.menu-buttons .primary{min-height:53px;font-size:clamp(12px,1.65vw,21px);border-width:3px}
#stage:fullscreen{margin:auto;background:#090512}
/* Portrait menu remains in portrait. Gameplay rotates into real landscape presentation
   when a mobile browser does not grant an OS-level screen.orientation.lock(). */
@media (orientation:portrait){
 body:not(.game-active) #stage{position:relative;width:100vw;height:100dvh;max-height:100dvh;aspect-ratio:auto;box-shadow:none}
 body:not(.game-active) #menu .menu-art{right:-17%;top:-3%;width:130%;height:56%;background-size:cover;background-position:48% 46%;filter:saturate(1.14) contrast(1.12)}
 body:not(.game-active) #menu .menu-shade{background:linear-gradient(180deg,#12082280 0%,#11082055 29%,#0b0616fc 56%,#080512 100%)}
 body:not(.game-active) #menu .menu-panel{left:6%;top:45%;width:88%;height:auto}
 body:not(.game-active) #menu .eyebrow{font-size:clamp(9px,2.7vw,13px)}
 body:not(.game-active) #menu .graffiti{font-size:clamp(36px,10.2vw,65px);margin:3% 0 0}
 body:not(.game-active) #menu .menu-tag{font-size:clamp(10px,3vw,15px);margin:3% 0}
 body:not(.game-active) #menu .mode-info{margin:1% 0 4%;gap:5px}
 body:not(.game-active) #menu .mode-info span,body:not(.game-active) #menu .mode-info strong{font-size:clamp(8px,2.1vw,11px);padding:5px 6px}
 body:not(.game-active) #menu .menu-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}
 body:not(.game-active) #menu #startBtn{grid-column:1 / -1}
 body:not(.game-active) #menu #settingsBtn{grid-column:1 / -1}
 body:not(.game-active) #menu .menu-buttons button{min-height:43px;font-size:clamp(11px,2.9vw,15px);padding:9px 7px}
 body:not(.game-active) #menu .menu-buttons .primary{min-height:55px;font-size:clamp(16px,4vw,20px)}
 body:not(.game-active) #menu .menu-best{font-size:clamp(10px,3vw,14px);margin-top:4%}
 body:not(.game-active) #menu .landscape-note{font-size:clamp(9px,2.8vw,13px);margin-top:6px}
 body:not(.game-active) #menu .menu-footer{font-size:clamp(8px,2vw,10px);letter-spacing:.05em;bottom:1.4%}
 body:not(.game-active) .modal-box{width:92%;max-height:88%;padding:17px}
 body:not(.game-active) #infoContent{font-size:clamp(12px,3vw,16px);max-height:59dvh}
 body.rotate-game #stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;width:min(100dvh,177.77778vw);height:min(56.25dvh,100vw);max-height:none;aspect-ratio:16/9;margin:0;z-index:80}
 body.rotate-game #stage:fullscreen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
}
@media (orientation:portrait) and (max-height:660px){
 body:not(.game-active) #menu .menu-panel{top:40%}
 body:not(.game-active) #menu .mode-info{display:none}
 body:not(.game-active) #menu .menu-buttons{gap:5px}
 body:not(.game-active) #menu .menu-buttons button{min-height:37px}
 body:not(.game-active) #menu .menu-buttons .primary{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.menu-art{animation:none!important}button{transition:none!important}}