:root{--bg:#2b1d4f;--panel:#3b2a6b;--panel2:#4a3683;--ink:#fff8e7;--muted:#c9bfe8;--gold:#ffd400;--go:#3ccf5a;--shop:#ff9f1c;--danger:#ff4d5e;--radius:16px;color:var(--ink);font-family:Comic Sans MS,Chalkboard SE,Comic Neue,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:0}button:disabled{opacity:.45;cursor:default}.hidden{display:none!important}#app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}#hud{background:#1d1238;align-items:center;gap:6px;padding:8px 10px;font-size:clamp(14px,4vw,20px);display:flex}.stat{background:var(--panel);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:4px 10px;display:flex}.stat b{font-variant-numeric:tabular-nums}.testBadge{color:#fff;background:#ff3fa4;font-weight:800}.orb{background:radial-gradient(circle at 35% 35%, #fff7a8, var(--gold) 55%, #c79a00);width:.9em;height:.9em;box-shadow:0 0 6px var(--gold);border-radius:50%;display:inline-block}.icon{background:0 0;padding:4px;font-size:1.2em}.restart{background:var(--panel);border-radius:999px;margin-left:auto;padding:4px 12px;font-size:.85em}.popupBtn.no{background:var(--panel2);color:var(--ink)}#hearts.hurt{animation:.3s shake}#play{flex-direction:column;flex:1;min-height:0;display:flex}#fieldWrap{flex:1;min-height:0;position:relative}#field{touch-action:none;outline:none;width:100%;height:100%;display:block}#panel{background:var(--panel);border-radius:var(--radius) var(--radius) 0 0;grid-template:"bench sword""controls sword"/1fr auto;gap:8px;padding:8px 10px 10px;display:grid}@media (aspect-ratio>=1){#play{flex-direction:row}#panel{border-radius:var(--radius) 0 0 var(--radius);grid-template:"sword"1fr"bench""controls"/1fr;align-content:center;width:min(380px,38vw)}#sword{justify-self:center;width:clamp(90px,30vh,180px);font-size:clamp(44px,15vh,96px)}}@media (aspect-ratio>=1) and (height<=500px){#hud{padding:4px 10px;font-size:14px}#panel{gap:6px;padding:6px 8px}.chip{width:44px;height:44px;font-size:24px}.big,.small{min-height:40px;padding:6px 8px;font-size:15px}}#sword{aspect-ratio:1;background:radial-gradient(circle at 40% 35%,#fff2a6,#ffcf33 45%,#e09a00);border-radius:50%;grid-area:sword;align-self:center;width:clamp(110px,30vw,180px);font-size:clamp(56px,16vw,96px);transition:transform 50ms;box-shadow:0 6px #a86f00,0 0 24px #ffd40073}#sword:active,#sword.pop{transform:scale(.92)rotate(-12deg)}#bench{scrollbar-width:none;grid-area:bench;align-items:center;gap:6px;min-height:56px;display:flex;overflow-x:auto}#bench:empty:before{content:attr(data-empty);color:var(--muted);font-size:14px}.chip{background:var(--panel2);border:3px solid #0000;border-radius:50%;flex:none;width:52px;height:52px;font-size:28px;position:relative}.chip.selected{border-color:var(--gold);transform:translateY(-3px)}.chip .count{background:#1d1238;border-radius:999px;padding:1px 6px;font-size:12px;position:absolute;bottom:-4px;right:-4px}#controls{flex-wrap:wrap;grid-area:controls;gap:6px;display:flex}.big{border-radius:12px;flex:1;min-height:48px;padding:12px 10px;font-size:17px;font-weight:700}.small{background:var(--panel2);border-radius:12px;min-height:48px;padding:8px 10px}.small[aria-pressed=true]{background:var(--go);color:#10331a}.go{background:var(--go);color:#10331a;box-shadow:0 4px #1f8a37}.shop{background:var(--shop);color:#3b2200;box-shadow:0 4px #b86a00}#floaters{pointer-events:none;z-index:5;position:fixed;inset:0}.float{text-shadow:0 2px #000;font-size:20px;font-weight:700;animation:.9s ease-out forwards floatUp;position:fixed}.flyOrb{background:radial-gradient(circle at 35% 35%, #fff7a8, var(--gold) 55%, #c79a00);width:14px;height:14px;box-shadow:0 0 8px var(--gold);border-radius:50%;transition:transform .6s cubic-bezier(.5,-.4,.7,1),opacity .6s;position:fixed}#banner{white-space:nowrap;background:#1d1238d9;border-radius:999px;padding:6px 14px;font-size:15px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.modal{z-index:10;background:#0a051999;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--panel);width:min(560px,100%);max-height:85dvh;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;overflow-y:auto}.sheet.small{text-align:center;border-radius:20px;margin:auto 16px}#popup,#sidePick{align-items:center}.sheetHead{justify-content:space-between;align-items:center;display:flex}h1,h2,h3{margin:6px 0}h1{color:var(--gold);text-shadow:0 3px #a86f00;font-size:40px}h3{color:var(--muted);margin-top:14px;font-size:15px}.sides{justify-content:center;gap:12px;margin-top:10px;display:flex}.side{border-radius:16px;flex-direction:column;flex:1;align-items:center;padding:16px 8px;font-size:56px;display:flex}.side span{font-size:22px;font-weight:700}.side.hero{background:#4f9dff}.side.villain{background:#8a3ffc}.row{background:var(--panel2);border-radius:12px;align-items:center;gap:10px;margin:6px 0;padding:8px 10px;display:flex}.row .pic{text-align:center;width:40px;font-size:30px}.row .what{flex:1}.row .what small{color:var(--muted);display:block}.row button{background:var(--go);color:#10331a;border-radius:10px;min-width:92px;min-height:44px;padding:6px 10px;font-weight:700}.row.locked{opacity:.55}.popupEmoji{font-size:72px}.popupBtn{background:var(--go);color:#10331a;border-radius:14px;width:100%;min-height:52px;margin-top:12px;font-size:20px;font-weight:700}.tiny{color:var(--muted);background:0 0;margin-top:10px;font-size:12px;text-decoration:underline}@keyframes floatUp{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-70px)scale(1.3)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}#rotate{display:none}@media (orientation:portrait) and (pointer:coarse){#rotate{z-index:50;background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;font-size:24px;display:flex;position:fixed;inset:0}#rotate .phone{font-size:96px;animation:1.6s ease-in-out infinite turn}}@keyframes turn{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}img.art{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.chip{padding:2px}.row .pic{height:44px}.row .pic img.art{width:44px;height:44px;margin:0 auto}.btnRow{gap:10px;display:flex}.btnRow .popupBtn{flex:1}@media (height<=500px){.sheet.small{padding:10px 16px 12px}.popupEmoji{font-size:40px}.sheet.small h1{font-size:30px}.sheet.small h2{margin:2px 0;font-size:20px}.sheet.small p{margin:4px 0;font-size:14px}.popupBtn{min-height:44px;margin-top:8px;font-size:17px}.side{padding:8px;font-size:40px}}.dragGhost{z-index:40;pointer-events:none;filter:drop-shadow(0 6px 6px #00000073);width:64px;height:64px;position:fixed;transform:translate(-50%,-50%)scale(1.15)}.dragGhost:after{content:"🚫";font-size:24px;position:absolute;top:-10px;right:-10px}.dragGhost.ok:after{content:"✅"}.chip{touch-action:none;position:relative}.chipRank{pointer-events:none;width:24px;height:24px;position:absolute;top:-6px;right:-6px}.panelClose{color:var(--ink);position:absolute;top:8px;right:10px}#popupBody{position:relative}.unitHead{text-align:left;align-items:center;gap:14px;margin:4px 0 6px;display:flex}.unitPic{flex:none;width:88px;height:88px;position:relative}.unitRank{width:40px;height:40px;position:absolute;top:-8px;right:-8px}.unitInfo h2{margin:0}.unitInfo small{color:var(--muted)}.upgradeBtn{justify-content:center;align-items:center;gap:8px;display:flex}.upgradeBtn span{background:#00000026;border-radius:999px;padding:2px 10px}.btnRank{width:30px;height:30px}.hint{color:var(--muted);margin:2px 0 6px;font-size:14px}.sellBtn{color:#fff;letter-spacing:1px;text-shadow:0 2px #0006;background:repeating-linear-gradient(45deg,#e8253b,#e8253b 14px,#c81d31 14px 28px);border:3px solid #fff3;border-radius:14px;width:100%;min-height:52px;margin-top:12px;font-size:20px;font-weight:700;box-shadow:0 4px #8a1020}.btnRow .sellBtn{flex:1;margin-top:12px}.sellWarn{font-size:56px;animation:.5s 2 shake}.danger{color:#ff8a95;font-size:18px}@media (height<=500px){.unitPic{width:64px;height:64px}.sellBtn{min-height:44px;margin-top:8px;font-size:17px}.sellWarn{font-size:36px}.danger{font-size:15px}}
