@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

.pd-shop-backdrop {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: 22px; background: rgba(5, 9, 30, .76); backdrop-filter: blur(12px);
  font-family: Inter, system-ui, sans-serif; color: #f7f8ff;
}
.pd-shop, .pd-shop * { box-sizing: border-box; }
.pd-shop {
  width: min(1320px, 96vw); max-height: 94vh; overflow: hidden; position: relative;
  border: 1px solid rgba(111, 155, 255, .55); border-radius: 26px;
  background: radial-gradient(ellipse at 12% 45%, rgba(0, 91, 255, .23), transparent 36%),
    linear-gradient(135deg, #101d50 0%, #080f2e 52%, #10103d 100%);
  box-shadow: 0 0 0 1px rgba(70, 109, 255, .16), 0 28px 90px rgba(0,0,0,.6),
    0 0 45px rgba(35, 102, 255, .22);
  display: flex; flex-direction: column;
}
.pd-shop-header {
  min-height: 108px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 28px; border-bottom: 1px solid rgba(130,159,255,.17);
  background: linear-gradient(90deg, rgba(22,48,119,.7), rgba(9,17,54,.2));
}
.pd-brand, .pd-header-actions, .pd-wallet, .pd-selected-title-row, .pd-action-row,
.pd-catalog-toolbar, .pd-card-topline { display: flex; align-items: center; }
.pd-brand { gap: 20px; min-width: 0; }
.pd-brand-mark {
  width: 76px; height: 54px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 13px; color: white; font: 900 30px 'Barlow Condensed', sans-serif;
  font-style: italic; letter-spacing: -2px; background: linear-gradient(145deg,#247dff,#293de0);
  box-shadow: 0 8px 25px rgba(28,93,255,.38); transform: skew(-7deg);
}
.pd-brand-divider { width: 1px; height: 54px; background: rgba(169,190,255,.35); }
.pd-eyebrow { margin: 0 0 1px; color: #79baff; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; }
.pd-brand h1 { margin: 0; font: 800 clamp(22px, 2.5vw, 32px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .3px; }
.pd-subtitle { margin: 6px 0 0; color: #aebce8; font-size: 12px; }
.pd-header-actions { gap: 14px; }
.pd-wallet { gap: 9px; padding: 11px 17px; border: 1px solid rgba(255,210,77,.3); border-radius: 99px; background: rgba(4,10,37,.56); }
.pd-wallet strong { font-size: 18px; font-weight: 800; }
.pd-wallet small { color: #9eacd9; font-size: 10px; }
.pd-coin { color: #ffd45b; text-shadow: 0 0 12px rgba(255,196,48,.5); font-size: 18px; }
.pd-close { width: 42px; height: 42px; border: 1px solid rgba(124,157,255,.35); border-radius: 50%; color: #e8eeff; background: rgba(45,73,167,.25); font-size: 27px; line-height: 1; cursor: pointer; transition: .2s; }
.pd-close:hover { background: #285dff; transform: rotate(90deg); }
.pd-shop-body { display: grid; grid-template-columns: minmax(285px, 34%) 1fr; min-height: 0; flex: 1; overflow: hidden; }
.pd-preview-panel { position: relative; padding: 23px 24px 20px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid rgba(121,154,255,.2); background: linear-gradient(160deg,rgba(13,62,166,.48),rgba(7,17,54,.2)); }
.pd-preview-glow { position: absolute; width: 340px; height: 340px; top: 90px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #075dff; filter: blur(100px); opacity: .22; pointer-events: none; }
.pd-preview-label, .pd-mini-label { color: #8da9e9; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.pd-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #49f4c1; box-shadow: 0 0 10px #49f4c1; }
.pd-avatar-stage { height: clamp(210px, 34vh, 330px); min-height: 190px; position: relative; display: grid; place-items: center; margin: 8px 0 10px; }
.pd-stage-ring { position: absolute; left: 50%; top: 76%; transform: translate(-50%,-50%); border: 2px solid rgba(68,159,255,.9); border-radius: 50%; box-shadow: 0 0 18px rgba(0,140,255,.7), inset 0 0 20px rgba(0,140,255,.25); }
.pd-stage-ring-one { width: 84%; height: 42px; }
.pd-stage-ring-two { width: 65%; height: 25px; opacity: .55; }
.pd-avatar-content { z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; }
.pd-avatar-content img { max-width: 82%; max-height: 94%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.pd-avatar-placeholder { width: 180px; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8daeff; border: 1px dashed rgba(130,169,255,.35); border-radius: 24px; background: rgba(7,20,67,.4); }
.pd-avatar-placeholder span { font-size: 60px; }.pd-avatar-placeholder small { font-size: 9px; letter-spacing: 1.5px; }
.pd-selected-info { z-index: 1; padding: 16px; border: 1px solid rgba(117,151,255,.18); border-radius: 16px; background: rgba(4,12,43,.64); }
.pd-selected-title-row { justify-content: space-between; gap: 10px; }
.pd-selected-info h2 { margin: 5px 0 0; font: 700 22px 'Barlow Condensed',sans-serif; }
.pd-description { margin: 9px 0 0; color: #9eadd9; font-size: 11px; line-height: 1.5; }
.pd-action-row { justify-content: space-between; gap: 10px; margin-top: 15px; }
.pd-price { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.pd-primary-button { min-width: 135px; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 0; border-radius: 11px; color: #171b35; background: linear-gradient(180deg,#ffe17a,#ffb91f); box-shadow: 0 6px 22px rgba(255,183,35,.22), inset 0 1px rgba(255,255,255,.6); font-weight: 900; cursor: pointer; transition: transform .18s, filter .18s; }
.pd-primary-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.pd-primary-button:disabled, .pd-primary-button.is-owned { color: #d9e7ff; background: linear-gradient(180deg,#2568d9,#1746a8); box-shadow: none; cursor: default; }
.pd-notice { margin: 10px 0 0; color: #8feacb; font-size: 11px; }
.pd-empty-preview { color: #9eadd9; text-align: center; }
.pd-catalog { min-width: 0; padding: 20px 24px 16px; display: flex; flex-direction: column; overflow: hidden; }
.pd-category-tabs { display: flex; gap: 5px; padding: 0 0 13px; border-bottom: 1px solid rgba(128,158,255,.2); overflow-x: auto; }
.pd-tab { flex: 1 0 auto; padding: 12px 15px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; color: #aab9e7; background: transparent; font: 700 12px Inter,sans-serif; cursor: pointer; transition: .2s; }
.pd-tab span { font-size: 17px; }.pd-tab:hover { color: white; background: rgba(60,100,220,.15); }
.pd-tab.active { color: white; border-color: rgba(74,145,255,.5); background: linear-gradient(135deg,#176eff,#3447e8); box-shadow: 0 5px 20px rgba(24,99,255,.28), inset 0 -3px #59e8ff; }
.pd-catalog-toolbar { justify-content: space-between; gap: 12px; padding: 17px 0 13px; }
.pd-catalog-toolbar h2 { margin: 0; font: 800 21px 'Barlow Condensed',sans-serif; text-transform: uppercase; }
.pd-catalog-toolbar p { margin: 3px 0 0; color: #8295c8; font-size: 10px; }
.pd-sort { display: flex; align-items: center; gap: 8px; color: #8fa2d6; font-size: 10px; }
.pd-sort select { max-width: 145px; padding: 8px 10px; color: #e9efff; border: 1px solid rgba(124,157,255,.25); border-radius: 9px; outline: none; background: #17265d; font: 600 10px Inter,sans-serif; }
.pd-item-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(132px,1fr)); gap: 12px; overflow-y: auto; padding: 2px 4px 8px 2px; scrollbar-color: #3657b4 transparent; scrollbar-width: thin; }
.pd-item-card { min-width: 0; min-height: 190px; padding: 10px 10px 12px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; overflow: hidden; border: 1px solid rgba(117,150,255,.23); border-radius: 15px; color: #f4f6ff; background: linear-gradient(155deg,rgba(43,66,139,.65),rgba(13,23,67,.92)); cursor: pointer; transition: transform .18s,border-color .18s,box-shadow .18s,background .18s; }
.pd-item-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 0%,rgba(89,151,255,.3),transparent 65%); transition: opacity .2s; pointer-events: none; }
.pd-item-card:hover { transform: translateY(-4px); border-color: rgba(105,174,255,.8); box-shadow: 0 10px 25px rgba(0,0,0,.2); }
.pd-item-card:hover::before, .pd-item-card.selected::before { opacity: 1; }
.pd-item-card.selected { border: 2px solid #4be8ff; padding: 9px 9px 11px; box-shadow: 0 0 0 1px rgba(52,198,255,.18),0 0 22px rgba(31,154,255,.25); }
.pd-item-card.rarity-epic { border-color: rgba(179,94,255,.42); }
.pd-item-card.rarity-legendary { border-color: rgba(255,202,74,.6); background: linear-gradient(155deg,rgba(111,78,28,.48),rgba(29,25,64,.95)); }
.pd-item-card.rarity-legendary::after { content: "✦"; position: absolute; top: 35px; right: 14px; color: #ffdc75; text-shadow: 0 0 12px #ffbd38; animation: pd-twinkle 2.2s ease-in-out infinite; }
.pd-card-topline { width: 100%; justify-content: space-between; min-height: 12px; z-index: 1; }
.pd-rarity-dot { width: 7px; height: 7px; border-radius: 50%; background: #8da0c9; }
.pd-rarity-dot.rarity-rare { background: #45aaff; box-shadow: 0 0 8px #45aaff; }
.pd-rarity-dot.rarity-epic { background: #c16bff; box-shadow: 0 0 8px #c16bff; }
.pd-rarity-dot.rarity-legendary { background: #ffd15c; box-shadow: 0 0 9px #ffd15c; }
.pd-status { font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.pd-status.equipped { color: #62f2c1; }.pd-status.owned-status { color: #a8c3ff; }
.pd-item-art { height: 94px; width: 100%; display: grid; place-items: center; z-index: 1; }
.pd-item-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(0,0,0,.35)); transition: transform .2s; }
.pd-item-card:hover .pd-item-art img { transform: scale(1.07); }
.pd-item-art > span { font-size: 42px; }
.pd-item-name { z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pd-rarity { z-index: 1; padding: 4px 9px; border-radius: 99px; font-size: 9px; font-weight: 800; background: rgba(128,145,180,.18); color: #b7c6e9; }
.pd-rarity.rarity-rare { color: #8ed0ff; background: rgba(32,133,255,.2); }
.pd-rarity.rarity-epic { color: #e1a2ff; background: rgba(171,66,255,.2); }
.pd-rarity.rarity-legendary { color: #ffe08a; background: rgba(255,185,39,.18); }
.pd-item-price { z-index: 1; display: flex; align-items: center; gap: 5px; color: #e9efff; font-size: 11px; font-weight: 800; }
.pd-empty-state { grid-column: 1/-1; padding: 55px 15px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #aebce8; text-align: center; }
.pd-empty-state span { font-size: 35px; }.pd-empty-state strong { color: white; }.pd-empty-state p { margin: 0; font-size: 11px; }
.pd-shop-footer { padding: 10px 20px; color: #7388c1; text-align: center; font-size: 9px; letter-spacing: .5px; border-top: 1px solid rgba(130,159,255,.12); }
.pd-shop-footer span { color: #ffd15c; }
@keyframes pd-twinkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(35deg); } }

@media (prefers-reduced-motion: reduce) {
  .pd-shop *, .pd-shop *::before, .pd-shop *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Intégration au site : s'ouvre avec openM, tout tient sur un écran ── */
.pd-shop-backdrop { display: none; padding: clamp(6px, 2vh, 22px); }
.pd-shop-backdrop.open { display: grid; }
.pd-shop { height: 100%; max-height: calc(100dvh - clamp(12px, 4vh, 44px)); }
.pd-shop-header { flex: none; min-height: 0; padding: clamp(6px, 1.6vh, 20px) clamp(12px, 2vw, 28px); }
.pd-brand-mark { width: clamp(38px, 7.4vh, 62px); height: clamp(38px, 7.4vh, 62px); background: none; box-shadow: none; transform: none; }
.pd-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-brand-divider { height: clamp(30px, 7vh, 54px); }
.pd-brand h1 { font-size: clamp(20px, 4vh, 32px); }
.pd-subtitle { margin-top: clamp(1px, .6vh, 6px); }
.pd-preview-panel { padding: clamp(8px, 2vh, 23px) clamp(12px, 2vw, 24px); }
.pd-avatar-stage { flex: 1; height: auto; min-height: 0; margin: clamp(2px, 1vh, 8px) 0; }
.pd-avatar-content { min-height: 0; overflow: hidden; }
.pd-avatar-content svg { display: block; width: auto; height: 100%; max-width: 100%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.pd-selected-info { flex: none; padding: clamp(8px, 1.8vh, 16px); }
.pd-selected-info h2 { font-size: clamp(17px, 3vh, 22px); margin-top: 2px; }
.pd-action-row { margin-top: clamp(6px, 1.6vh, 15px); }
.pd-primary-button { padding: clamp(7px, 1.5vh, 12px) 16px; }
.pd-notice { margin-top: clamp(4px, 1vh, 10px); }
.pd-catalog { padding: clamp(8px, 2vh, 20px) clamp(10px, 2vw, 24px) clamp(6px, 1.4vh, 16px); min-height: 0; }
.pd-category-tabs { flex: none; padding-bottom: clamp(5px, 1.4vh, 13px); overflow: hidden; }
.pd-tab { flex: 1 1 0; min-width: 0; padding: clamp(6px, 1.4vh, 12px) 6px; gap: 6px; }
.pd-catalog-toolbar { flex: none; padding: clamp(4px, 1.4vh, 17px) 0 clamp(4px, 1.2vh, 13px); }
.pd-catalog-toolbar h2 { font-size: clamp(16px, 2.9vh, 21px); }
/* 4 colonnes et 3 lignes : assez pour les 12 maillots, sans défilement */
.pd-item-grid { flex: 1; min-height: 0; overflow: hidden; padding: 2px; gap: clamp(4px, 1.1vh, 12px); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.pd-item-card { min-height: 0; padding: clamp(3px, .8vh, 10px) 6px; gap: clamp(1px, .4vh, 5px); }
.pd-item-card.selected { padding: calc(clamp(3px, .8vh, 10px) - 1px) 5px; }
.pd-card-topline { position: absolute; top: 6px; left: 8px; right: 8px; width: auto; }
.pd-item-art { flex: 1; min-height: 0; height: auto; overflow: hidden; }
.pd-item-art svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 9px rgba(0,0,0,.35)); transition: transform .2s; }
.pd-item-card:hover .pd-item-art svg { transform: scale(1.07); }
.pd-item-name { flex: none; font-size: clamp(10px, 1.8vh, 13px); }
.pd-item-meta { flex: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pd-item-meta .pd-rarity { padding: 2px 6px; font-size: 8.5px; }
.pd-item-price { font-size: clamp(9px, 1.6vh, 11px); white-space: nowrap; }
.pd-shop-footer { flex: none; padding: clamp(3px, .8vh, 10px) 12px; }
@media (max-height: 620px) { .pd-subtitle, .pd-shop-footer { display: none; } }

/* Format vertical : aperçu compact au-dessus, catalogue dessous */
@media (max-aspect-ratio: 1/1) {
  .pd-subtitle, .pd-shop-footer, .pd-eyebrow, .pd-brand-divider, .pd-wallet small { display: none; }
  .pd-brand { gap: 8px; }
  .pd-brand h1 { font-size: clamp(16px, 2.6vh, 24px); }
  .pd-wallet { padding: 6px 10px; gap: 5px; }
  .pd-wallet strong { font-size: 14px; }
  .pd-close { width: 32px; height: 32px; font-size: 21px; }
  .pd-shop-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
  .pd-preview-panel { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; border-right: 0; border-bottom: 1px solid rgba(121,154,255,.2); }
  .pd-preview-label { grid-column: 1 / -1; }
  .pd-selected-info { align-self: center; padding: 8px; }
  .pd-selected-title-row { flex-wrap: wrap; gap: 4px; }
  .pd-action-row { flex-wrap: wrap; gap: 4px; }
  .pd-primary-button { min-width: 0; flex: 1; padding: 7px 8px; }
  .pd-tab { font-size: clamp(9px, 2.4vw, 12px); padding: 6px 2px; gap: 2px; flex-direction: column; }
  .pd-tab span { font-size: 14px; }
  .pd-catalog-toolbar p, .pd-sort > span { display: none; }
  .pd-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-item-card { padding: 3px 2px; border-radius: 10px; }
  .pd-item-card.selected { padding: 2px 1px; }
  .pd-item-meta .pd-rarity { display: none; }
  .pd-status { font-size: 6.5px; letter-spacing: 0; }
  .pd-card-topline { top: 3px; left: 4px; right: 4px; }
  .pd-item-name { font-size: 10px; }
}
/* Téléphone : ni étiquette ni étoile par-dessus l'avatar ou le nom */
@media (max-aspect-ratio: 1/1) {
  .pd-status, .pd-item-card.rarity-legendary::after { display: none; }
  .pd-preview-label { font-size: 8px; letter-spacing: .6px; white-space: nowrap; margin-bottom: 2px; }
  .pd-notice { font-size: 10px; line-height: 1.2; }
}

.pd-svg { display: contents; }

/* ── Fidélité à la maquette : socle, pièces, badges, cartes ── */
.pd-shop { border: 2px solid rgba(90,130,255,.75); box-shadow: 0 0 0 1px rgba(150,90,255,.25), 0 28px 90px rgba(0,0,0,.6), 0 0 50px rgba(60,90,255,.4); }
.pd-brand h1 { font-style: italic; font-weight: 800; }
.pd-brand h1 em { color: #5ea8ff; font-style: italic; }
.pd-coin { display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; color: #8a5a00; font-size: 1em; line-height: 1; text-shadow: none; background: radial-gradient(circle at 35% 30%, #fff0a8, #ffc62e 55%, #e89b00); box-shadow: inset 0 0 0 1.5px #d98f00, 0 1px 3px rgba(0,0,0,.35); }
.pd-wallet { border-color: transparent; background: rgba(3,8,32,.72); }
.pd-wallet strong { font-size: clamp(16px, 2.8vh, 24px); }
.pd-wallet .pd-coin { font-size: clamp(13px, 2.2vh, 18px); }
.pd-preview-panel { background: linear-gradient(135deg, transparent 34%, rgba(60,130,255,.2) 34% 36%, transparent 36% 52%, rgba(60,130,255,.13) 52% 62%, transparent 62%), linear-gradient(160deg,#1554d8 0%,#0e2f94 48%,#071650 100%); }
.pd-preview-glow { opacity: .5; top: 18%; background: #3fa2ff; filter: blur(70px); }
.pd-avatar-stage { padding-bottom: 7%; }
.pd-avatar-content { position: relative; z-index: 2; }
.pd-stage-disc { position: absolute; left: 50%; bottom: 0; width: min(88%, 44vh); aspect-ratio: 4.6; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #17307f, #0a1648 70%); box-shadow: 0 7px 0 #060e33, 0 14px 26px rgba(0,0,0,.5); }
.pd-stage-ring { left: 50%; top: 45%; }
.pd-stage-ring-one { width: 80%; height: 66%; border: 3px solid #4fc0ff; box-shadow: 0 0 16px #2c9dff, inset 0 0 14px rgba(40,160,255,.7); }
.pd-stage-ring-two { width: 58%; height: 40%; background: rgba(90,200,255,.2); }
.pd-stage-arrow { position: absolute; z-index: 3; top: 44%; width: clamp(28px, 5.4vh, 46px); height: clamp(28px, 5.4vh, 46px); transform: translateY(-50%); border: 0; border-radius: 50%; color: #fff; background: rgba(5,14,58,.72); font-size: clamp(20px, 3.6vh, 30px); line-height: 1; cursor: pointer; transition: background .15s; }
.pd-stage-arrow:hover { background: #2a5cff; }
.pd-stage-arrow.prev { left: 0; }
.pd-stage-arrow.next { right: 0; }
.pd-selected-info { background: rgba(6,14,52,.62); border-color: transparent; }
.pd-selected-info h2 { margin: 0; }
.pd-description { margin-top: clamp(3px, .9vh, 9px); font-size: clamp(11px, 1.7vh, 13px); color: #c3cdec; }
.pd-primary-button { width: 100%; justify-content: center; margin-top: clamp(6px, 1.5vh, 14px); gap: 0; padding: clamp(8px, 1.8vh, 14px) 16px; border-radius: 14px; font-size: clamp(14px, 2.5vh, 20px); box-shadow: 0 5px 0 #c98700, 0 10px 24px rgba(255,183,35,.25), inset 0 1px rgba(255,255,255,.65); }
.pd-primary-button:disabled, .pd-primary-button.is-owned { box-shadow: 0 4px 0 #0f3585; font-size: clamp(13px, 2.2vh, 17px); }
.pd-buy-price { display: inline-flex; align-items: center; gap: .4em; padding-right: .8em; margin-right: .8em; border-right: 1px solid rgba(70,45,0,.35); }
.pd-buy-label { font-weight: 800; }
.pd-category-tabs { padding: 4px; border: 0; border-radius: 16px; background: rgba(3,8,34,.6); }
.pd-tab { font-size: clamp(11px, 1.9vh, 15px); border-radius: 13px; }
.pd-tab svg { width: 1.45em; height: 1.45em; flex: none; }
.pd-tab.active { background: linear-gradient(180deg,#2a8bff,#1050ee); box-shadow: 0 0 18px rgba(24,110,255,.55), inset 0 -3px #4fc0ff; }
.pd-catalog-toolbar h2 { font: 600 clamp(13px, 2.2vh, 18px) Inter, sans-serif; text-transform: none; color: #b9c6ea; }
.pd-sort { font-size: clamp(11px, 1.7vh, 13px); padding: 2px 4px 2px 12px; border: 1px solid rgba(124,157,255,.28); border-radius: 99px; background: rgba(3,8,34,.5); color: #dbe3fb; }
.pd-sort select { border: 0; background: transparent; font-size: clamp(11px, 1.7vh, 13px); color: #fff; padding: 5px 4px; }
.pd-sort select option { color: #fff; background: #17265d; }
/* 6 colonnes et 2 lignes : l'avatar garde sa taille, comme sur la maquette */
.pd-item-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); padding: 6px; gap: clamp(6px, 1.3vh, 14px); }
.pd-item-card { border: 2px solid rgba(90,130,255,.42); border-radius: 16px; overflow: visible; padding: clamp(3px, .8vh, 9px) 4px; background: linear-gradient(170deg, rgba(46,76,170,.6), rgba(11,22,74,.95)); }
.pd-item-card.selected { padding: clamp(3px, .8vh, 9px) 4px; border: 2px solid #fff; box-shadow: 0 0 0 2px #4be8ff, 0 0 20px rgba(60,190,255,.55); }
.pd-item-card.rarity-rare { border-color: rgba(70,150,255,.75); }
.pd-item-card.rarity-epic { border-color: #a855ff; background: linear-gradient(170deg, rgba(120,62,214,.5), rgba(21,18,84,.96)); box-shadow: 0 0 14px rgba(168,85,255,.32); }
.pd-item-card.rarity-legendary { border-color: #ffc93d; background: linear-gradient(170deg, rgba(214,150,30,.62), rgba(60,42,28,.96)); box-shadow: 0 0 18px rgba(255,195,50,.5); }
.pd-item-card.rarity-legendary::after { content: none; }
.pd-item-card.is-equipped, .pd-item-card:has(.pd-check) { border-color: #2fe0a2; box-shadow: 0 0 16px rgba(47,224,162,.5); background: linear-gradient(170deg, rgba(20,110,130,.55), rgba(8,28,70,.96)); }
.pd-sparkles { position: absolute; top: 6%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 7px; color: #ffe69a; font-size: 11px; pointer-events: none; animation: pd-twinkle 2.2s ease-in-out infinite; }
.pd-check { position: absolute; top: -7px; right: -7px; z-index: 2; display: grid; place-items: center; width: clamp(18px, 3.2vh, 28px); height: clamp(18px, 3.2vh, 28px); border-radius: 50%; color: #fff; background: #1fc77e; border: 2px solid #0a1648; font-size: clamp(10px, 1.8vh, 15px); font-weight: 900; }
.pd-item-name { color: #fff; font-size: clamp(10px, 1.7vh, 13px); font-weight: 700; }
.pd-item-meta { flex-direction: column; gap: clamp(1px, .5vh, 5px); }
.pd-item-meta .pd-rarity { padding: 2px 8px; font-size: clamp(8.5px, 1.45vh, 11px); }
.pd-rarity.rarity-common { color: #dbe3f7; background: rgba(130,145,190,.42); }
.pd-rarity.rarity-rare { color: #fff; background: #1e74f0; }
.pd-rarity.rarity-epic { color: #fff; background: #9440ee; }
.pd-rarity.rarity-legendary { color: #3c2a00; background: linear-gradient(180deg,#ffe58a,#ffbe2e); }
.pd-item-price { color: #fff; font-size: clamp(11px, 2vh, 16px); }
.pd-equipped { color: #4af0b0; }
.pd-shop-footer { display: none; }
@media (max-aspect-ratio: 1/1) {
  .pd-brand h1 em { display: block; }
  .pd-stage-disc { width: 92%; }
  .pd-stage-arrow { top: 40%; }
  .pd-tab svg { font-size: 15px; }
  .pd-catalog-toolbar h2 { font-size: 13px; }
  .pd-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; }
  .pd-item-meta .pd-rarity, .pd-sparkles { display: none; }
  .pd-item-price { font-size: 10px; }
  .pd-description { display: none; }
  .pd-primary-button { margin-top: 4px; padding: 6px 8px; font-size: 13px; box-shadow: 0 3px 0 #c98700; }
  .pd-primary-button:disabled, .pd-primary-button.is-owned { box-shadow: 0 3px 0 #0f3585; }
}
.pd-sparkles { top: 10%; }
.pd-sparkles i { font-style: normal; }
@media (max-aspect-ratio: 1/1) { .pd-stage-arrow { top: 80%; width: 24px; height: 24px; font-size: 17px; } }

/* Autant de colonnes que nécessaire pour rester sans défilement */
.pd-item-grid { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.pd-item-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-aspect-ratio: 1/1) {
  .pd-item-grid { grid-template-columns: repeat(var(--pcols, 4), minmax(0, 1fr)); }
  .pd-tab { font-size: clamp(8px, 2.2vw, 12px); }
}
.pd-item-grid { grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); }
.pd-item-art { position: relative; }
.pd-item-art img { position: absolute; inset: 0; }
@media (max-aspect-ratio: 1/1) {
  .pd-item-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .pd-tab { justify-content: center; }
  .pd-tab svg { width: 18px; height: 18px; }
}

/* Ballon d'or à la place de l'étoile */
img.pd-coin { display: inline-block; width: 1.6em; height: 1.6em; background: none; box-shadow: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }