/* Sprayer's Legacy – Styles */
html,body{margin:0}
/* Layout: one-screen street game. Wall canvas behind everything (district backdrop + the player's own graffiti), screens on top, comic cards. Single committed dark look. */
:root{
  color-scheme:dark;
  --ink:#0d0c12; --panel:#1a1922; --panel2:#24222e; --line:#3b3947;
  --fg:#f6f3ff; --muted:#a8a4ba;
  --gold:#ffc83d; --hot:#ff2e88; --cyan:#19e3ff; --green:#4fbf6a; --grey:#9fb8d8;
  --display:'Bungee',Impact,'Arial Black',sans-serif;
  --tag:'Permanent Marker','Comic Sans MS',cursive;
  --body:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:17px;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#wall,#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
#wall{z-index:0}#fx{z-index:60;pointer-events:none}
#lvbg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .5s;pointer-events:none;background:#0b0714}
#lvbg.on{opacity:1}
.kaboom .kdex{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);width:min(60vw,260px);height:min(40vh,340px);z-index:3;pointer-events:none;filter:drop-shadow(5px 7px 0 #000)}
.danim{display:block;width:180px;height:170px;margin:-6px auto 2px}
.dreact{position:fixed;left:max(4px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));width:110px;height:150px;z-index:57;pointer-events:none;filter:drop-shadow(3px 4px 0 #000)}
.dreact canvas,.dstage canvas{width:100%;height:100%;display:block}
.dstage{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);width:min(70vw,320px);height:min(52vh,420px);z-index:61;pointer-events:none;filter:drop-shadow(5px 7px 0 #000) drop-shadow(0 0 30px rgba(255,31,143,.4))}
.hbeam{position:fixed;inset:0;z-index:58;pointer-events:none;background:radial-gradient(ellipse 40% 30% at 42% 14%,#fff,rgba(230,200,255,.95) 35%,rgba(255,255,255,.85) 70%,rgba(255,255,255,.7))}
.tool.hydt{color:#ff9ae8}.tool.chillt{color:#ffd54a}.tool.remixt{color:#19e3ff}
.bdrop{position:fixed;inset:0;z-index:58;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(30,107,255,.25),rgba(0,0,8,.96) 60%)}
.can.taped::after{content:'';position:absolute;inset:8% -6%;background:repeating-linear-gradient(-28deg,rgba(120,80,40,.95) 0 6px,rgba(60,40,20,.95) 6px 9px,transparent 9px 22px);border-radius:6px;pointer-events:none;z-index:4}.tool.dunkt{color:#ffb35c}
#lvbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
#lvbg .f{opacity:0;transition:opacity .8s}#lvbg.free .f{opacity:1}#lvbg.dark img{filter:brightness(.45) saturate(.6)}
#lvbg .veil{position:absolute;inset:0;background:radial-gradient(ellipse 62% 42% at 50% 58%,rgba(8,4,18,.62),rgba(8,4,18,.25) 70%,rgba(8,4,18,.05)),linear-gradient(180deg,rgba(8,4,18,.55),rgba(8,4,18,0) 18%,rgba(8,4,18,0) 80%,rgba(8,4,18,.6))}
#lvbg.free .veil{background:radial-gradient(ellipse 62% 42% at 50% 58%,rgba(8,4,18,.7),rgba(8,4,18,.35) 70%,rgba(8,4,18,.1)),linear-gradient(180deg,rgba(8,4,18,.55),rgba(8,4,18,0) 18%,rgba(8,4,18,0) 80%,rgba(8,4,18,.6))}
#lvbg .burst{position:absolute;left:50%;top:55%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff,rgba(255,230,120,.8) 30%,rgba(255,31,143,0) 70%);pointer-events:none}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:10px;box-sizing:border-box}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.btn{font-family:var(--display);font-size:19px;letter-spacing:.02em;background:var(--gold);color:#111;border:3px solid #111;border-radius:12px;padding:11px 20px;box-shadow:5px 5px 0 #111;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #111}
.btn.alt{background:var(--fg)}.btn.hot{background:var(--hot);color:#fff}.btn.cy{background:var(--cyan)}
.btn.sm{font-size:14px;padding:8px 12px;box-shadow:3px 3px 0 #111}
.link{color:var(--muted);text-decoration:underline;font-size:16px;padding:8px}
.stat{font-family:var(--display);font-size:15px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums;background:rgba(10,9,16,.8);border:2px solid #111;border-radius:999px;padding:3px 10px 3px 6px}
.stat svg{width:20px;height:20px;flex:none}
.stat small{font-family:var(--body);font-size:13px;color:var(--muted)}
.iconbtn{width:44px;height:44px;border-radius:12px;border:3px solid #111;background:var(--panel);box-shadow:3px 3px 0 #000;display:grid;place-items:center;flex:none}
.iconbtn svg{width:22px;height:22px;fill:var(--fg)}
.iconbtn[aria-pressed="false"] svg{opacity:.35}
.hud{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hud .mid{font-family:var(--display);font-size:15px;text-align:center;line-height:1.1;min-width:0;flex:1;text-shadow:2px 2px 0 #000}
.hud .mid small{display:block;font-family:var(--body);font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.statrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between}

/* Title */
#title{align-items:center;justify-content:center;text-align:center;gap:14px}
.logo{font-family:var(--display);font-weight:400;font-size:clamp(44px,13.5vw,100px);line-height:.88;margin:0;color:var(--gold);text-shadow:4px 4px 0 var(--hot),8px 8px 0 #111;transform:rotate(-6deg)}
.logo span{display:block;color:var(--cyan)}
.logoimg{margin:0;width:min(94vw,520px);position:relative;z-index:1;animation:logoIn .9s cubic-bezier(.2,1.4,.4,1) both}.logoimg img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(0,225,255,.35)) drop-shadow(0 6px 0 rgba(0,0,0,.6));animation:logoFloat 5s ease-in-out .9s infinite}
@keyframes logoIn{from{transform:scale(1.6) rotate(-6deg);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}}@keyframes logoFloat{50%{transform:translateY(-6px) rotate(-.6deg)}}
.subtag{font-family:var(--display);font-size:clamp(13px,4vw,20px);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--hot);border:3px solid #111;padding:3px 12px;transform:rotate(-6deg) translateY(-4px);box-shadow:4px 4px 0 #111;position:relative;z-index:1}
.tagline{font-family:var(--tag);font-size:22px;margin:4px 0;transform:rotate(-2deg);text-shadow:2px 2px 0 #000}
#title::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,4,22,.35) 0%,rgba(8,4,22,0) 22%,rgba(8,4,22,0) 70%,rgba(8,4,22,.75) 100%),url(art/title-city.jpg) center bottom/cover #120a26;animation:cityZoom 30s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes cityZoom{to{transform:scale(1.06)}}
.hero{height:min(42vh,380px);width:min(80vw,340px);position:fixed;left:50%;bottom:32.6vh;transform:translateX(-50%);z-index:0;pointer-events:none}
#title{justify-content:flex-start!important;padding-top:4vh}#title .tagline{margin-top:auto}#title>*:not(.hero){position:relative;z-index:1}
.hero canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px rgba(255,46,136,.45)) drop-shadow(5px 6px 0 #000)}
.hero img{height:100%;width:auto;filter:drop-shadow(5px 6px 0 #000)}
.hero img.k{height:76%;margin-right:-22px}.hero img.r{height:80%;margin-left:-30px}
.langs{display:flex;gap:8px}
.langs button{font-family:var(--display);font-size:13px;padding:6px 12px;border:2px solid #111;border-radius:999px;background:var(--panel);color:var(--muted)}
.langs button[aria-pressed="true"]{background:var(--cyan);color:#111}
.proto{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Comic */
#comic{justify-content:flex-end;align-items:stretch;gap:10px}
.cstage{position:fixed;left:0;right:0;top:0;bottom:var(--cfoot,210px);overflow:hidden;pointer-events:none}
.cstage .lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.05) 0 2deg,transparent 2deg 9deg);animation:spin 18s linear infinite;mix-blend-mode:screen}
.cstage .lines.hot{background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,46,136,.09) 0 2deg,transparent 2deg 8deg,rgba(25,227,255,.07) 8deg 10deg,transparent 10deg 16deg)}
.cstage .glow{position:absolute;left:50%;bottom:-10%;width:120%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,var(--gc,rgba(255,46,136,.35)),transparent 60%)}
@keyframes spin{to{transform:rotate(360deg)}}
.spw{position:absolute;bottom:0;transform:translateX(-50%);will-change:transform}
.spw{width:max-content}.spw img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(5px 7px 0 rgba(0,0,0,.75));transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.spw.rigw{aspect-ratio:auto}.spw.rigw canvas{display:block;width:100%;height:100%;filter:drop-shadow(5px 7px 0 rgba(0,0,0,.75))}
.spw.rigw.side canvas{filter:drop-shadow(5px 7px 0 rgba(0,0,0,.75)) brightness(.82)}
.onom{position:fixed;z-index:60;pointer-events:none;font:900 clamp(44px,13vw,96px)/1 Impact,'Arial Black',sans-serif;color:#ffe81a;-webkit-text-stroke:4px #111;paint-order:stroke fill;text-shadow:6px 6px 0 #ff2e88,10px 10px 0 #111;letter-spacing:-.02em;transform:translate(-50%,-50%) rotate(var(--rot))}
.onom.evil{color:#c9b6ff;text-shadow:6px 6px 0 #5a1aa8,10px 10px 0 #111}.onom.grey{color:#eef2f7;text-shadow:6px 6px 0 #6b7486,10px 10px 0 #111}
.hburst{position:absolute;left:50%;bottom:8%;width:150vmax;height:150vmax;transform:translate(-50%,50%);pointer-events:none;z-index:1;opacity:0;
 background:repeating-conic-gradient(from 0deg,var(--bc) 0 4deg,transparent 4deg 11deg);-webkit-mask:radial-gradient(circle,transparent 9%,#000 10%,#000 30%,transparent 55%);mask:radial-gradient(circle,transparent 9%,#000 10%,#000 30%,transparent 55%)}
.htone{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.0;background:radial-gradient(circle,var(--bc) 1.6px,transparent 2.2px) 0 0/12px 12px;-webkit-mask:radial-gradient(ellipse at 50% 75%,#000 0,transparent 60%);mask:radial-gradient(ellipse at 50% 75%,#000 0,transparent 60%)}
.impact{position:fixed;inset:0;z-index:59;pointer-events:none;background:#fff;mix-blend-mode:difference}
.spw.main{z-index:3}.spw.side img{filter:drop-shadow(5px 7px 0 rgba(0,0,0,.75)) brightness(.82)}
.spw.flip img{transform:scaleX(-1);animation-name:breatheF}
.spw.shadow img{filter:brightness(0) drop-shadow(0 0 16px #9a4dff) drop-shadow(0 0 36px #5a1aa8)}
@keyframes breathe{50%{transform:scale(1.018,1.03) rotate(-.6deg)}}
@keyframes breatheF{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) scale(1.018,1.03) rotate(.6deg)}}
.ccap{position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));text-align:center;font-family:var(--display);font-size:clamp(22px,7vw,40px);line-height:1;color:var(--gold);text-shadow:3px 3px 0 var(--hot),6px 6px 0 #000;transform:rotate(-3deg);pointer-events:none;padding-inline:16px;text-wrap:balance}
.cfoot{position:relative;z-index:4;display:flex;flex-direction:column;gap:10px}
.crow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wipe{position:fixed;inset:-10% -60%;z-index:90;pointer-events:none;background:linear-gradient(100deg,transparent 0 30%,#ff2e88 30% 41%,#111 41% 59%,#19e3ff 59% 70%,transparent 70%)}
.panel{width:min(100%,460px);aspect-ratio:4/5;max-height:54vh;border:5px solid #fff;border-radius:6px;position:relative;overflow:hidden;box-shadow:8px 8px 0 #000;background:#111;transform:rotate(-1deg)}
.panel .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel .bg.dark{filter:brightness(.28) saturate(0) contrast(1.2)}
.panel .tone{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.32) 1.2px,transparent 1.4px);background-size:7px 7px;pointer-events:none}
.panel .sp{position:absolute;transform:translateX(-50%);filter:drop-shadow(4px 5px 0 rgba(0,0,0,.7))}
.panel .sp.flip{transform:translateX(-50%) scaleX(-1)}
.panel .sp.shadow{filter:brightness(0) drop-shadow(0 0 14px #9a4dff) drop-shadow(0 0 30px #5a1aa8)}
.panel .cap{position:absolute;left:10px;top:10px;max-width:80%;background:var(--gold);color:#111;font-weight:700;font-size:16px;padding:5px 10px;border:3px solid #111;text-transform:uppercase;letter-spacing:.03em;z-index:2}
.bubble{position:relative;width:100%;min-height:76px;box-sizing:border-box;background:#fff;color:#111;font-family:var(--tag);font-size:clamp(16px,4.6vw,21px);line-height:1.15;padding:9px 12px;border:3px solid #111;border-radius:18px;display:flex;gap:10px;align-items:center;box-shadow:5px 5px 0 #000}
.bubble::before{content:"";position:absolute;top:-14px;left:var(--tail,50%);width:22px;height:22px;background:#fff;border-left:3px solid #111;border-top:3px solid #111;transform:translateX(-50%) rotate(45deg)}
.bubble.narr{border-radius:4px;background:#ffefb0;font-family:var(--body);font-weight:700;font-size:clamp(16px,4.4vw,20px)}
.bubble.narr::before{display:none}
.bubble img{width:46px;height:46px;border-radius:50%;border:3px solid #111;object-fit:cover;flex:none}
.bubble .who{display:block;font-family:var(--display);font-size:12px;color:var(--hot)}
.dots{display:flex;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--gold)}

/* City map */
#city{gap:8px}
.mapwrap{flex:0 1 auto;min-height:0;overflow-y:auto;border:4px solid #111;border-radius:16px;box-shadow:6px 6px 0 #000;background:#111}
.map{position:relative;width:100%;aspect-ratio:1086/1448}
.map>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.map .reg{position:absolute;inset:0}
.map .reg img{position:absolute;inset:0;width:100%;height:100%;clip-path:circle(var(--r,150%) at var(--cx) var(--cy));transition:clip-path 2.6s ease-out}
.mhot{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.mhot .pin{font-family:var(--display);font-size:12px;line-height:1.05;background:var(--gold);color:#111;border:3px solid #111;border-radius:10px;padding:5px 8px;box-shadow:3px 3px 0 #000;white-space:nowrap}
.mhot.free .pin{background:var(--green)}
.mhot.lock .pin{background:#2a2833;color:var(--muted)}
.mhot.boss .pin{background:#2a1640;color:#d6b8ff}
.mhot .sub{font-size:12px;font-weight:700;background:rgba(10,9,16,.85);padding:1px 6px;border-radius:6px}
.mhot.go .pin{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* District */
#dist{gap:8px}
.dbody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 4px 10px 0}
.bld{background:rgba(22,21,30,.92);border:3px solid #111;border-radius:16px;box-shadow:5px 5px 0 #000;padding:10px}
.bld h3{font-family:var(--display);font-weight:400;font-size:15px;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bld h3 small{font-family:var(--body);font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.bld.lockd{opacity:.55}
.nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.2fr) minmax(0,1fr);gap:6px}
.node.g{background:linear-gradient(135deg,#ff2e88,#9b4dff 55%,#19e3ff);color:#fff;font-size:15px;text-shadow:2px 2px 0 #000}
.node.g.done{background:linear-gradient(135deg,#7a2a55,#4a2a7a 55%,#1a5a6a)}
.node.g.next{animation:pulse 1.1s ease-in-out infinite}
.node.g svg{width:20px;height:20px}
.node{position:relative;aspect-ratio:1;border:3px solid #111;border-radius:12px;background:var(--panel2);box-shadow:3px 3px 0 #000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--display);font-size:20px;overflow:hidden}
.node .cr{display:flex;gap:1px}.node .cr svg{width:11px;height:11px}
.node.done{background:#2e2a3a}
.node.next{background:var(--cyan);color:#111;animation:pulse 1.4s ease-in-out infinite}
.node.locked{opacity:.4;cursor:default}
.node.boss{aspect-ratio:auto;background:#3a1530;font-size:11px}
.node.boss img{height:38px;width:auto;filter:drop-shadow(0 0 6px #7fb7ff)}
.node.boss.next{background:var(--hot);color:#fff}
.dfoot{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center}

/* Game */
.quip{align-self:center;margin-top:8px;background:#fff;color:#111;font-family:var(--tag);font-size:17px;line-height:1.15;padding:5px 14px 5px 5px;border:3px solid #111;border-radius:30px;transform:rotate(-1.5deg);max-width:94%;display:flex;align-items:center;gap:10px;box-shadow:4px 4px 0 #000}
.quip img{width:42px;height:42px;border-radius:50%;border:3px solid #111;object-fit:cover;flex:none}
.quip b{display:block;font-family:var(--display);font-size:11px;color:var(--hot);font-weight:400}
.movebox{font-family:var(--display);font-size:22px;line-height:1;text-align:center;background:rgba(10,9,16,.88);border:3px solid #111;border-radius:12px;padding:4px 8px;min-width:54px;font-variant-numeric:tabular-nums}
.movebox small{display:block;font-family:var(--body);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.movebox.warn{color:var(--hot);animation:pulse .9s infinite}
.arena{position:relative;height:clamp(150px,24vh,220px);margin-top:4px;display:flex;align-items:flex-end;justify-content:flex-start;gap:4px;padding-left:35%}
.arena .boss{height:100%;width:auto;max-width:38%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 12px rgba(160,60,255,.6)) drop-shadow(4px 5px 0 #000);animation:bob 2.2s ease-in-out infinite;transform-origin:50% 100%}
.arena .boss.small{height:74%;max-width:none;min-width:0;flex:0 1 auto;margin:0 -10px;filter:brightness(1.35) drop-shadow(0 0 10px rgba(200,90,255,.85)) drop-shadow(3px 4px 0 #000)}
.arena .boss.hit{animation:hit .5s}
.arena .boss.atk{animation:atk .7s}
.arena .boss.frozen{filter:grayscale(1) brightness(1.2) sepia(1) hue-rotate(160deg) saturate(3) drop-shadow(0 0 12px #9be9ff)}
@keyframes bob{50%{transform:translateY(-4px) rotate(-1.5deg)}}
@keyframes hit{20%{transform:translateX(-10px);filter:brightness(3)}50%{transform:translateX(8px)}}
@keyframes atk{30%{transform:scale(1.18) translateY(8px)}60%{transform:scale(1.1) rotate(3deg)}}
.hp{position:absolute;left:0;top:0;width:33%;display:flex;flex-direction:column;gap:4px;z-index:2;background:rgba(10,6,20,.72);border:2px solid #111;border-radius:10px;padding:6px 7px;box-sizing:border-box}
.hp .nm{font-family:var(--display);font-size:12px;line-height:1.15;color:#e6c9ff;text-shadow:2px 2px 0 #000}
.hp .bar{height:12px;border:2px solid #111;border-radius:8px;background:#2a2833;overflow:hidden}
.hp .bar i{display:block;height:100%;background:linear-gradient(90deg,#8f2bff,#ff4fd8);transition:width .5s}
.hp .tm{font-size:10.5px;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:4px;align-items:center;flex-wrap:wrap;text-shadow:1px 1px 0 #000}
.hp .tm i{width:9px;height:9px;border-radius:3px;background:#3b3947;border:2px solid #111}
.hp .tm i.on{background:var(--grey)}
.say{position:absolute;right:0;top:auto;bottom:10%;max-width:31%;font-size:13.5px!important;background:#e9eef8;color:#111;font-family:var(--tag);font-size:15px;line-height:1.1;padding:6px 10px;border:3px solid #111;border-radius:14px;z-index:2;transform:rotate(1.5deg)}
#board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#rack{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gy,26px) var(--gx,12px);padding-top:16px}
.tools{display:flex;justify-content:center;gap:10px;padding-bottom:4px}
.tools:has(.tool:not([hidden]):nth-of-type(n+5)){gap:5px}.tools:has(.tool:not([hidden]):nth-of-type(n+5)) .tool{width:auto;flex:1 1 0;min-width:0;max-width:76px;font-size:10px;letter-spacing:0;padding:5px 1px;border-width:2px;box-shadow:3px 3px 0 #000}.tools:has(.tool:not([hidden]):nth-of-type(n+5)) .tool svg{width:19px;height:19px}.tools:has(.tool:not([hidden]):nth-of-type(n+5)) .badge{font-size:10px;min-width:18px;height:18px;top:-8px;right:-5px}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;padding:6px 2px;border:3px solid #111;border-radius:14px;background:var(--panel);box-shadow:4px 4px 0 #000;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tool svg{width:22px;height:22px;fill:var(--gold)}
.tool .badge{position:absolute;top:-10px;right:-8px;background:var(--hot);color:#fff;font-family:var(--display);font-size:12px;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;border:2px solid #111;padding:0 3px}
.tool:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.tool[disabled]{opacity:.4}
.tool.ice svg{fill:none}

/* Spray can + neon glitter paint */
.can{width:var(--cw,60px);height:calc(var(--cw,60px)*2.425);position:relative;transition:transform .3s cubic-bezier(.3,.7,.3,1),filter .2s;cursor:pointer;flex:none;filter:drop-shadow(3px 5px 0 rgba(0,0,0,.55))}
.can .tex{position:absolute;inset:0;background:url(art/can.webp) center/100% 100% no-repeat;filter:var(--skinf,none)}
.can .paint{position:absolute;left:28%;right:29%;top:27.5%;bottom:11.5%;border-radius:calc(var(--cw,60px)*.08);display:flex;flex-direction:column-reverse;overflow:hidden;background:rgba(0,0,0,.35)}
.can .paint::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.32) 0 7%,transparent 7% 16%,rgba(255,255,255,.16) 16% 20%,transparent 20%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:2}
.seg{position:relative;height:25%;flex:none;background:linear-gradient(100deg,color-mix(in srgb,var(--c),#000 18%) 0%,var(--c) 26%,color-mix(in srgb,var(--c),#fff 38%) 52%,var(--c) 74%,color-mix(in srgb,var(--c),#000 22%) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.35),inset 0 0 10px color-mix(in srgb,var(--c),#fff 30%),0 0 12px var(--c),0 0 4px var(--c)}
.seg::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none}
@keyframes glitter{to{background-position:9px 16px,-9px 26px}}
.seg.fresh{animation:fill .34s ease-out both;transform-origin:bottom}
@keyframes fill{from{transform:scaleY(0)}}
.can.queued{filter:drop-shadow(0 0 3px var(--hot)) drop-shadow(0 0 12px var(--hot))}
.can.sel{transform:translateY(-18px);filter:drop-shadow(0 0 3px var(--cyan)) drop-shadow(0 0 12px var(--cyan))}
.can.sealed{filter:drop-shadow(0 0 4px var(--sc)) drop-shadow(0 0 16px var(--sc));animation:sealpop .45s cubic-bezier(.2,1.6,.4,1)}
.can.greyed .seg{filter:grayscale(1) brightness(.7)}
.can.greyed .seg:last-child{background:repeating-linear-gradient(90deg,#8e8e96 0 3px,#a8a8b0 3px 5px);box-shadow:none}
.can .cover{position:absolute;left:50%;bottom:-2%;width:124%;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(2px 4px 0 rgba(0,0,0,.6));z-index:3}
.can .lockb{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-family:var(--display);font-size:11px;background:#2a2833;color:#cfe4ff;border:2px solid #111;border-radius:8px;padding:1px 5px;white-space:nowrap;z-index:4}
.can.lift{z-index:6}
.can.wig{animation:wig .32s}
@keyframes sealpop{40%{transform:scale(1.12,.9)}}
@keyframes wig{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.stream{position:fixed;width:9px;margin-left:-4.5px;border-radius:5px;z-index:30;transform-origin:top;animation:pour .5s ease-in-out forwards;pointer-events:none}
@keyframes pour{0%{transform:scaleY(0)}35%{transform:scaleY(1)}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(30%);opacity:0}}
.flyer{position:fixed;left:0;top:0;z-index:50;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6))}
.string{position:fixed;z-index:49;height:2px;background:#cfd6e4;transform-origin:0 50%;pointer-events:none;box-shadow:0 0 6px #7fb7ff}
#app.shake{animation:shake .35s}
@keyframes shake{20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}

/* Paint mode */
#paint{gap:8px}
.ptitle{text-align:center;font-family:var(--display);font-size:clamp(18px,5.5vw,26px);color:var(--gold);text-shadow:3px 3px 0 #000;line-height:1.05}
.ptitle small{display:block;font-family:var(--body);font-size:15px;color:var(--fg);text-shadow:1px 1px 0 #000;letter-spacing:.04em}
.pspace{flex:1;position:relative;min-height:0}
.dexp{position:absolute;bottom:-2vh;height:min(40vh,340px);transform:translateX(-50%);transition:left .1s linear;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.7));pointer-events:none}
.pal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:rgba(10,9,16,.9);border:3px solid #111;border-radius:16px;padding:10px;box-shadow:5px 5px 0 #000}
.pal .hint{width:100%;text-align:center;font-weight:700;font-size:16px;color:var(--fg);margin-bottom:2px}
.blob{width:42px;height:42px;border-radius:50% 46% 52% 44%;border:3px solid #111;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c),#fff 55%),var(--c) 45%,color-mix(in srgb,var(--c),#000 35%));box-shadow:2px 3px 0 #000;position:relative}
.blob:active{transform:scale(.9)}
.sets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.cset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:3px solid #111;border-radius:12px;background:#24222e;color:#fff;font-weight:700;font-size:13px;box-shadow:3px 3px 0 #000}.cset .sw{display:flex;gap:2px;font-size:22px;min-height:24px;align-items:center}.cset .sw i{width:12px;height:24px;border-radius:3px;display:block}.cset:active{transform:scale(.95)}
.blob.big{width:auto;min-width:120px;height:64px;border-radius:16px;display:grid;place-items:center}
.blob.big span{font-family:var(--display);font-size:14px;color:#888;mix-blend-mode:difference;color:#fff}
.symb{display:flex;flex-direction:column;align-items:center;gap:2px;width:30%;max-width:110px;padding:4px;border:3px solid #111;border-radius:12px;background:#24222e;box-shadow:3px 3px 0 #000;font-weight:700;font-size:13px}
.symb canvas{width:100%;height:auto;aspect-ratio:1}
.blob.lock{background:#2a2833}
.blob.lock::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);color:#555;font-size:16px}

/* Kaboom + overlays */
.kaboom{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(255,46,136,.35),rgba(10,9,16,.85) 70%)}
.kaboom .burst{position:relative;width:min(92vw,460px);aspect-ratio:1.3;display:grid;place-items:center;animation:boom .9s cubic-bezier(.2,1.6,.4,1) both}
.kaboom svg{position:absolute;inset:0;width:100%;height:100%}
.kaboom .w{position:relative;font-family:var(--display);font-size:clamp(40px,12vw,64px);line-height:.9;text-align:center;color:#fff;text-shadow:4px 4px 0 var(--hot),8px 8px 0 #000;transform:rotate(-8deg)}
.kaboom .w span{display:block;color:var(--gold)}
@keyframes boom{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.vs{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:linear-gradient(115deg,#ff2e88 0 49.6%,#0d0c12 49.6% 50.4%,#30405e 50.4%);overflow:hidden}
.vs img{position:absolute;bottom:8%;height:58%;filter:drop-shadow(6px 6px 0 #000)}
.vs .l{left:-4%;animation:inl .5s ease-out both}.vs .r{right:-4%;animation:inr .5s ease-out both}
.vs .t{position:relative;font-family:var(--display);font-size:clamp(70px,24vw,140px);color:var(--gold);text-shadow:6px 6px 0 #000;animation:boom .6s .3s cubic-bezier(.2,1.6,.4,1) both;z-index:2}
.vs .n{position:absolute;top:12%;left:0;right:0;text-align:center;font-family:var(--display);font-size:clamp(20px,6vw,30px);text-shadow:3px 3px 0 #000;z-index:2}
.vs .n small{display:block;font-family:var(--tag);font-size:18px;color:var(--gold)}
@keyframes inl{from{transform:translateX(-80%)}}@keyframes inr{from{transform:translateX(80%)}}
.flash{position:fixed;inset:0;background:#fff;z-index:80;pointer-events:none;animation:flash .7s ease-out forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}
.combo{position:fixed;left:50%;top:40%;z-index:65;font-family:var(--display);font-size:clamp(36px,11vw,76px);color:var(--gold);text-shadow:4px 4px 0 var(--hot),7px 7px 0 #000;pointer-events:none;white-space:nowrap;animation:combo 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
.combo.evil{color:#dbe6ff;text-shadow:4px 4px 0 #3d5a8a,7px 7px 0 #000}
@keyframes combo{0%{transform:translate(-50%,-50%) rotate(-10deg) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.15);opacity:1}70%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);opacity:1}100%{transform:translate(-50%,-80%) rotate(-8deg) scale(1);opacity:0}}
.toast{position:fixed;left:50%;bottom:calc(118px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:75;background:#fff;color:#111;font-weight:700;font-size:16px;padding:10px 16px;border:3px solid #111;border-radius:12px;max-width:min(88vw,380px);text-align:center;box-shadow:4px 4px 0 #000}
.overlay{position:fixed;inset:0;z-index:55;background:rgba(8,7,12,.74);display:flex;align-items:center;justify-content:center;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:14px}
.card{width:min(100%,400px);max-height:100%;overflow-y:auto;background:var(--panel);border:4px solid #111;border-radius:18px;box-shadow:8px 8px 0 #000;padding:18px 16px;text-align:center;display:flex;flex-direction:column;gap:11px;align-items:center;animation:cardin .45s cubic-bezier(.2,1.4,.4,1);box-sizing:border-box}
@keyframes cardin{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.card h3{font-family:var(--display);font-weight:400;font-size:27px;margin:0;color:var(--gold);text-shadow:3px 3px 0 #000;line-height:1.05;text-wrap:balance}
.card p{margin:0;color:var(--muted);font-size:17px}
.card p b{color:var(--fg)}
.card .say2{font-family:var(--tag);color:var(--fg);font-size:20px}
.card .face{width:104px;height:104px;border-radius:16px;border:4px solid #111;object-fit:cover;box-shadow:5px 5px 0 #000}
.card .art{height:150px;width:auto;filter:drop-shadow(4px 5px 0 #000)}
.bigcrowns{display:flex;gap:10px}
.bigcrowns svg{width:46px;height:46px}
.bigcrowns svg.on{animation:crownin .5s cubic-bezier(.2,1.6,.4,1) both}
.bigcrowns svg:nth-child(2){animation-delay:.18s}.bigcrowns svg:nth-child(3){animation-delay:.36s}
@keyframes crownin{from{transform:scale(0) rotate(-30deg)}}
.reward{font-family:var(--display);font-size:18px;color:var(--green);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.reward .sw{width:22px;height:22px;border-radius:50%;border:2px solid #111;background:var(--c)}
.reward svg{width:22px;height:22px}
.polaroid{width:min(80vw,320px);transform:rotate(-3deg);filter:drop-shadow(6px 8px 0 #000)}
.polaroid canvas{width:100%;height:auto;display:block;animation:develop 3s ease-out both}
@keyframes develop{0%{filter:sepia(1) brightness(1.9) contrast(.4) blur(3px)}100%{filter:none}}
.muralimg{display:block;max-width:100%;max-height:58vh;margin:0 auto 10px;border:4px solid #111;border-radius:8px;box-shadow:0 0 24px rgba(255,31,143,.45),4px 6px 0 #000}
.album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.album canvas{width:100%;height:auto;transform:rotate(-2deg);filter:drop-shadow(3px 4px 0 #000)}
.album canvas:nth-child(even){transform:rotate(2deg)}
.shopbody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-block:14px 8px}
.shopbody h4{font-family:var(--display);font-size:15px;font-weight:400;margin:6px 0 0;color:var(--gold);letter-spacing:.04em}
.shopgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.item{background:var(--panel);border:3px solid #111;border-radius:14px;box-shadow:4px 4px 0 #000;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.item .big{font-family:var(--display);font-size:22px;line-height:1;color:var(--gold);min-height:44px;display:grid;place-items:center}
.item .big svg{width:38px;height:38px}
.item .big img{height:44px;width:auto}
.item .nm{font-weight:700;font-size:17px}
.item .sub{color:var(--muted);font-size:14px;line-height:1.2;min-height:2.4em}
.item.locked{opacity:.5}
.buy{font-family:var(--display);font-size:14px;background:var(--gold);color:#111;border:3px solid #111;border-radius:10px;padding:7px 12px;box-shadow:3px 3px 0 #111;display:inline-flex;align-items:center;gap:5px;margin-top:auto}
.buy svg{width:18px;height:18px}
.buy.own{background:var(--fg)}.buy.on{background:var(--cyan)}.buy.real{background:var(--hot);color:#fff}.buy[disabled]{background:#3b3947;color:var(--muted)}
.note{color:var(--muted);font-size:14px;margin:0}
.ad{font-family:var(--display);font-size:64px;color:var(--gold);text-shadow:4px 4px 0 #000}
@media (prefers-reduced-motion:reduce){
  #app.shake,.node.next,.mhot.go .pin,.can.sealed,.arena .boss,.seg::after,.movebox.warn{animation:none}
  .combo{animation-duration:.01s;animation-fill-mode:none}
}

/* main menu */
#title .menu{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(92vw,420px);position:relative;z-index:1}
#title .menu .btn{width:100%;font-size:22px;padding:13px 20px}
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.mbtn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border:3px solid #111;border-radius:12px;background:var(--panel);color:var(--fg);font-family:var(--display);font-size:12.5px;letter-spacing:.02em;box-shadow:3px 3px 0 #000}
.mbtn svg{width:24px;height:24px}.mbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.gear{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:5}
.gear svg{width:24px;height:24px;fill:var(--fg)}

/* title layout v2: logo top, compact menu left, DEX right */
#title{--side:max(16px,calc(50% - 310px));padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
#title .logoimg{width:min(90vw,500px,52vh)}
#title .hero{left:auto;right:max(-7vw,calc(50% - 330px));transform:none;bottom:max(10px,env(safe-area-inset-bottom,0px));height:min(56vh,480px);width:min(54vw,300px)}
#title .tagline{align-self:flex-start;margin-left:var(--side);font-size:clamp(16px,4.6vw,20px);text-align:left;max-width:56vw}
#title .menu{align-self:flex-start;margin-left:var(--side);width:min(56vw,290px);gap:8px}
#title .menu .btn{font-size:clamp(16px,4.6vw,19px);padding:10px 14px}
#title .mrow{gap:6px}
#title .mbtn{font-size:clamp(9.5px,2.7vw,11.5px);padding:7px 2px;gap:2px;border-width:2px;border-radius:10px;box-shadow:2px 2px 0 #000}
#title .mbtn svg{width:20px;height:20px;flex:none}
#title .mrow{grid-template-columns:1fr 1fr}
#title .mbtn{flex-direction:row;justify-content:flex-start;gap:6px;padding:8px 9px;text-align:left;line-height:1.05}
#title .mbtn.shopt{border-color:#ffc21a;color:#ffd54a;box-shadow:2px 2px 0 #000,0 0 10px rgba(255,194,26,.35)}
#title .gear{position:fixed}
#title .proto{align-self:flex-start;margin-left:var(--side);font-size:10px;margin-top:2px}
/* settings */
.setrow{display:flex;align-items:center;gap:10px;width:100%;margin:6px 0;text-align:left}
.setrow label{flex:0 0 92px;font-weight:700}
.setrow input[type=range]{flex:1;accent-color:var(--cyan)}
.setrow .val{width:38px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.tog{border:3px solid #111;border-radius:999px;padding:5px 14px;font-weight:700;background:#2a2833;color:var(--muted)}
.tog[aria-pressed=true]{background:var(--cyan);color:#111}
/* cinema */
.cine-list{display:flex;flex-direction:column;gap:6px;width:100%;max-height:52vh;overflow:auto;text-align:left}
.cine-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid #111;border-radius:10px;background:#1d1b26}
.cine-row.locked{opacity:.45}
.cine-row input{width:20px;height:20px;accent-color:var(--hot)}
.cine-row .nm{flex:1;font-weight:700}.cine-row small{display:block;color:var(--muted);font-weight:400}
.cine-row button{border:2px solid #111;border-radius:8px;background:var(--gold);color:#111;font-weight:800;padding:4px 10px}
/* album */
.alb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-height:56vh;overflow:auto}
.alb-tile{border:3px solid #111;border-radius:10px;background:#1d1b26;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg);font-weight:700;font-size:13px}
.alb-tile img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;background:#0d0b14}
.alb-tile.locked .ph{width:100%;aspect-ratio:2/3;border-radius:6px;background:repeating-linear-gradient(45deg,#15131c 0 10px,#1b1924 10px 20px);display:grid;place-items:center;color:var(--muted);font-size:26px}
.alb-h{width:100%;text-align:left;font-family:var(--display);font-size:14px;color:var(--muted);margin:8px 0 2px}
/* mixed murals */
#mix{gap:8px}
.mixview{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.mixview img{max-height:calc(100dvh - 430px);max-width:100%;border:3px solid #111;border-radius:8px;box-shadow:0 0 22px rgba(0,225,255,.3),4px 6px 0 #000}
.mixctl{display:flex;flex-direction:column;gap:5px;background:rgba(12,10,20,.92);border:3px solid #111;border-radius:14px;padding:8px 8px max(8px,env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(0,0,0,.5);padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
.mixrow{display:flex;align-items:center;gap:6px}
.mixrow .lb{flex:0 0 88px;font-size:12.5px;color:#cfc8e8;font-weight:700}
.mixrow .nm{flex:1;text-align:center;font-weight:800;font-size:14px;background:#1d1b26;border:2px solid #111;border-radius:8px;padding:5px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mixrow button{width:36px;height:32px;border:2px solid #111;border-radius:8px;background:var(--panel);color:var(--fg);font-weight:900;font-size:16px}
.mixbtns{display:flex;gap:8px;margin-top:4px}.mixbtns .btn{flex:1;font-size:16px;padding:9px 10px}
/* map mini-DEX */
.mpath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mpath path{fill:none;stroke:var(--hot);stroke-width:3.2;stroke-dasharray:7 6;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,31,143,.8))}
.mpath .dot{fill:var(--cyan);stroke:#111;stroke-width:1.5;vector-effect:non-scaling-stroke}
.minidex{position:absolute;width:auto;height:17%;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.7));z-index:3}
.minidex img{height:100%;width:auto;display:block;transform-origin:50% 100%;animation:mdIdle 1.8s ease-in-out infinite}
.minidex.walk img{animation:mdWalk .32s ease-in-out infinite}
@keyframes mdIdle{50%{transform:scale(1.03,.97)}}
@keyframes mdWalk{0%,100%{translate:0 0}50%{translate:0 -4%}}
.newpin{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:3px solid var(--cyan);pointer-events:none;animation:newpin 1.4s ease-out infinite}
@keyframes newpin{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
/* boss cinematics */
.cine{position:fixed;inset:0;z-index:85;overflow:hidden;background:rgba(5,3,12,.55);pointer-events:auto}
.cine .cface{position:absolute;left:50%;bottom:0;height:92vh;image-rendering:auto;width:auto;max-width:none;filter:contrast(1.1) saturate(1.1) drop-shadow(0 0 40px rgba(0,0,0,.8))}
.cine .csay{position:absolute;left:50%;top:12%;width:92vw;transform:translateX(-50%) rotate(-4deg);font:900 clamp(30px,9vw,64px)/1 Impact,'Arial Black',sans-serif;color:#ffe600;-webkit-text-stroke:3px #111;paint-order:stroke fill;text-shadow:5px 5px 0 #ff1f8f,9px 9px 0 #111;white-space:normal;text-align:center}
.cine .csay small{display:block;font-size:.42em;color:#fff;text-shadow:3px 3px 0 #111;margin-top:6px;letter-spacing:.04em}
.cine .bar{position:absolute;left:0;right:0;height:28vh;background:#000}.cine .bar.t{top:0}.cine .bar.b{bottom:0}
.cine .band{position:absolute;left:0;right:0;top:28vh;height:44vh;display:flex}
.cine .band .half{flex:1;overflow:hidden;position:relative}
.cine .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:contrast(1.25) saturate(1.2)}
.cine .band .half.r img{transform:scaleX(-1)}
.cine .band::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:#ff1f8f;box-shadow:0 0 18px #ff1f8f;transform:translateX(-50%)}
.cine.western .csay{top:auto;bottom:6vh;color:#fff;text-shadow:4px 4px 0 #ff1f8f,8px 8px 0 #111}
.cine.western .lbl{position:absolute;top:22vh;font:900 13px/1 sans-serif;letter-spacing:.2em;color:#fff;background:#111;padding:4px 8px;border:2px solid var(--cyan)}
.cine.western .lbl.l{left:10px}.cine.western .lbl.r{right:10px}
.round{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:86;font:900 clamp(40px,13vw,90px)/1 Impact,'Arial Black',sans-serif;color:#00e1ff;-webkit-text-stroke:3px #111;paint-order:stroke fill;text-shadow:6px 6px 0 #111;pointer-events:none}
#rack.quake{animation:quake .09s linear 12}
#rack.quake .can{animation:canq .18s ease-in-out 6}
@keyframes quake{0%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,-2px)}100%{transform:translate(0,0)}}
@keyframes canq{50%{transform:rotate(6deg) translateY(-6px)}}
/* daily + chest */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}
.day{border:2px solid #111;border-radius:8px;background:#1d1b26;padding:6px 2px;font-size:11px;font-weight:800;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.day b{font-size:13px;color:var(--fg)}.day.got{background:#173b2c;color:#7dffb0}.day.now{background:var(--gold);color:#111;transform:scale(1.08);box-shadow:0 0 14px rgba(255,191,31,.7)}
.day.now b{color:#111}
.chest{font-size:84px;line-height:1;animation:chest .9s ease-in-out infinite}
.chest.open{animation:none;transform:scale(1.2)}
@keyframes chest{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}

/* ===== living map ===== */
.mapfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.mapfx canvas{position:absolute;inset:0;width:100%;height:100%}
.mapfog{position:absolute;inset:-20%;background:radial-gradient(ellipse 30% 14% at 20% 30%,rgba(200,190,230,.16),transparent 70%),radial-gradient(ellipse 26% 12% at 70% 55%,rgba(200,190,230,.13),transparent 70%),radial-gradient(ellipse 34% 15% at 40% 80%,rgba(200,190,230,.12),transparent 70%);animation:fog 38s linear infinite}
.mapfog.b{animation-duration:55s;animation-direction:reverse;opacity:.8}
@keyframes fog{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.veil{position:absolute;border-radius:50%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1;background:radial-gradient(circle,rgba(20,10,35,.55) 0,rgba(20,10,35,.35) 45%,transparent 70%);animation:veil 6s ease-in-out infinite}
@keyframes veil{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.8}}
.veil.pop{animation:veilpop 1.2s ease-out forwards}
@keyframes veilpop{to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.beam{position:absolute;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 12deg,rgba(160,80,255,.22) 15deg,transparent 19deg,transparent 160deg,rgba(160,80,255,.18) 164deg,transparent 168deg,transparent 360deg);animation:beam 9s linear infinite;mix-blend-mode:screen}
.beam.b{animation-duration:13s;animation-direction:reverse;opacity:.7}
@keyframes beam{to{transform:translate(-50%,-50%) rotate(360deg)}}
.tglow{position:absolute;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(150,60,255,.55),transparent 65%);animation:tglow 2.4s ease-in-out infinite}
@keyframes tglow{50%{opacity:.4;transform:translate(-50%,-50%) scale(1.25)}}
/* ===== app-wide motion ===== */
.screen.enter{animation:screenIn .45s cubic-bezier(.2,.9,.3,1)}
@keyframes screenIn{from{clip-path:polygon(0 0,0 0,-20% 100%,0 100%);filter:brightness(1.6)}to{clip-path:polygon(0 0,140% 0,120% 100%,0 100%);filter:none}}
.wipebar{position:fixed;top:0;bottom:0;width:38vw;z-index:95;pointer-events:none;background:linear-gradient(90deg,transparent,var(--hot) 30%,var(--cyan) 70%,transparent);filter:blur(6px);opacity:.7;transform:skewX(-14deg)}
.ldrip{position:absolute;top:calc(100% - 18px);width:7px;border-radius:0 0 6px 6px;background:var(--c);height:0;animation:ldrip 7s ease-in infinite;box-shadow:0 0 8px var(--c)}
.ldrip::after{content:'';position:absolute;left:50%;bottom:-6px;width:11px;height:11px;border-radius:50%;background:var(--c);transform:translateX(-50%)}
@keyframes ldrip{0%,20%{height:0;opacity:1}70%{height:22px;opacity:1}100%{height:26px;opacity:0}}
.coinfly{position:fixed;z-index:96;width:22px;height:22px;pointer-events:none}

/* ===== studio boot intro ===== */
#boot{position:fixed;inset:0;z-index:200;background:#050308;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;overflow:hidden}
#boot .tapgo{font-family:var(--display);letter-spacing:.3em;font-size:14px;color:#8f86a8;animation:tapgo 1.6s ease-in-out infinite}
@keyframes tapgo{50%{opacity:.25}}
#boot .wallb{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(60,40,90,.35),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 54px);opacity:0;transition:opacity .8s}
#boot.on .wallb{opacity:1}
#boot .tag{position:relative;font-family:'Permanent Marker',cursive;font-size:clamp(46px,15vw,92px);line-height:.95;text-align:center;transform:rotate(-6deg);white-space:nowrap}
#boot .tag .l{display:inline-block;color:#fff;opacity:0;filter:blur(10px);text-shadow:0 0 6px #00e1ff,0 0 18px #00e1ff,0 0 42px #8f2bff,4px 4px 0 #ff1f8f}
#boot .tag .l.in{animation:sprayIn .26s ease-out forwards}
@keyframes sprayIn{0%{opacity:0;filter:blur(12px);transform:scale(1.4)}60%{opacity:1;filter:blur(2px)}100%{opacity:1;filter:none;transform:none}}
#boot .tag .row2{display:block;font-size:.5em;margin-top:6px;letter-spacing:.06em}
#boot .tag.hit .l{animation:none;opacity:1;filter:none;text-shadow:0 0 10px #00e1ff,0 0 30px #00e1ff,0 0 70px #8f2bff,5px 5px 0 #ff1f8f}
#boot .bdrip{position:absolute;top:88%;width:6px;border-radius:0 0 5px 5px;background:#00e1ff;box-shadow:0 0 8px #00e1ff;height:0;transition:height 2.2s ease-in}
#boot .slogan{position:relative;font-family:var(--display);font-size:clamp(12px,3.6vw,17px);letter-spacing:.12em;color:#ffe600;text-shadow:0 0 10px rgba(255,230,0,.6),2px 2px 0 #111;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;margin-top:22px;text-align:center;padding:0 16px}
#boot .slogan.in{opacity:1;transform:none}
#boot .pres{position:relative;margin-top:44px;font-family:var(--display);font-size:13px;letter-spacing:.5em;color:#cfc8e8;opacity:0;transition:opacity .6s}
#boot .pres.in{opacity:.9}
#boot .skip{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));right:18px;font-size:12px;letter-spacing:.2em;color:#6f6788}
#boot .st-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 52%,#2a1846 0%,#120a22 55%,#050308 100%);opacity:0;transition:opacity .9s}
#boot.on .st-bg{opacity:1}
#boot .st-stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8,transparent),radial-gradient(1.5px 1.5px at 82% 12%,#fff8,transparent),radial-gradient(1px 1px at 30% 70%,#fff6,transparent),radial-gradient(1.5px 1.5px at 68% 82%,#fff7,transparent),radial-gradient(1px 1px at 90% 55%,#fff6,transparent),radial-gradient(1px 1px at 8% 60%,#fff6,transparent);opacity:0;transition:opacity 1.5s}
#boot.on .st-stars{opacity:1}
#boot .st-spot{position:absolute;bottom:-10%;width:60vmax;height:130vh;transform-origin:50% 100%;background:linear-gradient(0deg,rgba(255,224,140,.32),rgba(255,224,140,0) 85%);clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);filter:blur(6px);opacity:0;mix-blend-mode:screen}
#boot .st-spot.l{left:-22vmax}#boot .st-spot.r{right:-22vmax}
#boot.on .st-spot.l{animation:spotL 5s ease-in-out infinite alternate,spotIn .8s forwards}
#boot.on .st-spot.r{animation:spotR 5.6s ease-in-out infinite alternate,spotIn .8s .2s forwards}
@keyframes spotIn{to{opacity:1}}@keyframes spotL{from{transform:rotate(28deg)}to{transform:rotate(4deg)}}@keyframes spotR{from{transform:rotate(-30deg)}to{transform:rotate(-5deg)}}
#boot .st-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
#boot .st-stage{--W:min(90vw,440px,58vh);position:relative;width:var(--W);height:calc(var(--W)*.989);margin-top:calc(var(--W)*.30);transform:translateX(9%)}
#boot .st-ring{position:absolute;left:8%;top:-34%;width:100%;height:auto;overflow:visible;opacity:0;transform:scale(.3) rotate(-140deg)}
#boot .st-ring.in{animation:ringIn 1s cubic-bezier(.2,1.5,.4,1) forwards}
#boot .st-ring.dim{animation:ringDim .6s forwards}
@keyframes ringDim{from{opacity:1;transform:none}to{opacity:.6;transform:none}}
#boot .st-prod{margin-top:calc(min(90vw,440px,58vh)*.07);font-family:var(--display),Impact,sans-serif;font-weight:900;font-size:clamp(12px,3.4vw,16px);letter-spacing:.55em;margin-right:-.55em;color:#ffd54a;text-shadow:0 2px 0 #2a1400,0 0 10px rgba(255,190,40,.5);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
#boot .st-prod.in{opacity:1;transform:none}
@keyframes ringIn{to{opacity:1;transform:none}}
#boot .st-ring text{font-family:var(--display),Impact,sans-serif;font-weight:900;letter-spacing:.06em;fill:#ffd54a;stroke:#2a1400;stroke-width:1.6px;paint-order:stroke}
#boot .st-portal{position:absolute;left:8%;right:-6%;bottom:-6%;height:13%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#000 0 52%,#3a1d00 60%,transparent 72%);box-shadow:0 0 0 3px #ffd54a,0 0 24px 6px rgba(255,200,60,.75),inset 0 0 18px rgba(255,200,60,.6);transform:scaleX(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
#boot .st-portal.in{transform:scaleX(1)}
#boot .st-clip{position:absolute;left:-40%;right:-30%;top:-60%;bottom:0;overflow:hidden;pointer-events:none}
#boot .st-fig{position:absolute;left:28.6%;bottom:0;width:58.8%;height:calc(var(--W)*.989);transform:translateY(105%)}
#boot .st-fig.up{animation:figUp 1.05s cubic-bezier(.25,1.35,.45,1) forwards}
@keyframes figUp{to{transform:none}}
#boot .st-fig img{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:0}
#boot .st-fig img.on{opacity:1}
#boot .st-fig.laugh img{animation:figLaugh .5s ease-in-out 3;transform-origin:50% 100%}
@keyframes figLaugh{0%,100%{transform:none}30%{transform:translateY(-2.5%) rotate(-1.2deg)}65%{transform:translateY(.5%) rotate(1deg)}}
#boot .st-logo{position:absolute;left:-9%;top:16%;width:41%;opacity:0;transform:translateY(30%) scale(.2) rotate(-25deg);filter:drop-shadow(0 0 10px rgba(0,225,255,.6)) drop-shadow(0 6px 10px #000)}
#boot .st-logo.in{animation:logoPop .7s cubic-bezier(.2,1.7,.4,1) forwards,logoBob 2.2s .7s ease-in-out infinite}
@keyframes logoPop{to{opacity:1;transform:none}}
@keyframes logoBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6%) rotate(2deg)}}
#boot .st-glint{position:absolute;left:68.5%;top:21.3%;width:13%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);pointer-events:none;background:conic-gradient(from 0deg,transparent 0 10deg,#fff 13deg,transparent 16deg 100deg,#fff 103deg,transparent 106deg 190deg,#fff 193deg,transparent 196deg 280deg,#fff 283deg,transparent 286deg);border-radius:50%;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #9ff)}
#boot .st-glint::after{content:'';position:absolute;inset:38%;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #fff}
#boot .st-glint.on{animation:glint .9s ease-out forwards}
@keyframes glint{0%{transform:translate(-50%,-50%) scale(0) rotate(0)}35%{transform:translate(-50%,-50%) scale(1.25) rotate(60deg)}100%{transform:translate(-50%,-50%) scale(0) rotate(150deg)}}
#boot .st-sub{min-height:2.6em;max-width:92vw;text-align:center;font-family:var(--display),Impact,sans-serif;font-size:clamp(16px,4.8vw,22px);letter-spacing:.06em;color:#ffe600;text-shadow:0 2px 0 #000,0 0 12px rgba(255,200,0,.45);padding:0 16px}
#boot .st-sub span{display:inline-block;animation:subIn .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes subIn{from{opacity:0;transform:translateY(8px) scale(.8)}}
#boot .st-spark{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;background:var(--c);box-shadow:0 0 8px var(--c)}
#boot .st-warp{position:absolute;inset:-50%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.9) 0 .6deg,transparent .6deg 7deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 6%,#000 30%);mask:radial-gradient(circle at 50% 50%,transparent 0 6%,#000 30%)}
#boot .st-warp.on{animation:warp .9s ease-in forwards}
@keyframes warp{0%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:.85}100%{opacity:1;transform:scale(2.4) rotate(25deg)}}
#boot .st-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#boot .st-stage.shk{animation:stShk .4s}
/* ===== old-school MP3 player ===== */
.mp3dev{display:flex;align-items:center;gap:8px;height:50px;width:min(340px,100%);margin:4px auto 8px;box-sizing:border-box;padding:4px 6px;border:2px solid #111;border-radius:14px;background:linear-gradient(180deg,#f4f6f9 0%,#c9ced6 46%,#b1b8c2 54%,#dfe3e8 100%);box-shadow:3px 3px 0 #000,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.18);flex:none;position:relative}
.mp3dev::before{content:'';position:absolute;left:14px;top:-7px;width:18px;height:6px;border-radius:3px 3px 0 0;background:#6f7680;border:2px solid #111;border-bottom:0}
.mp3dev::after{content:'';position:absolute;left:21px;top:-22px;width:2px;height:16px;background:#111;border-radius:1px}
.mp3lcd{flex:1;min-width:0;height:100%;box-sizing:border-box;border-radius:7px;border:2px solid #24332c;background:radial-gradient(ellipse at 30% 20%,#d2ffec,#8fdcb9 75%);box-shadow:inset 0 0 8px rgba(0,60,40,.5),inset 0 0 0 1px rgba(255,255,255,.25);font-family:'VT323',ui-monospace,monospace;color:#0b2a20;padding:1px 6px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;overflow:hidden;text-align:left}
.mp3top{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1}
.mp3eq{display:inline-flex;align-items:flex-end;gap:1px;height:9px}.mp3eq i{width:2px;height:25%;background:#0b2a20}
.mp3dev.on .mp3eq i{animation:mp3eq .45s ease-in-out infinite alternate}.mp3eq i:nth-child(2){animation-delay:-.15s!important}.mp3eq i:nth-child(3){animation-delay:-.3s!important}.mp3eq i:nth-child(4){animation-delay:-.05s!important}.mp3eq i:nth-child(5){animation-delay:-.38s!important}
@keyframes mp3eq{from{height:15%}to{height:100%}}
.mp3tm{margin-left:auto;font-variant-numeric:tabular-nums}
.mp3mq{white-space:nowrap;overflow:hidden;font-size:18px;line-height:1}
.mp3mq span{display:inline-block;padding-left:100%;animation:mp3mq var(--mqd,12s) linear infinite}
.mp3dev:not(.on) .mp3mq span{animation-play-state:paused}
@keyframes mp3mq{to{transform:translateX(-100%)}}
.mp3bar{height:3px;margin-top:1px;background:rgba(11,42,32,.22);border-radius:2px;overflow:hidden}.mp3bar i{display:block;height:100%;width:0;background:#0b2a20}
.mp3pad{position:relative;width:42px;height:42px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 32%,#ffffff,#cfd4db 58%,#9ea6b1);border:2px solid #111;box-shadow:inset 0 -2px 4px rgba(0,0,0,.28)}
.mp3pad button{position:absolute;font:700 7px/1 Arial,sans-serif;color:#2a2f36;display:grid;place-items:center;letter-spacing:-.5px}
.mp3pad .u{left:9px;right:9px;top:0;height:12px;font-size:6px;letter-spacing:.3px}
.mp3pad .d{left:9px;right:9px;bottom:0;height:12px}
.mp3pad .l{left:0;top:9px;bottom:9px;width:12px}
.mp3pad .r{right:0;top:9px;bottom:9px;width:12px}
.mp3pad .c{left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(#f1f3f6,#b5bcc6);border:1px solid #4a5058}
.mp3dev.big{height:72px;width:100%;margin:2px 0 6px}.mp3dev.big .mp3mq{font-size:24px}.mp3dev.big .mp3top{font-size:16px}.mp3dev.big .mp3pad{width:58px;height:58px}
.mp3dev.big .mp3pad button{font-size:9px}.mp3dev.big .mp3pad .u{font-size:8px;height:16px;left:12px;right:12px}.mp3dev.big .mp3pad .d{height:16px;left:12px;right:12px}.mp3dev.big .mp3pad .l,.mp3dev.big .mp3pad .r{width:16px;top:12px;bottom:12px}.mp3dev.big .mp3pad .c{width:20px;height:20px}
#game .mp3dev{margin:0 auto 8px}#dist .mp3dev{margin:2px auto 0}
.mp3list{max-height:40vh}.cine-row.now{outline:2px solid var(--cyan);outline-offset:-2px}
#title .mbtn.wide{grid-column:1/-1;justify-content:center}
.pal .symb.motif{width:18%;min-width:56px;font-size:11px}
.spw.walkw canvas{display:block;width:100%;height:100%;filter:drop-shadow(5px 7px 0 rgba(0,0,0,.75))}
@keyframes stShk{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:5px -4px}60%{translate:-4px 2px}80%{translate:3px -1px}}

/* ===== v69: Startseite, Extras, Bühne, Dialog-Leisten, Neon-Pille ===== */
#title .menu .mrow,#title .proto,#title .tagline{display:none!important}
#title .logoimg{width:min(78vw,330px,40vh)!important}
#title .hero{position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 190px)!important;height:min(47vh,400px,calc(100dvh - 400px))!important;width:min(80vw,330px)!important;z-index:2!important}
#title .herofloor{position:fixed!important;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 164px);width:330px;height:64px;transform:translateX(-50%);z-index:1!important;pointer-events:none}
.herofloor .glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,46,136,.85),rgba(255,46,136,.25) 55%,transparent 72%);filter:blur(6px);animation:floP 2.4s ease-in-out infinite alternate}
.herofloor .ring{position:absolute;left:15%;right:15%;top:26%;bottom:26%;border-radius:50%;border:3px solid #19e3ff;box-shadow:0 0 14px #19e3ff,inset 0 0 14px #19e3ff}
.herofloor .shadow{position:absolute;left:28%;right:28%;top:34%;bottom:30%;border-radius:50%;background:rgba(0,0,0,.75);filter:blur(5px)}
@keyframes floP{to{opacity:.6}}
#title .menu{position:fixed!important;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom,0px));margin:0 auto!important;align-self:center!important;width:min(86vw,340px)!important;gap:14px!important;display:flex;flex-direction:column;align-items:stretch;z-index:3!important}
#title .menu #startBtn{position:relative;overflow:visible;font-family:var(--display)!important;font-size:32px!important;line-height:1;padding:12px 12px 10px!important;background:linear-gradient(180deg,#fff24a,#ffc21a 60%,#ff9d00)!important;color:#111!important;border:4px solid #111!important;border-radius:20px 26px 18px 24px!important;box-shadow:0 0 26px rgba(255,200,40,.55),7px 7px 0 #ff2e88,7px 7px 0 3px #111!important;transform:rotate(-2deg);letter-spacing:.04em;text-shadow:2px 2px 0 rgba(255,255,255,.55)}
#startBtn small{display:block;font:400 15px/1.15 var(--tag);letter-spacing:.01em;color:#3a1500;text-shadow:none;margin-top:4px}
#startBtn .drip{position:absolute;top:calc(100% - 4px);width:11px;background:linear-gradient(#ffb000,#ff9d00);border:3px solid #111;border-top:none;border-radius:0 0 8px 8px;pointer-events:none}
.xtra{display:flex;gap:14px}
.xtra button{flex:1;position:relative;height:52px;display:flex;align-items:center;justify-content:center;padding:0 4px 0 50px;border:3px solid #fff;outline:3px solid #111;border-radius:12px;background:#15111d;color:#fff;font:400 15px/1 var(--display);letter-spacing:.03em;box-shadow:5px 5px 0 #000;cursor:pointer}
.xtra button:first-child{transform:rotate(-2.5deg)}.xtra button:last-child{transform:rotate(2deg)}
.xtra button img{position:absolute;left:-4px;bottom:6px;height:40px;filter:drop-shadow(2px 3px 0 #000);pointer-events:none}
.nw{position:absolute;right:-10px;top:-12px;font:400 12px/1 var(--tag);background:#ff2e88;color:#fff;padding:3px 6px;border:2px solid #111;border-radius:6px;transform:rotate(10deg);z-index:3}
#extras{gap:8px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
#extras::before{content:'';position:fixed;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(6,3,14,.2),rgba(6,3,14,.85) 92%),
  radial-gradient(ellipse at 20% 15%,rgba(255,46,136,.22),transparent 45%),radial-gradient(ellipse at 85% 70%,rgba(25,227,255,.16),transparent 45%),
  repeating-linear-gradient(0deg,#0b0910 0 3px,transparent 3px 34px),
  repeating-linear-gradient(90deg,#0b0910 0 3px,transparent 3px 68px) 0 0/68px 68px,
  repeating-linear-gradient(90deg,#0b0910 0 3px,transparent 3px 68px) 34px 34px/68px 68px,#2a1f2e}
#extras .xtop{display:flex;align-items:center;gap:10px}
.xback{width:46px;height:46px;flex:none;border-radius:12px;border:3px solid #fff;outline:3px solid #111;background:#15111d;color:#fff;font:400 26px/1 var(--display);box-shadow:4px 4px 0 #000;cursor:pointer}
#extras h2{flex:1;font:400 44px/1 var(--tag);color:#ffe600;text-shadow:3px 3px 0 #ff2e88,6px 6px 0 #111,0 0 22px rgba(255,46,136,.6);margin:0;text-align:center;transform:rotate(-4deg);padding-right:46px}
.xg{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr .8fr;gap:16px 14px;padding:8px 4px 4px;width:100%;max-width:520px;margin:0 auto;box-sizing:border-box}
.xcell{position:relative;display:flex;min-height:0}.xcell.w{grid-column:1/-1}
.xt{flex:1;position:relative;border:3px solid #111;overflow:hidden;box-shadow:5px 6px 0 rgba(0,0,0,.85);background:#e8dfcc;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:8px;color:#111;text-align:left;cursor:pointer;font:inherit;
 clip-path:polygon(0 2%,6% 0,30% 1.5%,55% 0,80% 1%,100% 0,99% 30%,100% 60%,98.5% 100%,70% 98.5%,45% 100%,20% 98%,0 100%,1% 70%)}
.xt::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,var(--c) 0,transparent 62%),repeating-linear-gradient(-45deg,rgba(0,0,0,.04) 0 2px,transparent 2px 6px);opacity:.9}
.xt img{position:absolute;left:50%;transform:translateX(-50%);bottom:62px;max-width:92%;height:calc(100% - 76px);object-fit:contain;filter:drop-shadow(3px 4px 0 #111);pointer-events:none}
.xt b{position:relative;z-index:2;font:400 clamp(13px,3.9vw,17px)/1.05 var(--display);overflow-wrap:anywhere;letter-spacing:.01em}
.xt i{position:relative;font:400 14px/1.15 var(--tag);font-style:normal;color:#5a2236}
.xt .bar{position:relative;height:7px;border:2px solid #111;border-radius:4px;margin-top:4px;background:#fff}.xt .bar s{display:block;height:100%;background:var(--c2)}
.xt.lock{filter:grayscale(.85) brightness(.8)}
.xcell:nth-child(1) .xt{transform:rotate(-2deg)}.xcell:nth-child(2) .xt{transform:rotate(1.5deg)}.xcell:nth-child(3) .xt{transform:rotate(1deg)}.xcell:nth-child(4) .xt{transform:rotate(-1.5deg)}.xcell:nth-child(5) .xt{transform:rotate(-.6deg)}
.xcell .tape{position:absolute;width:62px;height:18px;background:rgba(255,248,220,.55);border:1px solid rgba(0,0,0,.15);top:-6px;left:50%;transform:translateX(-50%) rotate(-6deg);z-index:2;pointer-events:none}
.xcell .nw{right:-6px;top:6px;transform:rotate(12deg)}
.xcell.w .xt{padding-right:50%}.xcell.w .xt img{height:96%;bottom:-4px;left:auto;right:4px;transform:none;max-width:52%}
.xt:active{filter:brightness(1.1)}
/* Bühne */
#game .arena{display:block;position:relative;height:clamp(170px,40vh,390px);margin:2px calc(-1*max(14px,env(safe-area-inset-left,0px))) 0;padding:0;gap:0}
#game .arena[hidden]{display:none}
#game .arena .boss{position:absolute;right:-4%;bottom:0;height:98%;max-width:64%;margin:0;object-fit:contain;object-position:100% 100%;z-index:1}
#game .arena .boss.small{height:78%;max-width:36%;min-width:0;margin:0}
#game .arena .dexst{position:absolute;left:-3%;bottom:-2%;height:76%;max-width:52%;object-fit:contain;object-position:0 100%;filter:drop-shadow(0 0 14px rgba(25,227,255,.55)) drop-shadow(4px 5px 0 #000);z-index:1;transform-origin:50% 100%;animation:bob 2.4s ease-in-out infinite;pointer-events:none}
#game .arena.solo .dexst{height:86%}
#game .arena .stagefloor{position:absolute;left:0;right:0;bottom:-6px;height:30%;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(255,46,136,.35),transparent 70%);pointer-events:none}
#game .hp{left:10px;top:30px;width:44%;padding:4px 6px}
#game .mp3dev[data-live]{display:none}
#game .quip{position:absolute;z-index:4;top:calc(10px + 120px);left:40%;right:6px;margin:0;min-height:42px;max-width:none;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;transform:skewX(-8deg);background:linear-gradient(90deg,rgba(10,8,16,.94),rgba(10,8,16,.8));border:2px solid #19e3ff;border-radius:0;box-shadow:0 0 12px rgba(25,227,255,.6),inset 0 0 0 1px rgba(255,46,136,.6),4px 4px 0 #ff2e88;color:#fff;font:400 16px/1.12 var(--tag);pointer-events:none}
#game .quip>*{transform:skewX(8deg)}
#game .quip img{width:38px;height:38px;border-radius:8px;border:2px solid #19e3ff;object-fit:cover}
#game .quip b{display:block;color:#19e3ff;font:400 10px/1 var(--display);letter-spacing:.12em;margin-bottom:2px}
#game .quip[hidden]{display:none}
.fade{animation:dlgFade 7s forwards}
@keyframes dlgFade{0%{opacity:0}5%{opacity:1}86%{opacity:1}100%{opacity:0;visibility:hidden}}
#game .say.dlgb{position:absolute;left:8px;right:8px;top:auto;bottom:-2px;max-width:none;display:flex;flex-direction:row-reverse;text-align:right;align-items:center;gap:7px;padding:3px 5px 3px 10px;background:linear-gradient(270deg,rgba(28,6,40,.95),rgba(28,6,40,.82));border:2px solid #b04dff;border-radius:0;box-shadow:0 0 16px rgba(176,77,255,.7),-4px 4px 0 #3a0a55;transform:skewX(8deg);color:#e9d4ff;font:400 12.5px/1.15 var(--display)!important;text-shadow:0 0 8px #b04dff;z-index:4;pointer-events:none}
#game .say.dlgb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#game .say.dlgb span b{display:block}
#game .say.dlgb>*{transform:skewX(-8deg)}
#game .say.dlgb img{width:30px;height:30px;border-radius:8px;border:2px solid #b04dff;object-fit:cover;flex:none}
#game .say.dlgb b{display:block;color:#ff4fd8;font:400 10px/1 var(--display);letter-spacing:.12em;margin-bottom:3px;text-shadow:none}
#game .say.onoz{position:absolute;left:44%;right:3%;top:34%;bottom:auto;max-width:none;background:none;border:0;box-shadow:none;padding:0;transform:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:4;pointer-events:none}
#game .say.onoz span{display:block;font:900 22px/1 Impact,'Arial Black',var(--display)!important;color:#d9b3ff;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:3px 3px 0 #5a1aa8;transform:rotate(calc(-10deg + var(--k)*9deg));margin-right:calc(var(--k)*18% - 10%)}
#game .say:empty{display:none}
#game .say.dlgb.dexl{flex-direction:row;text-align:left;padding:3px 10px 3px 5px;transform:skewX(-8deg);background:linear-gradient(90deg,rgba(10,8,16,.95),rgba(10,8,16,.82));border-color:#19e3ff;box-shadow:0 0 12px rgba(25,227,255,.6),4px 4px 0 #ff2e88;color:#fff;font:400 14px/1.12 var(--tag)!important;text-shadow:none}
#game .say.dlgb.dexl>*{transform:skewX(8deg)}#game .say.dlgb.dexl img{border-color:#19e3ff;filter:none}#game .say.dlgb.dexl b{color:#19e3ff}
#game .arena .dexcv{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 0 14px rgba(25,227,255,.55)) drop-shadow(4px 5px 0 #000)}
#game .arena .dexsh{position:absolute;left:0;width:34%;bottom:-5%;height:9%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.85),rgba(0,0,0,.45) 55%,transparent 72%);border:2px solid rgba(25,227,255,.75);box-shadow:0 0 12px #19e3ff,inset 0 0 10px rgba(25,227,255,.5);z-index:0;pointer-events:none}
#game .arena:not(.solo) .dexsh{width:40%}
.mp3pill{position:absolute;left:auto;right:6px;top:calc(10px + 50px);transform:rotate(-1.5deg);z-index:6;display:flex;align-items:center;gap:6px;height:28px;width:min(200px,50%);padding:0 4px 0 9px;border-radius:15px;background:linear-gradient(180deg,#2b2236,#110c17);border:2px solid #000;box-shadow:0 0 10px rgba(255,46,136,.55),0 0 0 1px rgba(255,255,255,.12) inset;font-family:'VT323',ui-monospace,monospace;cursor:pointer}
.mp3pill .eq{display:inline-flex;gap:1px;align-items:flex-end;height:12px;flex:none}.mp3pill .eq i{width:2px;height:30%;background:#19e3ff;box-shadow:0 0 4px #19e3ff}
.mp3pill.on .eq i{animation:mp3eq .45s ease-in-out infinite alternate}.mp3pill .eq i:nth-child(2){animation-delay:-.2s}.mp3pill .eq i:nth-child(3){animation-delay:-.33s}
.mp3pill .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:#19e3ff;text-shadow:0 0 6px #19e3ff;font-size:18px;line-height:1.25}
.mp3pill .t span{display:inline-block}.mp3pill .t.mq span{animation:pillmq var(--mqd,10s) linear infinite}@keyframes pillmq{to{transform:translateX(-50%)}}
.mp3pill:not(.on) .t{color:#7fbfd0;text-shadow:none}
.mp3pill .p{width:21px;height:21px;flex:none;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff7ac0,#ff1f8f 60%,#8a0a4a);border:1.5px solid #000;color:#fff;font:700 9px/18px Arial;text-align:center;padding:0;cursor:pointer}
.mp3pill .tag{position:absolute;left:-6px;top:-9px;font:400 10px/1 var(--tag);color:#ffe600;transform:rotate(-12deg);text-shadow:1px 1px 0 #000}
#game{position:relative}
@media (prefers-reduced-motion:reduce){#game .arena .dexst,.herofloor .glow,.mp3pill .eq i,.mp3pill .t span{animation:none}}

/* ===== v71: 3rd-Person-Bosskampf (Breakers Block) ===== */
.st3l{position:fixed;pointer-events:none;z-index:0}
#st3bg{inset:0;background:#0b0714 center/cover no-repeat;opacity:0;transition:opacity .6s}
#st3bg.on{opacity:1}
#st3spot{left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .6s,filter .25s;mix-blend-mode:screen}
#st3spot.on{opacity:1}#st3spot.red{filter:hue-rotate(-75deg) saturate(1.8) brightness(1.3)}
#st3shadow{border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.8),rgba(0,0,0,.4) 55%,transparent 72%);transition:opacity .25s}
#st3boss{transform-origin:50% 60%;transition:transform .42s cubic-bezier(.3,1.25,.5,1),opacity .18s}
#st3boss i,#st3dex i{background-repeat:no-repeat}
#st3boss i{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(160,60,255,.4));transform-origin:50% 68.5%;animation:st3breathe 2.6s ease-in-out infinite}
#st3boss.anim i{animation:none}
#st3boss.front{z-index:65}
#st3dex i{width:100%;height:100%;display:block;filter:drop-shadow(0 0 14px rgba(25,227,255,.3))}
@keyframes st3breathe{50%{transform:scale(1.012,1.024)}}
#game.st3 .arena .boss{right:auto!important;left:50%;translate:-50% 0;height:62%!important;max-width:62%!important;bottom:0;object-position:50% 100%}
#game.st3 .arena .boss.small:nth-of-type(2){left:24%;height:52%!important;z-index:0!important}
#game.st3 .arena .boss.small:nth-of-type(3){left:76%;height:52%!important;z-index:0!important}
#game.st3 .arena .st3msh{position:absolute;left:18%;right:18%;bottom:-10px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.75),transparent 70%);z-index:0}
#game.st3 .tools{position:relative;z-index:2}
.can.fly{animation:canfly .9s cubic-bezier(.2,.8,.3,1)!important}
@keyframes canfly{30%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}100%{transform:none}}
@media (prefers-reduced-motion:reduce){#st3boss i{animation:none}}
#game.st3 .say.dlgb{top:32px;bottom:auto;left:47%;right:6px}
#game.st3 .say.onoz{top:8%}
/* v75 studio intro (intro.js) */
#boot.dmi{background:#000;gap:0;cursor:pointer}
#boot .dmi-wrap{position:relative;overflow:hidden;background:#000;flex:none}
#boot .dmi-wrap canvas{position:absolute;left:0;top:0;width:100%;height:100%}

/* v78: flüssige Farben – Canvas in der Dose */
.can .paint canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.can.greyed .paint canvas{filter:grayscale(1) brightness(.7)}
/* v80: Dosen-Party – Hinter-Leinwand im Spielfeld, Dosen darüber; Verzerren über --sk */
#rack{position:relative;z-index:1}
.can .tex,.can .paint{transform:skewX(var(--sk,0deg));transform-origin:50% 100%}
/* v83: fertige Dosen in der hinteren Reihe (gleiche Größe, leicht dunkler) bzw. einen Schritt zurück; Effekt-Ebenen; Sieg-Fenster mit freier Mitte */
#rack .can.bk{z-index:1;pointer-events:none;filter:brightness(.8) saturate(.92) drop-shadow(3px 5px 0 rgba(0,0,0,.55))}
#rack .can{top:0;transition:top .55s cubic-bezier(.2,.9,.25,1),transform .3s cubic-bezier(.3,.7,.3,1),filter .2s}
#rack .can.back1{top:-14px}
#rack .can:not(.bk){z-index:3}#rack .can.lift{z-index:6}
#lqmid{position:absolute;pointer-events:none;z-index:2}
#lqfx{z-index:50!important}
.can .paint{background:linear-gradient(180deg,rgba(150,140,180,.27),rgba(105,95,130,.27))}
.overlay.winx{background:linear-gradient(180deg,rgba(8,7,12,.55),rgba(8,7,12,0) 30%,rgba(8,7,12,0) 70%,rgba(8,7,12,.55));align-items:stretch;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.winx .card{width:min(100%,460px);height:100%;max-height:none;background:none;border:0;box-shadow:none;padding:0;justify-content:space-between;gap:0;overflow:visible}
.winx .wtop,.winx .wbot{width:100%;box-sizing:border-box;background:var(--panel);border:4px solid #111;border-radius:18px;box-shadow:6px 6px 0 #000;display:flex;flex-direction:column;align-items:center;gap:4px}
.winx .wtop{position:relative;padding:8px 10px 8px 92px;min-height:96px}
.winx .wtop .danim{position:absolute;left:-4px;bottom:-6px;width:96px;height:104px;margin:0}
.winx .wtop h3{font-size:clamp(20px,6vw,28px);margin:0}
.winx .wtop .bigcrowns{transform:scale(.62);margin:-14px 0 -16px}
.winx .wtop .reward{font-size:20px;margin:0}.winx .wtop p{margin:0;font-size:15px}
.winx .wbot{padding:10px;gap:6px}.winx .wbot .row{margin:0}