:root{color-scheme:dark;font-family:Trebuchet MS,system-ui,sans-serif;background:#100820}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}body{background:radial-gradient(circle at 50% -20%,#553080,#160b2d 60%,#090511)}button{font:inherit;color:#fff;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}#game-shell{width:100%;height:100%;display:grid;place-items:center}#game-card{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#24144a;box-shadow:0 25px 80px #000a}canvas{display:block;width:100%;height:100%}#hud{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:clamp(9px,2vw,22px) clamp(12px,3vw,30px);pointer-events:none;text-shadow:0 3px 0 #17102f}.brand{display:flex;gap:9px;align-items:center;font-family:Arial Rounded MT Bold,Trebuchet MS,sans-serif;letter-spacing:.08em;font-size:clamp(13px,2vw,22px)}.brand span{font-size:1.5em;filter:drop-shadow(0 3px 5px #f45)}.stats{display:flex;gap:10px}.stats span{background:#160d2ed9;border:2px solid #ffffff24;border-radius:999px;padding:7px 13px;font-weight:900;font-size:clamp(11px,1.7vw,17px);box-shadow:0 5px 15px #0005}#item-hud{color:#ffcf58}.top-button{position:absolute;z-index:6;right:18px;top:70px}.round{width:42px;height:42px;border-radius:50%;background:#211542cc;border:2px solid #ffffff26;box-shadow:0 4px #0d0820}#toast{position:absolute;z-index:5;top:18%;left:50%;transform:translate(-50%,-8px);opacity:0;padding:9px 18px;border-radius:999px;color:#fff;background:#21133eea;border:2px solid #ffce54;font-weight:900;pointer-events:none;transition:.2s;white-space:nowrap;box-shadow:0 8px 25px #0008}#toast.show{opacity:1;transform:translate(-50%)}.panel{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5% 16%;background:radial-gradient(circle at center,#3c266ebf,#120923ed 72%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.panel.hidden{display:none}.logo-mark{font-size:clamp(38px,7vw,74px);filter:drop-shadow(0 5px 10px #ff4b3b99);animation:float 2s ease-in-out infinite}.eyebrow{margin:0;color:#ffc849;font-size:clamp(10px,1.4vw,15px);letter-spacing:.22em;font-weight:900}h1,h2{margin:-2px 0 6px;font-family:Arial Rounded MT Bold,Trebuchet MS,sans-serif;font-size:clamp(48px,9vw,96px);line-height:.72;text-transform:uppercase;letter-spacing:-.05em;text-shadow:0 7px 0 #261244,0 12px 25px #0008}h1 em,h2 em{color:#ff8a32;font-style:normal}.panel p:not(.eyebrow){max-width:570px;margin:14px 0;font-size:clamp(12px,1.8vw,19px);line-height:1.35}.panel small{margin-top:12px;opacity:.68;font-size:clamp(8px,1.2vw,12px)}.primary{min-width:220px;border-radius:16px;background:linear-gradient(#ffd752,#ff972e);color:#2b153e;padding:13px 26px 11px;font-weight:900;letter-spacing:.04em;box-shadow:0 7px #b94c25,0 12px 20px #0007;border:2px solid #fff5ae}.primary:active{transform:translateY(5px);box-shadow:0 2px #b94c25}#controls{position:absolute;z-index:7;inset:auto 0 0;padding:0 max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:end;pointer-events:none}.control-group{display:flex;gap:10px;align-items:end}#controls button{pointer-events:auto;width:clamp(52px,8vw,78px);height:clamp(52px,8vw,78px);border-radius:50%;background:#231744c4;border:3px solid #ffffff55;box-shadow:0 6px #0e0920aa;font-size:clamp(20px,3vw,32px);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#controls button.active,#controls button:active{transform:translateY(4px);box-shadow:0 2px #0e0920aa;background:#63409fdd}#controls .jump{background:#2d6f93d6}#controls .action{background:#a33b55d9}#controls .shop{display:none;background:#c07922dc}#controls .shop.visible{display:block}#controls small{display:block;font-size:clamp(7px,1vw,10px);line-height:1;margin-top:-1px;font-weight:900}.rotate-note{display:none}@keyframes float{50%{transform:translateY(-7px) rotate(-2deg)}}@media(hover:hover)and (pointer:fine){#controls{opacity:.72}#controls button:hover{border-color:#ffd75d}}@media(orientation:portrait)and (max-width:700px){#game-card{width:100vw;height:56.25vw;max-height:none}#game-shell{align-content:center}.rotate-note{display:block;position:fixed;bottom:8%;width:80%;text-align:center;font-size:12px;color:#d8c8f3}#controls button{width:48px;height:48px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
