/* 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: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, -50%);
  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; }
/* A bare face is the empty middle of a frame being SHOWN rather than worn
   (the Shop rows and the Bag tiles, round twenty-three). No fill, no glow
   ring: the card behind shows straight through the hole. */
.badge .face.bare { background: transparent !important; box-shadow: none !important; }
.badge .bl { color: #000000; }
.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: #FFFFFF; }
.badge.lg.frame-thorn .frame-img { animation: fx-flicker 2.4s steps(1) infinite; }
.badge.frame-lion { --gd: 1.1s; --sd: 3s; --pc: #FFD700; }
.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; }
/* Round twenty-three (2026-08-21): the eight frames bought in the shop.
   ART EXEMPTION, like the five above: the glow and spark colours here are
   the frames' own art sampled off the pictures, not house chrome.
   The four plain ones deliberately have NO motion on the picture: they are
   the cheap band, and a still ring is what makes the bright band read as
   worth more. They keep the shared glow and light sweep only. */
.badge.frame-bronze { --gd: 3.4s; --sd: 8s; --pc: #FFD9A0; }
.badge.frame-copper { --gd: 3.4s; --sd: 8s; --pc: #FFC49A; }
.badge.frame-steel  { --gd: 3.6s; --sd: 9s; --pc: #FFFFFF; }
.badge.frame-teal   { --gd: 3.2s; --sd: 7s; --pc: #B6FFFB; }
.badge.frame-sapphire { --gd: 2.2s; --sd: 4.5s; --pc: #BFD9FF; }
.badge.lg.frame-sapphire .frame-img { animation: fx-breathe 3.4s ease-in-out infinite; }
.badge.frame-ruby { --gd: 1.2s; --sd: 3s; --pc: #FFD0A0; }
.badge.lg.frame-ruby .frame-img { animation: fx-heat 1.3s ease-in-out infinite; }
.badge.frame-jade { --gd: 2.8s; --sd: 6s; --pc: #B6FFCB; }
.badge.lg.frame-jade .frame-img { animation: fx-slow 60s linear infinite; }
.badge.frame-moon { --gd: 3.6s; --sd: 8s; --pc: #FFFFFF; }
.badge.lg.frame-moon .frame-img { animation: fx-breathe 5s ease-in-out infinite; }
@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: #FFD700; 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).
   ART EXEMPTION: the tier colours below (blues, oranges, golds) and the shop
   looks' gold, cyan and rainbow are the frames' and the shop's own ladder,
   matched to the five frame pictures, not house chrome. */
.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: var(--r-sm); border: 0;
  font-family: var(--round); font-size: .56rem; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; line-height: 1.5;
  background: linear-gradient(180deg, #75757D, #2A2A30); 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, #8B8B93, #75757D); }
.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, #FFD700, #D69A00); color: #2A1B00; text-shadow: none; box-shadow: 0 0 10px -2px #FFC93C; }
/* "helper" after the tag: one of the boss's helpers (round eight) */
.helper-tag { margin-left: .3rem; font-family: var(--sans); font-size: .56rem; letter-spacing: .08em; color: var(--green); text-shadow: 0 0 6px rgba(46,204,113,.5); font-weight: 500; vertical-align: middle; flex: 0 0 auto; }
/* name looks from the shop */
.look-gold { color: #FFD700 !important; text-shadow: 0 0 8px rgba(255,215,0,.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, #F0296C, #FF9A3C, #FFD700, #2ECC71, #21E6FF, #8A2BE2);
  -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: #FFFFFF; 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(--sans); font-size: .62rem; letter-spacing: .01em; 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; 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(--sans); letter-spacing: 0; color: var(--gold); text-decoration: none;
  background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.7); border-radius: 999px; padding: .18rem .65rem; white-space: nowrap; flex: 0 0 auto;
  text-shadow: 0 0 8px rgba(255,215,0,.5); box-shadow: 0 0 10px -4px rgba(255,215,0,.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(--sans); 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,215,0,.55); border-radius: var(--r);
  background: #1C1C20; box-shadow: 0 0 22px -4px rgba(255,215,0,.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: #FFD700; font-family: var(--round); text-shadow: 0 0 8px rgba(255,215,0,.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(--sans); 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); }

/* The card's buttons (round eight build B): Add friend lime (the friends
   door), Remove friend amber (irreversible, asks once), Message and
   "Request sent" grey when they cannot do anything yet (the tap still
   answers with a line). Every card button is thumb sized, 44 px. */
.menu-card.person .menu-btn { min-height: 44px; }
.menu-btn.lime { color: var(--lime); border-color: rgba(198,255,61,.5); text-shadow: 0 0 10px rgba(198,255,61,.45); }
.menu-btn.lime:hover { background: rgba(198,255,61,.07); }
.menu-btn.grey { color: var(--text-3); border-color: var(--line); text-shadow: none; }
.menu-btn.grey:hover { background: rgba(255,255,255,.03); }

/* Round eleven (2026-08-19): the account's own number, on the card's quietest
   line. Martin's words: "lowkey, but still visible". A shade brighter than the
   grey around it so it can be found and read out, never loud enough to
   compete with the name. */
.card-id { color: var(--text-2); }