/* Yapyard: a dusk-coloured room for a friend group. Each person gets their own hue (set from JS). */
:root {
  --bg: #231f33;
  --deep: #1b1729;
  --panel: #2b2640;
  --raised: #38314f;
  --line: #43395f;
  --text: #efeaf7;
  --muted: #a59dbd;
  --accent: #f4b73f;
  --accent-ink: #2a1f05;
  --online: #6fdcb4;
  --danger: #ff8f8f;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: #ffd37a; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }

/* ---------- buttons & fields ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 8px;
  padding: 9px 15px;
  line-height: 1.2;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 6px 11px; font-size: 13.5px; }
.btn:disabled { opacity: 0.55; cursor: default; }
.icon-btn {
  border: 0; background: none; color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1;
  display: inline-grid; place-items: center;
}
.icon-btn:hover { background: var(--raised); color: var(--text); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13.5px; color: var(--muted); }
.field input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  width: 100%;
}
.field input:focus { border-color: var(--accent); outline: none; }
.form-error { color: var(--danger); min-height: 1.5em; margin-bottom: 8px; font-size: 14px; }

/* ---------- avatars ---------- */
.av {
  position: relative;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  flex: none; /* not clipped: animated decorations reach past the edge */
  font-weight: 700; user-select: none;
}
.av .avclip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.xs { width: 22px; height: 22px; font-size: 11px; }
.av.sm { width: 32px; height: 32px; font-size: 14px; }
.av.xl { width: 76px; height: 76px; font-size: 32px; }
.av.lg { width: 96px; height: 96px; font-size: 40px; }
.av.bot { border-radius: 10px; }
.av-wrap { position: relative; display: inline-flex; flex: none; }
.pip {
  position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--online); border: 2px solid var(--panel);
}

/* ---------- sign in ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.15fr 1fr; overflow: auto; height: 100%; }
.auth-brand { background: var(--deep); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 56px; }
.auth-brand h1 { font-size: clamp(56px, 9vw, 120px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 800; }
.auth-brand p { color: var(--muted); font-size: 18px; max-width: 26ch; }
.auth-form { display: grid; place-items: center; padding: 32px 24px; }
.auth-card { width: min(380px, 100%); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--deep); padding: 4px; border-radius: 10px; margin-bottom: 22px; }
.tabs button { border: 0; background: none; padding: 9px; border-radius: 7px; color: var(--muted); }
.tabs button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 650; }
.auth-card .btn.primary { width: 100%; padding: 12px; }
.auth-note { color: var(--muted); font-size: 13.5px; margin-top: 14px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr) 236px; height: 100vh; height: 100dvh; }
.side { background: var(--panel); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.brand { padding: 16px 18px 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; display: flex; align-items: center; gap: 9px; }
.brand-logo { width: 30px; height: 30px; flex: none; }
.auth-logo { width: clamp(72px, 9vw, 120px); height: auto; margin-bottom: 6px; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 18px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.channels { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.ch {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; text-align: left;
  padding: 7px 10px; border-radius: 8px; color: var(--muted);
}
.ch .hash { opacity: 0.6; }
.ch .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch:hover { background: var(--raised); color: var(--text); }
.ch.active { background: var(--raised); color: var(--text); font-weight: 650; }
.ch.unread { color: var(--text); font-weight: 650; }
.ch.unread::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.grp { padding: 10px 10px 3px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ch .ico { display: block; }
.ch.vch .hash { display: inline-flex; opacity: 0.7; }
.ch.live { color: var(--online); }
.ch.live .hash { opacity: 1; }
.vmembers { padding: 1px 0 5px 22px; display: grid; gap: 1px; }
.vm { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; color: var(--muted); font-size: 14px; }
.vm .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { transition: box-shadow 0.12s ease; }
.vm.speaking .av, .vtile.speaking .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--online); }
.vm.speaking { color: var(--text); }
.vm.noise .av, .vtile.noise .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--online); }
.in-voice { margin-left: auto; color: var(--muted); display: inline-flex; }

/* connected-to-voice box above the user panel */
.vpanel { border-top: 1px solid var(--line); background: var(--deep); padding: 9px 12px 10px; display: grid; gap: 2px; }
.vstat { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--accent); }
.vstat.ok { color: var(--online); }
.vdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vwhere { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vctl { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.vbtn {
  width: 36px; height: 34px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--raised); border-radius: 8px; color: var(--text);
}
.vbtn:hover { border-color: var(--muted); }
.vbtn.off { background: #4b2733; border-color: #7a3a4b; color: var(--danger); }

.me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--deep); }
.me .who { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.banner { background: #4a3a13; color: #ffe3a3; padding: 7px 20px; font-size: 13.5px; }
.head { display: flex; align-items: center; gap: 10px; padding: 10px 20px; min-height: 56px; border-bottom: 1px solid var(--line); }
.head h1 { font-size: 17px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head h1 .hash { color: var(--muted); font-weight: 500; margin-right: 4px; }
.head .spacer { flex: 1; }
.menu-btn { display: none; }
.people-btn, .close-people { display: none; }

.msgs { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.older { display: block; margin: 8px auto 4px; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.day { display: flex; align-items: center; gap: 12px; margin: 18px 20px 6px; color: var(--muted); font-size: 13px; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 2px 20px; }
.msg:not(.compact) { margin-top: 12px; }
.msg:hover { background: rgba(255, 255, 255, 0.03); }
.msg .gutter { padding-top: 2px; }
.msg.compact .gutter { text-align: left; padding-top: 3px; }
.msg .gutter time { font-size: 11.5px; color: var(--muted); opacity: 0; white-space: nowrap; }
.msg:hover .gutter time { opacity: 1; }
.meta { display: flex; align-items: baseline; gap: 8px; }
.meta .name { font-weight: 700; }
.meta time { font-size: 12.5px; color: var(--muted); }
.badge { font-size: 12px; padding: 0 6px; border-radius: 5px; background: var(--raised); color: var(--muted); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }

/* voice room */
.voice-view { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.vgrid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 26px 30px; flex: 1; width: 100%; max-width: 760px; }
.vtile { display: grid; justify-items: center; gap: 10px; width: 110px; }
.vtile .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.vav { position: relative; display: inline-flex; }
.vmuted { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #4b2733; border: 2px solid var(--bg); color: var(--danger); }
.vbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding-bottom: 8px; }
.vbar .vbtn { width: 46px; height: 42px; border-radius: 12px; }
.vbar .btn { padding: 10px 16px; }
.vnote { margin-top: -12px; }
.vlive { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 7px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); }
.voice-view.has-stage .vgrid { flex: none; gap: 14px 22px; }
.voice-view.has-stage .vtile { width: 116px; }
.voice-view.has-stage .vtile .av.xl { width: 92px; height: 92px; font-size: 38px; }

/* soundboard */
.sb { width: 100%; max-width: 760px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 12px; }
.sb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-head h2 { font-size: 15px; }
.sb-head .grow { flex: 1; }
.sb-vol { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.sb-vol input { width: 96px; accent-color: var(--accent); }
.sb-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.snd { display: inline-flex; align-items: stretch; }
.snd .btn { border-radius: 8px; }
.snd .btn:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.snd-x { border: 1px solid var(--line); border-left: 0; background: var(--deep); color: var(--muted); border-radius: 0 8px 8px 0; padding: 0 9px; line-height: 1; }
.snd-x:hover { color: var(--danger); }

/* microphone settings */
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; font: inherit; }
.meter { position: relative; height: 12px; border-radius: 6px; background: var(--deep); border: 1px solid var(--line); overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--muted); transition: width 0.05s linear; }
.meter-fill.open { background: var(--online); }
.meter-mark { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--accent); }
input[type="range"] { accent-color: var(--accent); width: 100%; }

.composer { padding: 0 20px max(14px, env(safe-area-inset-bottom)); }
.composer textarea {
  display: block; width: 100%; resize: none; max-height: 200px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; line-height: 1.45;
}
.composer textarea:focus { border-color: var(--accent); outline: none; }
.composer .hint { font-size: 12.5px; color: var(--muted); padding: 5px 4px 0; }

.members { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 14px 10px; }
.members h2 { font-size: 13.5px; color: var(--muted); font-weight: 600; margin: 14px 8px 6px; }
.members .invite-btn { width: calc(100% - 4px); margin: 0 2px 6px; }
.member { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.member .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.member.off { opacity: 0.55; }
.member.off .pip { display: none; }
.scrim { display: none; }

/* ---------- modals & toasts ---------- */
.overlay { position: fixed; inset: 0; background: rgba(12, 9, 22, 0.66); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(480px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0 20px; }
.modal-head h2 { font-size: 18px; }
.modal-body { padding: 14px 20px 20px; display: grid; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.settings-top { display: flex; align-items: center; gap: 18px; }
.settings-top .col { display: grid; gap: 8px; }
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.item code, .code { font-family: var(--mono); letter-spacing: 0.06em; }
.item.used { opacity: 0.6; }
.url-box { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-family: var(--mono); font-size: 12.5px; }
.note { font-size: 13.5px; color: var(--muted); }

#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 80; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--raised); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 8px; font-size: 14.5px; }
.toast.error { border-left-color: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  .modal { animation: pop 0.14s ease-out; }
  @keyframes pop { from { transform: translateY(8px); opacity: 0; } }
}

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .members { display: block; position: fixed; top: 0; bottom: 0; right: 0; width: min(300px, 86vw); z-index: 30; transform: translateX(102%); transition: transform 0.18s ease; }
  body.people-open .members { transform: none; }
  body.people-open .scrim { display: block; position: fixed; inset: 0; background: rgba(12, 9, 22, 0.55); z-index: 20; }
  .people-btn { display: inline-flex; }
  .close-people { display: inline-flex; margin: 0 2px 8px; }
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 30;
    transform: translateX(-102%); transition: transform 0.18s ease;
  }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(12, 9, 22, 0.55); z-index: 20; }
  .menu-btn { display: inline-grid; }
  .head { padding: 8px 12px; flex-wrap: wrap; row-gap: 6px; }
  .head h1 { flex: 1 1 90px; }
  .head .spacer { display: none; }
  .head > .row { flex-basis: 100%; order: 5; display: flex; gap: 8px; }
  .msg { padding: 2px 12px; }
  .day { margin-inline: 12px; }
  .composer { padding-inline: 12px; }
  .composer .hint { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-brand { padding: 32px 24px 28px; justify-content: flex-start; }
  .auth-brand h1 { font-size: 64px; }
  .auth-brand p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .side, .members { transition: none; } .av { transition: none; } }

/* profile picture framing */
.frame-wrap { display: grid; place-items: center; margin-bottom: 8px; }
.frame-box { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; cursor: grab; touch-action: none; background: var(--panel); box-shadow: 0 0 0 2px var(--line, rgba(255,255,255,0.15)); }
.frame-box:active { cursor: grabbing; }
.frame-box img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.frame-form .field { margin-bottom: 8px; }

/* hearing other people */
.peer { display: flex; align-items: center; gap: 4px; width: 100%; }
.peer .peer-vol { flex: 1; min-width: 0; }
.peer-mute { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; }
.peer-mute.on { color: var(--danger, #ff7a7a); }
.vgrid { align-items: flex-start; }

/* soundboard: search, mute, trim */
.sb-search { width: 150px; }
.sb-mute { width: 30px; padding: 0; display: inline-grid; place-items: center; }
.sb-mute.on { color: var(--danger); }
.snd-e { border: 1px solid var(--line); border-left: 0; background: var(--deep); color: var(--muted); padding: 0 8px; line-height: 1; display: inline-grid; place-items: center; }
.snd-e:hover { color: var(--accent); }
.snd-e + .snd-x { border-radius: 0 8px 8px 0; }
.snd .snd-e:last-child { border-radius: 0 8px 8px 0; }
.sb-search { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; color: var(--text, inherit); }
.sb-search:focus { border-color: var(--accent); outline: none; }
.sb-search::placeholder { color: var(--muted); }

/* update notice */
.update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); }
.field .row input { flex: 1; min-width: 0; }

/* call timer */
.vtimer { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--online); flex: none; }
.ch .vtimer { margin-left: 0; }
.vstat .vtimer { margin-left: auto; }

/* installed as an app: keep clear of notches and home bars */
@media (display-mode: standalone) {
  .app { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
}

/* shared screens: small windows you choose to watch; click one for full screen */
.vstage { flex: none; width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; max-height: 46vh; overflow-y: auto; align-content: start; }
.vshare { margin: 0; display: grid; grid-template-rows: auto auto; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); overflow: hidden; min-width: 0; }
.vshare.self { opacity: 0.92; }
.vpic { position: relative; aspect-ratio: 16 / 9; background: #000; display: grid; place-items: center; min-width: 0; }
.vpic.clickable { cursor: zoom-in; }
.vpic video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vidle { display: grid; gap: 8px; justify-items: center; padding: 10px; text-align: center; color: var(--muted); font-size: 13px; }
.vshare figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.vwho { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.vbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.vbtns .btn { white-space: nowrap; flex: none; }
.vshare:fullscreen .vbtns, .vshare:-webkit-full-screen .vbtns { flex: 0 1 auto; margin-left: auto; flex-wrap: nowrap; }
.vshare:fullscreen .vwho, .vshare:-webkit-full-screen .vwho { flex: 1 1 auto; }
.vbtns .btn { padding: 3px 8px; font-size: 12px; }
.vshare:fullscreen { background: #000; border: 0; border-radius: 0; grid-template-rows: 1fr auto; width: 100vw; height: 100vh; }
.vshare:fullscreen .vpic { aspect-ratio: auto; height: 100%; cursor: zoom-out; }
.vshare:fullscreen figcaption { background: #000c; color: #ddd; }
.vshare:-webkit-full-screen { background: #000; border: 0; border-radius: 0; grid-template-rows: 1fr auto; width: 100vw; height: 100vh; }
.vshare:-webkit-full-screen .vpic { aspect-ratio: auto; height: 100%; }
.voice-view.has-stage { padding-top: 16px; gap: 18px; }

/* audio settings and stream info */
.sect { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sect:first-child { margin-top: 0; }
.clipwarn { color: var(--danger); font-weight: 600; }
.sinfo { display: grid; gap: 4px; margin-bottom: 10px; }
.srow { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.sfind { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sfind li { padding: 8px 10px; border-radius: 8px; background: var(--deep); border-left: 3px solid var(--muted); font-size: 13.5px; }
.sfind li.good { border-left-color: var(--online); }
.sfind li.warn { border-left-color: #e0a030; }
.sfind li.bad { border-left-color: var(--danger); }

.vsound { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.vsvol { flex: 1 1 auto; width: auto; min-width: 60px; max-width: 220px; accent-color: var(--accent); }
.vsound[hidden] { display: none; }
.vshare:fullscreen .vsound, .vshare:-webkit-full-screen .vsound { flex: 0 0 auto; }
.vsmute { width: 26px; height: 26px; display: inline-grid; place-items: center; }
.vsmute.on { color: var(--danger); }

/* people in a voice room: big enough to recognise at a glance */
.vtile { width: 140px; }
.vtile .av.xl { width: 112px; height: 112px; font-size: 46px; }
.vmuted { width: 30px; height: 30px; }
@media (max-width: 600px) {
  .vtile, .voice-view.has-stage .vtile { width: 104px; }
  .vtile .av.xl, .voice-view.has-stage .vtile .av.xl { width: 84px; height: 84px; font-size: 34px; }
}

/* choosing what to share (Windows app) */
.modal.wide { width: min(720px, 100%); }
.srcpick { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
.srchead { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.src { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; background: var(--deep); color: inherit; font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.src:hover { border-color: var(--muted); }
.src.on { border-color: var(--accent); background: var(--panel); }
.srcthumb { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 6px; display: block; }
.srcthumb.none { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.srcname { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcicon { width: 16px; height: 16px; flex: none; }
a.btn { display: inline-block; text-decoration: none; }
.srctext { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- roles, away, delete ---------- */
.role { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; line-height: 1.5; flex: none; align-self: center; }
.role-owner { background: var(--accent); color: var(--accent-ink); }
.role-admin { background: #ff8f8f; color: #3a0f0f; }
.role-moderator { background: var(--online); color: #08301f; }
.utitle { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 999px; line-height: 1.5; flex: none; align-self: center; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; }
.tc-gold { background: rgba(244, 183, 63, 0.18); color: #ffd36e; border-color: rgba(244, 183, 63, 0.5); }
.tc-red { background: rgba(255, 99, 99, 0.18); color: #ff9c9c; border-color: rgba(255, 99, 99, 0.5); }
.tc-green { background: rgba(70, 220, 130, 0.16); color: #7df0ac; border-color: rgba(70, 220, 130, 0.5); }
.tc-blue { background: rgba(80, 150, 255, 0.18); color: #9cc4ff; border-color: rgba(80, 150, 255, 0.5); }
.tc-purple { background: rgba(170, 110, 255, 0.18); color: #cfa8ff; border-color: rgba(170, 110, 255, 0.5); }
.tc-pink { background: rgba(255, 120, 200, 0.18); color: #ffa8dd; border-color: rgba(255, 120, 200, 0.5); }
.tc-orange { background: rgba(255, 150, 60, 0.18); color: #ffb978; border-color: rgba(255, 150, 60, 0.5); }
.tc-teal { background: rgba(50, 210, 210, 0.16); color: #7eeaea; border-color: rgba(50, 210, 210, 0.5); }
.tc-grey { background: rgba(190, 190, 210, 0.14); color: #cfcfe0; border-color: rgba(190, 190, 210, 0.4); }
.mtitlebox { display: inline-flex; gap: 6px; flex: none; }
.mtitlebox .mtitle { width: 150px; flex: none; background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; color: var(--text); font: inherit; font-size: 13.5px; }
.mtitlebox .mtitle:focus { border-color: var(--accent); outline: none; }
.mtitlebox .mtcolor { width: 88px; flex: none; background: var(--deep); padding: 5px 6px; font-size: 13.5px; }
.mrow .mwho { flex: 1 1 140px; }
.mrow .mrole { width: 120px; flex: none; }
@media (max-width: 720px) { .mrow { flex-wrap: wrap; } .mtitlebox { width: 100%; } .mtitlebox .mtitle { flex: 1; width: auto; } }
.pip.away { background: #f0b232; }
.member.away .nm { opacity: 0.8; }
.awaytag { font-size: 11.5px; color: var(--muted); font-style: italic; }
.who-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.who-wrap .who { flex: none; max-width: 100%; }
.statusbtn { background: none; border: 0; padding: 1px 0; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.statusbtn:hover { color: var(--text); }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); display: inline-block; }
.statusbtn.away .sdot { background: #f0b232; }
.msg { position: relative; }
/* what you can do to a message */
.msg-actions { position: absolute; top: -14px; right: 16px; display: flex; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); opacity: 0; transition: opacity 0.1s; z-index: 2; }
.msg:hover .msg-actions, .msg-actions:focus-within, .msg.sel .msg-actions { opacity: 1; }
.msg-actions button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 0; background: none; color: var(--muted); padding: 0; }
.msg-actions button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.msg-actions .msg-del:hover { color: var(--danger); }
.msg.pinged { background: rgba(244, 183, 63, 0.09); box-shadow: inset 3px 0 0 var(--accent); }
.msg.pinged:hover { background: rgba(244, 183, 63, 0.13); }
.msg.flash { animation: msgflash 2.2s ease-out; }
@keyframes msgflash { 0%, 35% { background: rgba(244, 183, 63, 0.28); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; background: rgba(244, 183, 63, 0.2); } }
.mention { background: rgba(130, 150, 255, 0.22); color: #d3dbff; border-radius: 5px; padding: 0 4px; font-weight: 600; white-space: nowrap; }
.mention.you, .mention.all { background: rgba(244, 183, 63, 0.28); color: #ffe3a1; }
.mention.gone { opacity: 0.7; font-weight: 400; }
.edited { font-size: 11.5px; color: var(--muted); }
.replyq { display: flex; align-items: center; gap: 6px; max-width: 72ch; margin: 0 0 3px; padding: 1px 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; text-align: left; min-width: 0; }
button.replyq:hover .rq-text { color: var(--text); }
.replyq .ico { flex: none; opacity: 0.8; }
.rq-name { font-weight: 650; color: var(--text); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.replyq.gone { font-style: italic; }
/* editing in place */
.msg.editing { background: rgba(255, 255, 255, 0.04); }
.editor { max-width: 72ch; }
.editbox { width: 100%; box-sizing: border-box; resize: none; background: var(--deep); color: var(--text); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; font: inherit; min-height: 38px; }
.editbox:focus { outline: none; }
.editbar { display: flex; align-items: center; gap: 8px; padding-top: 5px; }
.editbar .note { margin-right: auto; }
/* reactions */
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--line); background: var(--deep); color: var(--text); font-size: 13px; line-height: 1; }
.react:hover { border-color: var(--muted); }
.react.mine { border-color: var(--accent); background: rgba(244, 183, 63, 0.16); }
.react .re { font-size: 15px; }
.react .rn { font-size: 12px; font-weight: 650; color: var(--muted); }
.react.mine .rn { color: var(--text); }
.react.add { padding: 0 7px; color: var(--muted); opacity: 0; transition: opacity 0.1s; }
.msg:hover .react.add, .react.add:focus-visible, .msg.sel .react.add { opacity: 1; }
.emojipop { position: fixed; z-index: 60; width: 316px; max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); left: 8px; top: 8px; }
.emo-quick { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.emo-quick .emo { font-size: 24px; width: 42px; height: 42px; }
.emo-h { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 8px 2px 3px; }
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.emo { border: 0; background: none; font-size: 21px; width: 36px; height: 34px; border-radius: 8px; padding: 0; line-height: 1; }
.emo:hover, .emo:focus-visible { background: rgba(255, 255, 255, 0.1); }
/* shared files */
.atts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; max-width: 100%; }
.att-imgbtn { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--deep); overflow: hidden; display: block; line-height: 0; cursor: zoom-in; max-width: 100%; }
.att-img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
.att-missing { display: block; line-height: 1.4; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.att-video { display: block; max-width: min(420px, 100%); max-height: 320px; border-radius: 10px; background: #000; }
.att-audio { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--deep); max-width: 100%; }
.att-audio audio { width: 300px; max-width: 100%; }
.att-file { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--deep); color: var(--text); text-decoration: none; max-width: min(360px, 100%); }
.att-file:hover { border-color: var(--muted); }
.af-text { display: grid; min-width: 0; }
.af-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.af-size { font-size: 12px; color: var(--muted); }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(8, 6, 14, 0.9); display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: 16px; gap: 12px; }
.lightbox img { max-width: 94vw; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 6px; }
.lb-bar { display: flex; align-items: center; gap: 10px; color: var(--text); }
.lb-name { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* composer extras */
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.composer-row .inputwrap { position: relative; flex: 1; min-width: 0; }
.composer-row textarea { width: 100%; box-sizing: border-box; }
.attach-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.attach-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.replybar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 6px; border-radius: 10px; background: var(--deep); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.replybar[hidden], .tray[hidden], .latestbar[hidden], .mentionbox[hidden] { display: none; }
.rb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-text b { color: var(--text); }
.tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tray-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--deep); max-width: 100%; }
.tray-item.bad { border-color: var(--danger); }
.tray-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.tray-ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); flex: none; }
.tray-text { display: grid; gap: 3px; min-width: 0; max-width: 200px; font-size: 13px; }
.tray-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-err { color: var(--danger); font-size: 12px; }
.tray-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tray-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.composer.waiting::before { content: 'Sending as soon as the upload finishes…'; display: block; font-size: 12.5px; color: var(--accent); padding-bottom: 4px; }
.mentionbox { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 4px; z-index: 20; }
.mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; }
.mi.on, .mi:hover { background: rgba(255, 255, 255, 0.09); }
.mi-all { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--accent); font-weight: 700; flex: none; }
.mi-name { font-weight: 600; }
.main.dropping::after { content: 'Drop to share'; position: absolute; inset: 8px; z-index: 40; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 16px; background: rgba(27, 23, 41, 0.86); color: var(--text); font-size: 20px; font-weight: 650; pointer-events: none; }
.main { position: relative; }
.latestbar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px; background: var(--raised); border-top: 1px solid var(--line); font-size: 13.5px; }
.pingbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #2a0a0a; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
/* search */
.searchbar { display: grid; gap: 8px; margin-bottom: 10px; }
.searchbar input[type=search] { width: 100%; box-sizing: border-box; }
.results { display: grid; gap: 4px; max-height: 52vh; overflow-y: auto; margin-bottom: 8px; }
.result { display: grid; gap: 3px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--deep); color: var(--text); }
.result:hover, .result:focus-visible { border-color: var(--accent); }
.r-top { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); }
.r-ch { color: var(--accent); font-weight: 650; }
.r-who { color: var(--text); font-weight: 650; }
.r-when { margin-left: auto; }
.r-text { overflow-wrap: anywhere; }
.r-files { color: var(--muted); font-size: 12.5px; }
.result mark { background: rgba(244, 183, 63, 0.35); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 720px) { .search-btn .sb-text { display: none; } .emojipop { width: min(316px, calc(100vw - 16px)); } }
.vkick { margin-top: 6px; font-size: 12px; }
.mlist { display: grid; gap: 0; max-height: 52vh; overflow-y: auto; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.mwho { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mwho .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.mrole { background: var(--deep); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; color: var(--text); }

/* ---------- profile style picker ---------- */
.stylepreview { display: grid; gap: 14px; padding: 18px 16px; background: var(--deep); border-radius: 12px; margin-bottom: 8px; }
.previewbig { display: flex; align-items: center; gap: 36px; min-height: 100px; padding-left: 18px; }
.previewmsg { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 18px; background: var(--panel); border-radius: 10px; }
.previewmsg .meta { display: flex; gap: 8px; align-items: baseline; }
.previewmsg time { font-size: 11.5px; color: var(--muted); }
.stylename { font-size: 24px; font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.stylegroup { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 6px; }
.styletile { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 10px 6px; min-height: 72px; background: var(--deep); border: 2px solid transparent; border-radius: 10px; color: var(--text); }
.styletile:hover { border-color: var(--line); }
.styletile[aria-pressed="true"] { border-color: var(--accent); }
.stilename { font-size: 11.5px; color: var(--muted); }
.stylesample { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- animated picture frames: a ring drawn inside the edge of the circle ---------- */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fspin { to { --fa: 360deg; } }
@keyframes fpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes fflick { 0%, 100% { filter: brightness(1); } 20% { filter: brightness(1.35); } 45% { filter: brightness(0.85); } 70% { filter: brightness(1.2); } }
@keyframes ftwinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.av.frame::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  padding: clamp(2px, 7%, 6px);
  background: var(--fbg, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fspin var(--fdur, 4s) linear infinite;
}
.av.frame-rainbow  { --fbg: conic-gradient(from var(--fa), #ff4d4d, #ffb84d, #f6ff4d, #4dff88, #4dd2ff, #7a4dff, #ff4de1, #ff4d4d); --fdur: 3s; }
.av.frame-neonpink { --fbg: conic-gradient(from var(--fa), #ff2d95, #ffb3dc, #ff2d95, #c4006a, #ff2d95); --fdur: 3s; }
.av.frame-neonpink::after { animation: fspin 3s linear infinite, fpulse 1.6s ease-in-out infinite; }
.av.frame-blossom  { --fbg: conic-gradient(from var(--fa), #ffd1e3, #ff9ec4, #fff, #ffb6d3, #ffd1e3); --fdur: 7s; }
.av.frame-candy    { --fbg: repeating-conic-gradient(from var(--fa), #ff8fc7 0 15deg, #8ff5d0 15deg 30deg, #ffffff 30deg 45deg); --fdur: 5s; }
.av.frame-galaxy   { --fbg: conic-gradient(from var(--fa), #5b2bd6, #1b1b72, #ff4fd8, #3ab0ff, #5b2bd6); --fdur: 6s; }
.av.frame-galaxy::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 18% 28%, #fff 0 1px, transparent 2px), radial-gradient(circle at 80% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 82%, #fff 0 1px, transparent 2px), radial-gradient(circle at 25% 78%, #fff 0 1px, transparent 2px);
  animation: ftwinkle 2.2s ease-in-out infinite; }
.av.frame-ice      { --fbg: conic-gradient(from var(--fa), #eafcff, #7fd8ff, #ffffff, #7fd8ff, #eafcff); --fdur: 6s; }
.av.frame-aurora   { --fbg: conic-gradient(from var(--fa), #38ef7d, #11998e, #6a5af9, #d946ef, #38ef7d); --fdur: 5s; }
.av.frame-electric { --fbg: conic-gradient(from var(--fa), #00e5ff 0 22%, transparent 22% 50%, #3d7bff 50% 72%, transparent 72%); --fdur: 1.3s; }
.av.frame-fire     { --fbg: conic-gradient(from var(--fa), #ff3d00, #ff9800, #ffeb3b, #ff9800, #ff3d00); --fdur: 2.4s; }
.av.frame-fire::after { animation: fspin 2.4s linear infinite, fflick 0.9s steps(4) infinite; }
.av.frame-toxic    { --fbg: conic-gradient(from var(--fa), #39ff14 0 20%, transparent 20% 45%, #b6ff00 45% 68%, transparent 68%); --fdur: 1.8s; }
.av.frame-crimson  { --fbg: conic-gradient(from var(--fa), #7a0019, #ff2a4d, #7a0019, #ff2a4d, #7a0019); --fdur: 4s; }
.av.frame-crimson::after { animation: fspin 4s linear infinite, fpulse 2s ease-in-out infinite; }
.av.frame-gold     { --fbg: conic-gradient(from var(--fa), #8a6a00, #ffd700, #fff4b0, #ffd700, #8a6a00); --fdur: 3.5s; }
.av.frame-ocean    { --fbg: conic-gradient(from var(--fa), #0077b6, #00b4d8, #90e0ef, #00b4d8, #0077b6); --fdur: 5s; }
.av.frame-sunset   { --fbg: conic-gradient(from var(--fa), #ff7e5f, #feb47b, #ff5e8a, #7b4bd6, #ff7e5f); --fdur: 6s; }
.av.frame-mono     { --fbg: conic-gradient(from var(--fa), #7d7d8f, #ffffff, #7d7d8f, #ffffff, #7d7d8f); --fdur: 4s; }

/* ---------- animated names ---------- */
@keyframes fxslide { to { background-position: 200% 0; } }
@keyframes fxglow { 0%, 100% { text-shadow: 0 0 4px var(--g), 0 0 10px var(--g); } 50% { text-shadow: 0 0 2px var(--g), 0 0 20px var(--g), 0 0 28px var(--g); } }
@keyframes fxflicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.6; } 10% { opacity: 1; } 55% { opacity: 1; } 57% { opacity: 0.7; } 60% { opacity: 1; } }
@keyframes fxglitch { 0%, 88%, 100% { text-shadow: 1px 0 #ff2a6d, -1px 0 #05d9e8; transform: none; } 90% { text-shadow: 3px 0 #ff2a6d, -3px 0 #05d9e8; transform: translateX(1px); } 94% { text-shadow: -3px 0 #ff2a6d, 3px 0 #05d9e8; transform: translateX(-1px) skewX(-6deg); } 97% { text-shadow: 2px 1px #ff2a6d, -2px -1px #05d9e8; transform: none; } }
@keyframes fxtwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
.fx { font-weight: 750; }
.fx-rainbow, .fx-blossom, .fx-candy, .fx-galaxy, .fx-fire, .fx-gold, .fx-ocean, .fx-sunset, .fx-ice, .fx-shimmer {
  background-repeat: repeat-x; background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: fxslide var(--fxdur, 4s) linear infinite;
}
.fx-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #5dade2, #c084fc, #ff5f6d); --fxdur: 4s; }
.fx-blossom { background-image: linear-gradient(90deg, #ffb6d3, #fff, #ff8fb8, #ffd1e3, #ffb6d3); --fxdur: 6s; }
.fx-candy   { background-image: linear-gradient(90deg, #ff8fc7, #8ff5d0, #c9b6ff, #ff8fc7); --fxdur: 4s; }
.fx-galaxy  { background-image: linear-gradient(90deg, #a98bff, #5aa9ff, #ff7ae6, #a98bff); --fxdur: 5s; filter: drop-shadow(0 0 4px #7b5cff88); }
.fx-fire    { background-image: linear-gradient(90deg, #ff3d00, #ffb300, #fff176, #ffb300, #ff3d00); --fxdur: 2s; filter: drop-shadow(0 0 4px #ff6a00aa); }
.fx-gold    { background-image: linear-gradient(90deg, #b8860b, #ffd700, #fff6c2, #ffd700, #b8860b); --fxdur: 3s; }
.fx-ocean   { background-image: linear-gradient(90deg, #4cc9f0, #4895ef, #90e0ef, #4361ee, #4cc9f0); --fxdur: 5s; }
.fx-sunset  { background-image: linear-gradient(90deg, #ff7e5f, #feb47b, #ff5e8a, #c77dff, #ff7e5f); --fxdur: 5s; }
.fx-ice     { background-image: linear-gradient(90deg, #dff6ff, #7fd8ff, #ffffff, #7fd8ff, #dff6ff); --fxdur: 3.5s; filter: drop-shadow(0 0 3px #7fd8ff88); }
.fx-shimmer { background-image: linear-gradient(90deg, #b9b1d3 0 38%, #ffffff 50%, #b9b1d3 62% 100%); --fxdur: 2.8s; }
.fx-neonpink { color: #ff8ad0; --g: #ff2d95; animation: fxglow 1.8s ease-in-out infinite; }
.fx-electric { color: #8ff4ff; --g: #00d0ff; animation: fxglow 1.2s ease-in-out infinite, fxflicker 3.2s linear infinite; }
.fx-toxic    { color: #9bff6b; --g: #39ff14; animation: fxglow 2s ease-in-out infinite, fxflicker 4s linear infinite; }
.fx-glitch   { color: #ffffff; display: inline-block; animation: fxglitch 3s steps(1, end) infinite; }
.fx-sparkle  { color: #fff2b8; --g: #ffd966; animation: fxglow 2.4s ease-in-out infinite; }
.fx-sparkle::after { content: ' \2726'; display: inline-block; color: #ffe27a; animation: fxtwinkle 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .av.frame::after, .av.frame::before, .fx, .fx::after { animation: none !important; }
}

.note.bad { color: var(--danger); }


/* ---------- animated decorations: art drawn around the picture (public/deco/*.svg), a fifth of the picture's size bigger on every side ---------- */
.av.deco::after { content: ''; position: absolute; inset: -25%; background: var(--deco) center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
.av.deco-flames { --deco: url(/deco/flames.svg); }
.av.deco-pumpkins { --deco: url(/deco/pumpkins.svg); }
.av.deco-bones { --deco: url(/deco/bones.svg); }
.av.deco-bats { --deco: url(/deco/bats.svg); }
.av.deco-ghosts { --deco: url(/deco/ghosts.svg); }
.av.deco-web { --deco: url(/deco/web.svg); }
.av.deco-calavera { --deco: url(/deco/calavera.svg); }
.av.deco-devil { --deco: url(/deco/devil.svg); }
.av.deco-moon { --deco: url(/deco/moon.svg); }
.av.deco-sakura { --deco: url(/deco/sakura.svg); }
.av.deco-hearts { --deco: url(/deco/hearts.svg); }
.av.deco-cat { --deco: url(/deco/cat.svg); }
.av.deco-wings { --deco: url(/deco/wings.svg); }
.av.deco-vines { --deco: url(/deco/vines.svg); }
.av.deco-frost { --deco: url(/deco/frost.svg); }
.av.deco-storm { --deco: url(/deco/storm.svg); }
.av.deco-neon { --deco: url(/deco/neon.svg); }
.av.deco-crown { --deco: url(/deco/crown.svg); }

/* ---------- name fonts (free fonts, served from this site; see public/fonts/LICENSES.txt) ---------- */
@font-face { font-family: 'YY Bungee'; src: url(/fonts/bungee.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Pacifico'; src: url(/fonts/pacifico.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Creepster'; src: url(/fonts/creepster.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Press Start 2P'; src: url(/fonts/pressstart.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Orbitron'; src: url(/fonts/orbitron.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Chewy'; src: url(/fonts/chewy.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Permanent Marker'; src: url(/fonts/marker.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Special Elite'; src: url(/fonts/typewriter.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY UnifrakturCook'; src: url(/fonts/gothic.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Bangers'; src: url(/fonts/bangers.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'YY Nosifer'; src: url(/fonts/nosifer.woff) format('woff'); font-display: swap; }
.fnt { font-weight: 400 !important; font-synthesis: none; }
.fnt-bungee { font-family: 'YY Bungee', system-ui, sans-serif; zoom: 0.92; }
.fnt-pacifico { font-family: 'YY Pacifico', system-ui, sans-serif;  }
.fnt-creepster { font-family: 'YY Creepster', system-ui, sans-serif; zoom: 1.12; }
.fnt-pressstart { font-family: 'YY Press Start 2P', system-ui, sans-serif; zoom: 0.72; }
.fnt-orbitron { font-family: 'YY Orbitron', system-ui, sans-serif; zoom: 0.92; font-weight: 700 !important; }
.fnt-chewy { font-family: 'YY Chewy', system-ui, sans-serif; zoom: 1.06; }
.fnt-marker { font-family: 'YY Permanent Marker', system-ui, sans-serif; zoom: 0.96; }
.fnt-typewriter { font-family: 'YY Special Elite', system-ui, sans-serif; zoom: 0.98; }
.fnt-gothic { font-family: 'YY UnifrakturCook', system-ui, sans-serif; zoom: 1.18; }
.fnt-bangers { font-family: 'YY Bangers', system-ui, sans-serif; zoom: 1.06; }
.fnt-nosifer { font-family: 'YY Nosifer', system-ui, sans-serif; zoom: 0.8; }

/* ---------- name colour and the extra effects (they use --nc, the colour a person picked) ---------- */
.nc { color: var(--nc) !important; }
@keyframes fxpop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-1.2deg); } }
@keyframes fxneon { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .72; } 50% { opacity: 1; } 78% { opacity: .85; } 80% { opacity: 1; } }
.fx-gradient, .fx-prism { background-repeat: repeat-x; background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: fxslide var(--fxdur, 4s) linear infinite; }
.fx-gradient { --nc: #ff7ad9; --fxdur: 5s; background-image: linear-gradient(90deg, var(--nc), #ffffff, var(--nc)); }
@supports (color: hsl(from red h s l)) { .fx-gradient { background-image: linear-gradient(90deg, var(--nc), hsl(from var(--nc) calc(h + 55) s calc(l + 6)), var(--nc)); } }
.fx-prism { background-size: 300% 100%; background-image: linear-gradient(100deg, #ff9bd2, #ffd29b, #fff59b, #9bffc4, #9bd8ff, #c49bff, #ff9bd2); --fxdur: 4s; filter: drop-shadow(0 0 3px #ffffff55); }
.fx-neon { --nc: #b36bff; color: #fff; text-shadow: 0 0 2px var(--nc), 0 0 6px var(--nc), 0 0 13px var(--nc); animation: fxneon 3.6s linear infinite; }
@supports (color: color-mix(in srgb, red, white)) { .fx-neon { color: color-mix(in srgb, var(--nc) 22%, #fff); } }
.fx-toon { --nc: #ff5fa8; color: var(--nc); -webkit-text-stroke: 3px #1a1126; paint-order: stroke fill; text-shadow: 0 3px 0 #1a1126; letter-spacing: .02em; }
.fx-pop { --nc: #4ee2b0; display: inline-block; color: var(--nc); text-shadow: 1px 1px 0 #0008, 2px 2px 0 #0007, 3px 3px 0 #0006, 4px 4px 0 #0005; animation: fxpop 2.4s ease-in-out infinite; }
.fx-gummy { --nc: #ff7ab8; background-image: linear-gradient(180deg, rgba(255,255,255,.7) 0 38%, rgba(255,255,255,0) 42%), linear-gradient(var(--nc), var(--nc)); background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); letter-spacing: .02em; }

/* ---------- the picker: tabs, tiles, colours ---------- */
.styletabs { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; flex-wrap: wrap; }
.styletab { padding: 7px 14px; border-radius: 8px; background: var(--deep); color: var(--muted); border: 2px solid transparent; font-weight: 650; }
.styletab[aria-selected="true"] { color: var(--text); border-color: var(--accent); }
.styletabs .btn { margin-left: auto; }
.stylepanel[hidden] { display: none; }
.stylepanel .sect { margin: 12px 0 6px; }
.styletile.decotile { min-height: 104px; padding-top: 18px; }
.av.md { width: 48px; height: 48px; font-size: 20px; }
.tilesample { display: grid; place-items: center; min-height: 34px; max-width: 100%; }
.fontsample { font-size: 24px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--deep); color: var(--text); font-size: 11px; background: var(--deep); }
.swatch[aria-pressed="true"] { border-color: var(--text); }
.swatchpick { width: 40px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }