/* ================================================================
   COINS ADDON CSS  v3.0  —  Reversi: Stone & Shadow
================================================================ */

/* ── HUD ─────────────────────────────────────────────────────── */
.coins-hud {
  position:fixed; top:12px; right:16px; left:auto; transform:none;
  z-index:8000; display:flex; align-items:center; gap:8px;
  padding:7px 16px 7px 12px; background:rgba(9,12,8,.96);
  border:1px solid rgba(201,168,76,.35); backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(0,0,0,.65),0 0 20px rgba(201,168,76,.08);
  white-space:nowrap;
}
.coins-hud-ico { font-size:.85rem; color:#c9a84c; line-height:1; }
.coins-hud-val {
  font-family:'Cinzel','Georgia',serif; font-size:1rem; font-weight:700;
  letter-spacing:.08em; color:#e8c96a; min-width:28px; text-align:center;
}
.coins-hud-shop {
  font-family:'Cinzel','Georgia',serif; font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:5px 12px;
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.4);
  color:#c9a84c; cursor:pointer; transition:all .2s;
}
.coins-hud-shop:hover { border-color:#c9a84c; color:#fff; background:rgba(201,168,76,.2); }

/* ── TOAST ───────────────────────────────────────────────────── */
.coins-toast {
  position:fixed; top:60px; right:16px; left:auto;
  transform:translateY(-10px);
  z-index:9500; display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  padding:11px 24px; background:rgba(9,12,8,.98); border:1px solid rgba(201,168,76,.4);
  box-shadow:0 8px 28px rgba(0,0,0,.8); pointer-events:none;
  opacity:0; transition:opacity .3s,transform .3s; white-space:nowrap;
}
.coins-toast--on { opacity:1; transform:translateY(0); }
.coins-toast-main {
  font-family:'Cinzel','Georgia',serif; font-size:.92rem; font-weight:700;
  letter-spacing:.1em; color:#e8c96a;
}
.coins-toast-sub {
  font-family:'Crimson Pro','Georgia',serif; font-size:.88rem;
  font-style:italic; color:rgba(201,168,76,.75);
}
.coins-toast--warn    .coins-toast-main { color:#ff7070; }
.coins-toast--warn    .coins-toast-sub  { color:rgba(255,100,100,.75); }
.coins-toast--success .coins-toast-main { color:#7ddc7d; }
.coins-toast--success .coins-toast-sub  { color:rgba(100,200,100,.75); }

/* ── LOCK BADGE ──────────────────────────────────────────────── */
.lobby-theme-btn,.theme-btn,[data-theme-id] { position:relative !important; }
.coin-lock {
  position:absolute; top:3px; right:3px;
  font-family:'Cinzel',serif; font-size:.58rem; font-weight:700; letter-spacing:.06em;
  background:rgba(7,10,6,.95); border:1px solid rgba(201,168,76,.5);
  color:#c9a84c; padding:3px 6px; pointer-events:none;
}
.coin-locked { opacity:.65; }

/* ── STORE ───────────────────────────────────────────────────── */
.coins-store {
  position:fixed; inset:0; z-index:99000;
  background:rgba(3,5,2,.9); backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.coins-store--open { opacity:1; pointer-events:all; }
.coins-store-panel {
  width:580px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column;
  background:#0b0f09; border:1px solid rgba(201,168,76,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.98);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.coins-store--open .coins-store-panel { transform:translateY(0) scale(1); }
.coins-store-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(201,168,76,.15);
  background:rgba(201,168,76,.03);
}
.coins-store-hdr-left { display:flex; align-items:center; gap:10px; }
.coins-store-gem { font-size:.85rem; color:#c9a84c; }
.coins-store-title {
  font-family:'Cinzel','Georgia',serif; font-size:.82rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#e8c96a;
}
.coins-store-hdr-right { display:flex; align-items:center; gap:10px; }
.coins-store-bal {
  display:flex; align-items:center; gap:5px;
  font-family:'Cinzel',serif; font-size:.82rem; font-weight:700; color:#e8c96a;
  padding:5px 12px; border:1px solid rgba(201,168,76,.3); background:rgba(201,168,76,.06);
}
.coins-store-bal-ico { font-size:.7rem; color:#c9a84c; }
.coins-store-x {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(201,168,76,.25);
  color:rgba(201,168,76,.6); font-size:.85rem; cursor:pointer; transition:all .2s;
}
.coins-store-x:hover { border-color:#c9a84c; color:#fff; }
.coins-store-desc {
  padding:12px 20px; font-family:'Crimson Pro','Georgia',serif; font-size:.95rem;
  font-style:italic; color:rgba(201,168,76,.55); border-bottom:1px solid rgba(201,168,76,.1);
}

/* ── STORE TABS ──────────────────────────────────────────────── */
.coins-store-tabs {
  display:flex; border-bottom:1px solid rgba(201,168,76,.12);
  background:rgba(201,168,76,.02);
}
.coins-store-tab {
  flex:1; padding:10px; font-family:'Cinzel',serif; font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,76,.45);
  background:transparent; border:none; border-bottom:2px solid transparent;
  cursor:pointer; transition:all .2s;
}
.coins-store-tab:hover { color:rgba(201,168,76,.8); }
.coins-store-tab--on { color:#e8c96a; border-bottom-color:#c9a84c; background:rgba(201,168,76,.04); }

.coins-store-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px; padding:14px; overflow-y:auto; flex:1; min-height:220px;
}
.coins-store-grid::-webkit-scrollbar { width:4px; }
.coins-store-grid::-webkit-scrollbar-thumb { background:rgba(201,168,76,.2); }

/* ── CARDS ───────────────────────────────────────────────────── */
.csc {
  display:flex; flex-direction:column; gap:8px; padding:11px;
  background:rgba(201,168,76,.03); border:1px solid rgba(201,168,76,.1);
  transition:border-color .2s,background .2s;
}
.csc:hover { border-color:rgba(201,168,76,.3); background:rgba(201,168,76,.06); }
.csc--owned { border-color:rgba(201,168,76,.35); background:rgba(201,168,76,.05); }
.csc--poor  { opacity:.55; }
/* Theme preview – lobby-style 4×4 div grid */
.csc-preview-wrap {
  position: relative; width: 100%; aspect-ratio: 1;
  border: 1px solid rgba(201,168,76,.12); border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.csc--owned .csc-preview-wrap { border-color: rgba(201,168,76,.35); }
.csc-preview-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr);
  gap: 1px; padding: 4px;
}
.csc-preview-cell { border-radius: 1px; }
.csc-preview-label {
  position: relative; z-index: 2; width: 100%; text-align: center;
  font-family: 'Cinzel','Georgia',serif; font-size: .42rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary, #e8d5b0);
  text-shadow: 0 1px 4px rgba(0,0,0,.9); padding-bottom: 5px;
}
.csc-preview-badge {
  position: absolute; top: 4px; right: 5px; z-index: 3;
  font-family: 'Cinzel','Georgia',serif; font-size: .52rem; font-weight: 700;
  color: rgba(201,168,76,.9); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
/* Power-up swatch kept as div */
.csc-swatch { width:100%; height:52px; border-radius:1px; display:flex; align-items:center; justify-content:center; }
/* Power-up swatches */
.csc-swatch--hint_pack   { background:linear-gradient(135deg,#0a1a2a,#0f2a3a); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--undo_pack   { background:linear-gradient(135deg,#1a1a0a,#2a2a0f); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--xp_boost    { background:linear-gradient(135deg,#1a0a1a,#2a0f2a); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--board_flip  { background:linear-gradient(135deg,#0a1a0a,#0f2a0f); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--title_card  { background:linear-gradient(135deg,#1a1400,#2a1e00); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }

.csc-info { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.csc-name {
  font-family:'Cinzel','Georgia',serif; font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#c9a84c;
}
.csc-tag { font-family:'Cinzel',serif; font-size:.62rem; font-weight:700; color:rgba(201,168,76,.75); }
.csc-tag--owned { color:#7ddc7d; }
.csc-tag--poor  { color:#ff7070; }
.csc-desc {
  font-family:'Crimson Pro','Georgia',serif; font-size:.82rem;
  font-style:italic; color:rgba(201,168,76,.5); line-height:1.3;
}
.csc-btn {
  width:100%; padding:8px; background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.3);
  color:#c9a84c; font-family:'Cinzel','Georgia',serif; font-size:.6rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .2s;
}
.csc-btn:hover { border-color:#c9a84c; color:#fff; background:rgba(201,168,76,.15); }
.csc-btn--disabled { opacity:.4; cursor:default; }
.csc-qty { font-family:'Cinzel',serif; font-size:.7rem; color:#7ddc7d; font-weight:700; }

/* ── PURCHASE DIALOG ─────────────────────────────────────────── */
.coins-pur {
  position:fixed; inset:0; z-index:99100;
  background:rgba(3,5,2,.88); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.coins-pur--open { opacity:1; pointer-events:all; }
.coins-pur-box {
  width:320px; padding:32px 26px 24px; text-align:center; background:#0b0f09;
  border:1px solid rgba(201,168,76,.35); box-shadow:0 24px 60px rgba(0,0,0,.98);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transform:scale(.95); transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.coins-pur--open .coins-pur-box { transform:scale(1); }
.coins-pur-gem  { font-size:1.8rem; color:#c9a84c; }
.coins-pur-name {
  font-family:'Cinzel','Georgia',serif; font-size:.92rem; font-weight:700;
  letter-spacing:.1em; color:#e8c96a;
}
.coins-pur-cost { font-family:'Cinzel',serif; font-size:1.4rem; font-weight:700; color:#c9a84c; }
.coins-pur-bal  { font-family:'Crimson Pro','Georgia',serif; font-size:.88rem; font-style:italic; color:rgba(201,168,76,.55); }
.coins-pur-btns { display:flex; gap:12px; width:100%; margin-top:6px; }
.coins-pbtn {
  flex:1; padding:12px; font-family:'Cinzel','Georgia',serif; font-size:.62rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .2s;
}
.coins-pbtn-ghost { background:transparent; border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.55); }
.coins-pbtn-ghost:hover { border-color:rgba(201,168,76,.5); color:#c9a84c; }
.coins-pbtn-gold  { background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.55); color:#e8c96a; }
.coins-pbtn-gold:hover { background:rgba(201,168,76,.2); border-color:#c9a84c; color:#fff; }