/* Fenêtre « Mon décor » / « Boutique » (ui/CosmeticsScreen.js) — refonte du 2026-10-15 : MODALE posée sur l'accueil, même style épuré que la fenêtre des
   amis (css/friends.css) : nuit bleutée, cartes de verre fumé à filet doré, boutons plats ; AUCUNE texture de bois ni border-image.
   Voile sombre + cadre centré + croix flottante au coin ; l'ambiance change avec le mode : lueur BLEUE (Mon décor) ou DORÉE (Boutique). */
.cosmo-overlay {
  position: absolute; inset: 0; z-index: 28; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 26px) 14px calc(var(--safe-bottom) + 20px);
  background: rgba(2, 5, 14, 0.66); animation: cosmo-fade 0.18s ease-out;
}
.cosmo-overlay.leaving { opacity: 0; transition: opacity 0.16s ease-in; pointer-events: none; }
.cosmo-wrap { position: relative; width: min(400px, 100%); height: min(720px, 100%); }
@keyframes cosmo-fade { from { opacity: 0; } }
.cosmo-x {
  position: absolute; z-index: 2; right: -6px; top: -12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer; touch-action: manipulation; color: var(--pn-cream);
  border: 1.5px solid var(--pn-edge); border-radius: 50%; background: #1a2440; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); transition: transform 0.1s, color 0.15s;
}
.cosmo-x svg { width: 16px; height: 16px; }
.cosmo-x:active { transform: scale(0.92); }
@media (hover: hover) { .cosmo-x:hover { color: var(--pn-gold); } }
.cosmo-x:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }

.cosmo {
  --glow: rgba(96, 150, 255, 0.22);
  --line: rgba(255, 224, 160, 0.16);
  --card: rgba(22, 32, 56, 0.66);
  --card-hi: rgba(34, 48, 80, 0.8);
  --ok: #7fe39a;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; outline: none;
  border: 1.5px solid rgba(201, 164, 90, 0.75); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.12), 0 18px 50px rgba(0, 0, 0, 0.65);
  color: var(--pn-cream); font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(90% 34% at 50% 0%, var(--glow), transparent 74%), linear-gradient(#0d1527, #060a15);
  animation: cosmo-in 0.24s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.cosmo[data-mode="shop"] { --glow: rgba(255, 196, 80, 0.24); }
@keyframes cosmo-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* ---- en-tête : titre + pièces */
.cosmo-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.cosmo-title { flex: 1; min-width: 0; }
.cosmo-title h2 { margin: 0; font: 800 23px/1.05 var(--pn-serif); letter-spacing: 0.04em; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.cosmo-title small { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--pn-tan); }
.cosmo-coins {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 9px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.05);
  font: 800 14px/1 system-ui, sans-serif; color: var(--pn-cream); font-variant-numeric: tabular-nums;
}
.cosmo-coins svg { width: 18px; height: 18px; color: #ffc93d; }

/* ---- bascule Mon décor / Boutique */
.cosmo-switch { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0 16px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: rgba(0, 0, 0, 0.35); }
.cosmo-switch button {
  height: 34px; padding: 0 6px; border: 1px solid transparent; border-radius: 99px; background: none; cursor: pointer; touch-action: manipulation; color: var(--pn-tan);
  font: 800 14px/1 var(--pn-serif); letter-spacing: 0.03em; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
}
.cosmo-switch button:active { transform: scale(0.97); }
.cosmo-switch button.on { color: var(--pn-gold); border-color: rgba(255, 210, 94, 0.7); background: rgba(255, 210, 94, 0.14); text-shadow: 0 2px 0 #4a3000; }
@media (hover: hover) { .cosmo-switch button:not(.on):hover { color: var(--pn-cream); } }

/* ---- catégories */
.cosmo-tabs { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 0; }
.cosmo-tab {
  display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 8px 2px 7px; cursor: pointer; touch-action: manipulation; color: var(--pn-tan);
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.cosmo-tab svg { width: 20px; height: 20px; }
.cosmo-tab b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 11.5px/1.1 var(--pn-serif); }
.cosmo-tab small { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.75; }
.cosmo-tab:active { transform: scale(0.96); }
.cosmo-tab.on { color: var(--pn-gold); border-color: rgba(255, 210, 94, 0.7); background: rgba(255, 210, 94, 0.12); }
@media (hover: hover) { .cosmo-tab:not(.on):hover { color: var(--pn-cream); border-color: rgba(255, 210, 94, 0.35); } }

/* ---- contenu défilant */
.cosmo-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 14px; scrollbar-width: thin; scrollbar-color: rgba(201, 164, 90, 0.6) transparent; }
.cosmo-blurb { margin: 0 4px 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--pn-tan); }
.cosmo-grid { display: grid; }
.cosmo-grid.kind-avatar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.cosmo-grid.kind-title { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cosmo-grid.kind-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cosmo-grid.kind-arena { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.cosmo-empty { grid-column: 1 / -1; margin: 18px 0; text-align: center; color: var(--pn-tan); }

/* ---- cartes (base) */
.cc {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; touch-action: manipulation; transition: transform 0.12s, filter 0.15s; animation: cc-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; animation-delay: calc(var(--i, 0) * 24ms);
}
@keyframes cc-in { from { opacity: 0; transform: translateY(8px) scale(0.95); } }
.cc:active { transform: scale(0.96); }
@media (hover: hover) { .cc:hover { filter: brightness(1.12); } }
.cc:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 3px; border-radius: 12px; }
.cc-art { position: relative; display: block; width: 100%; }
.cc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 11.5px/1.15 var(--pn-serif); text-align: center; color: var(--pn-cream); }
.cc.locked .cc-art { filter: grayscale(0.85) brightness(0.62); }
.cc.locked .cc-name { opacity: 0.65; }
.cc-badge { position: absolute; display: none; z-index: 3; pointer-events: none; }
.on-badge { top: -5px; right: -4px; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #3a2400; border: 2px solid #0d1527; background: linear-gradient(#ffe08a, #e0a52f); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); }
.on-badge svg { width: 13px; height: 13px; }
.cc.on .on-badge { display: grid; }
.lock-badge { left: 50%; bottom: 4px; transform: translateX(-50%); align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid rgba(201, 164, 90, 0.7); border-radius: 99px; background: rgba(5, 9, 20, 0.85); color: var(--pn-gold); font: 800 11px/1.2 system-ui, sans-serif; white-space: nowrap; }
.lock-badge svg { width: 11px; height: 11px; }
.lock-badge i { font-style: normal; font-variant-numeric: tabular-nums; }
.cc.locked .lock-badge { display: inline-flex; }
.cc.pulse .cc-art { animation: cc-pulse 0.6s ease-out; }
@keyframes cc-pulse { 40% { transform: scale(1.1); filter: brightness(1.35) drop-shadow(0 0 10px #ffd25e); } }

/* avatars : portraits ronds cerclés d'or (même rendu que dans les amis) */
.cc-avatar .cc-art { aspect-ratio: 1; border-radius: 50%; }
.cc-medal { position: absolute; inset: 0; display: block; border-radius: 50%; background-color: #162033; box-shadow: 0 0 0 2px #c9a45a, 0 2px 6px rgba(0, 0, 0, 0.55); }
.cc-avatar .on-badge { top: -3px; right: -3px; }
.cc-avatar .lock-badge { bottom: -3px; }
.cc-avatar.sel .cc-art { transform: scale(1.06); }
.cc-avatar.sel .cc-medal { box-shadow: 0 0 0 3px var(--pn-gold), 0 0 14px 2px rgba(255, 210, 94, 0.55); }
.cc-avatar.sel .cc-name { color: var(--pn-gold); }
.cc-avatar { gap: 9px; }

/* titres : plaques de verre pleine largeur */
.cc-title .cc-art { padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color 0.15s, background 0.15s; }
.cc-title .cc-name { display: none; }
.cc-plaque { display: flex; align-items: center; justify-content: center; gap: 9px; }
.cc-plaque svg { flex: none; width: 19px; height: 19px; color: var(--pn-gold); }
.cc-plaque em { font: 800 17px/1.1 var(--pn-serif); font-style: normal; letter-spacing: 0.03em; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.cc-title .on-badge { top: -6px; right: -3px; }
.cc-title .lock-badge { left: auto; right: 12px; bottom: 50%; transform: translateY(50%); }
.cc-title.sel .cc-art { border-color: var(--pn-gold); background: var(--card-hi); box-shadow: 0 0 14px rgba(255, 210, 94, 0.3); }

/* bannières : étendard sur carte de verre */
.cc-banner .cc-art { display: grid; justify-items: center; padding: 12px 6px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color 0.15s, background 0.15s; }
.cc-flag { width: 62px; height: 80px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); transform-origin: 18% 6%; animation: cc-wave 3.6s ease-in-out infinite; }
.cc-cloth { fill: var(--c, #5b8def); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.2; }
@keyframes cc-wave { 50% { transform: rotate(2.4deg) skewY(-1.5deg); } }
.cc-banner.sel .cc-art { border-color: var(--pn-gold); background: var(--card-hi); box-shadow: 0 0 14px rgba(255, 210, 94, 0.3); }
.cc-banner .lock-badge { bottom: 6px; }
.cc-banner.locked .cc-art { filter: none; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--card); } /* la couleur d'une bannière verrouillée reste visible : c'est ce qu'on vient voir */
.cc-banner.locked .cc-flag { filter: saturate(0.85) brightness(0.88) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }

/* arènes : vignettes de plateau */
.cc-arena .cc-art { aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2c4a74, #101c33); transition: border-color 0.15s; }
.cc-thumb { position: absolute; inset: 3px; display: block; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.cc-arena .on-badge { top: 4px; right: 4px; }
.cc-arena.sel .cc-art { border-color: var(--pn-gold); box-shadow: 0 0 14px rgba(255, 210, 94, 0.35); }
.cc-arena.sel .cc-name { color: var(--pn-gold); }

/* ---- liens de pied de liste */
.cosmo-more { display: grid; gap: 8px; }
.cosmo-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px 12px; cursor: pointer; touch-action: manipulation;
  border: 1px dashed rgba(255, 210, 94, 0.5); border-radius: 14px; background: rgba(255, 210, 94, 0.05); color: var(--pn-gold); font: 800 13px/1.2 var(--pn-serif);
}
.cosmo-link svg { flex: none; width: 17px; height: 17px; }
.cosmo-link:active { transform: scale(0.98); }
@media (hover: hover) { .cosmo-link:hover { background: rgba(255, 210, 94, 0.12); } }
.cosmo-link.quiet { margin-top: 6px; border-style: solid; border-color: var(--line); background: rgba(255, 255, 255, 0.04); color: var(--pn-tan); font-weight: 700; }

/* ---- bandeau du bas : aperçu de l'objet choisi + action */
.cosmo-dock {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px 14px;
  border-top: 1px solid var(--line); background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.cosmo.no-sel .cosmo-dock { opacity: 0.55; }
.dock-art { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 35%, #2c4a74, #101c33); overflow: hidden; }
.dock-art.kind-avatar { overflow: visible; border-radius: 50%; border: 0; background: none; }
.dock-art.locked > * { filter: grayscale(0.85) brightness(0.62); }
.dock-art .cc-medal { inset: 0; }
.dock-art .cc-plaque em { display: none; }
.dock-art .cc-plaque svg { width: 32px; height: 32px; }
.dock-art .cc-flag { width: 40px; height: 52px; animation: none; }
.dock-art .cc-thumb { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.dock-art.locked .cc-flag { filter: saturate(0.85) brightness(0.88); }
.dock-art.kind-banner.locked > * { filter: none; }
.dock-text { min-width: 0; }
.dock-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.15 var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.dock-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #b8c0d0; }
.dock-text em { display: block; min-height: 1.2em; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--pn-tan); }
.dock-text em.ok { color: var(--ok); }
.dock-text em.warn { color: #ffcf6b; }
.dock-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 100px; height: 42px; padding: 0 16px; cursor: pointer; touch-action: manipulation;
  border: 1px solid rgba(160, 255, 170, 0.45); border-radius: 99px; color: #fff; font: 800 14px/1 var(--pn-serif); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 40, 10, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.1s, filter 0.15s;
}
.dock-btn svg { width: 16px; height: 16px; }
.dock-btn.go { background: linear-gradient(#4cc950, #1f8a2a); }
.dock-btn.go:active:not(:disabled) { transform: scale(0.95); }
@media (hover: hover) { .dock-btn.go:hover:not(:disabled) { filter: brightness(1.12); } }
.dock-btn.is-on { color: var(--pn-gold); border-color: rgba(255, 210, 94, 0.6); background: rgba(255, 210, 94, 0.1); box-shadow: none; text-shadow: none; }
.dock-btn.soon { color: var(--pn-tan); border-color: var(--line); background: rgba(255, 255, 255, 0.06); box-shadow: none; text-shadow: none; }
.dock-btn:disabled { cursor: default; }
.dock-btn:focus-visible, .cosmo-tab:focus-visible, .cosmo-switch button:focus-visible, .cosmo-link:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }

/* petits écrans (360×640) : tout reste visible sans écraser la grille */
@media (max-height: 700px) {
  .cosmo-wrap { height: 100%; }
  .cosmo-top { padding: 12px 16px 8px; }
  .cosmo-title h2 { font-size: 20px; }
  .cosmo-tabs { padding-top: 9px; }
  .cosmo-tab { padding: 6px 2px 5px; }
  .cosmo-tab small { display: none; }
  .cosmo-blurb { display: none; }
  .cosmo-body { padding-top: 10px; }
  .cosmo-dock { padding-top: 9px; padding-bottom: 11px; gap: 10px; }
  .dock-art { width: 52px; height: 52px; }
  .dock-text small { -webkit-line-clamp: 1; }
  .cc-arena .cc-art { aspect-ratio: 1 / 1; }
  .cosmo-grid.kind-avatar { gap: 11px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmo, .cosmo-overlay, .cc, .cc-flag, .cc.pulse .cc-art { animation: none; }
  .cosmo-overlay.leaving { transition: none; }
}