/* Player identity cards + full-card popup (Phase 6 — visual only).
   Theme: dark café / wood grain / gold accents, with Cuban red+blue used sparingly. */

:root {
  --pc-wood-1: #2a1c10;
  --pc-wood-2: #17100a;
  --pc-gold:   #e8b34a;
  --pc-gold-soft: #ffd98a;
  --pc-ivory:  #f4e9d4;
  --pc-cuba-red:  #c1272d;
  --pc-cuba-blue: #1f4e8c;
}

/* ── in-panel identity card ────────────────────────────────────────────────
   A compact HORIZONTAL HUD strip under the username: the level badge and the three
   stats sit on ONE line (⭐ Nv 12  🁫 124 · 🏆 63% · 🔥 5). `width: max-content` keeps
   it only as wide as that line — a lightweight HUD, not a wide/stretched panel — so
   the tile rack stays compact. One shared gold identity for every seat; side seats are
   a smaller version of the same strip. */
.pcard {
  /* ── customizable ACCENT layer ── a rank/skin only overrides these variables (or
     adds a background/border image); the clean BASE layout below never changes. ── */
  --pc-accent: var(--pc-gold);            /* main accent: badge, accent area, selected border */
  --pc-accent-soft: var(--pc-gold-soft);  /* lighter accent for the badge gradient */
  --pc-border: rgba(232, 179, 74, .32);   /* resting accent border (full colour incl. alpha) */
  --pc-glow: rgba(232, 179, 74, .5);      /* selected glow colour */
  --pc-card-bg: linear-gradient(158deg, rgba(42, 28, 16, .62), rgba(20, 14, 9, .64));

  position: relative;            /* anchors the small accent area (::after) */
  display: flex;
  flex-direction: row;           /* level badge + stats on ONE line */
  align-items: center;
  flex-wrap: wrap;               /* only the narrowest side seats may wrap badge/stats */
  justify-content: center;
  gap: 4px 10px;
  width: max-content;            /* only as wide as its one line — a compact HUD strip */
  max-width: 100%;
  margin: 6px auto 0;
  padding: 7px 12px;
  border-radius: 11px;
  background: var(--pc-card-bg);                       /* BASE: dark Cuban bg */
  box-shadow: inset 0 0 0 1px var(--pc-border),        /* clean accent border  */
              0 2px 9px rgba(0, 0, 0, .3);
  transition: box-shadow .15s ease;
}
/* A bot seat carries no card badge (it's already marked by the seat's 🤖 BOT tag) and no
   real stats, so its card renders content-less. Collapse the empty glass box entirely —
   every other seat always has a badge or a stats/loading row, so this only hits bots. */
.pcard:empty { display: none; }
/* small ACCENT AREA — a subtle underline in the accent colour, reserved as the slot a
   rank tint / skin later customises. Absolutely positioned, so it adds no layout. */
.pcard::after {
  content: "";
  position: absolute; left: 22%; right: 22%; bottom: 3px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pc-accent), transparent);
  opacity: .5;
}
/* SELECTED (clicking a player highlights their card): keep the card colour, just add a
   subtle accent border + glow. Driven by --pc-accent, so a ranked card glows in its
   own rank colour with no extra rules. */
.pcard.selected {
  box-shadow: inset 0 0 0 1.5px var(--pc-accent),
              0 0 13px var(--pc-glow),
              0 2px 9px rgba(0, 0, 0, .35);
}

/* ── FUTURE customization (NOT enabled — structure only) ──────────────────────
   Rank identity = the SAME card, just override the accent vars, e.g.:
     .pcard.rank-bronze  { --pc-accent:#cd7f32; --pc-accent-soft:#e6a15a; --pc-border:rgba(205,127,50,.32);  --pc-glow:rgba(205,127,50,.5); }
     .pcard.rank-silver  { --pc-accent:#cad3dd; --pc-accent-soft:#eef2f6; --pc-border:rgba(202,211,221,.32); --pc-glow:rgba(202,211,221,.5); }
     .pcard.rank-gold    { (this is the default accent) }
     .pcard.rank-diamond { --pc-accent:#8fe3ff; --pc-accent-soft:#d6f6ff; --pc-border:rgba(143,227,255,.32); --pc-glow:rgba(143,227,255,.5); }
   Higher ranks / skins layer ON TOP without touching the base: a `border-image`, a
   `--pc-card-bg` texture, an animated `.pcard::before`, or a badge in the accent area.
   ──────────────────────────────────────────────────────────────────────────── */
/* level badge (inline, before the stats) */
.pc-badge {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #241608;
  padding: 3px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pc-accent-soft), var(--pc-accent)); /* accent */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  white-space: nowrap;
}
/* Every seat — self, teammates, opponents, AI — uses this ONE gold design. The only
   AI cue is the 🤖 in the name (op-head); the card itself is identical for everyone so
   real online stats can later drop straight into the same look. */
.pcard.mock .pc-badge { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1.5px rgba(193, 39, 45, .55); }
/* stats: the three metrics on ONE horizontal line — 🁫 games · 🏆 win% · 🔥 streak */
.pc-stats {
  display: flex; flex-direction: row; align-items: center;
  gap: 10px; flex-wrap: nowrap; white-space: nowrap;
  font-size: 14.5px; font-weight: 800; color: var(--pc-ivory); line-height: 1.1;
}
.pc-stat { display: inline-flex; align-items: center; gap: 5px; }
.pc-ico { font-size: 16px; }
.pc-val { letter-spacing: .2px; }
.pc-sep { color: var(--pc-accent); opacity: .7; font-weight: 900; }
.pc-loading { color: #cbb890; opacity: .75; font-weight: 700; }

/* header identity (username + avatar) */
.op-head.pcard-open { cursor: pointer; }
.op-head.pcard-open .pname { font-size: 14.5px; }
.op-head.pcard-open:hover .pname { text-decoration: underline; text-underline-offset: 2px; }
.op-head .avatar {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: 6px;
  border-radius: 50%;
  font-size: 14px;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 1.5px rgba(232, 179, 74, .6);
}
.op-head .avatar-img { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px rgba(232, 179, 74, .55); }
/* Chosen avatar image painted onto the same disc (keeps the gold ring). This is how the
   selected avatar reflects on the domino table without any gameplay/protocol change. */
.op-head .avatar.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }

/* MAIN cards (self bottom + top) — slightly larger than the side cards. */
.seat-panel.pos-self .op-head .avatar { width: 30px; height: 30px; font-size: 18px; }
.seat-panel.pos-self .op-head .pname { font-size: 16px; }
.seat-panel.pos-self .pc-badge { font-size: 14.5px; }
.seat-panel.pos-self .pc-stats { font-size: 16px; gap: 12px; }
.seat-panel.pos-self .pc-ico { font-size: 17px; }
/* BOTTOM (self) HUD: same single one-line bar as the top — name + level + stats
   inline (Name ⭐ Nv 12 🁫 124 · 🏆 63% · 🔥 5), centered above the hand rack. */
.seat-panel.pos-self .pc-idcol { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.seat-panel.pos-self .pc-idcol .pcard { margin: 0; }

/* TOP opponent HUD: a SINGLE one-line bar — Name ⭐ Nv 12 🁫 124 · 🏆 63% · 🔥 5 —
   placed directly ABOVE the tiles, at the SAME size/colours/spacing as the bottom
   (self) HUD. The panel body was a row [identity][tiles]; stack it to [bar][tiles]
   and lay the name + card inline so everything reads on one line. */
.seat-panel.pos-top.portrait .top-body { flex-direction: column; align-items: center; gap: 3px; }
.seat-panel.pos-top.portrait .op-head { flex-direction: row; align-items: center; text-align: left; gap: 5px; }
/* nowrap (single-line HUD bar) for normal names, but capped + ellipsized so a very
   long name truncates instead of overflowing past the card into the board. */
.seat-panel.pos-top.portrait .pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; font-size: 16px; }
.seat-panel.pos-top .pc-idcol { display: flex; flex-direction: row; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 0; }
.seat-panel.pos-top .pc-idcol .pcard { margin: 0; }
/* match the bottom (self) HUD sizing */
.seat-panel.pos-top .pc-badge { font-size: 14.5px; }
.seat-panel.pos-top .pc-stats { font-size: 16px; gap: 12px; }
.seat-panel.pos-top .pc-ico { font-size: 17px; }

/* SIDE cards (left/right) — a SMALLER version of the same horizontal strip. CRUCIAL:
   `width: auto` (not max-content) constrains the card to the narrow tile column so it
   NEVER widens the table. The three stats stay on one horizontal line (nowrap, small
   type); when badge+stats can't share the line the badge simply wraps ABOVE the stat
   row — never a tall per-stat stack. */
/* ~12% larger for readability; horizontal gaps tightened so the card still fits the
   tile column (no width increase); a little more vertical spacing between the rows. */
.seat-panel.pos-left .pcard,
.seat-panel.pos-right .pcard { width: auto; max-width: 100%; gap: 3px 4px; padding: 6px 5px; }
.seat-panel.pos-left .pc-stats,
.seat-panel.pos-right .pc-stats { font-size: 10px; gap: 4px; }
.seat-panel.pos-left .pc-badge,
.seat-panel.pos-right .pc-badge { font-size: 10.5px; padding: 2px 8px; }
.seat-panel.pos-left .pc-ico,
.seat-panel.pos-right .pc-ico { font-size: 11px; }
.seat-panel.pos-left .pc-stat,
.seat-panel.pos-right .pc-stat { gap: 2px; }
.seat-panel.pos-left.portrait .pname,
.seat-panel.pos-right.portrait .pname { font-size: 15.5px; }
.seat-panel.pos-left .pc-sep,
.seat-panel.pos-right .pc-sep { display: none; }        /* spaces, not dots — matches the format & saves width */
.seat-panel.pos-left .op-head .avatar,
.seat-panel.pos-right .op-head .avatar { width: 22px; height: 22px; font-size: 13px; }

/* ── mobile (narrow viewports): same horizontal strip, a touch smaller. ── */
@media (max-width: 640px) {
  .pc-badge { font-size: 11.5px; padding: 2px 9px; }
  .pc-stats { font-size: 12.5px; gap: 8px; }
  .pc-ico { font-size: 13.5px; }
  .seat-panel.pos-self .pc-stats { font-size: 13px; }
  .op-head.pcard-open .pname { font-size: 13px; }
  .seat-panel.pos-self .op-head .pname { font-size: 14px; }
  .op-head .avatar { width: 20px; height: 20px; font-size: 12px; }
  .seat-panel.pos-self .op-head .avatar { width: 24px; height: 24px; font-size: 15px; }
  /* keep the TOP bar matched to the self HUD at mobile sizes too. The self HUD only
     shrinks its name + stats at mobile (badge/icons keep their desktop size), so the
     top bar mirrors exactly that — only name + stats are overridden here. */
  .seat-panel.pos-top.portrait .pname { font-size: 14px; }
  .seat-panel.pos-top .pc-stats { font-size: 13px; }
}

/* ── full-card popup — dark GLASSMORPHISM profile card ─────────────────────
   The competitive profile that opens on clicking a player. Frosted dark glass with a
   thin, RANK-TINTABLE glowing border (override --pm-accent/--pm-border/--pm-glow) and a
   subtle Cuban tricolor accent. Separate from the in-tile HUD card (.pcard). */
.player-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 18, .55);            /* dim, but the table still shows through */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: pc-fade .15s ease-out;
}
@keyframes pc-fade { from { opacity: 0; } to { opacity: 1; } }

.player-modal-card {
  /* ── rank/skin override these; default is neutral glass (not gold/wood) ── */
  --pm-accent: #cfe0f5;                        /* rank tints this (label, XP, avatar ring) */
  --pm-border: rgba(255, 255, 255, .18);       /* thin glass edge / rank frame */
  --pm-glow: rgba(90, 150, 225, .35);          /* soft rank glow */
  --pm-bg: linear-gradient(160deg, rgba(22, 28, 44, .52), rgba(9, 13, 24, .58)); /* ~55% dark glass */
  --pm-text: #eef3fb;
  --pm-muted: #9fb1c8;

  position: relative;
  width: min(340px, 93vw);
  /* Uniform scale-up TEST: enlarges the whole card (fonts, avatar, spacing, badges)
     proportionally without touching individual values. transform-origin center keeps
     it centered in the flex backdrop. Only the player card — NOT the Profile Hub
     menu (.ph-panel). */
  transform: scale(1.35);
  transform-origin: center center;
  border-radius: 18px;
  padding: 20px 18px 18px;
  color: var(--pm-text);
  /* frosted glass — the dimmed table blurs through the ~55% translucent surface */
  background: var(--pm-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),    /* top glass highlight */
    inset 0 0 0 1px var(--pm-border),           /* thin rank/accent border */
    0 0 26px var(--pm-glow),                     /* soft rank glow */
    0 24px 60px rgba(0, 0, 0, .62);              /* depth */
}
/* subtle Cuban tricolor hairline at the top edge */
.player-modal-card::before {
  content: "";
  position: absolute; left: 16px; right: 16px; top: 11px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pc-cuba-blue) 0 46%, #ffffff 46% 54%, var(--pc-cuba-red) 54% 100%);
  opacity: .7;
}

/* ── FUTURE rank frames / skins (NOT enabled — structure only) ────────────────
   Rank = the SAME glass card, just override the popup accent vars, e.g.:
     .player-modal-card.rank-bronze  { --pm-accent:#e6a15a; --pm-border:rgba(205,127,50,.55); --pm-glow:rgba(205,127,50,.4); }
     .player-modal-card.rank-silver  { --pm-accent:#e8eef6; --pm-border:rgba(202,211,221,.55);--pm-glow:rgba(202,211,221,.4); }
     .player-modal-card.rank-gold    { --pm-accent:#ffd98a; --pm-border:rgba(232,179,74,.55); --pm-glow:rgba(232,179,74,.4); }
     .player-modal-card.rank-diamond { --pm-accent:#bfefff; --pm-border:rgba(120,200,255,.6); --pm-glow:rgba(120,200,255,.5); }
   Skins layer ON TOP: a --pm-bg texture/image, a `border-image`, or an animated ::after.
   ──────────────────────────────────────────────────────────────────────────── */

.pm-close {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: var(--pm-text); font-size: 14px; cursor: pointer;
  transition: background .12s ease;
}
.pm-close:hover { background: rgba(255, 255, 255, .18); }

/* ── 🤖 the computer-player badge ─────────────────────────────────────────────
   It replaced the "🤖 BOT" chip that used to sit beside a bot's name. A computer player now
   has its own name and its own face (server/botIdentity.js), so the only thing left to say is
   that nobody is holding the tiles — and that belongs ON the picture, not stapled to the name.

   One base rule, sized per surface below, so the mark is the same object everywhere it appears:
   the board seat, the sidebar, the lobby list and the player card. Absolutely positioned against
   whichever avatar disc contains it — every one of those discs is position:relative already or
   made so here. Visible enough that a bot can never be mistaken for a human; quiet enough that
   the name and face are still what you read first. */
.bot-badge {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  display: grid; place-items: center; line-height: 1; pointer-events: none;
  width: var(--bot-badge, 15px); height: var(--bot-badge, 15px);
  font-size: calc(var(--bot-badge, 15px) * .62);
  border-radius: 50%;
  background: #1a2744;
  box-shadow: 0 0 0 1.5px rgba(232, 179, 74, .85);
}
.sb-avatar, .pl-avatar, .pm-avatar, .avatar-wrap { position: relative; }
.pm-avatar { --bot-badge: 20px; }

/* ── HEADER: avatar · name + level · reserved rank slot ── */
.pm-header { display: flex; align-items: center; gap: 12px; margin: 6px 0 15px; }
.pm-avatar {
  width: 52px; height: 52px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 22px; font-weight: 800; color: #fff;
  /* glass disc; the outer ring (--pm-border) is the future rank-frame / cosmetic slot */
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px rgba(0, 0, 0, .3), 0 0 0 3px var(--pm-border);
}
.pm-id { min-width: 0; flex: 1 1 auto; }
.pm-name { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; line-height: 1.1; }
.pm-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
/* The card says it in WORDS as well as on the picture: this is where you go to find out who
   you are playing, so the answer has to be explicit, not only iconographic. */
.pm-bot {
  font-size: 11.5px; font-weight: 800; color: #ffd98a; padding: 2px 8px; border-radius: 999px;
  background: rgba(232, 179, 74, .14); border: 1px solid rgba(232, 179, 74, .38);
}
.pm-level {
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px; color: #10233b;
  padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, var(--pm-accent));   /* tints with rank later */
}
.pm-demo {
  font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  color: #ffd7dc; background: rgba(193, 39, 45, .3); box-shadow: inset 0 0 0 1px rgba(255, 150, 160, .4);
}
/* reserved rank slot — placeholder until ranked exists; the rank then drives --pm-accent */
.pm-rankbadge {
  flex: 0 0 auto; align-self: flex-start;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  color: var(--pm-muted); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--pm-border);
}

/* ── PROGRESSION: XP bar ── */
.pm-prog { margin-bottom: 15px; }
.pm-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.pm-prog-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--pm-muted); }
.pm-prog-xp { font-size: 12px; font-weight: 700; color: #d3deef; }
.pm-xp-bar { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px var(--pm-border); overflow: hidden; }
.pm-xp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pm-accent), #ffffff); }

/* ── MAIN STATS: prominent identity numbers ── */
.pm-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pm-stat {
  padding: 11px 6px 9px; text-align: center; border-radius: 12px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.pm-stat-ico { font-size: 16px; line-height: 1; }
.pm-stat-val { font-size: 22px; font-weight: 800; color: #fff; margin-top: 3px; line-height: 1; }
.pm-stat-lbl { font-size: 10.5px; font-weight: 700; color: var(--pm-muted); margin-top: 4px; letter-spacing: .2px; }

/* ── DOMINÓ / play-style stats: secondary, denser ── */
.pm-domino { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.pm-dstat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pm-dstat-lbl { font-size: 11px; color: #cdd8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-dstat-val { font-size: 14px; font-weight: 800; color: #fff; flex: 0 0 auto; }
/* Compact streak cell: 🔥 current over ⭐ best — a tight two-line number badge that
   replaces the old labeled "Racha actual"/"Mejor racha" rows. */
.pm-streak { flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pm-streak-item { font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap; line-height: 1.2; }

/* ── GAME MODES: small ── */
.pm-modes { display: flex; gap: 8px; justify-content: center; margin-bottom: 13px; }
.pm-mode {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 11px; border-radius: 999px;
  color: var(--pm-muted); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--pm-border);
}
.pm-mode-val { font-weight: 800; color: #eaf1fb; }

.pm-note { padding: 12px; text-align: center; font-size: 13px; color: var(--pm-muted); }

/* ── ACHIEVEMENTS ── */
.pm-ach-title { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--pm-muted); margin-bottom: 7px; text-transform: uppercase; }
.pm-ach-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-ach-chip {
  font-size: 11px; font-weight: 700; color: #eef3fb;
  padding: 4px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--pm-border);
}
.pm-ach-soon { font-size: 12px; color: #7f8ea3; font-style: italic; }

/* ── EDITABLE own-card affordances (Tarjeta de Jugador) ─────────────────────
   The SAME glass card, plus edit controls: a clickable avatar, a name pencil, a badge
   "＋", and an "Editar tarjeta" button. Presentation-only — stats stay read-only. */
.pm-avatar.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
.pm-avatar-edit { border: 0; cursor: pointer; padding: 0; position: relative; }
.pm-avatar-edit:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 2px rgba(0,0,0,.3), 0 0 0 3px var(--pm-accent); }
.pm-avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 11px; border-radius: 50%;
  background: rgba(10,16,28,.9); box-shadow: inset 0 0 0 1px var(--pm-border);
}
.pm-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pm-name-row .pm-name { min-width: 0; flex: 0 1 auto; }
.pm-name-edit {
  flex: 0 0 auto; border: 0; cursor: pointer;
  width: 22px; height: 22px; border-radius: 7px; font-size: 11px;
  background: rgba(255,255,255,.08); color: var(--pm-text);
  transition: background .12s ease;
}
.pm-name-edit:hover { background: rgba(255,255,255,.18); }

/* ── INSIGNIAS (equipped badges) ── */
.pm-badges { margin-bottom: 13px; }
.pm-badges-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.pm-badges-title { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--pm-muted); }
.pm-badges-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pm-badge-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: default;
  font-size: 11.5px; font-weight: 700; color: #eef3fb;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--pm-border);
}
/* Admin-assigned badges — gold-tinted so they read as special recognition. */
.pm-badge-chip.admin { color: #201404; background: linear-gradient(180deg, #ffe6ad, #e8b34a); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pm-badge-ico { font-size: 14px; line-height: 1; }
/* Data-driven admin badge emblem: a small round image, matching the admin page's emblem. */
.pm-badge-img {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28);
}

/* ── Admin badge EMBLEM-ONLY chips (round emblem + gold outline, no visible name). Name +
   description reveal on hover (desktop) or tap (mobile, via .show-tip). Distinct from the
   achievement pills, which are unchanged. ── */
.pm-badge-emblem-chip { position: relative; display: inline-flex; cursor: pointer; border-radius: 50%; }
.pm-badge-emblem-chip .pm-badge-img { width: 30px; height: 30px; }
.pm-badge-emblem-chip .pm-badge-ico {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #201404;
  background: linear-gradient(180deg, #ffe6ad, #e8b34a);
}
/* the gold outline */
.pm-badge-emblem-chip.admin .pm-badge-img,
.pm-badge-emblem-chip.admin .pm-badge-ico {
  box-shadow: 0 0 0 2px #e8b34a, 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.pm-badge-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 2px; width: max-content; max-width: 220px;
  padding: 8px 11px; border-radius: 10px; text-align: center; z-index: 30; pointer-events: none;
  background: rgba(10, 16, 30, .97);
  box-shadow: inset 0 0 0 1px rgba(232, 179, 74, .45), 0 10px 26px rgba(0, 0, 0, .6);
}
.pm-badge-emblem-chip:hover .pm-badge-tip,
.pm-badge-emblem-chip.show-tip .pm-badge-tip { display: flex; }
.pm-badge-tip-name { font-size: 12px; font-weight: 800; color: #ffd98a; }
.pm-badge-tip-desc { font-size: 11px; color: #d7e3fb; line-height: 1.25; }
.pm-badge-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(10, 16, 30, .97);
}
.pm-badge-empty { font-size: 12px; color: #7f8ea3; font-style: italic; }
.pm-badge-add {
  width: 30px; height: 30px; flex: 0 0 auto; cursor: pointer;
  border: 0; border-radius: 999px; font-size: 16px; font-weight: 700;
  color: #10233b; background: linear-gradient(180deg, #ffffff, var(--pm-accent));
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .1s ease;
}
.pm-badge-add:hover { transform: scale(1.08); }

/* ── EDITAR TARJETA button ── */
.pm-editcard {
  width: 100%; margin-top: 4px; cursor: pointer;
  padding: 11px; border: 0; border-radius: 12px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .3px; color: var(--pm-text);
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--pm-border);
  transition: background .12s ease;
}
.pm-editcard:hover { background: rgba(255,255,255,.14); }