*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--deep:#142C68;--royal:#2465C8;--gold:#FFD43B;--green:#62DB31;--purple:#994AFF;--cream:#FFF6DB;--px:'Press Start 2P',monospace;--ui:'Nunito','Trebuchet MS',system-ui,sans-serif}
html,body{height:100%;overflow:hidden;background:#0b1740;font-family:var(--ui);color:var(--cream);user-select:none;-webkit-user-select:none;touch-action:manipulation}
[hidden]{display:none!important}
img{-webkit-user-drag:none;user-select:none}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:radial-gradient(ellipse at 50% 0,#3b7de6 0,#1d3f9a 45%,#0b1740 100%)}
.screen.on{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}}

/* ---------- buttons ---------- */
.btn{position:relative;padding:11px 16px;border-radius:12px;font:10px var(--px);letter-spacing:.5px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);
  border:3px solid #0b1a45;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.25),0 4px 0 #0b1a45;transition:transform .08s,filter .12s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 #0b1a45}
.btn.green{background:linear-gradient(#8bf04f,#3fae1c)}
.btn.blue{background:linear-gradient(#5aa0ff,#2465C8)}
.btn.gold{background:linear-gradient(#ffe777,#f0a800);color:#4a2c00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn.dark{background:linear-gradient(#35509a,#1b2f6e)}
.btn.big{font-size:15px;padding:15px 18px;width:100%}
.btn.sm{padding:8px 10px;font-size:9px}
.btnrow{display:flex;gap:8px;width:100%}.btnrow .btn{flex:1;white-space:nowrap;padding-left:6px;padding-right:6px;font-size:9px}
.ico{width:38px;height:38px;border-radius:10px;font:11px var(--px);background:linear-gradient(#35509a,#1b2f6e);border:2px solid #0b1a45;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #0b1a45;color:#fff}
.ico.off{opacity:.45}

/* ---------- title / loading / menu ---------- */
.title{font:clamp(17px,5.9vw,31px) var(--px);white-space:nowrap;color:var(--gold);text-align:center;line-height:1.25;letter-spacing:1px;
  text-shadow:3px 0 #0b1a45,-3px 0 #0b1a45,0 3px #0b1a45,0 -3px #0b1a45,3px 3px #0b1a45,-3px 3px #0b1a45,0 7px 0 #7a4a00,0 12px 18px rgba(0,0,0,.45)}
.title span{color:#8bf04f}
#loading{justify-content:center;gap:22px}
.loadbar{width:min(300px,70vw);height:22px;border-radius:12px;border:3px solid #0b1a45;background:#0b1a45;overflow:hidden;box-shadow:0 0 0 3px var(--gold)}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(#8bf04f,#3fae1c);transition:width .15s}
#loadtxt{font:9px var(--px);opacity:.8}
#menu{justify-content:center;overflow:hidden}
#menuGems{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}
#menuGems img{position:absolute;bottom:-90px;animation:floatup linear infinite;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
@keyframes floatup{to{transform:translateY(-125vh) rotate(360deg)}}
.menu-in{position:relative;width:min(430px,100%);max-height:100%;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow-y:auto;overflow-x:hidden}
.tagline{font:800 14px var(--ui);letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 2px 0 #0b1a45}
.versus{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;height:min(26vh,190px)}
.versus img{height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.m-pepe{max-width:38%;animation:idle 1.4s ease-in-out infinite}
.m-bear{max-width:50%;transform:scaleX(-1);animation:idleB 1.7s ease-in-out infinite}
.versus b{font:20px var(--px);color:#ff5f7a;text-shadow:3px 3px 0 #0b1a45;align-self:center;animation:pulse 1s infinite}
@keyframes idle{50%{transform:translateY(-5px) scale(1.02,.98)}}
@keyframes idleB{50%{transform:scaleX(-1) translateY(-4px) scale(1.02,.98)}}
@keyframes pulse{50%{transform:scale(1.2)}}
#nick{width:100%;height:42px;border-radius:12px;border:3px solid #0b1a45;background:rgba(11,26,69,.6);color:#fff;font:800 16px var(--ui);text-align:center;outline:none;user-select:text;-webkit-user-select:text}
#nick::placeholder{color:rgba(255,255,255,.5)}
.mini{font-size:12px;font-weight:700;opacity:.85;text-align:center}
@media(max-height:680px){.versus{height:19vh}.menu-in{gap:7px}.btn.big{padding:11px}}

/* ---------- map ---------- */
#map{background:#0b1740}
#mapView{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none;cursor:grab}
#mapWorld{position:absolute;left:0;top:0;width:1500px;height:1000px;transform-origin:0 0;will-change:transform}
#mapCv{position:absolute;left:0;top:0;width:1500px;height:1000px}
.node{position:absolute;width:40px;height:40px;margin:-20px;border-radius:50%;font:10px var(--px);color:#4a2c00;background:radial-gradient(circle at 35% 30%,#fff3a8,#f0a800);border:3px solid #0b1a45;box-shadow:0 4px 0 #0b1a45,inset 0 2px 0 rgba(255,255,255,.6);display:grid;place-items:center;transition:transform .12s}
.node:hover{transform:scale(1.12)}
.node.locked{background:radial-gradient(circle at 35% 30%,#8a94b8,#4a557e);color:#1b2550;opacity:.75;cursor:default}
.node.boss{width:50px;height:50px;margin:-25px;background:radial-gradient(circle at 35% 30%,#ff9fb0,#d2264a);color:#fff}
.node.boss.locked{background:radial-gradient(circle at 35% 30%,#8a94b8,#4a557e)}
.node.cur{animation:nodepulse 1s infinite}
@keyframes nodepulse{50%{box-shadow:0 4px 0 #0b1a45,0 0 0 8px rgba(255,212,59,.45)}}
.node .st{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;margin-top:2px}
.node .st img{width:13px;height:13px;object-fit:contain}
.node .st img.off{filter:grayscale(1) brightness(.5);opacity:.6}
#mapPepe{position:absolute;width:54px;margin:-84px 0 0 -27px;pointer-events:none;animation:idle 1s ease-in-out infinite;filter:drop-shadow(0 5px 3px rgba(0,0,0,.4));z-index:3}
.mapbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:linear-gradient(rgba(11,23,64,.92),rgba(11,23,64,0));pointer-events:none}
.mapbar>*{pointer-events:auto}
.mapinfo{display:flex;align-items:center;gap:6px;font:11px var(--px);background:rgba(11,26,69,.75);padding:6px 10px;border-radius:10px;border:2px solid var(--gold)}
.mapinfo img{width:22px;height:22px;object-fit:contain}
.mapinfo span{font:800 12px var(--ui);color:#8bf04f}
.zoom{display:flex;gap:6px}

/* ---------- game ---------- */
#game{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));gap:5px;padding-bottom:max(6px,env(safe-area-inset-bottom));padding-top:max(6px,env(safe-area-inset-top))}
.topbar{display:flex;align-items:center;gap:6px;width:100%;max-width:980px}
.chip{height:38px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:10px;background:rgba(11,26,69,.78);border:2px solid var(--royal);font:800 13px var(--ui);white-space:nowrap;overflow:hidden}
.chip.lvl{font:10px var(--px);color:var(--gold);border-color:var(--gold)}
.chip.obj{flex:1;min-width:0;text-overflow:ellipsis}
.chip.obj img{width:22px;height:22px;object-fit:contain;flex:none}
.chip.moves{font:10px var(--px)}
.chip.moves.low{color:#ff6a6a;border-color:#ff6a6a;animation:pulse .8s infinite}
#stage{flex:1;min-height:0;width:100%;max-width:980px;position:relative}
#cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
#fury{position:relative;width:100%;max-width:560px;height:38px;border-radius:12px;background:#0b1a45;border:3px solid #7a5a00;display:flex;align-items:center;overflow:hidden;flex:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
#fury .fbar{position:absolute;top:0;right:0;bottom:0;left:0}
#furyFill{display:block;height:100%;width:0;background:linear-gradient(#fff3a8,#FFD43B 40%,#f09a00);transition:width .25s;box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
#furyIco{position:relative;z-index:1;width:30px;height:30px;object-fit:contain;margin-left:4px}
#furyTxt{position:relative;z-index:1;flex:1;text-align:center;font:10px var(--px);color:#fff;text-shadow:0 2px 0 #0b1a45,2px 0 #0b1a45,-2px 0 #0b1a45,0 -2px #0b1a45}
#fury small{position:relative;z-index:1;font:700 9.5px var(--ui);margin-right:8px;color:#fff;text-shadow:0 1px 2px #000;text-align:right;line-height:1.1}
#fury.full{border-color:var(--gold);animation:furyglow .7s infinite;cursor:pointer}
@keyframes furyglow{50%{box-shadow:0 0 22px 4px rgba(255,212,59,.85);transform:scale(1.02)}}
#boosters{display:flex;gap:5px;width:100%;max-width:560px;flex:none}
.bst{position:relative;flex:1;aspect-ratio:1;max-height:62px;min-width:0;border-radius:11px;background:linear-gradient(#35509a,#16265c);border:2px solid #0b1a45;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 #0b1a45;display:grid;place-items:center;padding:3px}
.bst::before{content:'';display:block;padding-top:100%;grid-area:1/1}
.bst img{grid-area:1/1;width:88%;height:88%;object-fit:contain;transition:transform .12s}
.bst:hover img{transform:scale(1.12) rotate(-5deg)}
.bst b{position:absolute;right:-3px;bottom:-3px;min-width:19px;height:19px;border-radius:10px;background:var(--gold);color:#4a2c00;font:900 11px var(--ui);display:grid;place-items:center;border:2px solid #0b1a45}
.bst.empty{opacity:.45}.bst.empty b{background:#8a94b8}
.bst.aim{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold);animation:pulse .7s infinite}
#aimHint{position:absolute;left:50%;bottom:128px;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:rgba(11,26,69,.9);border:2px solid var(--gold);font:9px var(--px);pointer-events:none;z-index:5}
@media(min-aspect-ratio:13/10){#fury,#boosters{max-width:980px}.bst{max-height:54px}}

/* ---------- overlays ---------- */
.ov{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:14px;background:rgba(5,10,35,.72);overflow:auto;animation:fade .25s}
.panel{position:relative;width:min(400px,100%);padding:18px 16px;border-radius:20px;background:linear-gradient(#2a55b8,#142C68);border:4px solid var(--gold);box-shadow:0 0 0 4px #0b1a45,0 16px 40px rgba(0,0,0,.6),inset 0 3px 0 rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:pop .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.panel h2{font:15px var(--px);color:#fff;line-height:1.4;text-shadow:0 3px 0 #0b1a45}
.panel h2.gold{color:var(--gold)}.panel h2.red{color:#ff6a7a}
.panel .btn{width:100%}
.sub{font-size:13px;font-weight:700;opacity:.9;line-height:1.35}
.goal{font:10px var(--px);color:var(--gold);line-height:1.5}
.cbears{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:120px}
.cbears img{height:100%;width:auto;min-width:0;flex:0 1 auto;object-fit:contain;transform:scaleX(-1);filter:drop-shadow(0 5px 4px rgba(0,0,0,.4))}
.cstars,.stars{display:flex;gap:6px;justify-content:center}
.cstars img{width:26px;height:26px;object-fit:contain}
.stars img{width:62px;height:62px;object-fit:contain;animation:starin .5s cubic-bezier(.2,1.8,.4,1) backwards}
.stars img:nth-child(2){animation-delay:.25s;transform:translateY(-10px) scale(1.15)}.stars img:nth-child(3){animation-delay:.5s}
.stars img.off,.cstars img.off{filter:grayscale(1) brightness(.45);opacity:.7}
@keyframes starin{from{transform:scale(0) rotate(-180deg);opacity:0}}
.wpepe{height:96px;object-fit:contain;animation:idle .9s ease-in-out infinite;filter:drop-shadow(0 5px 4px rgba(0,0,0,.4))}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.grid div{padding:7px 4px;border-radius:10px;background:rgba(11,26,69,.6);border:2px solid var(--royal)}
.grid b{display:block;font:11px var(--px);color:var(--gold);margin-bottom:3px}
.grid span{font-size:11px;font-weight:700;opacity:.85}
.reward{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;color:#8bf04f}
.reward img{width:34px;height:34px;object-fit:contain}
.how{list-style:none;width:100%;display:flex;flex-direction:column;gap:5px;text-align:left}
.how li{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:10px;background:rgba(11,26,69,.6);font-size:12.5px;font-weight:700;line-height:1.25}
.how img{width:34px;height:34px;object-fit:contain;flex:none}
.how b{color:var(--gold)}
#confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-20px;width:10px;height:14px;animation:conf linear forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg)}}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);padding:9px 16px;border-radius:12px;background:rgba(11,26,69,.94);border:2px solid var(--gold);font:9px var(--px);line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:90;max-width:90vw}
#toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}