/* KOPANEL v2 — Power-Up Store + Cart. Scoped classes; rarity-colored cards, sales, bundles. */
:root{
  --r0:#8b8b8b; --r1:#4ec06a; --r2:#4a90d9; --r3:#a86fe0; --r4:#e6a23a; --r5:#e0556a;
  --shop-line:var(--line,#3a3320); --shop-gold:var(--gold2,#e8c87a); --shop-green:var(--green,#4ec06a);
  --shop-panel:#14110b;            /* opaque (was rgba(0,0,0,.22) — caused the see-through look) */
  --shop-panel-2:#1b160e;          /* slightly lighter, for the product cards */
}

/* top bar */
.shop-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.shop-top-right{display:flex;align-items:center;gap:10px}
.bal-chip{padding:8px 14px;border:1px solid var(--shop-line);border-radius:9px;background:var(--shop-panel)}
.bal-chip b{color:var(--shop-gold);font-size:1.15rem}
.cart-btn{position:relative}
.cart-badge{display:inline-block;min-width:18px;text-align:center;background:#c0392b;color:#fff;border-radius:10px;font-size:.72rem;padding:0 5px;margin-left:3px;font-weight:700}

/* toolbar */
.shop-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px!important;margin:0 0 16px}
.shop-search{flex:1;min-width:160px;padding:9px 12px;border-radius:8px;border:1px solid var(--shop-line);background:var(--shop-panel);color:#f0e6cf}
.shop-tabs{display:flex;gap:6px;flex-wrap:wrap}
.shop-toolbar .tab{padding:7px 13px;border-radius:7px;border:1px solid var(--shop-line);background:transparent;color:#cfc6ad;cursor:pointer;font-size:.86rem;font-family:inherit}
.shop-toolbar .tab:hover{border-color:var(--shop-gold);color:#fff}
.shop-toolbar .tab.on{background:var(--shop-gold);color:#2a2310;border-color:var(--shop-gold);font-weight:700}
.shop-sort{padding:8px 10px;border-radius:8px;border:1px solid var(--shop-line);background:var(--shop-panel);color:#f0e6cf}

/* featured */
.featured-strip{margin:0 0 18px}
.feat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}

/* product grid + cards */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.prod{position:relative;display:flex;flex-direction:column;background:var(--shop-panel-2);border:1px solid var(--shop-line);border-top:3px solid var(--r0);border-radius:11px;padding:14px 14px 12px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
.prod:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.prod.rar-1{border-top-color:var(--r1)} .prod.rar-2{border-top-color:var(--r2)} .prod.rar-3{border-top-color:var(--r3)} .prod.rar-4{border-top-color:var(--r4)} .prod.rar-5{border-top-color:var(--r5)}
.prod.rar-3:hover{box-shadow:0 10px 26px rgba(168,111,224,.25)} .prod.rar-4:hover{box-shadow:0 10px 26px rgba(230,162,58,.28)} .prod.rar-5:hover{box-shadow:0 10px 26px rgba(224,85,106,.28)}
.prod-ic{height:84px;display:flex;align-items:center;justify-content:center;margin:2px 0 8px;isolation:isolate}
/* KO item icons ship with an opaque black tile baked into the art; 'lighten' against the dark card
   drops the black to the background while keeping the bright item art (no per-icon reprocessing). */
.prod-ic img{max-height:84px;max-width:90%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.prod-rar{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--r0);font-weight:700}
.prod.rar-1 .prod-rar{color:var(--r1)} .prod.rar-2 .prod-rar{color:var(--r2)} .prod.rar-3 .prod-rar{color:var(--r3)} .prod.rar-4 .prod-rar{color:var(--r4)} .prod.rar-5 .prod-rar{color:var(--r5)}
.prod-name{margin:3px 0 4px;font-size:.98rem;line-height:1.2;color:#f3ead2}
.prod-desc{margin:0 0 10px;font-size:.78rem;color:#a9a08a;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* premium tier perk breakdown (the in-game bonuses each tier grants) */
.prod-perks{list-style:none;margin:0 0 10px;padding:0;flex:1;display:flex;flex-direction:column;gap:3px}
.prod-perks li{position:relative;padding-left:18px;font-size:.78rem;color:#d9cea6;line-height:1.3}
.prod-perks li::before{content:"✦";position:absolute;left:0;color:var(--shop-gold);font-size:.74rem}
.prod-perks li.perk-dur{margin-top:2px;padding-left:0;color:#9a8f78;font-size:.7rem;font-style:italic}
.prod-perks li.perk-dur::before{content:""}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.prod-price .was{color:#9a8f78;text-decoration:line-through;font-size:.78rem;margin-right:5px}
.prod-price .now{color:var(--shop-gold);font-size:1.06rem;font-weight:800}
.prod-price .cp{color:#9a8f78;font-size:.72rem;margin-left:2px}
.prod-actions{display:flex;gap:6px}
.prod-actions .f{margin:0}

/* badges */
.badge{position:absolute;top:9px;font-size:.62rem;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.badge.sale{left:9px;background:#c0392b;color:#fff}
.badge.bundle{right:9px;background:var(--r3);color:#fff}
.badge.feat{right:9px;background:var(--shop-gold);color:#2a2310}

/* small buttons */
.btn.sm{padding:6px 11px;font-size:.82rem}

/* cart */
.cart-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.cart-line{display:grid;grid-template-columns:54px 1fr 70px 90px 30px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--shop-line);border-left:3px solid var(--r0);padding-left:10px}
.cart-line.rar-1{border-left-color:var(--r1)} .cart-line.rar-2{border-left-color:var(--r2)} .cart-line.rar-3{border-left-color:var(--r3)} .cart-line.rar-4{border-left-color:var(--r4)} .cart-line.rar-5{border-left-color:var(--r5)}
.cl-ic{width:48px;height:48px;object-fit:contain}
.cl-name{font-weight:600;color:#f3ead2}
.cl-qty{margin:0}
.cl-qty input{width:56px;padding:6px;border-radius:7px;border:1px solid var(--shop-line);background:var(--shop-panel);color:#f0e6cf;text-align:center}
.cl-total{text-align:right;font-weight:700;color:var(--shop-gold)}
.cl-rm{margin:0;text-align:center}
.cl-rm .x{background:none;border:none;color:#9a8f78;cursor:pointer;font-size:1rem}
.cl-rm .x:hover{color:#e0556a}
.cart-summary .sum-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--shop-line)}
.cart-summary .sum-row.total{border-bottom:none;font-size:1.05rem;padding-top:10px}
.gift-box{margin-top:12px;border:1px solid var(--shop-line);border-radius:8px;padding:8px 12px}
.gift-box summary{cursor:pointer;color:#cfc6ad;font-size:.9rem}

@media (max-width:760px){ .cart-grid{grid-template-columns:1fr} }

/* ===== Character-sheet showcase ===== */
.cs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.nat-badge{padding:5px 14px;border-radius:8px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--shop-line)}
.nat-badge.nat-1{background:rgba(200,90,50,.16);color:#e8a07a;border-color:rgba(200,90,50,.5)}
.nat-badge.nat-2{background:rgba(70,120,200,.16);color:#8db4e8;border-color:rgba(70,120,200,.5)}
.cs-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.cs-doll .doll{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;margin-top:6px}
.doll-col{display:flex;flex-direction:column;gap:9px}
.eq-slot{display:flex;align-items:center;gap:9px;padding:6px;border:1px solid var(--shop-line);border-radius:9px;background:rgba(0,0,0,.18);opacity:.55}
.eq-slot.on{opacity:1;background:linear-gradient(180deg,rgba(232,200,122,.06),rgba(0,0,0,.22));border-color:rgba(232,200,122,.35)}
.doll-col:last-child .eq-slot{flex-direction:row-reverse;text-align:right}
.eq-ic{position:relative;width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:rgba(0,0,0,.45);border:1px solid var(--shop-line);overflow:hidden;isolation:isolate}
.eq-glyph{position:absolute;font-size:22px;line-height:1;opacity:.8}
.eq-slot:not(.on) .eq-glyph{opacity:.32;filter:grayscale(1)}
.eq-ic img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.eq-lbl{font-size:.74rem;color:#bdb597;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eq-slot.on .eq-lbl{color:#f0e6cf}
.doll-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 4px;min-width:120px}
.cs-portrait{width:108px;height:140px;border-radius:12px;border:1px solid var(--shop-line);background:linear-gradient(160deg,#2a2740,#15131f);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.cs-portrait b{font-size:.8rem;color:#cfc6ad;text-align:center;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px}
.cs-portrait.cls-101,.cs-portrait.cls-105{background:linear-gradient(160deg,#3a2a22,#1a1410)} /* warrior tones */
.cs-portrait.cls-102,.cs-portrait.cls-106{background:linear-gradient(160deg,#22321f,#101a10)} /* rogue */
.cs-portrait.cls-103,.cs-portrait.cls-107{background:linear-gradient(160deg,#1f2a3a,#101620)} /* mage */
.cs-portrait.cls-104,.cs-portrait.cls-108{background:linear-gradient(160deg,#33291f,#1a1510)} /* priest */
.cs-rendering{display:block;margin-top:8px;font-size:.7rem;color:#d8cca8;animation:csblink 1.2s ease-in-out infinite}
@keyframes csblink{0%,100%{opacity:.4}50%{opacity:1}}
/* 3D character turntable (drag to spin, wheel to zoom) — pre-rendered angle frames */
.cs-turn{position:relative;width:210px;height:372px;display:flex;align-items:center;justify-content:center;cursor:grab;overflow:hidden;border-radius:12px;border:1px solid var(--shop-line);background:radial-gradient(ellipse at 50% 32%,#21212e 0%,#100e16 70%);box-shadow:inset 0 0 38px rgba(0,0,0,.55);user-select:none;touch-action:none}
.cs-turn.grabbing{cursor:grabbing}
.cs-turn-img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center 60%;transition:transform .08s ease;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.cs-turn-hint{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.64rem;color:#8a8170;letter-spacing:.3px;pointer-events:none}
.cs-turn:hover .cs-turn-hint{color:#b3a988}
.cs-pname{margin-top:8px;font-weight:700;color:var(--shop-gold)}
.cs-side{display:flex;flex-direction:column;gap:14px}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stat{text-align:center;padding:9px 4px;border:1px solid var(--shop-line);border-radius:8px;background:rgba(0,0,0,.18)}
.stat span{display:block;font-size:.66rem;color:#9a8f78;letter-spacing:.5px}
.stat b{display:block;font-size:1.1rem;color:#f0e6cf;margin-top:2px}
@media (max-width:780px){ .cs-grid{grid-template-columns:1fr} .stat-grid{grid-template-columns:repeat(5,1fr)} }

/* ===== Dashboard ===== */
.dash-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dh-id{display:flex;align-items:center;gap:14px}
.dh-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(160deg,var(--shop-gold),#9a7a32);color:#241d0c;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;flex:0 0 60px}
.dh-stats{display:flex;gap:22px}
.dh-stat{text-align:center}
.dh-stat b{display:block;font-size:1.45rem;line-height:1.1}
.dh-stat span{font-size:.72rem;color:#9a8f78;text-transform:uppercase;letter-spacing:.5px}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dash-chars{display:flex;flex-direction:column;gap:9px}
.ch-card{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--shop-line);border-left:3px solid #555;border-radius:9px;background:rgba(0,0,0,.18);text-decoration:none;color:inherit;transition:transform .1s,border-color .1s}
.ch-card:hover{transform:translateX(3px);border-color:var(--shop-gold)}
.ch-card.nat-1{border-left-color:#e0824a} .ch-card.nat-2{border-left-color:#5a8fd8}
.ch-av{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#f0e6cf;flex:0 0 40px;background:#33302a}
.ch-av.cls-101,.ch-av.cls-105{background:#5a3a2a} .ch-av.cls-102,.ch-av.cls-106{background:#2f4a2a} .ch-av.cls-103,.ch-av.cls-107{background:#2a3f5a} .ch-av.cls-104,.ch-av.cls-108{background:#4a3a22}
.ch-info{flex:1}
.ch-name{font-weight:700;color:#f3ead2}
.ch-go{color:#9a8f78;font-size:1.3rem}
.more{display:inline-block;margin-top:10px;color:var(--shop-gold);font-size:.85rem;text-decoration:none}
.more:hover{text-decoration:underline}

/* ===== Old-school item tooltip (paper-doll hover) ===== */
.ko-tip{position:absolute;z-index:9999;width:250px;max-width:82vw;padding:13px 15px 12px;pointer-events:none;font-family:inherit;background:linear-gradient(160deg,#15121d,#0b0910);border:1px solid #6e5a2e;border-radius:4px;box-shadow:0 0 0 1px #241d12,0 12px 34px rgba(0,0,0,.78),inset 0 0 26px rgba(0,0,0,.55)}
.kt-c{position:absolute;width:13px;height:13px;border:2px solid #b9933f;pointer-events:none}
.kt-c.tl{top:3px;left:3px;border-right:0;border-bottom:0}
.kt-c.tr{top:3px;right:3px;border-left:0;border-bottom:0}
.kt-c.bl{bottom:3px;left:3px;border-right:0;border-top:0}
.kt-c.br{bottom:3px;right:3px;border-left:0;border-top:0}
.kt-hd{text-align:center}
.kt-name{font-weight:800;font-size:1.05rem;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.kt-type{color:#e6dfcd;font-size:.92rem;margin-top:4px}
.kt-cls{color:#e0554a;font-size:.88rem;margin-top:1px}
.kt-div{height:1px;background:linear-gradient(90deg,transparent,#6e5a2e 18%,#6e5a2e 82%,transparent);margin:9px 0 8px}
.kt-body .kt-l{font-size:.88rem;padding:1.5px 0;line-height:1.3}
.kt-n{color:#e6dfcd}
.kt-g{color:#5fc56a}

/* ===== Marketplace sell-page item picker ===== */
.mk-picker{max-height:330px;overflow-y:auto;border:1px solid var(--shop-line);border-radius:9px;background:var(--shop-panel);padding:6px 8px}
.mk-grp{font-size:.72rem;font-weight:700;color:var(--shop-gold);text-transform:uppercase;letter-spacing:.6px;margin:9px 3px 5px}
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px;margin-bottom:5px}
.mk-tile{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--shop-line);border-radius:8px;background:var(--shop-panel-2);color:#efe6cf;cursor:pointer;text-align:left;font:inherit;transition:border-color .12s,background .12s,box-shadow .12s}
.mk-tile:hover{border-color:var(--gold,#d9b54a)}
.mk-tile.sel{border-color:var(--shop-gold);box-shadow:0 0 0 1px var(--shop-gold),0 0 12px rgba(217,181,74,.3);background:#241d12}
.mk-tile.off{opacity:.5;cursor:not-allowed}
.mk-tile img{width:30px;height:30px;object-fit:contain;flex:0 0 30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.mk-tn{flex:1;font-size:.78rem;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk-tq{font-size:.7rem;color:var(--shop-gold);font-weight:700;white-space:nowrap}
.kt-r{color:#d8cba0}
.kt-rq{color:#e0554a}
.kt-gr{color:#c574d6}
.kt-d{color:#b0a890}

/* ===== Storefront upgrade ===== */
.shop-page {
  padding-top:28px;
  padding-bottom:54px;
}
.shop-hero {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:20px;
  align-items:stretch;
  min-height:300px;
  margin-bottom:18px;
  padding:42px;
  border:1px solid rgba(217,181,74,.3);
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(7,5,3,.96), rgba(7,5,3,.52), rgba(7,5,3,.86)),
    url("/img/wp/wp4.jpg") center / cover no-repeat;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.shop-hero h1 {
  margin:8px 0 12px;
  color:#f8df8e;
  font:800 50px/1.03 "Cinzel",serif;
}
.shop-hero p {
  max-width:720px;
  color:#e8ddc9;
  font-size:17px;
}
.shop-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.store-wallet-card {
  align-self:center;
  justify-self:end;
  width:100%;
  max-width:300px;
  padding:24px;
  border:1px solid rgba(217,181,74,.35);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(28,21,14,.9), rgba(11,8,5,.95));
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.store-wallet-card span,
.store-wallet-card small {
  display:block;
  color:#a99d84;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
}
.store-wallet-card b {
  display:block;
  color:var(--shop-gold);
  font:800 38px/1.05 "Cinzel",serif;
  margin:8px 0 3px;
}
.store-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}
.store-stats div {
  padding:16px 18px;
  border:1px solid rgba(217,181,74,.22);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(24,18,12,.9), rgba(10,8,5,.95));
}
.store-stats span,
.store-stats b {
  display:block;
}
.store-stats span {
  color:#a99d84;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
}
.store-stats b {
  color:var(--shop-gold);
  font:800 24px/1.1 "Cinzel",serif;
}
.store-section {
  margin-bottom:18px;
}
.store-section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin:0 0 12px;
}
.store-section-head h2 {
  margin:4px 0 0;
  color:var(--shop-gold);
  font:700 30px/1.1 "Cinzel",serif;
}
.featured-showcase {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.shop-search-wrap {
  flex:1;
  min-width:230px;
}
.shop-search-wrap span {
  display:block;
  margin-bottom:6px;
  color:#a99d84;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
}
.upgraded-store-grid {
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.prod {
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(29,23,16,.96), rgba(12,9,6,.98));
  box-shadow:0 16px 42px rgba(0,0,0,.35);
}
.prod:hover {
  transform:translateY(-4px);
  border-color:rgba(240,210,122,.55);
}
.prod.feat {
  min-height:285px;
}
.prod-ic {
  height:96px;
  border-radius:8px;
  margin-bottom:12px;
  background:radial-gradient(circle at 50% 40%, rgba(217,181,74,.16), rgba(0,0,0,.32) 58%, rgba(0,0,0,.08));
}
.prod-ic img {
  max-height:90px;
}
.prod-name {
  font-size:1.04rem;
}
.prod-actions .btn.sm {
  min-width:54px;
  text-align:center;
}
.badge {
  z-index:2;
}
.cart-badge {
  vertical-align:middle;
}

@media (max-width:840px) {
  .shop-hero {
    grid-template-columns:1fr;
    padding:30px 24px;
  }
  .store-wallet-card {
    justify-self:start;
  }
  .store-stats {
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:560px) {
  .shop-hero h1 {
    font-size:34px;
  }
  .store-stats,
  .featured-showcase,
  .upgraded-store-grid {
    grid-template-columns:1fr;
  }
}

/* ===== Final store polish ===== */
.shop-page .shop-toolbar.portal-card {
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(31,24,17,.96), rgba(10,8,6,.98));
}

.shop-page .prod {
  position:relative;
  overflow:hidden;
  border-color:rgba(115,91,47,.55);
}

.shop-page .prod::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(247,218,135,.78), transparent);
  opacity:.75;
}

.shop-page .prod-name {
  min-height:42px;
  color:#f5ead1;
}

.shop-page .prod-desc {
  min-height:42px;
}

.shop-page .prod-foot {
  align-items:center;
  padding-top:11px;
  border-top:1px solid rgba(217,181,74,.13);
}

.shop-page .prod-price .now {
  color:#f4d56f;
}

.shop-page .prod-actions {
  gap:7px;
}

.shop-page .prod-actions .btn.sm {
  border-radius:4px;
}