/* Infin8 World Identity (world-identity.js): name tags, voice state and player cards for
   every Infin8 World Server 3D game. Themed through --wi-* tokens, which fall back to the
   IceFishin --if-* frost/steel/brass tokens and then to neutral defaults. */
.wi-tags, .wi-card-host {
  --wi-glass: var(--if-glass, rgba(9, 19, 26, .74));
  --wi-glass-strong: var(--if-glass-strong, rgba(8, 16, 22, .92));
  --wi-line: var(--if-line, rgba(160, 208, 228, .22));
  --wi-line-strong: var(--if-line-strong, rgba(172, 222, 242, .5));
  --wi-frost: var(--if-frost, #9fd8ee);
  --wi-snow: var(--if-snow, #eef5f8);
  --wi-steel: var(--if-steel, #9fb1b9);
  --wi-brass: var(--if-brass, #c9a86a);
  --wi-ok: var(--if-ok, #8fc9a4);
  --wi-danger: var(--if-danger, #d9674f);
  --wi-radius: var(--if-radius, 12px);
}

/* ---- name tags ---- */
.wi-tags { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.wi-tag {
  --wi-accent: var(--wi-frost);
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px;
  height: 24px; max-width: 220px; padding: 0 7px 0 3px; margin: 0; border: 0; border-radius: 999px;
  font: 600 .72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; color: var(--wi-snow);
  background: linear-gradient(180deg, rgba(16, 30, 39, .78), var(--wi-glass));
  box-shadow: inset 0 0 0 1px var(--wi-line), 0 4px 12px rgba(0, 0, 0, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform-origin: 50% 100%; transition: opacity .25s linear; will-change: transform, opacity;
  cursor: pointer; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.wi-tag:hover, .wi-tag:focus-visible { box-shadow: inset 0 0 0 1px var(--wi-line-strong), 0 4px 14px rgba(0, 0, 0, .34); outline: none; }
.wi-tag .wi-avatar {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%;
  font-size: .72rem; line-height: 1; background: rgba(0, 0, 0, .28); box-shadow: 0 0 0 1.5px var(--wi-accent);
}
.wi-tag .wi-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wi-tag .wi-label { max-width: 160px; }
.wi-tag :is(.wi-name, .wi-team) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wi-level {
  flex: none; padding: 2px 5px; border-radius: 6px; font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: #17120a; background: linear-gradient(180deg, #dcc08a, var(--wi-brass));
}
.wi-tag.is-guest { color: var(--wi-steel); }
.wi-tag.is-guest .wi-avatar { box-shadow: 0 0 0 1.5px var(--wi-line-strong); }
.wi-tag.is-blocked { filter: grayscale(1); }
.wi-tag.is-blocked .wi-name { text-decoration: line-through; opacity: .7; }
.wi-voice { display: none; width: 13px; height: 13px; flex: none; color: var(--wi-steel); }
.wi-voice svg { display: block; width: 100%; height: 100%; }
.wi-tag[data-voice="on"] .wi-voice, .wi-tag[data-voice="speaking"] .wi-voice, .wi-tag[data-voice="muted"] .wi-voice { display: block; }
.wi-tag[data-voice="speaking"] { box-shadow: inset 0 0 0 1.5px var(--wi-ok), 0 0 12px rgba(143, 201, 164, .45); }
.wi-tag[data-voice="speaking"] .wi-voice { color: var(--wi-ok); }
.wi-tag[data-voice="speaking"] .wi-wave { animation: wi-wave .9s ease-in-out infinite; }
.wi-tag[data-voice="muted"] .wi-voice { color: var(--wi-danger); }
.wi-tag.is-compact { padding: 0 3px; gap: 0; }
.wi-tag.is-compact :is(.wi-name, .wi-label, .wi-team, .wi-level, .wi-voice) { display: none; }
@keyframes wi-wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wi-tag[data-voice="speaking"] .wi-wave { animation: none; } .wi-tag { transition: none; } }
@media (max-width: 640px) { .wi-tag { max-width: 160px; font-size: .68rem; } }

/* ---- your own HUD badge ---- */
.wi-self {
  pointer-events: auto;
  --wi-accent: var(--if-frost, #9fd8ee);
  display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 2px 7px 2px 2px; border: 0; border-radius: 999px;
  font: 700 .66rem/1 system-ui, sans-serif; color: var(--if-snow, #eef5f8); background: rgba(8, 16, 22, .6);
  box-shadow: inset 0 0 0 1px var(--if-line, rgba(160, 208, 228, .22)); cursor: pointer; vertical-align: middle;
}
.wi-self .wi-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .8rem; box-shadow: 0 0 0 1.5px var(--wi-accent); }
.wi-self .wi-level { color: #17120a; background: linear-gradient(180deg, #dcc08a, var(--if-brass, #c9a86a)); padding: 2px 5px; border-radius: 6px; font-size: .6rem; }

/* ---- player card ---- */
.wi-card-host { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.wi-card-host[hidden] { display: none; }
.wi-card {
  --wi-accent: var(--wi-frost);
  pointer-events: auto; width: min(360px, 100%); max-height: min(560px, calc(100% - 8px)); overflow: auto; overscroll-behavior: contain;
  border-radius: calc(var(--wi-radius) + 4px); color: var(--wi-snow);
  font: 400 .8rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgba(14, 28, 37, .94), var(--wi-glass-strong));
  box-shadow: inset 0 0 0 1px var(--wi-line), inset 0 3px 0 var(--wi-accent), 0 18px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wi-card-head { position: sticky; top: 0; display: flex; gap: 12px; align-items: center; padding: 16px 14px 12px; background: inherit; }
.wi-card-avatar {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; font-size: 1.7rem;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3)); box-shadow: 0 0 0 2px var(--wi-accent), 0 0 18px rgba(0, 0, 0, .35);
}
.wi-card-id { display: grid; gap: 3px; min-width: 0; flex: 1; }
.wi-card-name { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-card-title { color: var(--wi-frost); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wi-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.wi-pill { padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; color: var(--wi-steel); box-shadow: inset 0 0 0 1px var(--wi-line); }
.wi-pill[data-voice="speaking"] { color: var(--wi-ok); box-shadow: inset 0 0 0 1px var(--wi-ok); }
.wi-pill[data-voice="muted"] { color: var(--wi-danger); box-shadow: inset 0 0 0 1px var(--wi-danger); }
.wi-close { align-self: flex-start; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; color: var(--wi-snow); background: rgba(255, 255, 255, .06); font-size: 1.2rem; cursor: pointer; }
.wi-close:hover, .wi-close:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.wi-card-body { display: grid; gap: 12px; padding: 0 14px 12px; }
.wi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.wi-stat { display: grid; gap: 2px; padding: 7px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--wi-line); }
.wi-stat span { color: var(--wi-frost); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wi-stat strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.wi-section h3 { margin: 0 0 6px; color: var(--wi-steel); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wi-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wi-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.wi-list strong { font-variant-numeric: tabular-nums; }
.wi-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-rank { min-width: 34px; color: var(--wi-brass); font-weight: 800; font-variant-numeric: tabular-nums; }
.wi-badge { display: grid; place-items: center; min-width: 22px; height: 18px; border-radius: 5px; font-size: .58rem; font-weight: 800; color: var(--wi-frost); box-shadow: inset 0 0 0 1px var(--wi-line); }
.wi-badge.is-best { color: #17120a; background: var(--wi-brass); box-shadow: none; }
.wi-when { color: var(--wi-steel); font-size: .64rem; }
.wi-species { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wi-species span { padding: 3px 7px; border-radius: 999px; font-size: .64rem; color: var(--wi-snow); background: rgba(159, 216, 238, .1); box-shadow: inset 0 0 0 1px var(--wi-line); }
.wi-bio { margin: 0; color: var(--wi-snow); opacity: .85; }
.wi-muted { margin: 0; color: var(--wi-steel); }
.wi-small { font-size: .68rem; }
.wi-loading { animation: wi-wave 1.4s ease-in-out infinite; }
.wi-card-actions { display: grid; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--wi-line); }
.wi-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wi-actions[hidden] { display: none; }
.wi-chip {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .7rem/1 system-ui, sans-serif; color: var(--wi-snow); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--wi-line);
}
.wi-chip:hover, .wi-chip:focus-visible { box-shadow: inset 0 0 0 1px var(--wi-line-strong); outline: none; }
.wi-chip[aria-pressed="true"] { color: var(--wi-danger); box-shadow: inset 0 0 0 1px var(--wi-danger); }
.wi-chip.is-danger { color: #ffd9d1; box-shadow: inset 0 0 0 1px rgba(217, 103, 79, .6); }
.wi-note { margin: 0; color: var(--wi-ok); font-size: .7rem; }
.wi-note:empty { display: none; }
.wi-link { display: block; padding: 0 14px 14px; color: var(--wi-frost); font-size: .72rem; font-weight: 700; }
@media (max-width: 640px) {
  .wi-card-host { place-items: end center; padding: 10px; }
  .wi-card { max-height: 72%; }
  .wi-chip { min-height: 38px; }
}