/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║       PUZZLEFACTORY — THÈME PAR DÉFAUT (sombre/doré)        ║
 * ║   Chargé automatiquement — remplacé par cartoon/medieval    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ── Variables ── */
:root {
  --bg:  #0d0d0f;
  --s1:  #161618;
  --s2:  #1e1e22;
  --bd:  #2a2a30;
  --a:   #e8c547;
  --a2:  #c4874a;
  --t:   #e8e8e0;
  --d:   #7a7a82;
  --r:   8px;
  --bg-screen-overlay: rgba(13,13,15,.97);
  --shadow-glow-a:  rgba(232,197,71,.9);
  --shadow-glow-a2: rgba(232,197,71,.5);
  --shadow-sel:     rgba(100,180,255,.7);
  --shadow-err:     rgba(255,60,60,.8);
  --cat-game:    #e8c547;
  --cat-defense: #4a9eff;
  --cat-attack:  #e84747;
}
/* ── Icônes thème ── */
:root {
  --icon-mode-standard: '🧩';
  --icon-mode-decouverte: '🔬';
  --icon-mode-arcade: '🕹️';
  --icon-diff-easy: '😊';
  --icon-diff-medium: '😈';
  --icon-diff-hard: '💀';
  --icon-btn-saves: '📂';
  --icon-btn-hof: '🏆';

  --icon-cat-game: '🎮';
  --icon-cat-defense: '🛡️';
  --icon-cat-attack: '⚔️';
}


/* ── Base ── */
body {
  font-family: 'DM Sans', 'Playfair Display', sans-serif;
  background: var(--bg);
}

/* ── Upload screen ── */
#upload-screen {
  background: radial-gradient(ellipse at 30% 30%, var(--s2), var(--bg));
}

/* ── Typographie ── */
.brand h1 {
  font-family: 'Playfair Display', Georgia, serif;
}
.tbr {
  font-family: 'Playfair Display', Georgia, serif;
}
.wtitle {
  font-family: 'Playfair Display', Georgia, serif;
}
.hi h2 {
  font-family: 'Playfair Display', Georgia, serif;
}
.pill, .pb, #zlabel, .xp-level, .xp-text, .xp-bar-track,
.scard-date, .hr, .htm, .hpc, .xp-lvl {
  font-family: 'DM Mono', monospace;
}
.tbtn, .diff-btn, .bbk, .wbs button, .scard-btn, .go {
  font-family: 'DM Sans', sans-serif;
}

/* ── Topbar ── */
#topbar {
  background: rgba(13,13,15,.96);
}

/* ── Win screen ── */
#win-screen {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
}

/* ── Hall screen ── */
#hall-screen {
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}

/* ── Loader ── */
#ldr {
  background: color-mix(in srgb, var(--bg) 95%, transparent);
}

/* ── KB hint ── */
#kbh {
  background: rgba(20,20,25,.92);
}

/* ── Piece glow ── */
.pg.near canvas:not(.pgshadow) {
  filter: drop-shadow(0 0 14px rgba(232,197,71,.9)) drop-shadow(0 0 5px rgba(232,197,71,.5));
}
.pg.sel canvas:not(.pgshadow) {
  filter: drop-shadow(0 0 9px rgba(100,180,255,.7));
}
.pg.noshake canvas {
  filter: drop-shadow(0 0 10px rgba(255,60,60,.8)) !important;
}

/* ── Boutique home btn ── */
#home-store-btn {
  border-color: rgba(100,180,255,.4);
  background: rgba(100,180,255,.08);
  color: #a8d8ff;
}
#home-store-btn:hover {
  background: rgba(100,180,255,.15);
  border-color: rgba(100,180,255,.7);
}

/* ── pf-store classes (store JS) ── */
.pf-toast { background:var(--s1); border:2px solid var(--a); border-radius:var(--r); color:var(--a); padding:8px 18px; font-weight:700; }
.pf-shard-float { color:var(--a); font-weight:700; font-size:1.1rem; }
.pf-empty-msg { color:var(--d); font-style:italic; }
.pf-bonus-star { color:#ffd700; }
.pf-bonus-badge { background:#e84747; color:#fff; border-radius:6px; font-size:.55rem; font-weight:700; }
.pf-section-lbl { font-family:'DM Mono',monospace; font-size:.67rem; text-transform:uppercase; letter-spacing:.12em; }
.pf-shard-info { background:color-mix(in srgb,var(--a) 10%,var(--s1)); border:1px solid var(--bd); border-radius:var(--r); color:var(--a); }
#pf-shard-pill { background:color-mix(in srgb,var(--a) 12%,var(--s2)); border:1px solid var(--bd); border-radius:20px; color:var(--a); font-weight:700; }
#pf-shard-pill.hover { border-color:var(--a); background:color-mix(in srgb,var(--a) 20%,var(--s2)); }
#pf-store-close.hover { border-color:var(--a2); color:var(--a2); }
#pf-toolbar .pf-panel, #pf-bonus-row { background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); }
#pf-toolbar .pf-toggle-btn { background:var(--s2); border:1px solid var(--bd); color:var(--d); border-radius:50%; }
#pf-toolbar .pf-toggle-btn.on { background:color-mix(in srgb,var(--a) 15%,var(--s2)); border-color:var(--a); color:var(--a); }
#pf-toolbar .pf-sep { background:var(--bd); }
#pf-toolbar .pf-store-btn { background:color-mix(in srgb,var(--a) 8%,transparent); border:1px solid var(--bd); color:var(--a); }
#pf-toolbar .pf-tab-btn { background:transparent; border:1px solid var(--bd); border-radius:var(--r); color:var(--d); font-size:.68rem; transition:all .15s; }
#pf-toolbar .pf-tab-btn.sel { border-color:var(--tab-color,var(--a)); color:var(--tab-color,var(--a)); background:color-mix(in srgb,var(--a) 12%,transparent); }
#pf-toolbar .pf-bonus-btn { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); transition:all .15s; font-size:1.2rem; }
#pf-toolbar .pf-bonus-btn:hover { border-color:var(--a); }
#pf-toolbar .pf-bonus-btn.on { border-color:var(--a); background:color-mix(in srgb,var(--a) 12%,var(--s2)); }
#pf-store-overlay { background:rgba(0,0,0,.75); }
#pf-store-modal { background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); }
#pf-store-hdr { background:var(--s1); border-bottom:1px solid var(--bd); }
#pf-store-balance-wrap {
  background:rgba(0,0,0,.08);border:1.5px solid rgba(0,0,0,.12);
}

#pf-store-balance { color:var(--a); }
#pf-store-close { background:var(--s2); border:1px solid var(--bd); color:var(--d); border-radius:var(--r); }
#pf-store-tabbar { background:var(--s2); border-bottom:1px solid var(--bd); }
.pf-store-tab { color:var(--d); border-bottom:3px solid transparent; }
.pf-store-tab.sel { color:var(--tab-color,var(--a)); border-bottom-color:var(--tab-color,var(--a)); background:color-mix(in srgb,var(--a) 8%,transparent); }
#pf-store-grid { background:var(--bg); }
.pf-store-card { background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); }
.pf-store-card:hover { border-color:var(--a); }
.pf-card-name { color:var(--t); font-weight:700; }
.pf-card-desc { color:var(--d); }
.pf-buy-btn { background:var(--s2); color:var(--d); border:1px solid var(--bd); border-radius:var(--r); }
.pf-buy-btn.can { color:var(--a); border-color:var(--a); background:color-mix(in srgb,var(--a) 10%,var(--s2)); }
#pf-store-footer { background:var(--s1); border-top:1px solid var(--bd); color:var(--d); }