@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --mulberry: #830051;
  --mulberry-dk: #5e0239;
  --plum-ink: #2b0a1c;
  --gold: #f0ab00;
  --ink: #2a2230;
  --muted: #7c7082;
  --line: #eadfe6;
  --bg: #ffffff;
  --soft: #fbf5f8;
  --pink-soft: #fde8f1;
  --ok: #138a52;
  --warn: #d9480f;
  --radius: 16px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: #c7c0cb; display: inline-block; }
.conn-dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(19,138,82,.15); }
.conn-dot.off { background: var(--warn); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--plum-ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 15px; z-index: 999; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: calc(100% - 32px); }

/* ---------- skinned pill (Magnific artwork, text stays live) ---------- */
.skin { --h: 64px; display: inline-flex; align-items: center; justify-content: center; height: var(--h); border-style: solid; border-color: transparent; border-width: 0 calc(var(--h) / 2); border-image: var(--skin) 0 120 fill / 0 calc(var(--h) / 2) stretch; background-color: var(--fb, transparent); border-radius: 999px; background-clip: border-box; font-weight: 800; white-space: nowrap; }
.skin.mulberry { --skin: url(/assets/ui/pill-mulberry.png); --fb: #830051; color: #fff; }
.skin.gold     { --skin: url(/assets/ui/pill-gold.png);     --fb: #f0ab00; color: #2b0a1c; }
.skin.glass    { --skin: url(/assets/ui/pill-glass.png);    --fb: rgba(255,255,255,.14); color: #fff; }

.skin.team     { --skin: var(--team-skin); --fb: var(--c, #830051); color: #fff; }
.skin.light    { --skin: url(/assets/ui/pill-light.png);    --fb: #fff; color: #2b0a1c; }
.skin.ink      { --skin: url(/assets/ui/pill-ink.png);      --fb: #2b0a1c; color: #fff; }
button.skin { cursor: pointer; transition: transform .12s, filter .2s; }
button.skin:hover:not(:disabled) { filter: brightness(1.06); }
button.skin:active:not(:disabled) { transform: translateY(1px) scale(.99); }
button.skin:disabled { filter: grayscale(.6) opacity(.5); cursor: default; }
button.skin:focus-visible { outline: 3px solid #f0ab00; outline-offset: 3px; }

/* round skin: Magnific glossy disc, number stays live */
.orb { width: var(--s, 56px); height: var(--s, 56px); border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-family: inherit; cursor: pointer;
  background: var(--orb) center / 100% 100% no-repeat, var(--fb); color: var(--ink, #2b0a1c); transition: transform .12s; }
.orb.off { --orb: url(/assets/ui/round-glass.png); --fb: radial-gradient(circle at 50% 30%, #fff, #e9e3e7); }
.orb.on  { --orb: var(--team-orb); --fb: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); --ink: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.orb:active { transform: scale(.94); }
.orb:focus-visible { outline: 3px solid #f0ab00; outline-offset: 2px; }

/* medal = Magnific medallion + live rank text */
.medal { position: relative; flex: none; width: 118px; height: 118px; margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--medal); background-position: center; background-size: contain; background-repeat: no-repeat; animation: medal-in .6s cubic-bezier(.2,.9,.2,1.3); }
.medal.r1 { --medal: url(/assets/ui/medal-gold.png), radial-gradient(circle, #ffd35c 55%, #b07a00 56% 62%, transparent 63%); }
.medal.r2 { --medal: url(/assets/ui/medal-silver.png), radial-gradient(circle, #e8e8ee 55%, #8b8b96 56% 62%, transparent 63%); }
.medal.r3 { --medal: url(/assets/ui/medal-bronze.png), radial-gradient(circle, #e7a36b 55%, #8a4b1d 56% 62%, transparent 63%); }
.medal b { font-size: 34px; font-weight: 800; color: #3b2300; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.medal small { font-size: 15px; font-weight: 700; color: #3b2300; margin-top: 2px; }
@keyframes medal-in { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }


/* team crest = Magnific emblem + live team number */
.crest { position: relative; width: var(--cs, 160px); height: var(--cs, 160px); flex: none; }
.crest img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); transition: filter .5s, opacity .5s, transform .5s; }
.crest b { position: absolute; inset: 0; padding-top: 9%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(var(--cs, 160px) * .3); color: #fff; text-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 22px rgba(255,255,255,.35); transition: opacity .5s; }
.crest.off img { filter: grayscale(1) brightness(.7) contrast(.9); opacity: .5; }
.crest.off b { opacity: .55; }