/* Keep the battlefield and controls together on a portrait phone. */
.two-dragons .arena{aspect-ratio:420/270}
.two-dragons .cat-health{left:50%;top:74%}
.conveyor{position:relative;flex:none;height:76px;margin:12px auto 4px;border:5px solid #7b8a73;border-radius:12px;background:#596851;box-shadow:inset 0 3px 8px #0004,0 3px 0 #c3c8b5;isolation:isolate;overflow:hidden}
.conveyor:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 17px,#fff2 18px 20px);background-position-x:var(--belt-travel);z-index:-1}
.conveyor:after{content:'←';position:absolute;left:8px;bottom:0;font-size:12px;color:#fff9;pointer-events:none}
.conveyor.stopped{border-color:#dbac52}
.conveyor-car{margin:0;scale:.88;transition:none!important;z-index:1}
.conveyor[hidden],.conveyor-car[hidden]{display:none}
.collision-wagon{animation:none!important}
.overlay.home-screen{background:radial-gradient(circle at 50% 15%,#e6f1d7,#f8f5ec 65%);padding:16px;z-index:20}
.home-screen .modal{background:transparent;box-shadow:none;border:0;width:min(100%,400px);padding:16px 8px;max-height:calc(100svh - 32px);overflow:auto}
.home-screen .modal-icon{display:none}
.home-screen .modal h2{font-size:34px;color:#355c49;margin:8px 0 0;letter-spacing:-1px}
.home-hero{position:relative;width:140px;height:135px;margin:8px auto}
.home-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #355c4920)}
.home-hero>span{position:absolute;right:5px;top:30px;font-size:25px;color:#eb6d70;transform:rotate(15deg)}
.home-progress{font-size:12px!important;color:#627d5a;margin:8px 0 16px!important}
.home-tools{display:flex;gap:8px}
.home-tools button{flex:1;padding:12px 4px;border-radius:12px;color:#44633e;background:#e5ebda;font-size:11px;font-weight:700}
.home-levels-title{text-align:left;font-size:13px;color:#627d5a;margin:22px 0 10px}
.home-screen .levels{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 20px;gap:8px}
.home-screen .levels button{padding:10px 5px;background:#fffaf0;border:1px solid #dde3d0}
.levels button.completed{background:#d8e9c9;color:#355c49;box-shadow:inset 0 0 0 1px #b7cea4}
.home-screen .levels button strong{font-size:20px}
.home-screen .levels button small{font-size:9px;display:block;margin-top:3px}
.slots.many-slots{gap:8px;align-items:center}
.slots.many-slots .slot{flex:0 1 43px;min-width:0;min-height:0;height:auto;aspect-ratio:1}
.slots.many-slots .cannon{width:75%;height:65%}
.slots.many-slots .cannon:before{left:33%;width:34%}
.board{box-sizing:content-box;width:calc(76% - 10px);margin-inline:auto;aspect-ratio:8/9;background-size:calc(100% / 8) calc(100% / 9)}
.car{border-width:1px;border-radius:5px;gap:3px;scale:.88}
.car.blocked{filter:brightness(.95)}
.car .arrow{display:block;width:28px;height:28px;flex-shrink:0;filter:drop-shadow(0 1px 1px #0003)}
.vehicle-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8}
.travelling{pointer-events:none;transition:none;animation:none!important;transform-origin:center;will-change:transform;z-index:1}
.slot.in-transit .cannon,.slot.in-transit .waiting{visibility:hidden}
.slot.in-transit:after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--color);animation:slot-pulse .8s ease-in-out infinite}
@keyframes slot-pulse{0%,100%{opacity:.18}50%{opacity:.65}}
.slot.arrived .cannon{animation:deploy .25s ease-out}
.slot.bonus-slot{border-color:#dab444;box-shadow:0 0 0 2px #f4d85f55}
.slot.bonus-slot:before{content:attr(data-uses);position:absolute;bottom:-5px;right:-3px;background:#dfb22b;color:#fff;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;font-size:9px;z-index:2}
.powerup-status{position:absolute;left:50%;top:8px;transform:translateX(-50%);border-radius:10px;background:#fffbe7d9;padding:5px 8px;font-size:10px;color:#355c49;pointer-events:none;white-space:nowrap}
canvas.frozen{filter:brightness(1.06) saturate(.75)}
@keyframes deploy{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.car.vertical{gap:2px}
.levelbar{position:relative;padding-bottom:40px}
.speed-control{position:absolute;left:22px;right:22px;bottom:9px;display:flex;align-items:center;gap:9px;height:22px;color:#71836a;font-size:9px}
.speed-control label{white-space:nowrap}
.speed-control input{flex:1;min-width:0;accent-color:#3c604b;cursor:pointer;touch-action:pan-y;height:22px;margin:0}
.speed-control output{min-width:34px;text-align:right;font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}
.speed-control button{background:#e8ecdf;color:#587052;border-radius:50%;width:23px;height:23px;padding:0;font-size:17px}
.car.single .ammo{position:absolute;bottom:3px;right:3px;min-width:11px;height:12px;font-size:8px;background:#0002}
.car.single .arrow{width:24px;height:24px;margin:0}
.cat-badge{display:none}
#cat-upgrade{display:grid;place-items:center;grid-column:3;grid-row:2}
#cat-upgrade img{width:25px;height:25px;object-fit:contain}
#settings{grid-column:2;grid-row:2}
.palette-settings{text-align:left;margin:20px 0}
.palette-settings h3{font-size:15px;margin:0 0 12px}
.volume-control{display:grid;grid-template-columns:1fr auto;gap:8px;margin:16px 0;font-size:13px;color:#496044}
.volume-control output{font-variant-numeric:tabular-nums;color:#7b866e}
.volume-control input{grid-column:1/-1;width:100%;accent-color:#3c604b;margin:0;min-height:28px}
.overlay .modal{max-height:calc(100svh - 32px);overflow-y:auto}
#generation-mode{width:100%;padding:10px;border:1px solid #b9c7ad;border-radius:9px;background:#f8faef;color:#355c49;font:inherit}
.palette-options{display:flex;gap:10px}
.palette-options button{flex:1;background:#eceee2;border:2px solid transparent;border-radius:12px;padding:12px 8px;color:#476243;font-size:12px}
.palette-options button[aria-pressed="true"]{border-color:#527e50;background:#e0ead7}
.palette-swatches{display:flex;justify-content:center;gap:3px;margin-top:10px}
.palette-swatches i{width:11px;height:16px;border-radius:3px}
.cat-health{position:absolute;left:15.5%;top:52%;transform:translateX(-50%);background:#fffaf0b8;border-radius:14px;padding:4px 7px;color:#e15f62;font-size:15px;letter-spacing:1px;z-index:2;white-space:nowrap}
.cat-health,.cat-health.hurt{background:transparent}
.cat-health svg{visibility:hidden}
.cat-heart{position:relative;display:inline-block;width:20px;height:20px;vertical-align:middle;letter-spacing:0}
.cat-heart svg{display:block;width:100%;height:100%;overflow:visible}
.cat-heart-outline{fill:#fff6ed;stroke:#cc5258;stroke-width:1.6}
.cat-heart-fill{fill:#eb535e;clip-path:inset(calc((1 - var(--fill,1)) * 100%) 0 0 0)}
.cat-upgrades{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.cat-upgrades button{background:#e8eddd;color:#355c49;border-radius:12px;padding:12px;font-weight:700}
.cat-upgrades button small{font-weight:400;font-size:11px}
.cat-upgrades button:disabled{opacity:.45;cursor:default}
.car.dual-color{background:linear-gradient(90deg,var(--color) 0 50%,var(--second-color) 50% 100%)}
.car.horizontal.dual-color{background:linear-gradient(0deg,var(--color) 0 50%,var(--second-color) 50% 100%)}
.dual-cannon{background:linear-gradient(90deg,var(--color) 0 65%,var(--second-color) 65% 100%)}
.next-color{position:absolute;right:-5px;bottom:-4px;width:19px;height:19px;border:2px solid #fff;border-radius:50%;color:white;font-size:12px;display:grid;place-items:center}
.wagon-link,.wagon-lock{position:absolute;z-index:2;padding:2px 4px;border-radius:6px;border:1px solid #fff9;font:700 10px sans-serif;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #0008}
.wagon-link{bottom:0;right:0;background:#344955;color:white}
.wagon-lock{top:-3px;right:-3px;color:white;box-shadow:0 1px 4px #0003}
.wagon-lock[hidden]{display:none}
.locked-wagon .arrow{opacity:.5}
.levels{flex-wrap:wrap}
.levels button{flex:1 0 26%;min-width:0}
.wagon-tunnel{position:absolute;z-index:0;border:3px solid #929888;border-radius:45% 45% 8px 8px;background:#20332a;color:#fff8dc;box-shadow:inset 0 3px 8px #0008;padding:0;overflow:hidden}
.tunnel-arch{position:absolute;inset:1px;border:2px solid #c4c7b4;border-bottom:0;border-radius:45% 45% 0 0}
.tunnel-exit-arrow{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;color:#d0d9bb;opacity:.8}
.tunnel-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,#a7afa6 5px 8px);opacity:.7}
.wagon-tunnel b{position:absolute;top:0;right:0;background:#344b3c;color:#fff;border-radius:4px;padding:1px 4px;font-size:9px;text-shadow:0 1px 2px #0008}
.wagon-tunnel.empty{opacity:.45}
.wagon-tunnel.empty .tunnel-bars{opacity:.2}
.car.emerging{animation:emerge-wagon .4s ease-out both}
@keyframes emerge-wagon{from{transform:translate(var(--emerge-x),var(--emerge-y)) scale(.5);opacity:0}to{transform:translate(0,0) scale(1);opacity:1}}
.overlay.victory{background:#315b489c}
.victory .modal{background:radial-gradient(circle at 50% 30%,#fff3c6,#fffaf0 65%);border:1px solid #fff9;max-height:calc(100svh - 32px);overflow:auto}
.victory .modal-icon{display:none}
.victory .modal h2{margin:10px 0;color:#355c49}
.victory-stars{color:#edb544;font-size:28px;letter-spacing:6px;text-shadow:0 2px 0 #c79239}
.victory-cat{position:relative;width:140px;margin:8px auto 0}
.victory-cat img{width:100%;height:140px;object-fit:contain;filter:drop-shadow(0 6px 9px #b8aa7138);animation:victory-bob 2s ease-in-out infinite}
.victory-cat>span{position:absolute;right:0;top:20px;color:#e16c72;font-size:26px;transform:rotate(15deg)}
.victory .modal p{margin:10px 0 16px}
.victory-stats{display:flex;justify-content:space-around;gap:8px;padding:14px 4px;border-radius:14px;background:#e8eddba8}
.victory-stats b{display:block;color:#466b45;font-size:21px}
.victory-stats span{display:block;font-size:9px;color:#829077;margin-top:4px}
.victory-wallet{font-size:11px;color:#8c9379;margin:12px 0 18px}
.victory .primary{background:#3e7050}
@keyframes victory-bob{50%{transform:translateY(-4px)}}
/* Compact translucent controls sit over the dragon arena. */
header{position:absolute;top:8px;right:8px;height:auto!important;padding:0!important;border:0;z-index:3}
header .tools{display:grid;grid-template-columns:repeat(3,34px);gap:6px}
header .icon-button,header #pause{width:34px;height:34px;border-radius:50%;background:#fffaf09c;color:#355442;border:1px solid #fff8;padding:0;font-size:0;backdrop-filter:blur(4px)}
header #pause span{font-size:18px}
header .icon-button{font-size:17px}
.levelbar{position:absolute;top:8px;left:8px;z-index:3;height:auto!important;padding:0!important}
.level-pill{background:#fffaf09c;backdrop-filter:blur(4px);padding:9px 11px}
.arena{margin:0;width:100%;height:auto;aspect-ratio:420/230;border-radius:0}
.armor-badge{top:49px}
@media(max-width:500px){
 .game{height:auto;min-height:100svh;display:flex;flex-direction:column}
 header{height:40px;flex-shrink:0}
 .levelbar{height:65px;padding:4px 20px 26px;flex-shrink:0}
 .speed-control{left:20px;right:20px;bottom:4px}
 h1{font-size:22px}
 .arena{width:100%;height:auto;aspect-ratio:420/230;margin:0;border-radius:0;flex-shrink:0}
 .cat-badge{font-size:6px;padding:3px 5px}
 .distance{bottom:8px;font-size:8px}
 .armor-badge{padding:5px 8px;font-size:10px}
 .battery{height:65px;padding:4px 24px 4px;flex-shrink:0}
 .slots{padding-top:5px;gap:20px}
 .slot{width:43px;height:43px}
 .cannon{width:33px;height:28px;font-size:11px}
 .cannon:before{left:9px;width:11px;top:-12px;height:15px}
 .yard{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px 0}
 .yard-heading{height:20px;flex-shrink:0;margin-bottom:4px}
 .board{width:min(calc(100% - 64px),calc((max(700px,100svh) - 156px - min(100vw,420px) * 230 / 420) * 8 / 9 - 10px));aspect-ratio:8/9;flex:none;min-height:0;height:auto;margin-inline:auto}
 .legend{height:29px;padding:8px 0;flex-shrink:0;margin-top:auto}
 footer{height:42px;flex-shrink:0;padding:4px 10px max(8px,env(safe-area-inset-bottom))}
 .modal{padding:23px 22px}
}
@media(max-width:500px) and (max-height:780px){
 .arena{width:100%;height:auto}
 .legend{height:26px}
}
.cannon:before,.slots.many-slots .cannon:before{left:50%;transform:translateX(-50%) rotate(var(--aim-angle,0rad));transform-origin:50% 100%;transition:transform .12s ease-out}
.cannon-ammo{position:relative;z-index:1}
.overlay.home-screen{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(100%,420px);height:100svh;padding:0;overflow:hidden;background:linear-gradient(#39c5ed 0 45%,#abd976 70%,#528833);backdrop-filter:none}
.home-screen .modal{position:relative;isolation:isolate;width:100%;height:100%;max-height:none;margin:0;padding:0;overflow:hidden;border-radius:0}
.home-screen #modal-body{display:contents}
.home-art{position:absolute;z-index:-1;top:50%;left:0;transform:translateY(-50%);width:100%;aspect-ratio:2/3}
.home-art img{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}
.home-screen #modal-kicker{position:absolute;top:calc(76px + env(safe-area-inset-top));left:0;width:100%;font-size:9px;color:#fff;letter-spacing:1.5px;text-shadow:0 2px 4px #17455d66}
.home-screen .modal h2{position:absolute;top:calc(92px + env(safe-area-inset-top));left:0;width:100%;margin:0;font-size:42px;font-weight:950;color:#fff3cc;letter-spacing:-1.8px;text-shadow:0 3px 0 #287790,0 5px 12px #15465c66;line-height:1.1}
.home-screen .modal h2 span{color:#ffdc66;font-size:32px}
.yarn-level{position:absolute;left:50%;top:38.3%;transform:translate(-50%,-50%);width:32%;color:#9b3d30;text-shadow:0 2px 0 #fff9;display:flex;flex-direction:column;align-items:center;line-height:1}
.yarn-level>span{font-weight:900;font-size:clamp(14px,4.5vw,19px);letter-spacing:.8px}
.yarn-level strong{font-size:clamp(40px,14vw,59px);font-weight:950;margin-top:5px;color:#dc6b23}
.home-status{position:absolute;top:calc(20px + env(safe-area-inset-top));left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}
.home-status>span{font-weight:850;font-size:14px!important;color:#34624a;background:#fff9edee;border:2px solid #fff;border-radius:22px;padding:8px 14px;box-shadow:0 3px 0 #1b768f45;margin:0!important}
.home-status .home-wallet{display:flex;align-items:center;gap:7px;min-height:44px;padding:3px 7px 3px 4px;background:#fff9edee;border:2px solid #fff;border-radius:24px;box-shadow:0 3px 0 #1b768f45;color:#745022;font-weight:850;font-size:16px}
.home-wallet .result-coins{width:34px;height:34px;flex:none}
.home-wallet b{min-width:25px;text-align:center;font-variant-numeric:tabular-nums}
.wallet-plus{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(#a8df68,#70ac3d);box-shadow:0 2px 0 #507c2b;color:white;font-size:20px;line-height:1}
.home-wallet:hover{background:#fff1c9}
.home-screen #modal-action{position:absolute;bottom:calc(102px + env(safe-area-inset-bottom));left:7%;width:86%;height:72px;padding:0;border:3px solid #fff7cf;border-radius:24px;background:linear-gradient(#b2ed58,#68bf29);color:white;font-size:30px;font-weight:900;text-shadow:0 2px 1px #377e39;box-shadow:inset 0 3px 0 #fff7,0 6px 0 #3e7c26,0 10px 22px #244b3b55}
.home-screen #modal-action span{display:none}
.home-screen .home-tools{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:14px;right:14px;gap:8px}
.home-screen .home-tools button{min-width:0;display:flex;align-items:center;flex-direction:column;gap:5px;padding:9px 2px 7px;border:1px solid #ffffff77;border-radius:16px;background:#215544cc;box-shadow:inset 0 1px 0 #fff4,0 3px 0 #21453666;color:#fff9de;font-size:10px;backdrop-filter:blur(5px)}
.home-tools button>span{font-size:25px;height:29px;line-height:29px;font-weight:900}
.cat-screen .modal{max-height:calc(100svh - 30px);overflow:auto;padding:22px 18px}
.cat-screen .modal-icon{display:none}
.cat-screen .modal h2{font-size:25px;margin:10px 0}
.cat-collection h3{font-size:15px;color:#42613d;margin:12px 0 6px}
.cat-collection p{font-size:10px;margin:0 0 10px;line-height:1.4}
.cat-look-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cat-look-options button{padding:7px 3px;border:2px solid #dbe2cd;border-radius:14px;background:#edf0e2;color:#496044;display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0}
.cat-look-options img{width:100%;height:64px;object-fit:contain}
.cat-look-options b{font-size:11px}.cat-look-options small{font-size:8px;line-height:1.3}
.cat-look-options [aria-pressed=true]{border-color:#72a453;background:#e0f0cc;box-shadow:0 0 0 2px #72a45322}
.cat-look-options button:disabled{cursor:default;background:#ecece5;color:#8c9384}
.cat-look-options button:disabled img{filter:saturate(.35);opacity:.6}
@media(max-height:650px){.home-screen #modal-kicker{top:62px;font-size:8px}.home-screen .modal h2{top:77px;font-size:34px}.home-screen #modal-action{height:59px;bottom:94px}.home-screen .home-tools{bottom:15px}.home-status{top:13px}}
.overlay.cat-screen{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(100%,420px);height:100svh;padding:0;background:#dfcda8 url('./assets/upgrade-background.png') center/cover;backdrop-filter:none}
.cat-screen .modal{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:none;padding:0;border-radius:0;background:linear-gradient(#fff9e9dd,#fff6de44 35%,#fff5df88);box-shadow:none;overflow:hidden}
.cat-screen .modal h2{flex:none;min-height:76px;text-align:left;margin:0;padding:24px 18px 14px;color:#564328;font-size:30px;letter-spacing:-1px}
.cat-screen #modal-kicker{position:absolute;right:16px;top:23px;display:flex;align-items:center;gap:6px;border:2px solid #fff8d5;background:#fff7dce8;border-radius:20px;padding:7px 10px;color:#8a6121;letter-spacing:0;font-size:11px;font-weight:850;box-shadow:0 3px 0 #92703c24}
.cat-screen #modal-kicker:before{content:'';width:22px;height:22px;background:url('./assets/upgrade-icons.png') 100% 100%/300% 200%}
.cat-screen #modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 14px 12px;scrollbar-width:thin}
.cat-screen #modal-action{flex:none;margin:8px 14px max(14px,env(safe-area-inset-bottom));width:calc(100% - 28px);padding:14px;border:2px solid #fff3b6;border-radius:18px;background:linear-gradient(#9bd85e,#589936);box-shadow:inset 0 2px 0 #fff6,0 4px 0 #43762c;color:white;font-size:14px;text-shadow:0 1px #3d773a}
.cat-screen #modal-secondary{display:none}
.cat-showcase{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;min-height:145px;padding:12px 16px;background:linear-gradient(120deg,#fffaf0e8,#fff5d0b8);border:2px solid #fff7dc;border-radius:25px;box-shadow:0 5px 14px #77553118}
.cat-showcase>div{flex:1;min-width:0}.cat-showcase>img{width:116px;height:116px;object-fit:contain;filter:drop-shadow(0 5px 4px #74562d22)}
.cat-showcase-kicker{font-size:8px;font-weight:850;letter-spacing:1.5px;color:#aa8951}
.cat-showcase h3{font-size:27px;margin:5px 0;color:#65492e;letter-spacing:-.8px}
.cat-showcase p{font-size:10px!important;line-height:1.4!important;margin:6px 0 9px!important;color:#85724f!important}
.cat-showcase small{font-size:8px;color:#9a8259}
.cat-unlock-track{height:7px;margin-bottom:5px;overflow:hidden;background:#dbcba1;border-radius:10px;box-shadow:inset 0 1px 2px #6b512333}
.cat-unlock-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#8ab94f,#b8e575)}
.cat-screen .cat-look-options{margin-top:12px;gap:7px}
.cat-screen .cat-look-options button{position:relative;border-color:#e3d6b4;background:#fff8e8ed;box-shadow:0 3px 0 #b49b6926;border-radius:17px;padding:8px 3px 6px}
.cat-screen .cat-look-options img{height:61px;filter:drop-shadow(0 3px 2px #715a2520)}
.cat-screen .cat-look-options b{color:#795e3f;font-size:10px}
.cat-screen .cat-look-options small{color:#a18a62;font-size:8px}
.cat-screen .cat-look-options [aria-pressed=true]{background:#f0f8d8;border-color:#8eb359;box-shadow:0 3px 0 #76974533}
.cat-screen .cat-look-options [aria-pressed=true] small{color:#588338;font-weight:800}
.cat-screen .cat-look-options button:disabled{background:#e8e1d4c9;border-color:#d7ccb4}
.cat-screen .cat-look-options button:disabled img{filter:saturate(.35);opacity:.6}
.upgrade-heading{display:flex;justify-content:space-between;align-items:center;font-size:16px;color:#694d31;text-align:left;margin:20px 3px 12px}
.upgrade-heading span{font-size:9px;color:#9b8159;font-weight:600}
.cat-screen .cat-upgrades{display:flex;flex-direction:column;gap:10px;margin:0}
.cat-screen .upgrade-card{display:flex;align-items:center;gap:9px;text-align:left;min-height:87px;width:100%;padding:11px 10px;border:2px solid #fff9e3;border-radius:20px;background:linear-gradient(115deg,#fffbef,#f6edd5);box-shadow:0 4px 0 #b39c692a,0 4px 10px #80623110;color:#64492f}
.ability-art{flex:none;display:block;width:55px;height:55px;background-image:url('./assets/upgrade-icons.png');background-size:300% 200%;background-repeat:no-repeat}
.ability-health{background-position:0 0}.ability-regen{background-position:50% 0}.ability-shield{background-position:100% 0}.ability-frost{background-position:0 100%}.ability-luck{background-position:50% 100%}
.upgrade-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.upgrade-copy>b{font-size:12px}.upgrade-copy>small{font-size:9px;line-height:1.35;color:#9b8260}
.upgrade-pips{display:flex;gap:4px;margin-top:2px}.upgrade-pips i{width:14px;height:5px;border-radius:4px;background:#dfd3b7;box-shadow:inset 0 1px 1px #795d251a}.upgrade-pips i.filled{background:linear-gradient(#afe276,#79aa48)}
.upgrade-price{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:69px;min-height:42px;padding:6px 7px;border-radius:12px;background:linear-gradient(#a8dc69,#80b54d);border:1px solid #e5fac4;color:#fff;font-size:9px;font-weight:800;box-shadow:0 3px 0 #5e8c3830}
.upgrade-price b{font-size:13px}.upgrade-price small{font-size:8px;color:#f6ffdd}
.cat-screen .upgrade-card:disabled{background:#f3eddf;opacity:1;cursor:default}.upgrade-card:disabled .upgrade-price{background:#e1d6bf;border-color:#eee6d2;color:#927c5c;box-shadow:none}.upgrade-card:disabled .upgrade-price small{color:#9f8967}
.upgrade-card.maxed .upgrade-price{color:#6c8c45;background:#e4eccf}.upgrade-card.maxed .ability-art{opacity:.8}
.cat-screen .upgrade-note{font-size:9px;line-height:1.5;color:#8d7857;margin:16px 10px 4px;text-align:center}
@media(max-width:350px){.cat-showcase{padding:10px 12px}.cat-showcase>img{width:101px;height:108px}.cat-screen .upgrade-card{gap:6px;padding:10px 7px}.ability-art{width:44px;height:44px}.upgrade-copy>b{font-size:11px}.upgrade-price{min-width:58px;padding:5px}.upgrade-heading span{font-size:8px}}
.cannon,.cannon.dual-cannon{background:transparent;border-color:transparent;border-radius:0;box-shadow:none}
.cannon:after{content:'';position:absolute;inset:-2px;z-index:0;background-color:var(--color);background-image:url('./assets/cannon-body-top.png');background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:multiply;mask-image:url('./assets/cannon-body-top.png');mask-size:100% 100%;mask-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 2px 1px #45523f55)}
.cannon.dual-cannon:after{background-image:url('./assets/cannon-body-top.png'),linear-gradient(90deg,var(--color) 0 65%,var(--second-color) 65% 100%);background-blend-mode:multiply,normal}
.cannon:before{z-index:1;border:0;border-radius:0;box-shadow:none;background-color:var(--color);background-image:url('./assets/cannon-barrel-top.png');background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:multiply;mask-image:url('./assets/cannon-barrel-top.png');mask-size:100% 100%;mask-repeat:no-repeat}
.cannon-ammo{z-index:2;min-width:17px;padding:1px 3px;border-radius:6px;background:#22342970;color:#fffbea;text-shadow:0 1px 1px #162315;font-size:10px;box-shadow:inset 0 1px 0 #fff2}
.cannon:after{inset:-6px}
.cannon:before,.slots.many-slots .cannon:before{width:45%;height:24px;top:calc(50% - 24px)}
.cannon-ammo{font-size:12px;min-width:19px}
.slots.many-slots .cannon:after{inset:-5px}
.slots.many-slots .cannon:before{height:21px;top:calc(50% - 21px)}
.slots.many-slots .cannon-ammo{font-size:10px;min-width:16px;padding:1px 2px}
.cannon:after,.slots.many-slots .cannon:after{inset:auto;left:50%;top:50%;width:calc(100% + 12px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.slots.many-slots .cannon:after{width:calc(100% + 10px)}
.cannon:after{width:calc(100% + 20px)}
.slots.many-slots .cannon:after{width:calc(100% + 16px)}
.cannon:before,.slots.many-slots .cannon:before{width:55%;height:29px;top:calc(50% - 29px)}
.slots.many-slots .cannon:before{height:24px;top:calc(50% - 24px)}
.battery{padding-bottom:28px}
.slot .cannon-ammo{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;min-width:0;padding:0;background:none;box-shadow:none;border-radius:0;font-size:16px;font-weight:900;line-height:18px;color:#42513b;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff;white-space:nowrap}
.cannon-ammo:before{content:'';width:6px;height:13px;border-radius:3px 3px 2px 2px;background:var(--color);border:1px solid #fff8;box-shadow:0 1px 1px #324b3e55}
.slots.many-slots .cannon-ammo{font-size:13px;padding:0;min-width:0;gap:2px}
.slots.many-slots .cannon-ammo:before{width:5px;height:11px}
.slot.in-transit .cannon-ammo{visibility:hidden}
.battery{height:92px;padding:9px 18px 18px;flex-shrink:0;background:linear-gradient(#edd3ac,#e8c69b);border-top:2px solid #fff5;border-bottom:2px solid #fff5}
.slots{padding-top:0;gap:16px;align-items:center}
.slot{width:54.4px;height:54.4px;background:#a3937e;border-color:#f6eddb;box-shadow:inset 0 2px 4px #57472d33}
.slots.many-slots .slot{flex-basis:36.55px}
.slots.many-slots .cannon{width:calc((100% + 4px) * .88235294 - 3px);height:calc((100% + 4px) * .76470588 - 2.6px)}
.slot.occupied{background:transparent;border-color:transparent;box-shadow:none}
.cannon{width:45px;height:36px}
.cannon:after,.slots.many-slots .cannon:after{width:calc(100% + 20px);aspect-ratio:1.12;background-image:url('./assets/cannon-body-simple.png');mask-image:url('./assets/cannon-body-simple.png');filter:drop-shadow(0 2px 1px #57432944)}
.cannon.dual-cannon:after{background-image:url('./assets/cannon-body-simple.png'),linear-gradient(90deg,var(--color) 0 65%,var(--second-color) 65% 100%)}
.cannon:before,.slots.many-slots .cannon:before{width:90%;height:40px;top:calc(50% - 40px);background-image:url('./assets/cannon-barrel-simple.png');mask-image:url('./assets/cannon-barrel-simple.png')}
.slots.many-slots .cannon:after{width:calc(100% + 12px)}
.slots.many-slots .cannon:before{width:90%;height:31px;top:calc(50% - 31px)}
.slot .cannon-ammo{top:calc(100% + 1px);color:#fff;font-size:20px;line-height:23px;text-shadow:none}
.cannon-ammo:before{width:8px;height:19px;border-radius:5px 5px 2px 2px;border-color:#fff7;box-shadow:inset 0 -3px 0 #0002,0 1px 1px #392d2166}
.slots.many-slots .cannon-ammo{font-size:15px;line-height:20px}
.slots.many-slots .cannon-ammo:before{width:6px;height:16px}
.cannon:after,.slots.many-slots .cannon:after{width:calc((100% + 20px) * .85);aspect-ratio:1;background-image:url('./assets/cannon-base-top-v2.png');mask-image:url('./assets/cannon-base-top-v2.png');background-blend-mode:luminosity}
.slots.many-slots .cannon:after{width:calc((100% + 12px) * .85)}
.cannon.dual-cannon:after{background-image:url('./assets/cannon-base-top-v2.png'),linear-gradient(90deg,var(--color) 0 65%,var(--second-color) 65% 100%);background-blend-mode:luminosity,normal}
.cannon:before,.slots.many-slots .cannon:before{width:34px;height:51px;top:calc(50% - 38.25px);transform-origin:50% 75%;background-image:url('./assets/cannon-barrel-short-shaft.png');mask-image:url('./assets/cannon-barrel-short-shaft.png')}
.slots.many-slots .cannon:before{width:25.5px;height:38.25px;top:calc(50% - 28.6875px)}
.slot.firing .cannon{animation:none}
.slot.firing .cannon:before{animation:barrel-shot .14s ease-out}
@keyframes barrel-shot{0%,100%{transform:translateX(-50%) rotate(var(--aim-angle,0rad)) scale(1)}30%{transform:translateX(-50%) rotate(var(--aim-angle,0rad)) scale(1.1)}}
/* Keep full-size guns until the row actually runs out of room. */
.slots .slot,.slots.many-slots .slot{container-type:inline-size;flex:0 1 54.4px;min-width:0;height:auto;aspect-ratio:1}
.slots .cannon,.slots.many-slots .cannon{width:89.285714cqw;height:71.428571cqw}
.slots .cannon:after,.slots.many-slots .cannon:after{width:102.876984cqw}
.slots .cannon:before,.slots.many-slots .cannon:before{width:67.460317cqw;height:101.190476cqw;top:calc(50% - 75.892857cqw)}
.slot .cannon-ammo,.slots.many-slots .cannon-ammo{font-size:39.68254cqw;line-height:45.63492cqw}
.overlay.victory{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(100%,420px);height:100svh;padding:0;background:#fff2d3 url('./assets/victory-background.png') center/cover;backdrop-filter:none;overflow:hidden}
.victory .modal{display:flex;flex-direction:column;width:100%;height:100%;max-height:none;padding:24px 20px max(18px,env(safe-area-inset-bottom));border-radius:0;background:linear-gradient(#fff5de55,#fff8e199 55%,#fff2d599);box-shadow:none}
.victory #modal-icon{display:none}
.victory #modal-kicker{flex:none;font-size:10px;letter-spacing:2px;color:#957547}
.victory .modal h2{flex:none;font-size:34px;color:#5c422b;margin:9px 0 5px;line-height:1.12;text-shadow:0 2px #fff8}
.victory #modal-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:0 0 8px}
.result-art{display:block;background-image:url('./assets/victory-icons.png');background-repeat:no-repeat;background-size:400% auto;aspect-ratio:1}
.result-star{background-position:0 50%}.result-coins{background-position:33.333333% 50%}.result-clock{background-position:66.666667% 50%}.result-heart{background-position:100% 50%}
.victory-stars{display:flex;justify-content:center;align-items:center;gap:0;height:96px;margin:0;letter-spacing:0;text-shadow:none}
.victory-stars .result-star{width:80px;height:80px;filter:drop-shadow(0 4px 2px #9e682d30)}
.victory-stars .result-star:nth-child(2){width:96px;height:96px;margin-top:-7px}
.victory-stars .earned{animation:result-star-pop .6s cubic-bezier(.2,.9,.3,1.3) var(--delay) both}
.victory-stars .unearned{filter:grayscale(1);opacity:.23;transform:scale(.9)}
.victory-cat{position:relative;width:100%;height:190px;margin:0 auto;display:grid;place-items:center;isolation:isolate}
.victory-cat img{width:180px;height:180px;object-fit:contain;filter:drop-shadow(0 9px 4px #9e682d25);animation:victory-bob 2s ease-in-out infinite;z-index:1}
.victory-halo{position:absolute;width:240px;height:180px;border-radius:50%;background:radial-gradient(ellipse,#fffbd2,#ffefaf55 55%,transparent 72%);z-index:0}
.victory-spark{position:absolute;width:20px;height:20px;left:var(--x);top:15px;z-index:2;pointer-events:none;animation:result-spark 1.5s ease-out var(--delay) both}
.victory .modal .victory-message{font-size:12px;font-weight:650;color:#927043;line-height:1.5;margin:0 0 16px}
.victory-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;background:none;border-radius:0}
.victory-stats>div{min-width:0;display:flex;flex-direction:column;align-items:center;padding:8px 4px 11px;background:#fff9e6e6;border:2px solid #fffceccc;border-radius:19px;box-shadow:0 4px 0 #b9a06b25;animation:result-stat-in .45s ease-out .65s both}
.victory-stats .result-art{width:52px;height:52px}
.victory-stats b{font-size:24px;line-height:1.1;color:#624b30}
.victory-stats span{font-size:9px;color:#9d845e;margin-top:5px}
.victory-wallet{margin:14px 0 5px;font-size:11px;color:#9c8056}.victory-wallet b{color:#705231}
.victory-speed-rule{font-size:9px;color:#a78c62;margin:6px 0 0}
.victory #modal-action{flex:none;margin-top:10px;padding:17px 10px;border-radius:19px;border:2px solid #eaffc9;background:linear-gradient(#97d956,#60a332);box-shadow:inset 0 2px #fff4,0 5px #497d28;color:#fff;font-size:16px;text-shadow:0 1px #4a8b2c}
.victory #modal-secondary{flex:none;margin-top:13px;padding:7px;color:#81663e;font-size:12px;font-weight:700}
@keyframes result-star-pop{0%{transform:translateY(20px) scale(.1) rotate(-18deg);opacity:0}65%{transform:translateY(-5px) scale(1.17) rotate(5deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes result-spark{0%{transform:translateY(25px) scale(0) rotate(0);opacity:0}25%{opacity:1}100%{transform:translateY(-65px) scale(.45) rotate(150deg);opacity:0}}
@keyframes result-stat-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-height:680px){.victory .modal{padding-top:15px}.victory .modal h2{font-size:29px}.victory-stars{height:78px}.victory-stars .result-star{width:66px;height:66px}.victory-stars .result-star:nth-child(2){width:78px;height:78px}.victory-cat{height:124px}.victory-cat img{width:120px;height:120px}.victory .modal .victory-message{margin-bottom:10px;font-size:11px}.victory-stats .result-art{width:40px;height:40px}.victory-stats b{font-size:21px}.victory-wallet{margin-top:10px}.victory #modal-action{padding:13px 8px;font-size:14px}}