/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          PUZZLEFACTORY — THÈME CARTOON COLORÉ               ║
 * ║   <link rel="stylesheet" href="theme-cartoon.css">          ║
 * ╚══════════════════════════════════════════════════════════════╝
 * Polices :
 * <link href="https://fonts.googleapis.com/css2?family=Fredoka+One
 *   &family=Nunito:wght@400;700;800;900&display=swap" rel="stylesheet">
 */

@keyframes ct-bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes ct-wobble  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-2deg)} 75%{transform:rotate(2deg)} }
@keyframes ct-rainbow {
  0%  { border-color:#ff6b6b } 20%{ border-color:#ffa94d }
  40% { border-color:#69db7c } 60%{ border-color:#4dabf7 }
  80% { border-color:#cc5de8 } 100%{ border-color:#ff6b6b }
}

/* ── 1. VARIABLES ── */
:root {
  --bg:  #f0f4ff;
  --s1:  #ffffff;
  --s2:  #e8f0fe;
  --bd:  #b3c6f7;
  --a:   #5c6ef8;
  --a2:  #ff6fd8;
  --t:   #1a1a2e;
  --d:   #5a6080;
  --r:   16px;
  --shadow-sm: 3px 3px 0 rgba(92,110,248,.25);
  --shadow-md: 4px 4px 0 rgba(92,110,248,.3);
  --shadow-lg: 6px 6px 0 rgba(92,110,248,.3);
  --cat-game:    #7c3aed;
  --cat-defense: #0ea5e9;
  --cat-attack:  #ef4444;
}
/* ── 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: '🎯';
}


/* ── 2. BASE ── */
body {
  font-family: 'Nunito', sans-serif !important;
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse at 10% 10%,  #ffe0f0 0%, transparent 40%),
    radial-gradient(ellipse at 90% 90%,  #d4e4ff 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%,  #e8fff4 0%, transparent 55%) !important;
  color: var(--t) !important;
}

/* ── 3. HOME ── */
#upload-screen {
  background: transparent !important;
}
.brand h1 {
  font-family: 'Fredoka One', cursive !important;
  font-size: clamp(2.8rem,6vw,4.5rem) !important;
  background: linear-gradient(135deg, #5c6ef8, #ff6fd8, #ff9a3c) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: .02em !important;
}
.brand p { font-family:'Nunito',sans-serif !important; color:var(--d) !important; font-weight:700 !important; }

.dz { border:3px dashed var(--bd) !important; border-radius:24px !important; background:var(--s1) !important; box-shadow:var(--shadow-md) !important; transition:all .2s cubic-bezier(.34,1.56,.64,1) !important; }
.dz:hover, .dz.over { border-color:var(--a) !important; transform:translateY(-3px) scale(1.01) !important; box-shadow:var(--shadow-lg) !important; animation:ct-rainbow 1.5s linear infinite !important; }
/* Image chargée : opacité pleine sur fond clair, fond transparent */
#pimg.on { opacity: 1 !important; }
.dz:has(#pimg.on) { background: transparent !important; }
.dz p { color:var(--d) !important; font-weight:600 !important; }
.dz strong { color:var(--a) !important; }

.pb { border:2.5px solid var(--bd) !important; border-radius:12px !important; background:var(--s1) !important; color:var(--d) !important; font-family:'Nunito',sans-serif !important; font-weight:800 !important; box-shadow:var(--shadow-sm) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; }
.pb:hover { border-color:var(--a) !important; color:var(--a) !important; transform:translateY(-2px) !important; }
.pb.on { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; color:var(--a) !important; box-shadow:3px 3px 0 #4338ca !important; }

.go { font-family:'Fredoka One',cursive !important; font-size:1.2rem !important; background:linear-gradient(135deg,#5c6ef8,#818cf8) !important; border:none !important; border-radius:20px !important; color:#fff !important; box-shadow:0 5px 0 #3730a3,var(--shadow-md) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; }
.go:hover  { transform:translateY(-3px) !important; box-shadow:0 8px 0 #3730a3,6px 6px 0 rgba(92,110,248,.3) !important; }
.go:active { transform:translateY(2px)  !important; box-shadow:0 2px 0 #3730a3 !important; }

.mcard { border:2.5px solid var(--bd) !important; border-radius:20px !important; background:var(--s1) !important; box-shadow:var(--shadow-sm) !important; transition:all .2s cubic-bezier(.34,1.56,.64,1) !important; }
.mcard:hover  { border-color:var(--a) !important; transform:translateY(-3px) rotate(-1deg) !important; box-shadow:var(--shadow-md) !important; }
.mcard.active { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; box-shadow:0 0 0 3px var(--a2),var(--shadow-md) !important; }
.mcard-title  { font-family:'Fredoka One',cursive !important; font-size:1rem !important; color:var(--t) !important; }
.mcard.active .mcard-title { color:var(--a) !important; }
.mcard-desc   { color:var(--d) !important; }

.diff-btn { border:2.5px solid var(--bd) !important; border-radius:12px !important; background:var(--s1) !important; color:var(--d) !important; font-family:'Nunito',sans-serif !important; font-weight:800 !important; box-shadow:var(--shadow-sm) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; }
.diff-btn:hover  { border-color:var(--a) !important; transform:translateY(-2px) !important; }
.diff-btn.active { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; color:var(--a) !important; box-shadow:3px 3px 0 #4338ca !important; }

#home-store-btn { font-family:'Fredoka One',cursive !important; border-radius:18px !important; }
#xphome, .xphome { background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; border:2.5px solid var(--bd) !important; border-radius:18px !important; box-shadow:var(--shadow-sm) !important; }

/* ── 4. TOPBAR ── */
#topbar { background:linear-gradient(180deg,#ffffff,#f0f4ff) !important; border-bottom:3px solid var(--bd) !important; box-shadow:0 3px 0 rgba(92,110,248,.12) !important; backdrop-filter:none !important; }
.tbr { font-family:'Fredoka One',cursive !important; background:linear-gradient(135deg,var(--a),var(--a2)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; font-size:1.15rem !important; }
.pill { background:var(--s1) !important; border:2px solid var(--bd) !important; border-radius:20px !important; box-shadow:var(--shadow-sm) !important; font-family:'Nunito',sans-serif !important; font-weight:700 !important; color:var(--d) !important; }
.pill .v { color:var(--a) !important; font-weight:900 !important; }
.tbtn { font-family:'Nunito',sans-serif !important; font-weight:800 !important; border:2.5px solid var(--bd) !important; border-radius:12px !important; background:var(--s1) !important; color:var(--t) !important; box-shadow:var(--shadow-sm) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; }
.tbtn:hover  { border-color:var(--a) !important; color:var(--a) !important; transform:translateY(-2px) !important; }
.tbtn.active { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; color:var(--a) !important; box-shadow:2px 2px 0 #4338ca !important; }

/* ── 5. PLATEAU ── */
#world { background-color:#dde6ff !important; background-image:radial-gradient(circle at 20% 30%,rgba(255,160,220,.2) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(120,200,255,.2) 0%,transparent 40%),repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(92,110,248,.04) 40px,rgba(92,110,248,.04) 41px) !important; }
.pg.near canvas:not(.pgshadow) { filter:drop-shadow(0 0 8px #ff6fd8) drop-shadow(0 0 18px #5c6ef8) !important; }
.pg.sel  canvas:not(.pgshadow) { filter:drop-shadow(0 0 10px #7c3aed) drop-shadow(0 0 4px #a855f7) !important; }
.pg.noshake canvas             { filter:drop-shadow(0 0 12px #ef4444) !important; }

/* ── 6. TOOLBAR BONUS ── */
#pf-toolbar .pf-panel,
#pf-bonus-row {
  background: linear-gradient(135deg, #ffffff, #f0f4ff) !important;
  border: 2.5px solid var(--bd) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
#pf-toolbar .pf-toggle-btn { background:var(--s1) !important; border:2.5px solid var(--bd) !important; color:var(--d) !important; }
#pf-toolbar .pf-toggle-btn.on { background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; border-color:var(--a) !important; color:var(--a) !important; animation:ct-bounce .8s ease-in-out infinite !important; }
#pf-toolbar .pf-sep { background:var(--bd) !important; }
#pf-toolbar .pf-store-btn { background:linear-gradient(135deg,#ff6fd822,#5c6ef822) !important; border:2.5px solid var(--bd) !important; color:var(--a) !important; }
#pf-toolbar .pf-tab-btn { background:transparent !important; border:2px solid var(--bd) !important; border-radius:12px !important; color:var(--d) !important; font-family:'Nunito',sans-serif !important; font-weight:800 !important; font-size:.68rem !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; }
#pf-toolbar .pf-tab-btn.sel { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; color:var(--a) !important; }
#pf-toolbar .pf-bonus-btn { background:var(--s1) !important; border:2.5px solid var(--bd) !important; border-radius:14px !important; box-shadow:var(--shadow-sm) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; font-size:1.3rem !important; }
#pf-toolbar .pf-bonus-btn:hover { transform:scale(1.18) rotate(-4deg) !important; border-color:var(--a) !important; }
#pf-toolbar .pf-bonus-btn.on { border-color:var(--a) !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; animation:ct-bounce .9s ease-in-out infinite !important; }

/* ── 7. BOUTIQUE ── */
#pf-store-overlay { background:rgba(26,26,46,.55) !important; backdrop-filter:blur(6px) !important; }

#pf-store-modal {
  background: var(--bg) !important;
  border: 3px solid var(--bd) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-lg), 0 20px 60px rgba(92,110,248,.25) !important;
  overflow: hidden !important;
}

#pf-store-hdr {
  background: linear-gradient(135deg, #ffffff, #f0f4ff) !important;
  border-bottom: 2.5px solid var(--bd) !important;
}
#pf-store-balance-wrap {
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.4);
}

#pf-store-balance { font-family:'Fredoka One',cursive !important; font-size:1.05rem !important; color:var(--a) !important; }
#pf-store-close { border-radius:50% !important; background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; border:2.5px solid var(--bd) !important; color:var(--a) !important; box-shadow:var(--shadow-sm) !important; }
#pf-store-close:hover { transform:scale(1.1) rotate(90deg) !important; }

#pf-store-tabbar {
  background: linear-gradient(135deg, #f0f4ff, #e8eeff) !important;
  border-bottom: 2.5px solid var(--bd) !important;
}
.pf-store-tab { font-family:'Nunito',sans-serif !important; font-weight:800 !important; color:var(--d) !important; background:none !important; border:none !important; border-bottom:3px solid transparent !important; transition:all .2s !important; }
.pf-store-tab.sel { color:var(--a) !important; border-bottom-color:var(--a) !important; background:rgba(92,110,248,.08) !important; }

#pf-store-grid {
  background: #f0f4ff !important;
}

/* Labels section */
#pf-store-grid > div[style*="font-size:.67rem"] {
  font-family: 'Fredoka One', cursive !important;
  letter-spacing: .08em !important;
}

/* Cartes arc-en-ciel */
.pf-store-card {
  background: var(--s1) !important;
  border: 2.5px solid var(--bd) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.pf-store-card:hover { transform:translateY(-4px) rotate(-.5deg) !important; box-shadow:var(--shadow-md) !important; }

.pf-store-card:nth-child(3n+1) { background:linear-gradient(160deg,#fff0fb,#fce7f3) !important; border-color:#f9a8d4 !important; }
.pf-store-card:nth-child(3n+2) { background:linear-gradient(160deg,#f0f4ff,#e0e8ff) !important; border-color:#a5b4fc !important; }
.pf-store-card:nth-child(3n+3) { background:linear-gradient(160deg,#f0fdf4,#dcfce7) !important; border-color:#86efac !important; }
.pf-store-card:nth-child(4n)   { background:linear-gradient(160deg,#fffbeb,#fef3c7) !important; border-color:#fcd34d !important; }

.pf-store-card:nth-child(3n+1):hover { border-color:#ec4899 !important; }
.pf-store-card:nth-child(3n+2):hover { border-color:var(--a) !important; }
.pf-store-card:nth-child(3n+3):hover { border-color:#22c55e !important; }
.pf-store-card:nth-child(4n):hover   { border-color:#f59e0b !important; }

.pf-card-name { font-family:'Fredoka One',cursive !important; color:var(--t) !important; font-size:.9rem !important; }
.pf-card-desc { font-family:'Nunito',sans-serif !important; color:var(--d) !important; }

.pf-buy-btn { font-family:'Fredoka One',cursive !important; border-radius:12px !important; background:#f0f4ff !important; color:var(--d) !important; border:2px solid var(--bd) !important; box-shadow:var(--shadow-sm) !important; transition:all .15s cubic-bezier(.34,1.56,.64,1) !important; font-size:.82rem !important; }
.pf-buy-btn.can { background:linear-gradient(135deg,var(--a),#818cf8) !important; color:#fff !important; border-color:var(--a) !important; box-shadow:0 3px 0 #3730a3,var(--shadow-sm) !important; }
.pf-buy-btn.can:hover { transform:translateY(-2px) !important; box-shadow:0 5px 0 #3730a3,var(--shadow-md) !important; }

#pf-store-footer { background:linear-gradient(135deg,#ffffff,#f0f4ff) !important; border-top:2.5px solid var(--bd) !important; color:var(--d) !important; font-family:'Nunito',sans-serif !important; font-weight:700 !important; }

#pf-shard-pill { background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important; border:2.5px solid var(--bd) !important; border-radius:20px !important; color:var(--a) !important; font-weight:700 !important; }

/* ── 8. WIN / LOADER / TOASTS ── */
#fin { background:radial-gradient(circle at 50% 40%,#f0f4ff,#e0e8ff) !important; }
#fin h2 { font-family:'Fredoka One',cursive !important; font-size:clamp(2.5rem,6vw,4rem) !important; background:linear-gradient(135deg,var(--a),var(--a2)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
#ldr { background:rgba(240,244,255,.96) !important; }
#ldr p { font-family:'Nunito',sans-serif !important; font-weight:700 !important; color:var(--d) !important; }
#win-screen  { background: color-mix(in srgb, var(--bg) 97%, transparent) !important; }
#hall-screen { background: color-mix(in srgb, var(--bg) 98%, transparent) !important; }
body > div[style*="bottom:84px"], body > div[style*="bottom: 84px"] { font-family:'Nunito',sans-serif !important; font-weight:800 !important; border-radius:20px !important; border-width:2.5px !important; box-shadow:var(--shadow-sm) !important; background:var(--s1) !important; }

/* ── 9. SCROLLBAR ── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--s2); border-radius:8px; }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--a),var(--a2)); border-radius:8px; border:2px solid var(--s2); }

/* ── 10. DIVERS ── */
#bgsel-popup { background:var(--s1) !important; border:2.5px solid var(--bd) !important; border-radius:18px !important; box-shadow:var(--shadow-md) !important; }
#resumeb { font-family:'Nunito',sans-serif !important; font-weight:800 !important; border-radius:16px !important; border:2.5px solid var(--bd) !important; box-shadow:var(--shadow-sm) !important; }

/* ── NOUVELLES CLASSES pf-* (éléments sans couleur inline) ── */

/* Toast */
.pf-toast {
  background: var(--s1) !important;
  border: 2.5px solid var(--a) !important;
  border-radius: var(--r) !important;
  color: var(--a) !important;
  padding: 8px 18px !important;
  font-weight: 800 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Shard float */
.pf-shard-float { color: var(--a) !important; font-weight: 900 !important; font-size: 1.1rem !important; }

/* Empty msg */
.pf-empty-msg { color: var(--d) !important; font-style: italic !important; }

/* Superbonus star */
.pf-bonus-star { color: #ffd700 !important; }

/* Badge quantité */
.pf-bonus-badge { background: #ef4444 !important; color: #fff !important; border-radius: 6px !important; font-size: .55rem !important; font-weight: 700 !important; }

/* Label section store */
.pf-section-lbl { font-family: 'Fredoka One', cursive !important; font-size: .67rem !important; text-transform: uppercase !important; letter-spacing: .12em !important; }

/* Grid items */
.pf-items-grid { /* layout only, pas de couleur */ }

/* Shard info win screen */
.pf-shard-info {
  background: linear-gradient(135deg,#ede9fe,#ddd6fe) !important;
  border: 2px solid var(--bd) !important;
  border-radius: var(--r) !important;
  color: var(--a) !important;
}

/* Shard pill hover */
#pf-shard-pill.hover { background: linear-gradient(135deg,#ddd6fe,#c4b5fd) !important; border-color: var(--a) !important; }

/* Close btn hover */
#pf-store-close.hover { background: linear-gradient(135deg,#fce7f3,#fbcfe8) !important; color: var(--a2) !important; border-color: var(--a2) !important; }

/* Tab cat couleur via CSS var */
#pf-toolbar .pf-tab-btn.sel { border-color: var(--tab-color, var(--a)) !important; color: var(--tab-color, var(--a)) !important; }
.pf-store-tab.sel { color: var(--tab-color, var(--a)) !important; border-bottom-color: var(--tab-color, var(--a)) !important; }

.pf-store-solde-label { color: rgba(80,40,0,.7) !important; font-size: .7rem !important; }

@media(max-width:768px){
  #world{
    background-image:
      radial-gradient(ellipse at 20% 15%, rgba(255,160,220,.35) 0%, transparent 45%),
      radial-gradient(ellipse at 80% 80%, rgba(120,200,255,.3) 0%, transparent 45%),
      radial-gradient(ellipse at 55% 50%, rgba(200,230,255,.2) 0%, transparent 60%) !important;
    background-color:#dde6ff !important;
  }
  #wrap{background-image:none !important;}
}