:root{--ink: #2a1206;--gold: #ffc93a;--cyan: #39d8ff;--font: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;--o2: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink);--o3: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 6px 0 var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#2b0c06;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;font-family:var(--font)}#app{position:fixed;inset:0;overflow:hidden}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#vignette{--vg: rgba(40, 6, 0, .85);position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 46%,transparent 52%,var(--vg) 135%)}#hud{position:absolute;inset:0 0 auto;pointer-events:none;padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 10px) 0 calc(env(safe-area-inset-left) + 10px);transition:opacity .3s;display:flex;flex-direction:column;gap:8px}#hud.hidden{opacity:0}.hud-row{display:flex;align-items:center;gap:8px}.spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:6px;height:38px;background:#2a1206bf;border:3px solid var(--ink);border-radius:999px;padding:0 14px 0 10px;color:#fff;font-size:18px;text-shadow:var(--o2);box-shadow:inset 0 -3px #00000040,0 3px #00000059}.pill b{font-weight:400;font-size:22px}.pill svg{width:24px;height:24px;flex:none}.pill.stage{color:var(--gold);padding-left:14px}.pill.squad{color:#bff4ff}.pill.squad .sq-ico svg{width:30px;height:30px;margin:-4px 0 0 -4px}.pill.bump{animation:bump .35s ease}@keyframes bump{40%{transform:scale(1.18)}}.hearts{display:flex;gap:2px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}.hearts svg{width:clamp(20px,6.5vw,28px);height:clamp(20px,6.5vw,28px)}.icon-btn{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:3px solid var(--ink);background:linear-gradient(#ffd85a,#ff9d1f);box-shadow:inset 0 -4px #aa3c0066,inset 0 3px #ffffff80,0 4px 0 var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}.icon-btn svg{width:28px;height:28px}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.icon-btn.corner{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px)}.icon-btn.corner2{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 70px)}.panel .icon-btn.corner{top:12px;right:12px}.panel .icon-btn.corner2{top:12px;left:12px;right:auto}#labels,#floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wyrm-hp{position:absolute;left:0;top:0;font-size:24px;color:#fff;text-shadow:var(--o2),0 4px 0 var(--ink);white-space:nowrap;will-change:transform}.wyrm-hp.frenzy{color:#ff5a3a;font-size:28px}.floater{position:absolute;font-size:30px;color:#fff;text-shadow:var(--o2),0 4px 0 var(--ink);transform:translate(-50%,-50%);animation:floatUp 1s ease-out forwards}.floater.cyan{color:#6ff6ff;font-size:38px}.floater.red{color:#ff6a5a;font-size:22px}.floater.chomp{color:#ffd23a;font-size:34px}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-260%) scale(1)}}#joy{position:absolute;left:0;top:0;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:radial-gradient(circle,#ffffff1a,#ffffff0a 65%,#ffffff29 67%,#fff0 72%);border:3px solid rgba(255,255,255,.4);opacity:0;pointer-events:none;transition:opacity .12s}#joy.on{opacity:1}#joy.idle{opacity:.55}#joy-home{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + max(96px,15vh));width:1px;height:1px;pointer-events:none}#tutorial{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + max(96px,15vh) - 36px);transform:translate(-50%);width:240px;height:120px;pointer-events:none;opacity:0;transition:opacity .3s}#tutorial.show{opacity:1}#tutorial .tut-text{position:absolute;left:50%;bottom:150px;transform:translate(-50%);width:300px;text-align:center;font-size:26px;line-height:1.1;color:#fff;text-shadow:var(--o2),0 4px 0 var(--ink)}#tutorial:not(.touch) .tut-text{bottom:40px}#tutorial .tut-text small{font-size:15px;color:#ffe7c2}#tutorial .tut-hand{position:absolute;left:50%;top:80px;width:64px;height:64px;margin-left:-27px;display:none}#tutorial.touch .tut-hand{display:block;animation:tutHand 1.8s ease-in-out infinite}#tutorial .tut-hand svg{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}@keyframes tutHand{0%,to{transform:translate(0) rotate(-8deg)}25%{transform:translate(-46px,-18px) rotate(-14deg)}50%{transform:translateY(-40px) rotate(-8deg)}75%{transform:translate(46px,-18px) rotate(-2deg)}}#joy-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dcdcea 60%,#a8a8c2);border:3px solid var(--ink);box-shadow:0 4px #00000059}#arrow{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;display:none;filter:drop-shadow(0 0 8px rgba(111,246,255,.8))}#arrow.on{display:block;animation:arrowPulse .8s ease-in-out infinite}#arrow svg{width:100%;height:100%}@keyframes arrowPulse{50%{opacity:.65}}#dmg{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 50px #ff140099;opacity:0}#dmg.go{animation:dmg .6s ease-out}@keyframes dmg{0%{opacity:1}to{opacity:0}}#banner{position:absolute;left:0;right:0;top:24%;text-align:center;pointer-events:none;opacity:0}#banner.go{animation:banner 2.4s ease forwards}#banner .b1{font-size:clamp(46px,12vw,84px);color:var(--gold);text-shadow:var(--o3);line-height:1}#banner .b2{margin-top:8px;font-size:clamp(18px,5vw,28px);color:#fff;text-shadow:var(--o2),0 4px 0 var(--ink)}@keyframes banner{0%{opacity:0;transform:scale(1.7)}12%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(-24px)}}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;text-align:center;color:#fff}.screen.show{opacity:1;visibility:visible;pointer-events:auto}.screen.dim{background:radial-gradient(ellipse at center,#280a048c,#120402e0)}#screen-menu{justify-content:space-between;background:linear-gradient(to bottom,#1906038c,#19060300 32% 52%,#140502e6);padding-top:calc(env(safe-area-inset-top) + 9vh);padding-bottom:calc(env(safe-area-inset-bottom) + 5vh)}.menu-top,.menu-bottom{display:flex;flex-direction:column;align-items:center;gap:12px}.logo{font-size:clamp(56px,15vw,128px);line-height:.9;letter-spacing:1px;background:linear-gradient(#fff6b0,#ffd23a 35%,#ff7a1a 62%,#e2300f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px var(--ink);filter:drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 0 26px rgba(255,120,30,.65));animation:logoBob 3s ease-in-out infinite}@keyframes logoBob{50%{transform:translateY(-8px) rotate(-1deg)}}.tagline{font-size:clamp(16px,4.4vw,26px);color:#ffe7c2;text-shadow:var(--o2),0 4px 0 var(--ink)}.menu-stats{display:flex;gap:18px;font-size:20px;text-shadow:var(--o2);align-items:center}.menu-stats b{font-weight:400;color:var(--gold)}.hint{font:700 13px/1.5 system-ui,sans-serif;color:#ffebd2d9;text-shadow:0 1px 2px #000;max-width:360px}.gem-inline{display:inline-flex;align-items:center;gap:4px}.gem-inline svg{width:22px;height:22px}.ghost-btn{pointer-events:auto;font-family:var(--font);font-size:15px;color:#fff;text-shadow:var(--o2);display:inline-flex;align-items:center;gap:6px;padding:5px 14px 5px 8px;border-radius:999px;border:3px solid var(--ink);background:#2d0e0599;box-shadow:0 3px 0 var(--ink);cursor:pointer}.ghost-btn svg{width:22px;height:22px}.ghost-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.ghost-btn.hidden{display:none}.note{font:700 14px/1.4 system-ui,sans-serif;color:#ffe7c2d9;text-align:center;margin-top:-6px}.title{font-size:clamp(36px,10vw,56px);color:#fff;text-shadow:var(--o3);line-height:1}.title.gold{color:var(--gold)}.title.red{color:#ff6a4a}.subtitle{font-size:20px;color:#ffe7c2;text-shadow:var(--o2);display:flex;gap:6px;align-items:center;justify-content:center}.btn{pointer-events:auto;font-family:var(--font);font-size:26px;color:#fff;padding:12px 34px 14px;min-width:220px;border-radius:20px;border:4px solid var(--ink);background:linear-gradient(#ffe066,#ffab1f 55%,#ff7b0f);box-shadow:inset 0 -6px #aa3c0073,inset 0 4px #ffffff80,0 7px 0 var(--ink);text-shadow:var(--o2);cursor:pointer;transition:transform .08s;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.btn small{font-size:16px;opacity:.95;margin-top:2px}.btn:active{transform:translateY(5px);box-shadow:inset 0 -6px #0003,0 2px 0 var(--ink)}.btn.green{background:linear-gradient(#b4ff7a,#4fd43a 55%,#2aa52a);box-shadow:inset 0 -6px #005a1473,inset 0 4px #ffffff80,0 7px 0 var(--ink)}.btn.blue{background:linear-gradient(#9cecff,#39b8ff 55%,#2a7fff);box-shadow:inset 0 -6px #00288c66,inset 0 4px #ffffff80,0 7px 0 var(--ink)}.btn.big{font-size:40px;padding:14px 56px 18px;min-width:260px;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.05)}}.btn.small{font-size:18px;padding:8px 12px 10px;min-width:96px}.btn[disabled]{filter:grayscale(.85) brightness(.8);pointer-events:none}.panel{position:relative;background:linear-gradient(#5e2c15,#3a170a);border:4px solid var(--ink);border-radius:26px;padding:26px 22px 30px;box-shadow:inset 0 3px #ffffff24,0 10px #00000073;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:16px;animation:popIn .35s cubic-bezier(.2,1.5,.4,1) both;max-height:100%;overflow-y:auto;overscroll-behavior:contain}.panel.wide{max-width:440px}.col{display:flex;flex-direction:column;gap:14px;align-items:center}@keyframes popIn{0%{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}.stats{width:100%;display:flex;flex-direction:column;gap:6px}.stats>div{display:flex;justify-content:space-between;align-items:center;background:#00000040;border:3px solid var(--ink);border-radius:12px;padding:6px 14px;font-size:18px;text-shadow:var(--o2)}.stats b{font-weight:400;color:var(--gold);font-size:22px}.cards{display:flex;gap:14px;justify-content:center;width:100%;max-width:480px;margin-top:10px}.card{flex:1 1 0;max-width:210px;pointer-events:auto;font-family:var(--font);border:4px solid var(--ink);border-radius:20px;padding:26px 10px 16px;background:linear-gradient(#fffaf0,#ffe2b0);box-shadow:inset 0 -6px #a05a1440,0 8px 0 var(--ink);position:relative;cursor:pointer;color:var(--ink);animation:cardIn .45s cubic-bezier(.2,1.6,.4,1) both;transition:transform .2s,opacity .2s}.card:nth-child(2){animation-delay:.1s}.card.r-rare{background:linear-gradient(#f2fbff,#b8e6ff)}.card.r-epic{background:linear-gradient(#fbf0ff,#dcb4ff)}.card-tag{position:absolute;top:-15px;left:50%;transform:translate(-50%);color:#fff;padding:2px 14px;border-radius:999px;border:3px solid var(--ink);font-size:14px;white-space:nowrap;text-shadow:0 2px 0 var(--ink);background:#b0702e}.r-rare .card-tag{background:#2a8cff}.r-epic .card-tag{background:#a33cff}.card-icon{width:96px;height:96px;margin:0 auto 10px;border-radius:22px;border:3px solid var(--ink);background:radial-gradient(circle at 50% 35%,#fff,#ffd98a);display:grid;place-items:center;position:relative;box-shadow:inset 0 -5px #0000001f}.r-rare .card-icon{background:radial-gradient(circle at 50% 35%,#fff,#8fd4ff)}.r-epic .card-icon{background:radial-gradient(circle at 50% 35%,#fff,#d29bff)}.card-icon svg{width:68px;height:68px}.card-badge{position:absolute;bottom:-12px;right:-14px;font-size:30px;color:#fff;text-shadow:var(--o2),0 4px 0 var(--ink)}.card-title{font-size:22px;line-height:1.1}.card-desc{font:700 14px/1.3 system-ui,sans-serif;opacity:.8;margin-top:6px;min-height:36px}.card-stars{color:#ffb400;font-size:20px;text-shadow:0 2px 0 var(--ink);letter-spacing:2px;margin-top:6px}.card.picked{transform:scale(1.1) translateY(-10px)}.card.faded{opacity:.25;transform:scale(.9)}@keyframes cardIn{0%{transform:scale(.3) translateY(60px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}#arm-list{width:100%;display:flex;flex-direction:column;gap:10px}.arm-row{display:flex;align-items:center;gap:12px;background:#00000040;border:3px solid var(--ink);border-radius:16px;padding:10px;text-align:left}.arm-icon{width:56px;height:56px;flex:none;border-radius:14px;background:radial-gradient(circle at 50% 35%,#fff,#ffd98a);border:3px solid var(--ink);display:grid;place-items:center}.arm-icon svg{width:42px;height:42px}.arm-info{flex:1;min-width:0}.arm-name{font-size:20px;text-shadow:var(--o2)}.arm-desc{font:700 12px/1.3 system-ui,sans-serif;opacity:.85}.arm-lv{display:flex;gap:4px;margin-top:5px}.arm-lv i{width:16px;height:9px;border-radius:4px;background:#ffffff2e;border:2px solid var(--ink)}.arm-lv i.on{background:var(--gold)}@media(max-height:520px){.screen{gap:8px;padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}#screen-menu{padding-top:calc(env(safe-area-inset-top) + 14px);padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}.logo{font-size:clamp(40px,11vh,64px)}.tagline{font-size:16px}.menu-bottom{gap:8px}.hint{display:none}.title{font-size:30px}.subtitle{font-size:15px}.btn{font-size:19px;padding:8px 22px 10px;min-width:150px;box-shadow:inset 0 -5px #0000002e,inset 0 3px #ffffff73,0 5px 0 var(--ink)}.btn.big{font-size:28px;padding:8px 40px 12px;min-width:200px}.btn small{font-size:13px;margin-top:0}.ghost-btn{font-size:13px;padding:3px 12px 3px 6px}.ghost-btn svg{width:18px;height:18px}.note{font-size:12px;margin-top:-4px}.col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}.panel{padding:14px 16px 16px;gap:10px;max-width:460px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stats>div{padding:3px 10px;font-size:14px}.stats b{font-size:18px}.cards{margin-top:2px;max-width:420px}.card{padding:18px 8px 10px}.card-icon{width:60px;height:60px;margin-bottom:6px;border-radius:16px}.card-icon svg{width:42px;height:42px}.card-badge{font-size:22px}.card-title{font-size:18px}.card-desc{font-size:12px;min-height:0}.card-stars{font-size:16px;margin-top:2px}.arm-row{padding:6px 8px}.arm-icon{width:44px;height:44px}.arm-icon svg{width:32px;height:32px}#banner{top:16%}#banner .b1{font-size:48px}#joy-home{bottom:calc(env(safe-area-inset-bottom) + 84px);left:calc(env(safe-area-inset-left) + 130px)}#tutorial{bottom:calc(env(safe-area-inset-bottom) + 48px);left:calc(env(safe-area-inset-left) + 10px);transform:none}#tutorial .tut-text{bottom:18px;left:210px;transform:none;text-align:left;width:280px;font-size:20px}}@media(max-width:380px){.card-icon{width:80px;height:80px}.card-icon svg{width:56px;height:56px}.card-title{font-size:19px}.pill{font-size:15px;height:34px}.hearts svg{width:24px;height:24px}}