@font-face { font-family: Poppins; font-weight: 400; src: url(/fonts/Poppins-Regular.ttf); }
@font-face { font-family: Poppins; font-weight: 500; src: url(/fonts/Poppins-Medium.ttf); }
@font-face { font-family: Poppins; font-weight: 600; src: url(/fonts/Poppins-SemiBold.ttf); }
@font-face { font-family: Poppins; font-weight: 700; src: url(/fonts/Poppins-Bold.ttf); }
@font-face { font-family: 'DM Sans'; font-weight: 100 900; src: url(/fonts/DMSans-VariableFont.ttf); }
/* colours from Lisa's board design (dark "1b") */
:root {
  --bg: #14121f; --card: rgba(22, 19, 36, .55); --card2: rgba(40, 34, 64, .6); --line: rgba(255, 255, 255, .12); --line2: rgba(255, 255, 255, .2);
  --text: #ffffff; --muted: #b9b4d0; --muted2: #d9d5ea; --ink: #1e1b2e; --indigo: #5b6bf0; --pink: #e94f9d; --violet: #c04ee0; --gold: #e8b84a; --green: #4fbf86; --mint: #8fd8ac;
  --americas: #5b6bf0; --asia: #b443d6; --apac: #d0961c; --gulf: #2f9f66; --bad: #ff7fb8; --ok: #6fdca2;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--text); background: var(--bg); -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 10% 12%, rgba(91, 107, 240, .5), transparent 45%), radial-gradient(circle at 92% 30%, rgba(233, 79, 157, .38), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(192, 78, 224, .3), transparent 45%), radial-gradient(circle at 12% 92%, rgba(79, 191, 134, .3), transparent 42%),
    radial-gradient(circle at 90% 95%, rgba(232, 184, 74, .25), transparent 40%), var(--bg); }
h1, h2, h3, .pop { font-family: Poppins, system-ui, sans-serif; font-weight: 600; margin: 0; }
button, input, select { font: inherit; color: inherit; }
.btn { border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: var(--text); border-radius: 12px; padding: .7em 1.1em; cursor: pointer; font-family: Poppins; font-weight: 500; }
.btn:hover { border-color: rgba(255,255,255,.35); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(110deg, #5b6bf0, #c04ee0 60%, #e94f9d) border-box; border-color: transparent; color: #fff; font-weight: 600; }
.btn.gold { background: linear-gradient(140deg, #fbe39a, #f2cd6b 35%, #e8b84a 65%, #d0961c); border-color: rgba(255,240,200,.9); color: var(--ink); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.small { padding: .4em .75em; font-size: .85em; border-radius: 9px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.muted { color: var(--muted); }
.err { color: var(--bad); }
input[type=text], input[type=number], select { background: rgba(0,0,0,.25); border: 1px solid var(--line2); border-radius: 10px; padding: .6em .7em; color: var(--text); }
.grad { background: linear-gradient(90deg, #8f9bff, #d77cf0, #ff7fb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { display: inline-block; border-radius: 99px; padding: .2em .7em; font-size: .8em; background: rgba(255,255,255,.1); }
.stamp { display: inline-block; border-radius: 8px; padding: .18em .55em; font-size: .82em; margin: 0 .3em .3em 0; color: #fff; white-space: nowrap; }
.r-europe { background: #6d6a8e; } .r-americas { background: var(--americas); } .r-asia { background: var(--asia); } .r-asia_pacific { background: var(--apac); } .r-gulf_africa { background: var(--gulf); }
.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; }
.offline { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: #b03a5b; color: #fff; padding: 6px 14px; border-radius: 99px; font-size: 14px; z-index: 99; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #0d0b1d; border: 1px solid var(--line2); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 98; max-width: 92vw; }
.badge { position: relative; display: inline-flex; vertical-align: middle; }
.badge .bcount { position: absolute; left: 100%; bottom: -2px; margin-left: -6px; font: 700 10px/1 Poppins, sans-serif; background: #fff; color: var(--ink); border-radius: 99px; padding: 2px 5px; }
.badge:has(.bcount) { margin-right: 14px; }
.badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* start screens: Lisa's logo above the title */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); font-size: 1rem; }
.brand img { width: 56px; height: 56px; border-radius: 50%; }
.lobby .brand { gap: 1.2vw; margin-bottom: 2.4vh; font-size: clamp(14px, 2.2vh, 30px); }
.lobby .brand img { width: clamp(56px, 10vh, 140px); height: clamp(56px, 10vh, 140px); }
.toplogo { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; }
.topbrand { display: inline-flex; align-items: center; }