/* Shop — Brutalist Paper (same as #mainMenu.menu-pro) */
.shop-modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:calc(var(--sat,0px) + 16px) calc(var(--sar,0px) + 16px) calc(var(--sab,0px) + 16px) calc(var(--sal,0px) + 16px); opacity:0; visibility:hidden; transition:.3s; }
.shop-modal.open{ opacity:1; visibility:visible; }
.shop-modal.hidden{ display:none !important; }
.shop-backdrop{ position:absolute; inset:0; background:rgba(14,16,20,.68); backdrop-filter:blur(4px); }
.shop-panel{
  position:relative; width:min(780px, 100%); max-height:85vh; display:flex; flex-direction:column; overflow:hidden;
  background: #fffef8;
  border:2px solid #0f0f0f; border-radius:4px; box-shadow:6px 6px 0 #0f0f0f, 0 24px 48px rgba(0,0,0,.35);
  transform:rotate(-0.15deg); animation:popIn .32s cubic-bezier(.2,1.4,.4,1);
}
.shop-panel::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(2deg);
  width:44px; height:14px; background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 4px rgba(0,0,0,.12); border-radius:2px;
}
.shop-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:2px dashed rgba(0,0,0,.12); background:#fffef8;
}
.shop-title{ font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; font-size:1.1rem; color:#0f0f0f; letter-spacing:-.02em; }
.shop-coins{ font-weight:900; background:#0f0f0f; color:#fffef8; border:2px solid #0f0f0f; padding:6px 12px; border-radius:0; box-shadow:2px 2px 0 rgba(0,0,0,.15); }
.shop-close{ width:36px; height:36px; border-radius:0; background: #ff3b3b; border:2px solid #0f0f0f; display:grid; place-items:center; cursor:pointer; color:white; font-weight:900; box-shadow:2px 2px 0 #0f0f0f; }
.shop-tabs{ display:flex; gap:8px; padding:12px 14px 0; background: #fffef8; }
.shop-tab{
  flex:1; padding:9px 14px; border:2px solid #0f0f0f; background:white; color:#0f0f0f;
  font-weight:900; font-family:'Space Grotesk','Vazirmatn',sans-serif; cursor:pointer; transition:.15s; box-shadow:2px 2px 0 #0f0f0f;
}
.shop-tab.active{ background:#c4f542; color:#0f0f0f; transform:rotate(-0.4deg); }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; padding:14px; overflow-y:auto; background:#f5f1e6; }
.shop-card{
  background:#fffef8; border:2px solid #0f0f0f; border-radius:0; padding:10px; display:flex; flex-direction:column; gap:8px;
  box-shadow:3px 3px 0 #0f0f0f; transition:.15s; transform:rotate(0.12deg);
}
.shop-card:nth-child(even){ transform:rotate(-0.12deg); }
.shop-card.equipped{ border-color:#0f0f0f; background:#fffef8; box-shadow:4px 4px 0 #0f0f0f, 0 0 0 2px #c4f542 inset; }
.shop-card.owned{ border-color:#0f0f0f; }
.shop-thumb{ position:relative; height:88px; border:2px solid #0f0f0f; border-radius:0; display:grid; place-items:center; overflow:hidden; background:white; }
.shop-thumb img{ width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.shop-badge{ position:absolute; top:6px; font-size:.62rem; font-weight:900; padding:3px 7px; border:1px solid #0f0f0f; border-radius:0; box-shadow:1px 1px 0 #0f0f0f; }
.shop-badge.price{ left:6px; background:#ffc048; color:#0f0f0f; }
.shop-badge.owned{ left:6px; background:#2ed573; color:#0f0f0f; }
.shop-badge.equipped{ right:6px; background:#0f0f0f; color:#c4f542; }
.shop-name{ font-weight:900; font-size:.84rem; color:#0f0f0f; font-family:'Space Grotesk','Vazirmatn',sans-serif; }
.shop-desc{ font-size:.68rem; color:#6b6b60; min-height:32px; line-height:1.5; }
.shop-ability{ font-size:.66rem; font-weight:800; color:#0f0f0f; background:#c4f542; border:1px solid #0f0f0f; padding:4px 6px; border-radius:0; line-height:1.3; }
.shop-actions{ margin-top:auto; }
.btn-shop{ width:100%; padding:8px 12px; border:2px solid #0f0f0f; border-radius:0; font-weight:900; font-family:'Space Grotesk','Vazirmatn',sans-serif; cursor:pointer; transition:.15s; box-shadow:2px 2px 0 #0f0f0f; }
.btn-shop.buy{ background:#ffc048; color:#0f0f0f; }
.btn-shop.equip{ background:#0f0f0f; color:#c4f542; }
.btn-shop.equipped{ background:white; color:#6b6b60; border-style:dashed; }
.btn-shop.no-coin{ background:#e8e6e1; color:#6b6b60; opacity:.9; }
.btn-shop:hover{ transform:translateY(-1px); box-shadow:3px 3px 0 #0f0f0f; }
.btn-shop:active{ transform:translateY(1px); box-shadow:1px 1px 0 #0f0f0f; }
.shop-footer{ padding:10px 14px; border-top:2px dashed rgba(0,0,0,.12); font-size:.68rem; color:#6b6b60; text-align:center; background:#fffef8; font-weight:700; }
@media (max-width:520px){ .shop-grid{ grid-template-columns:1fr 1fr; gap:8px; } .shop-panel{ max-height:90vh; } }

/* =========================================================================
   character upgrades — a third shop tab

   Same Brutalist Paper language as the skin cards: paper white on the sand
   grid, 2px black borders, hard offset shadows, lime for anything earned.
   The cards are wider than skin cards so the grid drops to one column and each
   stat gets a full row: icon, current effect, level pips, buy button.
   ========================================================================= */
.shop-grid.upgrade-mode{ grid-template-columns:1fr; gap:10px; }

.up-empty{ padding:28px 16px; text-align:center; color:#6b6b60; font-size:.78rem; font-weight:700; }

.up-card{
  background:#fffef8; border:2px solid #0f0f0f; border-radius:0; padding:12px 14px;
  box-shadow:3px 3px 0 #0f0f0f; transform:rotate(0.1deg);
}
.up-card:nth-child(even){ transform:rotate(-0.1deg); }

.up-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px;
  padding-bottom:9px; border-bottom:2px dashed rgba(0,0,0,.12); }
.up-avatar{ width:44px; height:44px; flex:0 0 44px; object-fit:contain;
  border:2px solid #0f0f0f; background:white; padding:2px; }
.up-headtext{ min-width:0; }
.up-name{ font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900;
  font-size:.92rem; color:#0f0f0f; }
.up-invested{ font-size:.64rem; color:#6b6b60; font-weight:700; margin-top:2px; }

.up-stats{ display:flex; flex-direction:column; gap:8px; }
.up-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; }
.up-stat{ display:flex; align-items:center; gap:7px; min-width:0; }
.up-icon{ font-size:.95rem; }
.up-label{ font-size:.76rem; font-weight:800; color:#0f0f0f; }
.up-effect{
  font-size:.64rem; font-weight:900; color:#0f0f0f; background:#c4f542;
  border:1px solid #0f0f0f; padding:2px 5px; font-variant-numeric:tabular-nums;
}
.up-row .up-effect:empty{ display:none; }

.up-pips{ display:flex; gap:3px; }
.up-pip{ width:16px; height:9px; border:1px solid #0f0f0f; background:white; }
.up-pip.on{ background:#c4f542; }

.btn-up{
  min-width:78px; padding:6px 10px; border:2px solid #0f0f0f; border-radius:0;
  font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; font-size:.72rem;
  cursor:pointer; transition:.15s; box-shadow:2px 2px 0 #0f0f0f;
  background:#ffc048; color:#0f0f0f; font-variant-numeric:tabular-nums;
}
.btn-up:hover:not(:disabled){ transform:translateY(-1px); box-shadow:3px 3px 0 #0f0f0f; }
.btn-up:active:not(:disabled){ transform:translateY(1px); box-shadow:1px 1px 0 #0f0f0f; }
.btn-up.no-coin{ background:#e8e6e1; color:#6b6b60; cursor:not-allowed; }
.btn-up.maxed{ background:#0f0f0f; color:#c4f542; border-style:solid; cursor:default; }
.btn-up:disabled{ box-shadow:2px 2px 0 #0f0f0f; }

@media (max-width:520px){
  .shop-grid.upgrade-mode{ grid-template-columns:1fr; }
  .up-row{ grid-template-columns:1fr auto; row-gap:6px; }
  .up-pips{ grid-column:1 / -1; }
}