/* Redesigned Butikk (shop) grid: rarity-tiered cards, rotating 3D preview, featured banner. */
#skins,#hat-section{display:none!important}
.shop-ui{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.shop-preview{display:flex;align-items:center;gap:12px;background:radial-gradient(circle at 50% 30%,#233150,#111a2c);border-radius:14px;padding:8px;border:1px solid #2c3c5c}
/* Overrides the global `canvas{position:fixed;inset:0}` rule (meant for the fullscreen game canvas). */
.shop-preview-canvas{position:static;inset:auto;display:block;width:96px;height:96px;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.shop-preview-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.shop-preview-name{color:#f4f8ff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-preview-rarity{align-self:flex-start;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1.5px solid currentColor;background:rgba(255,255,255,.06)}
.shop-featured{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-decoration:none;color:inherit;background:linear-gradient(90deg,#3a2560,#5c2f7a 45%,#c2603a);border-radius:12px;padding:9px 12px;font-size:12px;border:1px solid #ffb02066;cursor:pointer}
.shop-featured-tag{font-weight:800;color:#ffd166}
.shop-featured-name{font-weight:700;color:#fff}
.shop-featured-rarity{font-weight:700;background:rgba(0,0,0,.28);border-radius:999px;padding:1px 7px}
.shop-featured-price{margin-left:auto;color:#fff;font-weight:700;opacity:.9}
.shop-filters{display:flex;gap:6px}
.shop-filters button{flex:1;font-size:12px;padding:8px 6px;min-height:40px;border-radius:9px;border:2px solid transparent;background:#dae7e9;color:#17394d;touch-action:manipulation}
.shop-filters button[aria-pressed="true"]{border-color:#ed5935;font-weight:bold;background:#fff}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.shop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 8px;min-height:118px;border-radius:12px;border:2px solid var(--rarity-color,#9aa5b1);background:linear-gradient(160deg,#fff,#eef3fb);color:#17263a;touch-action:manipulation;box-shadow:0 0 0 1px rgba(0,0,0,.03),0 3px 0 rgba(0,0,0,.06);text-align:center}
.shop-card:disabled{opacity:.55;filter:grayscale(.3)}
.shop-card[aria-pressed="true"],.shop-card:has(.badge-on){box-shadow:0 0 0 2px var(--rarity-color,#9aa5b1),0 3px 0 rgba(0,0,0,.06)}
.shop-card-badge{position:absolute;top:5px;right:5px;font-size:9px;font-weight:800;letter-spacing:.03em;padding:2px 6px;border-radius:999px;color:#fff}
.badge-owned{background:#4c8dff}
.badge-on{background:#2fae62}
.shop-card-rarity{font-size:9px;font-weight:800;letter-spacing:.05em;color:var(--rarity-color,#9aa5b1);text-transform:uppercase}
.shop-swatch{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.15)}
.shop-swatch-hat{background:#f4f6fb}
.shop-card-name{font-size:12px;font-weight:700;line-height:1.15}
.shop-card-price{font-size:11px;font-weight:600;opacity:.85}
@media (max-width:480px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.shop-preview-canvas{width:80px;height:80px}}

/* Upgrade / ability cards: visible one-line description + Passiv/Aktiv label, no reliance on title="" hover text. */
#upgrades{grid-template-columns:1fr!important}
#upgrades button,.ability-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;text-align:left}
.upgrade-head{font-weight:bold;font-size:13px}
.upgrade-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:#dff3e6;color:#1f7a45}
.ability-tag{background:#ffe6d6;color:#b5501c}
.upgrade-detail{font-size:11px;opacity:.8;line-height:1.3;white-space:normal}
.ability-card{background:#f4f8fb;border-radius:10px;margin-bottom:8px}
.ability-card button{width:100%;text-align:left}

/* Toast: confirms what a passive upgrade / active ability purchase actually does. */
#shop-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);max-width:min(90vw,360px);background:#17394df0;color:#fff;font-size:13px;font-weight:600;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:20;text-align:center}
#shop-toast.show{opacity:1;transform:translate(-50%,0)}

/* Persistent HUD badge while a passive upgrade is equipped, so its effect stays legible mid-round. */
#upgrade-badge{position:fixed;left:18px;bottom:100px;background:#1f7a45e6;color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;z-index:1;pointer-events:none}
#upgrade-badge[hidden]{display:none}

/* Flash a just-bought ability's rail button so the player can find it immediately. */
@keyframes shop-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,180,50,0)}30%,70%{box-shadow:0 0 0 6px rgba(255,180,50,.75)}}
.flash-purchase{animation:shop-flash 1.6s ease-in-out}

/* Keep inactive garage panels out of the layout. */
.shop-ui[hidden]{display:none!important}