:root{
  --c-bg:#101414;
  --c-text:#EAF4F4;
  --c-muted:#99BAB8;
  --c-panel:#1a2121;
  --c-accent:#047871;
  --c-accent-2:#023635;
  --c-brand-3:#5AB0AF;
  --c-brand-4:#F8DCB0;
  --c-border:#20302f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--c-bg),#0d1212 60%);
  color:var(--c-text);
}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.header img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(90,176,175,.35))}
.brand{font-weight:700;letter-spacing:.3px}
.grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
.panel{background:var(--c-panel);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.panel .pad{padding:16px}
.h{font-weight:700;margin:0 0 8px 0}
.sub{color:var(--c-muted);font-size:13px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--c-border);background:#0f1515;color:var(--c-text);cursor:pointer;user-select:none}
.btn:hover{background:#131b1b}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--c-brand-3),var(--c-accent));color:#062c2b;font-weight:700;border:none}
.row{display:flex;gap:8px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--c-border);padding:8px 0}
.kv:first-child{border-top:none}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#0d1414;border:1px solid var(--c-border);color:var(--c-muted)}
.cardpack{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.card{height:76px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--c-border)}
.card.c{background:#202525}
.card.uc{background:linear-gradient(135deg,#1c2525,#182222)}
.card.r{background:radial-gradient(80% 80% at 50% 20%, #1e2d2c, #152020)}
.card.sr{background:radial-gradient(80% 80% at 50% 20%, #264544, #162221)}
.card.ssr{background:radial-gradient(80% 80% at 50% 20%, #1a3b39, #0f1a19)}
.card.ur{background:radial-gradient(80% 80% at 50% 20%, #1e564f, #0b1312)}
.progress{height:10px;background:#0e1212;border-radius:999px;border:1px solid var(--c-border);overflow:hidden}
.progress>div{height:100%;background:var(--c-brand-4)}
.small{font-size:12px;color:var(--c-muted)}
.shop-row{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid var(--c-border);border-radius:10px;margin-bottom:8px;background:#0f1514}
.shop-row .title{font-weight:600}
.shop-row .desc{font-size:12px;color:var(--c-muted)}
.shop-row .price{font-weight:700}
.footer{margin-top:24px;color:var(--c-muted);font-size:12px}
.link{color:var(--c-brand-3);text-decoration:none}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.file{display:inline-flex;align-items:center;gap:6px}
@keyframes pop { from{ transform:scale(.9); opacity:.0 } to{ transform:scale(1); opacity:1 } }
.card{ animation: pop .15s ease; background-size: cover; background-position: center; }
.card[data-art="true"]{ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes glowPulse { 
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  40% { box-shadow: 0 0 16px var(--pulse, rgba(255,255,255,.3)); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.card.c   { --pulse: rgba(160,160,160,.35); }
.card.uc  { --pulse: rgba(120,200,200,.45); }
.card.r   { --pulse: rgba(100,160,220,.5); }
.card.sr  { --pulse: rgba(140,220,170,.6); }
.card.ssr { --pulse: rgba(220,160,240,.7); }
.card.ur  { --pulse: rgba(255,210,100,.9); }
.card.glow { animation: glowPulse .6s ease; }
.shake { animation: shake .25s ease; }
@keyframes shake { 0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,1px)}100%{transform:translate(0,0)} }
.particle{ position:absolute;width:6px;height:6px;border-radius:50%; background: currentColor;color:#F8DCB0; transform: translate(0,0); opacity: 1; animation: burst .8s ease forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
#last-draw { position: relative; overflow: visible; }
.album-section{margin-top:8px}
.album-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:6px}
@media (max-width: 640px){ .album-grid{grid-template-columns:repeat(6,1fr)} }
.slot{height:44px;border:1px solid var(--c-border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;background:#0f1514}
.slot.owned{background:linear-gradient(180deg,#13201f,#0f1a19)}
.slot.missing{opacity:.55}
.slot .code{opacity:.9}
.tier-label{font-size:12px;color:var(--c-muted);margin-top:4px}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }
@media (max-width: 640px){
  .container{ padding: 12px; }
  .cardpack{ grid-template-columns: repeat(3, 1fr); }
  .card{ height: 64px; }
  .header img{ width: 28px; height: 28px; }
  .panel .pad{ padding: 12px; }
  .btn{ padding: 8px 12px; border-radius: 10px; }
}
.starrow .star{ transition: transform .15s ease, filter .15s ease; }
.starrow.pulse .star{ transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,215,120,.6)); }

/* Standardized upgrade card layout */
.starrow.centered{ display:flex;align-items:center;justify-content:center; gap:6px;margin:4px 0 8px 0; }
.star{ font-size:18px;line-height:1;opacity:.35; transition:transform .15s ease,filter .15s ease,opacity .15s ease; color:#d0c9a4; }
.star.filled{
  opacity:1;
  background: linear-gradient(180deg, #fff6bf, #ffd74f 40%, #ffb300 70%, #9e6a00);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,230,120,.6), 0 0 8px rgba(255,215,120,.35);
  filter: drop-shadow(0 0 4px rgba(255,200,120,.35));
}
.starrow.centered .star:hover{ transform: scale(1.08); }
.upg-name{ font-weight:700;margin-top:6px; min-height: calc(1.2em * 2); }
.upg-desc{ color: var(--c-muted); margin-top: 2px; min-height: calc(1.2em * 5); font-size: 13px; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-5{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.upg-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.upg-btn{ width:100%; height:42px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:10px; }
.upg-card{ border-radius:12px; }
.upg-pad{ padding:12px !important; }
.upg-art{ border:1px solid var(--c-border); border-radius:10px; height:112px; display:flex; align-items:center; justify-content:center; background:#0f1514; margin-top:2px; }

/* Upgrades grid */
.upgrades-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; padding:12px; }
@media (min-width: 980px){ .upgrades-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px){ .upgrades-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px){ .upgrades-grid{ grid-template-columns: 1fr; gap:10px; padding:10px; } }
.padless{ padding: 0 !important; }


/* v0.6.5 — Last Open list styles */
.lastopen{margin-top:10px}
.lastopen .lo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lastopen .lo-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--c-border);border-radius:8px;background:#0f1514}
.badge-tier{font-size:10px;padding:2px 6px;border-radius:999px;border:1px solid var(--c-border);opacity:.85}
.badge-c{background:#202525}
.badge-uc{background:#1c2525}
.badge-r{background:#1e2d2c}
.badge-sr{background:#264544}
.badge-ssr{background:#1a3b39}
.badge-ur{background:#1e564f}
.lo-summary{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px 0}
.lo-chip{font-size:12px;padding:4px 8px;border-radius:999px;background:#0d1414;border:1px solid var(--c-border)}
@media (max-width:640px){
  .lastopen .lo-grid{grid-template-columns:repeat(3,1fr)}
}


/* v0.6.6 — tooltip for icon-only buy button */
.upg-btn.icon{ position: relative; }
.tooltip{
  position:absolute; bottom:115%; right:50%; transform:translateX(50%);
  background:#0f1515; color:var(--c-text); border:1px solid var(--c-border); border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding:10px 12px; width:220px; z-index:10;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease;
}
.tooltip::after{
  content:""; position:absolute; top:100%; right:50%; transform:translateX(50%);
  border-width:6px; border-style:solid; border-color:#0f1515 transparent transparent transparent;
  filter: drop-shadow(0 -1px 0 var(--c-border));
}
.tooltip .tip-title{ font-weight:700; margin-bottom:4px; }
.tooltip .tip-cost{ font-size:12px; color:var(--c-muted); margin-bottom:6px; }
.tooltip .tip-desc{ font-size:12px; color:var(--c-muted); line-height:1.3; }
.upg-btn.icon:hover .tooltip,
.upg-btn.icon:focus .tooltip,
.upg-btn.icon .tooltip.show{ opacity:1; transform:translateX(50%) translateY(-2px); pointer-events:auto; }


/* v0.7.3 — UI polish for icon-only buttons, tooltips, and Last Open */
.upg-btn.icon{
  position: relative;
  justify-content: center;
  gap: 0;
  font-size: 0;              /* ensure icon-only even if text slips in */
}
.upg-btn.icon svg{
  width: 18px; height: 18px; display: inline-block;
  pointer-events: none;       /* taps/clicks hit the button, not the svg */
}

/* Make both action buttons equal height reliably */
.upg-actions .upg-btn{
  height: 42px;
}

/* Stronger tooltip layer and mobile spacing */
.tooltip{
  z-index: 9999;
  max-width: 260px;
}
@media (max-width:640px){
  .tooltip{
    bottom: 120%;
    width: 240px;
  }
}

/* Last Open readability */
.lastopen .lo-item{
  line-height: 1.2;
}
.lastopen .lo-item span{
  font-size: 12px;
}

/* Optional gold twinkle when stars change (apply .pulse on parent in JS if desired) */
@keyframes starTwinkle {
  0% { filter: drop-shadow(0 0 0 rgba(255,215,120,0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 6px rgba(255,215,120,.6)); transform: scale(1.08); }
  100% { filter: drop-shadow(0 0 0 rgba(255,215,120,0)); transform: scale(1); }
}
.starrow.pulse .star.filled{ animation: starTwinkle .5s ease; }


/* v0.7.5 — spacing for Open Packs buttons */
.open-panel .sub{ margin-bottom: 10px; }
.open-panel .row{ gap: 10px; }

/* v0.7.6 — Header gear + dropdown */
.header{ position: relative; justify-content: space-between; }
.header-left{ display:flex; align-items:center; gap:12px; }
.header-right{ display:flex; align-items:center; gap:8px; position: relative; }
.gear-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; border:1px solid var(--c-border);
  background:#0f1515; color:var(--c-text); cursor:pointer;
}
.gear-btn:hover{ background:#141c1c }
.gear-btn:active{ transform: translateY(1px) }
.gear-svg{ width:18px; height:18px; }
.dropdown{ position:absolute; right:0; top:48px; width:260px; z-index:50;
  background:#0f1515; border:1px solid var(--c-border); border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45); padding:10px 12px; display:none;
}
.dropdown.show{ display:block; }
.dropdown h4{ margin:0 0 8px 0; font-size:14px; }
.dropdown .row{ gap:10px }
.drop-item{ display:flex; align-items:center; gap:8px; padding:6px 4px; }
.drop-item input{ width:16px; height:16px; }
.drop-sep{ height:1px; background:var(--c-border); margin:8px 0; }
.test-sound{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--c-border); border-radius:8px; background:#141a1a; cursor:pointer;
}
.test-sound:hover{ background:#171f1f }

/* v0.7.9 — Dropdown action buttons */
.drop-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.btn.small{ padding:6px 10px; font-size:12px; line-height:1; }
.btn.danger{ border-color:#6b1d1d; background:#2a0f0f; color:#ffdede; }
.btn.danger:hover{ background:#351414 }