/* augh yahh! -- badges, frames, level pills, name looks, the person card.
   Loaded on chat, live, profile, home. */

/* The badge is a box; the face (photo or letter) sits inside it. Without a
   frame the face fills the box, as it always did. With a frame (round four,
   2026-08-18) the face shrinks to the frame's hole and the picture is drawn
   over the whole box. Only the lg size moves. */
.badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-weight: 800; line-height: 1; vertical-align: middle; --hole: 1; --g: transparent;
}
.badge .face {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: calc(100% * var(--hole)); height: calc(100% * var(--hole)); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 10px -2px currentColor;
}
.badge .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge .bl { color: #05070C; }
.badge.sm { width: 1.15rem; height: 1.15rem; font-size: .6rem; }
.badge.sm .face { box-shadow: none; }
.badge.md { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
.badge.lg { width: 4.2rem; height: 4.2rem; font-size: 1.8rem; }
.badge.lg .face { box-shadow: 0 0 22px -4px currentColor; }
/* framed: the box grows so the face stays the size it was */
.badge.sm.framed { width: 2rem; height: 2rem; }
.badge.md.framed { width: 3.2rem; height: 3.2rem; }
.badge.lg.framed { width: 8.4rem; height: 8.4rem; }
.badge .frame-img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 0 3px var(--g));
}
.badge.lg .frame-img { filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 0 16px var(--g)); }
.badge .fx-glow {
  position: absolute; inset: 8%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, transparent 40%, var(--g) 62%, transparent 76%);
  filter: blur(4px); animation: fx-pulse var(--gd, 2.6s) ease-in-out infinite;
}
.badge .fx-sweep {
  position: absolute; inset: 0; border-radius: 50%; z-index: 4; mix-blend-mode: screen; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,255,255,0) 74%, rgba(255,255,255,.55) 84%, rgba(255,255,255,0) 90%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 26%, #000 50%, transparent 52%);
  mask: radial-gradient(circle, transparent 24%, #000 26%, #000 50%, transparent 52%);
  animation: fx-rot var(--sd, 4s) linear infinite;
}
.badge .fx-pt {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; z-index: 5; opacity: 0; pointer-events: none;
  background: var(--pc, #fff); box-shadow: 0 0 6px var(--pc, #fff), 0 0 12px var(--g);
  animation: fx-drift 2.4s ease-out infinite;
}
@keyframes fx-rot { to { transform: rotate(360deg); } }
@keyframes fx-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes fx-drift { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@keyframes fx-flicker {
  0%, 100% { filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 0 16px var(--g)) brightness(1); }
  7% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px var(--g)) brightness(1.35); }
  10% { filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 0 16px var(--g)) brightness(1); }
  52% { filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 22px var(--g)) brightness(1.25); }
  56% { filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 0 16px var(--g)) brightness(1); }
}
@keyframes fx-heat { 0%, 100% { filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 0 16px var(--g)) brightness(1); } 50% { filter: drop-shadow(0 0 9px var(--g)) drop-shadow(0 0 24px var(--g)) brightness(1.12); } }
@keyframes fx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes fx-slow { to { transform: rotate(360deg); } }
/* each frame's own motion, lg only */
.badge.frame-spark { --gd: 3.2s; --sd: 7s; --pc: #fff; }
.badge.lg.frame-spark .frame-img { animation: fx-slow 40s linear infinite; }
.badge.frame-thorn { --gd: 1.4s; --sd: 2.2s; --pc: #EAF4FF; }
.badge.lg.frame-thorn .frame-img { animation: fx-flicker 2.4s steps(1) infinite; }
.badge.frame-lion { --gd: 1.1s; --sd: 3s; --pc: #FFE45C; }
.badge.lg.frame-lion .frame-img { animation: fx-heat 1.2s ease-in-out infinite; }
.badge.frame-dragon { --gd: 2.4s; --sd: 5s; --pc: #FFF3A0; }
.badge.lg.frame-dragon .frame-img { animation: fx-breathe 3s ease-in-out infinite; }
.badge.frame-king { --gd: 2.8s; --sd: 6s; --pc: #FF6B6B; }
@media (prefers-reduced-motion: reduce) { .badge .fx-glow, .badge .fx-sweep, .badge .fx-pt, .badge .frame-img { animation: none !important; } }
/* the boss sparkle: one small amber star at the corner (lg: bigger, breathing) */
.badge .bsparkle {
  position: absolute; z-index: 6; right: -.15rem; top: -.25rem; font-size: .7rem; line-height: 1; font-weight: 400;
  color: #FFE45C; text-shadow: 0 0 5px #FF9A3C, 0 0 10px #FF9A3C; pointer-events: none;
}
.badge.lg .bsparkle { font-size: 1.4rem; right: 4%; top: 2%; animation: fx-twk 1.4s ease-in-out infinite; }
.badge.md .bsparkle { font-size: .9rem; }
@keyframes fx-twk { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* the level tag after a name: a small filled tag, "LVL3", coloured by tier
   (Martin 2026-08-18: like the live-stream apps' tag, not a hollow pill) */
.lv {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 auto;
  margin-left: .3rem; padding: .05rem .38rem; border-radius: 5px; border: 0;
  font-family: var(--mono); font-size: .56rem; font-weight: 800; letter-spacing: .04em; color: #F2FAFF; line-height: 1.5;
  background: linear-gradient(180deg, #4A5C7C, #2B3A55); text-shadow: 0 1px 0 rgba(0,0,0,.4); box-shadow: 0 0 6px -2px rgba(255,255,255,.25);
}
.lv .lv-i { font-style: normal; font-size: .62rem; margin-right: .18rem; line-height: 1; opacity: .95; }
.lv.t3 { background: linear-gradient(180deg, #8FB6E6, #4F78B8); }
.lv.t5 { background: linear-gradient(180deg, #4D9BFF, #1F55C8); box-shadow: 0 0 8px -2px #3D8BFF; }
.lv.t10 { background: linear-gradient(180deg, #FF8A3C, #D63A00); box-shadow: 0 0 8px -2px #FF6A00; }
.lv.t20 { background: linear-gradient(180deg, #FFE45C, #D69A00); color: #2A1B00; text-shadow: none; box-shadow: 0 0 10px -2px #FFC93C; }
/* name looks from the shop */
.look-gold { color: #FFE45C !important; text-shadow: 0 0 8px rgba(255,228,92,.7) !important; }
.look-glow { color: #21E6FF !important; text-shadow: 0 0 6px rgba(33,230,255,1), 0 0 14px rgba(33,230,255,.8) !important; }
.look-rainbow {
  background: linear-gradient(90deg, #FF3DA6, #FF9A3C, #FFE45C, #3BFF9E, #21E6FF, #9D6BFF);
  -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; font-weight: 700;
}

.line-head .badge { margin-right: .35rem; }
.line-who { cursor: pointer; }
.menu-card.person { align-items: center; text-align: center; }
.card-face { margin: .2rem 0 .1rem; }
.card-name { margin: 0; font-size: 1.15rem; font-weight: 700; color: #F2FAFF; overflow-wrap: anywhere; display: inline-flex; align-items: center; }
.card-about { margin: 0; font-size: .9rem; color: var(--text-2); overflow-wrap: anywhere; min-height: 1.2em; }
.card-since { margin: 0 0 .3rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.line.hidden-person { display: none; }
.spot.hidden-person video { display: none !important; }
.spot.hidden-person .letter::after { content: 'hidden'; display: block; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.spot .badge { position: absolute; left: .3rem; top: .3rem; }
.spot .badge.framed { left: .1rem; top: .1rem; }
/* a framed person's tile carries their frame's glow on its border */
.spot.framed { border-color: var(--tile-glow, currentColor) !important; box-shadow: 0 0 14px -3px var(--tile-glow, transparent), inset 0 0 12px -8px var(--tile-glow, transparent); }
.who li { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.spot.hidden-person .letter { display: flex !important; flex-direction: column; align-items: center; }

/* the points chip in the top line of Chat and Live. Martin 2026-08-18 from
   his phone: could not read it and did not know what it was; so it says
   "Level" and "points" in full, sits on its own line on Live, and is
   painted plainly with no borrowed button look. */
.pts-chip {
  margin-left: auto; font: 700 .72rem/1.3 var(--mono); letter-spacing: .04em; color: #FFE45C; text-decoration: none;
  background: rgba(255,228,92,.08); border: 1px solid rgba(255,228,92,.7); border-radius: 999px; padding: .18rem .65rem; white-space: nowrap; flex: 0 0 auto;
  text-shadow: 0 0 8px rgba(255,228,92,.5); box-shadow: 0 0 10px -4px rgba(255,228,92,.6); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: box-shadow .2s, color .2s;
}
.stage-top { flex-wrap: wrap; }
.stage-top .pts-chip { flex: 1 0 100%; text-align: center; margin: .35rem 0 0; }
.stage-top .stage-count { flex: 1 1 auto; text-align: right; }
.pts-chip.flash { color: #C6FF3D; border-color: rgba(198,255,61,.7); box-shadow: 0 0 12px -2px rgba(198,255,61,.9); }
.pts-float {
  position: fixed; right: 1.1rem; bottom: 5.4rem; z-index: 40; font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: #C6FF3D; text-shadow: 0 0 10px rgba(198,255,61,.9); pointer-events: none; animation: pts-up 1.1s ease-out forwards;
}
@keyframes pts-up { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.level-toast {
  position: fixed; left: .8rem; right: .8rem; top: 3.2rem; z-index: 45; border: 1px solid rgba(255,228,92,.55); border-radius: 10px;
  background: #0D1420; box-shadow: 0 0 22px -4px rgba(255,228,92,.6); padding: .6rem .8rem; font-size: .9rem; color: var(--text);
  display: flex; align-items: center; gap: .6rem; animation: toast-in .25s ease-out;
}
.level-toast b { color: #FFE45C; font-family: var(--mono); text-shadow: 0 0 8px rgba(255,228,92,.7); white-space: nowrap; }
.level-toast .badge { flex: 0 0 auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sys-level { text-align: center; font-family: var(--mono); font-size: .68rem; color: var(--text-3); letter-spacing: .04em; }
.sys-level b { color: #C6FF3D; font-weight: 500; text-shadow: 0 0 8px rgba(198,255,61,.6); }