/* ============================================================
   BOUTIQUE / CRÉDITS — écran dédié, scopé #sec-credits
   Solde · comment gagner (awards) · dépenser (vitrine)
   ============================================================ */
#sec-credits.sec { padding: 0 0 16px; }
#sec-credits * { box-sizing: border-box; }
#sec-credits { font-family: var(--fb); }

/* ---- sous-header retour ---- */
#sec-credits .subhead { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:3px solid var(--ink); margin-bottom:4px; }
#sec-credits .subhead .back { width:38px; height:38px; flex-shrink:0; border:3px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:20px; cursor:pointer; color:var(--ink); }
#sec-credits .subhead .back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
#sec-credits .subhead .ttl { font-family:var(--fd); font-size:24px; letter-spacing:1.5px; }

/* ---- solde ---- */
#sec-credits .wallet { margin:16px; display:flex; gap:12px; }
#sec-credits .bal { flex:1; position:relative; }
#sec-credits .bal::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-credits .bal .bd { position:relative; border:4px solid var(--ink); padding:14px; display:flex; align-items:center; gap:11px; }
#sec-credits .bal.xp .bd { background:#FF2E93; color:var(--paper); }
#sec-credits .bal.co .bd { background:#FFD600; }
#sec-credits .bal .ic { width:42px; height:42px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); }
#sec-credits .bal .ic img { width:28px; height:28px; }
#sec-credits .bal .v { font-family:var(--fd); font-size:30px; line-height:26px; }
#sec-credits .bal .k { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.5px; opacity:.85; }

/* ---- divider ---- */
#sec-credits .sdiv { display:flex; align-items:center; gap:10px; margin:24px 16px 14px; }
#sec-credits .sdiv .bar { flex:1; height:3px; background:var(--ink); } #sec-credits .sdiv .bar.l { flex:0 0 22px; }
#sec-credits .sdiv .t { font-family:var(--fd); font-size:14px; letter-spacing:3px; }
#sec-credits .sdiv .chip { font-family:var(--fd); font-size:10px; letter-spacing:1px; padding:3px 8px; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
#sec-credits .sdiv .chip.green { background:#5BE885; } #sec-credits .sdiv .chip.cyan { background:#5BD8E5; }

/* ---- COMMENT GAGNER ---- */
#sec-credits .earn { padding:0 16px; display:flex; flex-direction:column; gap:11px; }
#sec-credits .ern { position:relative; }
#sec-credits .ern::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
#sec-credits .ern .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:10px 12px; display:flex; align-items:center; gap:12px; }
#sec-credits .ern .em { width:40px; height:40px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); box-shadow:3px 3px 0 var(--ink); }
#sec-credits .ern .em img { width:26px; height:26px; }
#sec-credits .ern .info { flex:1; min-width:0; }
#sec-credits .ern .info .nm { font-family:var(--fd); font-size:16px; letter-spacing:.5px; line-height:16px; }
#sec-credits .ern .info .d { font-family:var(--fb); font-weight:700; font-size:9.5px; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top:2px; }
#sec-credits .ern .gain { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
#sec-credits .ern .gain span { display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border:2.5px solid var(--ink); font-family:var(--fd); font-size:12px; box-shadow:2px 2px 0 var(--ink); }
#sec-credits .ern .gain .pxp { background:#FF2E93; color:var(--paper); }
#sec-credits .ern .gain .pco { background:#FFD600; }
#sec-credits .ern .gain img { width:13px; height:13px; }

/* ---- DÉPENSER ---- */
#sec-credits .shop { padding:0 16px; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
#sec-credits .it { position:relative; }
#sec-credits .it::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-credits .it .bd { position:relative; border:3px solid var(--ink); padding:13px 11px 11px; display:flex; flex-direction:column; align-items:center; gap:7px; min-height:152px; }
#sec-credits .it.c1 .bd { background:#5BD8E5; } #sec-credits .it.c2 .bd { background:#9D4EDD; color:var(--paper); }
#sec-credits .it.c3 .bd { background:#FF9F45; } #sec-credits .it.c4 .bd { background:#FFFBEA; }
#sec-credits .it .tag { position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg); padding:2px 8px; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink); font-family:var(--fd); font-size:9px; letter-spacing:1px; box-shadow:2px 2px 0 var(--ink); white-space:nowrap; z-index:3; }
#sec-credits .it .em { width:54px; height:54px; margin-top:4px; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
#sec-credits .it .em img { width:36px; height:36px; }
#sec-credits .it .nm { font-family:var(--fd); font-size:15px; letter-spacing:.5px; text-align:center; line-height:15px; }
#sec-credits .it .d { font-family:var(--fb); font-weight:700; font-size:9px; text-align:center; line-height:11px; opacity:.85; }
#sec-credits .it .buy { margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:13px; letter-spacing:.5px; cursor:pointer; }
#sec-credits .it .buy:not([disabled]):active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
#sec-credits .it .buy img { width:14px; height:14px; }
#sec-credits .it .buy.owned { background:#5BE885; cursor:default; }
#sec-credits .it .buy.lock { background:#E8E8E8; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); cursor:not-allowed; }