/* MEEZ ROYALE - avantages PRIME visibles en jeu : la roue d'emotes (touche T), les traînees (vitrine animee, page Personnalisation), la vitrine PRIME.
   Le dessin des bulles et des traînees est dans emotes.js / trails.js ; ici seulement l'habillage HTML. */

/* ---- bouton du HUD + roue d'emotes (centree sur l'ecran, ouverte avec T ou le bouton ; 1-8 ou clic pour choisir) */
.hud-emote.on { border-color: var(--brand); background: rgba(240,200,105,.2); }
#emoteWheel { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 9; pointer-events: none; }
#emoteWheel.hidden { display: none; }
.ew-ring { position: absolute; left: -138px; top: -138px; width: 276px; height: 276px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle, rgba(10,12,18,.18) 0 40%, rgba(10,12,18,.66) 41% 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: ewIn .16s ease-out; }
.ew-center { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 118px; text-align: center; pointer-events: none; }
.ew-center b { display: block; font: 800 14px var(--ui); letter-spacing: .3px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.ew-center small { display: block; margin-top: 4px; font: 600 9.5px/1.35 var(--ui); opacity: .62; }
.ew-slot { position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; transform: translate(var(--x), var(--y)); display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; pointer-events: auto; color: #fff; background: rgba(20,24,34,.94); border: 2px solid rgba(255,255,255,.34);
  transition: transform .12s var(--ease), border-color .12s, box-shadow .12s; animation: ewPop .2s var(--ease) backwards; }
.ew-slot:hover, .ew-slot:focus-visible { transform: translate(var(--x), var(--y)) scale(1.2); border-color: #fff; outline: none; z-index: 2; box-shadow: 0 0 16px rgba(255,255,255,.35); }
.ew-g { font: 29px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.ew-n { position: absolute; left: -3px; top: -3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 800 10px var(--mono); font-style: normal;
  color: #fff; background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.4); }
.ew-slot.prime { border-color: #ffd766; background: linear-gradient(#3d2c0b, #1c1405); box-shadow: 0 0 14px rgba(255,190,50,.45); }
.ew-slot.prime:hover { box-shadow: 0 0 22px rgba(255,200,70,.85); }
.ew-crown { position: absolute; right: -4px; top: -7px; font-style: normal; font-size: 14px; color: #ffd45a; text-shadow: 0 0 7px rgba(255,190,50,.95); }
.ew-slot.locked .ew-g { opacity: .4; filter: grayscale(.8); }
.ew-slot.locked::after { content: "\1F512"; position: absolute; font-size: 15px; }
@keyframes ewIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ewPop { from { opacity: 0; transform: translate(0, 0) scale(.4); } to { opacity: 1; } }
body.touch #emoteWheel { transform: scale(.82); }

/* ---- traînees : la vitrine (6 apercus animes) et la page Personnalisation */
.trail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trail-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; border-radius: 16px; cursor: pointer; text-align: center; color: var(--text);
  background: rgba(0,0,0,.36); border: 1.5px solid rgba(var(--sk-a, 255,214,90), .5); transition: transform .18s var(--ease), box-shadow .18s, background .18s; }
.trail-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(var(--sk-a, 255,214,90), .16), transparent 72%); }
.trail-tile:hover, .trail-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 0 22px rgba(var(--sk-a, 255,214,90), .32); outline: none; }
.trail-tile canvas { position: relative; display: block; width: 100%; height: 92px; }
.tt-name { position: relative; padding: 6px 6px 10px; font: 800 12.5px var(--ui); }
.trail-tile.locked::after { content: "\2655"; position: absolute; top: 6px; right: 9px; font-size: 14px; color: #ffd45a; text-shadow: 0 0 8px rgba(255,190,50,.8); }
.trail-tile.equipped { box-shadow: 0 0 0 1.5px var(--brand) inset, 0 0 20px rgba(240,200,105,.26); }
.tt-eq { position: absolute; top: 6px; right: 9px; font-style: normal; font: 900 13px var(--ui); color: var(--brand); }
.perso-trail .swatch { position: relative; width: 100%; height: 62px; margin-top: -2px; }
.perso-trail .swatch canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.perso-trail.locked .swatch canvas { opacity: .7; }
.perso-trail.locked small { color: #ffe38a; }
.prime-mark { color: #ffd45a; text-shadow: 0 0 8px rgba(255,190,50,.7); margin-left: 4px; }
.perso-emotes { margin: 14px 0 0; }

/* ---- emotes exclusifs (vitrine PRIME) */
.emote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.emote-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 6px 11px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--card-line); }
.emote-tile.prime { border-color: rgba(255,212,90,.62); background: linear-gradient(180deg, rgba(255,212,90,.13), rgba(0,0,0,.3)); box-shadow: 0 0 14px rgba(255,190,50,.14); }
.et-g { font: 32px/1.1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform .2s var(--ease); }
.emote-tile:hover .et-g { transform: scale(1.28) rotate(-7deg); }
.emote-tile b { font: 800 12.5px var(--ui); }
.emote-tile small { font: 700 10px var(--mono); letter-spacing: .4px; opacity: .6; }
.emote-tile.prime small { color: #ffd766; opacity: .95; }

/* ---- vitrine PRIME : bandeau (prix + bouton), tous les avantages, traînees, emotes, avant-premiere */
.prime-show { padding: 24px 26px; border-radius: 22px; }
.ps-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.ps-hero .prime-head { flex: 1 1 260px; }
.ps-hero .prime-title { font-size: 28px; }
.ps-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 260px; text-align: center; }
.ps-cta .prime-price { text-align: center; }
.ps-cta .prime-price b { font-size: 30px; }
.ps-cta .prime-buy { width: 100%; max-width: none; margin-top: 2px; padding: 14px 18px; font-size: 15px; }
.ps-title { position: relative; margin: 22px 0 2px; font: 900 12px var(--ui); letter-spacing: 1.3px; text-transform: uppercase; color: #ffd45a; opacity: .9; }
.prime-show .prime-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; margin: 10px 0 4px; }
.prime-show .prime-perks li { font-size: 13.5px; }
.ps-sec { position: relative; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,212,90,.16); }
.ps-h { margin-bottom: 12px; }
.ps-h h4 { margin: 0 0 3px; font: 900 16px var(--ui); color: #ffd766; }
.ps-h p { margin: 0; font: 600 12.5px/1.45 var(--ui); opacity: .72; }
.ps-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 18px; }
.ps-foot p { margin: 0; }
.ps-early .btn { text-align: left; }
.prime-show.compact { padding: 22px 26px; }

@media (max-width: 760px) {
  .prime-show, .prime-show.compact { padding: 18px 16px; }
  .ps-cta { min-width: 0; width: 100%; }
  .prime-show .prime-perks { grid-template-columns: 1fr; }
  .trail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trail-tile canvas { height: 78px; }
  .emote-grid { gap: 8px; }
  .et-g { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .ew-ring, .ew-slot { animation: none; } }

/* ---- recap de mort : qui t'a eu, avec quoi, a quelle distance, et d'ou venaient les degats */
.res-kill { margin: 6px auto 12px; padding: 10px 14px; max-width: 470px; border-radius: 12px; text-align: center; background: rgba(255,70,70,.09); border: 1px solid rgba(255,100,100,.38); }
.res-kill.hidden { display: none; }
.rk-line { font: 700 15px/1.35 var(--ui); }
.rk-line b { color: #ff9a9a; }
.rk-rar { font-style: normal; font-weight: 800; }
.rk-sub, .rk-taken { margin-top: 4px; font: 600 12.5px/1.4 var(--ui); opacity: .82; }

/* ---- invite « E · ... » (arme au sol, caisse, porte) : un badge bien visible au milieu de l'ecran, sous le personnage */
#prompt { position: fixed; left: 50%; top: 76%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 11px; max-width: 92vw; padding: 8px 20px 8px 9px; border-radius: 999px;
  pointer-events: none; white-space: nowrap; font: 800 16px var(--ui); color: #fff; letter-spacing: .2px; background: rgba(12,14,22,.8); border: 1.5px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 24px rgba(255,214,90,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: pkIn .18s var(--ease) both; }
#prompt.hidden { display: none; }
#prompt.k-weapon { border-color: var(--rc); box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb, var(--rc) 45%, transparent); }
.pk-key { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; font: 900 19px var(--mono); color: #2a1a08;
  background: linear-gradient(180deg, #ffe89a, #f2b632); box-shadow: 0 3px 0 #9a6a10, 0 0 16px rgba(255,200,70,.55); animation: pkPulse 1.5s ease-in-out infinite; }
.pk-ico { font-size: 22px; line-height: 1; }
.pk-rar { padding: 2px 10px; border-radius: 999px; font: 800 11px var(--ui); letter-spacing: .9px; text-transform: uppercase; color: var(--rc); border: 1px solid var(--rc);
  background: color-mix(in srgb, var(--rc) 16%, transparent); }
.pk-swap { font: 700 12px var(--ui); letter-spacing: .3px; color: #ffd9a0; opacity: .92; }                 /* sac plein : « ⇄ remplace Pistolet » */
@keyframes pkIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes pkPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { #prompt, .pk-key { animation: none; } }
@media (max-width: 1000px) { #prompt { top: 67%; } }                              /* petit ecran : la carte de l'arme en bas a droite s'approche du centre */