:root {
  --bg: #0e1015;
  --bg-2: #14171e;
  --panel: #1a1e27;
  --panel-2: #222734;
  --line: #2c3240;
  --line-2: #394050;
  --text: #e8eaf0;
  --muted: #9aa2b4;
  --faint: #6b7385;
  /* Branding colors; overwritten at runtime from the admin settings. */
  --accent: #f5b83d;
  --accent-2: #5aa9ff;
  --accent-ink: #1a1305;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
  --good: #3ecf8e;
  --bad: #f2555a;
  --info: #5aa9ff;
  --gold: #f5c542;
  --silver: #c3cad6;
  --bronze: #d38b52;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --head: 'Rajdhani', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Text only for screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sort-select { display: inline-flex; flex: none; }
.sort-select select { width: auto; max-width: 100%; padding-top: 7px; padding-bottom: 7px; }
/* [hidden] must win over display rules like .btn { display: inline-flex }. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); letter-spacing: .02em; margin: 0; line-height: 1.15; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }
/* The empty margin of wide avatar pictures must not make the page scroll sideways. */
#app { overflow-x: clip; }

/* ----------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 16, 21, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--head); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.brand-mark { width: 30px; height: 30px; display: inline-flex; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
/* Groups: a button that opens a small menu with the pages of the group. */
.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--text); background: var(--panel); }
.nav-group.active .nav-group-btn { color: var(--accent-ink); background: var(--accent); }
.caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; transition: transform .15s; }
.nav-group.open .caret { transform: rotate(180deg); }
/* A waiting video somewhere in a closed group shows as a dot on the group. */
.nav-group:has(.nav-count) .nav-group-btn::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.nav-sub {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nav-group.open .nav-sub { display: flex; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a.active { color: var(--accent-ink); background: var(--accent); }
.nav-toggle, .nav .nav-guest { display: none; }
.session { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex: none; white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: #2a3040; border-color: #4a5266; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: rgba(242, 85, 90, .12); border-color: var(--bad); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-icon { padding: 6px 9px; }

/* ----------------------------------------------------------------- panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 20px; }
.section { margin-top: 36px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin-top: 6px; }
/* Intro line + main action of one tab, under the tabs of an admin page. */
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-head > p { flex: 1 1 320px; min-width: 0; font-size: 14px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; }
.empty {
  padding: 40px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--radius);
}
.empty h3 { color: var(--text); margin-bottom: 6px; }
.empty .btn { margin-top: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2);
  white-space: nowrap;
}
.badge-live { color: var(--good); border-color: rgba(62, 207, 142, .4); background: rgba(62, 207, 142, .08); }
.badge-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.badge-done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.badge-warn { color: #ffb86b; border-color: rgba(255, 184, 107, .4); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  padding: 44px 36px; border-radius: 18px; border: 1px solid var(--line);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent) 60%, transparent),
    var(--panel);
}
.hero h1 { font-size: 46px; }
.hero p { color: var(--muted); max-width: 560px; margin-top: 10px; font-size: 16px; }
.hero .row { margin-top: 22px; }
.hero-art { position: absolute; right: -30px; top: -30px; width: 260px; height: 260px; opacity: .1; }
/* Members get a feedback card in the free space on the right. */
.hero.with-feedback { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; }
.hero-main { position: relative; min-width: 0; }
.hero-feedback {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: var(--radius); border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px);
}
.hero-feedback b { font-family: var(--head); font-size: 20px; }
.hero .hero-feedback p { margin-top: 4px; font-size: 14px; }
.hero-feedback-icon { font-size: 30px; line-height: 1; }
.hero-feedback .btn { align-self: flex-start; }

/* "Erste Schritte" for new members: checklist on the start page, tour dialog. */
.onboarding { margin-top: 18px; padding: 20px 22px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--panel); }
.onboarding.in-modal { margin: 0; padding: 0; border: 0; background: none; }
.onb-head { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.onb-head .grow { min-width: 0; }
.onb-head p { margin-top: 4px; }
.onb-progress { min-width: 150px; text-align: right; }
.onb-progress b { font-family: var(--head); font-size: 26px; font-variant-numeric: tabular-nums; }
.onb-bar { height: 8px; margin-top: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.onb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.onb-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.onb-step { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-2); color: inherit; text-decoration: none; }
.onb-step.done { opacity: .55; }
.onb-step.done b { text-decoration: line-through; }
.onb-icon { font-size: 22px; line-height: 1; flex: none; width: 28px; text-align: center; }
.onb-step.done .onb-icon { color: var(--good); }
.onb-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.onb-text span { color: var(--muted); font-size: 13px; }
.onb-coins { flex: none; }
@media (hover: hover) { .onb-step:not(.done):hover { border-color: var(--accent); } }
.onb-admin .onb-amount { width: 110px; }
.onb-admin td:first-child { white-space: normal; min-width: 200px; }
@media (max-width: 760px) {
  .onboarding { padding: 16px; }
  .onb-head { flex-direction: column; align-items: stretch; }
  .onb-progress { min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
  .onb-progress b { font-size: 22px; flex: none; }
  .onb-bar { flex: 1; margin: 0; }
  .onb-step { padding: 10px 12px; gap: 10px; }
  .onb-admin .onb-amount { width: 84px; }
}
.tour { text-align: center; padding: 6px 4px 2px; }
.tour-icon { font-size: 46px; line-height: 1; color: var(--accent); }
.tour h2 { margin-top: 12px; }
.tour p { margin: 10px auto 0; max-width: 460px; color: var(--muted); line-height: 1.55; }
.tour p b { color: var(--text); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.tour-dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); }
.tour-dots span.on { width: 22px; background: var(--accent); }
.fb-cats { display: flex; }
.fb-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.fb-card { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--bg-2); }
.fb-card.fb-bug { border-left-color: var(--bad); }
.fb-card.fb-praise { border-left-color: var(--good); }
.fb-card.fb-other { border-left-color: var(--line-2); }
.fb-card.done { opacity: .6; }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fb-head a { color: inherit; }
.fb-message { margin: 10px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.stat-hours { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--panel); }
.stat-hours b { color: var(--accent); }
.stat { padding: 16px 18px; }
.stat b { display: block; font-family: var(--head); font-size: 30px; }
.stat span { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: 16px; }
/* Two columns side by side (form + preview); stacked on phones. */
.split { grid-template-columns: minmax(0, var(--split, 1.3fr)) minmax(0, 1fr); align-items: start; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid-teams { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

.t-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; transition: border-color .15s, transform .15s; }
.t-card:hover { border-color: var(--line-2); }
@media (hover: hover) { .t-card:hover { transform: translateY(-2px); } }
.t-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.t-card .games { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.chip-profile { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.logo-stack { display: flex; }
.logo-stack > * { margin-left: -8px; border-radius: 50%; }
.logo-stack > *:first-child { margin-left: 0; }
.progress { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); border-radius: 99px; }
.leader { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }

.team-card { padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; overflow: hidden; }
.team-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--team); }
.team-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(240px 120px at 50% 0%, color-mix(in srgb, var(--team) 18%, transparent), transparent 70%); pointer-events: none; }
.team-card h3 { font-size: 21px; }
.team-card .members { font-size: 13px; color: var(--muted); }
.team-card .actions { display: flex; gap: 6px; margin-top: 4px; position: relative; z-index: 1; }
.team-card .team-activity { position: relative; z-index: 1; max-width: 100%; overflow-wrap: anywhere; }
.team-card .team-activity a { color: var(--muted); }

.team-inline { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.team-inline .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Players next to the team name (tournament views); below it when there is no room. */
.team-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.team-text .name { max-width: 100%; }
.team-roster { font-size: 12px; font-weight: 500; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(260px, 100%); }
.podium-roster { font-size: 12px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.team-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.logo { flex: none; display: inline-flex; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.hint { font-size: 12px; color: var(--faint); }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line-2); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
textarea.input { resize: vertical; min-height: 80px; }
.input-num { width: 90px; text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); padding: 0;
}
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.swatch-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.swatch-custom input { position: absolute; inset: -10px; opacity: 0; cursor: pointer; }

.logo-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.logo-option { padding: 8px; border-radius: var(--radius-sm); background: var(--bg-2); border: 2px solid var(--line); cursor: pointer; display: flex; justify-content: center; }
.logo-option.on { border-color: var(--accent); background: var(--accent-soft); }
.logo-upload { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); }
.team-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.team-form { display: grid; grid-template-columns: 1fr 220px; gap: 22px; }

/* ------------------------------------------------------------------ modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 9, .7); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto;
  animation: fade .15s ease-out;
}
.modal { width: 100%; max-width: 560px; box-shadow: var(--shadow); animation: pop .18s ease-out; }
.modal.wide { max-width: 820px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-foot .left { margin-right: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: pop .2s; max-width: 360px; }
.toast.error { border-color: var(--bad); }
.toast.ok { border-color: var(--good); }

/* ----------------------------------------------------------------- wizard */
.steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; }
.step i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-size: 12px; }
.step.on { color: var(--text); border-color: var(--accent); }
.step.on i { background: var(--accent); color: var(--accent-ink); }
.step.done i { background: var(--good); color: #062014; }
.wizard-foot { display: flex; justify-content: space-between; margin-top: 22px; gap: 10px; }

.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; }
.pick:hover { border-color: var(--line-2); }
.pick.on { border-color: var(--team, var(--accent)); background: color-mix(in srgb, var(--team, var(--accent)) 12%, var(--bg-2)); }
.pick .tick { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 12px; flex: none; }
.pick.on .tick { background: var(--team, var(--accent)); border-color: var(--team, var(--accent)); color: #fff; }
.seed-list { display: flex; flex-direction: column; gap: 6px; }
.seed { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.seed .num { width: 26px; text-align: center; color: var(--faint); font-weight: 700; font-family: var(--head); font-size: 17px; }

.game-editor { padding: 18px; border-left: 4px solid var(--accent); }
.game-editor + .game-editor { margin-top: 14px; }
.game-editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.game-editor-head .num { font-family: var(--head); font-size: 22px; color: var(--accent); }
.format-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.format-option { padding: 12px 14px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; }
.format-option b { display: block; margin-bottom: 3px; }
.format-option span { font-size: 12px; color: var(--muted); line-height: 1.4; display: block; }
.format-option.on { border-color: var(--accent); background: var(--accent-soft); }
.sub-head { font-family: var(--head); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 10px; }
.cat-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.cat-row + .cat-row { margin-top: 8px; }
.cat-row.adj-row { grid-template-columns: 1.4fr .6fr 1.4fr auto; }
.summary-table td:first-child { color: var(--muted); }

/* ------------------------------------------------------------- tournament */
.t-header { padding: 26px; margin-bottom: 18px; display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.t-header .meta { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.t-header .desc { color: var(--muted); margin-top: 10px; max-width: 720px; white-space: pre-wrap; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tab { padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.tab .tick { font-size: 11px; }
/* second row of tabs inside a tab (Coins verdienen): smaller and quieter */
.tabs-sub { gap: 4px; margin-top: -6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs-sub .tab { padding: 6px 12px; font-size: 13px; background: transparent; }
.tabs-sub .tab.on { background: var(--accent); }

/* Habbo avatars in front of a logo (ui.js avatarScene). The logo sits high up,
   so the figures only cover its lower part and it stays easy to see. */
.avatar-scene { --h: 110px; --logo: 0px; position: relative; display: flex; align-items: flex-end; justify-content: center; height: calc(var(--h) + var(--logo) * .62); max-width: 100%; }
.avatar-scene.with-logo { --logo: 96px; }
.avatar-scene.lg { --h: 140px; }
.avatar-scene.lg.with-logo { --logo: 120px; }
.avatar-scene.sm { --h: 88px; }
.avatar-scene.sm.with-logo { --logo: 76px; }
.scene-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.scene-logo .logo { width: var(--logo) !important; height: var(--logo) !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.scene-people { position: relative; display: flex; align-items: flex-end; min-width: 0; }
/* A soft shadow on the floor under the group. */
.scene-people::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: calc(var(--h) * .1); border-radius: 50%; background: rgba(0, 0, 0, .3); }
.scene-people .habbo { position: relative; height: var(--h); width: auto; flex: none; }
.scene-people .habbo + .habbo { margin-left: calc(var(--h) * -.2); }
/* Member of the day on the home page. */
.spotlight { margin-top: 24px; padding: 18px 20px; background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--panel); }
.spotlight-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.spotlight-head h2 { font-size: 20px; }
.spotlight .user-card { padding: 0; }
.spotlight .split { align-items: center; }
.spotlight-fact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.spotlight-fact-label { font-family: var(--head); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.spotlight-fact-text { display: flex; gap: 10px; align-items: flex-start; }
.spotlight-fact-text p { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.spotlight-fact-icon { font-size: 22px; line-height: 1.1; }
.spotlight-fact .btn-ghost { padding-left: 0; }
/* Admin page for it. */
.spot-kinds { display: flex; flex-direction: column; }
.spot-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.spot-kind:first-child { border-top: 0; }
.spot-kind input { grid-row: span 3; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.spot-kind label { font-weight: 700; cursor: pointer; }
.spot-kind .hint, .spot-kind .examples { grid-column: 2; }
.spot-kind .examples { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.spot-kind.off .examples { opacity: .55; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 18px; }
.podium-spot { padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; overflow: hidden; }
.podium-spot .place { font-family: var(--head); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.podium-spot .pts { font-family: var(--head); font-size: 28px; }
.podium-spot.p1 { padding-top: 26px; padding-bottom: 26px; border-color: rgba(245, 197, 66, .5); }
.podium-spot.p1 .place { color: var(--gold); }
.podium-spot.p2 .place { color: var(--silver); }
.podium-spot.p3 .place { color: var(--bronze); }
.podium-spot::after { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--team); }

.table-wrap { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board tr:last-child td { border-bottom: 0; }
.board tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.board .num { text-align: right; font-variant-numeric: tabular-nums; }
.board th.num { text-align: right; }
.board .total { font-weight: 700; font-family: var(--head); font-size: 18px; color: var(--accent); }
.board .team-cell { border-left: 3px solid var(--team); }
.rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-2); font-weight: 700; font-family: var(--head); font-size: 16px; }
.rank.r1 { background: var(--gold); color: #2b2000; }
.rank.r2 { background: var(--silver); color: #1d2129; }
.rank.r3 { background: var(--bronze); color: #2a1404; }
.bonus-pts { color: var(--info); }

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.game-info { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.rounds { display: flex; flex-direction: column; gap: 18px; }
.round-title { font-family: var(--head); font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 10px; }
.match { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
button.match { cursor: pointer; }
button.match:hover { border-color: var(--accent); }
.match .side { display: flex; align-items: center; gap: 10px; }
.match .side .score { margin-left: auto; font-family: var(--head); font-size: 20px; font-weight: 700; min-width: 28px; text-align: right; }
.match .side.win .name { color: var(--text); }
.match .side.lose { opacity: .55; }
.match .foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }
.match.pending .score { color: var(--faint); }
.ffa-list { display: flex; flex-direction: column; gap: 4px; }
.ffa-list .side .place { width: 22px; font-family: var(--head); font-weight: 700; color: var(--muted); }

.bracket { display: flex; gap: 34px; overflow-x: auto; padding: 4px 4px 14px; }
.bracket-col { display: flex; flex-direction: column; min-width: 230px; }
.bracket-col .round-title { text-align: center; }
.bracket-slots { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 14px; }
.bracket .match { position: relative; }
.bracket-col:not(:last-child) .bracket-slots .match::after { content: ''; position: absolute; right: -18px; top: 50%; width: 18px; border-top: 2px solid var(--line-2); }
.bracket-col:not(:first-child) .bracket-slots .match::before { content: ''; position: absolute; left: -18px; top: 50%; width: 18px; border-top: 2px solid var(--line-2); }
.de-finals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 300px)); gap: 14px 28px; margin-top: 18px; }
.match.bye { opacity: .5; border-style: dashed; }
.match .tbd { color: var(--faint); font-style: italic; }

.result-team { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--team); }
.result-team + .result-team { margin-top: 8px; }
.result-inputs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.result-inputs .field { align-items: center; }
.result-inputs .field > label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 760px) {
  .container { padding: 20px 16px calc(60px + env(safe-area-inset-bottom)); }
  .topbar-inner { gap: 10px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); height: 56px; }
  .session .badge-warn { font-size: 0; padding: 0; width: 10px; height: 10px; background: #ffb86b; }
  .brand-wrap { flex: 1; }
  .brand { font-size: 20px; min-width: 0; }
  #brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hero { padding: 30px 22px; }
  .hero.with-feedback { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-feedback .btn { align-self: stretch; }
  .fb-cats { flex-wrap: wrap; }
  .fb-cats button { flex: 1 1 40%; }
  .hero h1 { font-size: 34px; }
  .team-form, .split { grid-template-columns: minmax(0, 1fr); }
  .podium { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats-strip > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 14px; }
  .stat b { font-size: 26px; }
  .logo-picker { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------- currency */
.amount { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount b { font-weight: 700; }
.amount.good b { color: var(--good); }
.amount.bad b { color: var(--bad); }
.coin-icon { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; line-height: 1; font-size: 1.05em; flex: none; }
img.coin-icon { object-fit: contain; }
.wallet-pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
}
a.wallet-pill:hover { border-color: var(--accent); }
/* Favourite team on the profile and the dialog to pick it. */
.fav-team { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fav-team-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fav-team-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-team .btn-ghost { padding-left: 0; }
.fav-group { margin: 14px 0 8px; font-size: 14px; color: var(--muted); }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 8px; }
.fav-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit;
}
.fav-pick span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.fav-pick.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (hover: hover) { .fav-pick:hover { border-color: var(--line-2); } }
.wallet-badge { color: var(--text); font-size: 13px; padding: 3px 10px; }
.wallet-total { font-family: var(--head); font-size: 30px; margin-bottom: 14px; }
.wallet-total .amount { gap: 8px; }
.wallet-list .member-row { align-items: flex-start; padding: 8px; }
.wallet-list .amount { min-width: 84px; }
/* Coin popup behind the balance in the header: last bookings and ways to earn. */
.earn-head { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wallet-total + .earn-head { margin-top: 0; }
.wallet-short .member-row { align-items: center; padding: 6px 8px; }
.wallet-short .grow { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.earn-more { display: inline-block; margin-top: 6px; color: var(--accent); }
.earn-list { display: grid; gap: 8px; }
.earn-tip {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.earn-tip.now { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
a.earn-tip { text-decoration: none; }
@media (hover: hover) { a.earn-tip:hover { border-color: var(--accent); } }
.earn-icon { flex: none; width: 32px; font-size: 24px; text-align: center; }
.earn-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.earn-text b { overflow-wrap: anywhere; }
.earn-reward { flex: none; font-size: 13px; text-align: right; }
@media (max-width: 760px) {
  .earn-tip { flex-wrap: wrap; }
  .earn-reward { flex-basis: 100%; padding-left: 44px; text-align: left; }
  .wallet-short .amount { min-width: 64px; }
}
.cur-emojis { gap: 6px; }
.cur-emoji { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--bg-2); font-size: 20px; cursor: pointer; }
.cur-emoji.on { border-color: var(--accent); background: var(--accent-soft); }
input.cur-emoji-input { width: 80px; text-align: center; font-size: 18px; }
.cur-image-big { display: inline-grid; place-items: center; width: 48px; height: 48px; font-size: 32px; }
.cur-image-big .coin-icon { width: 48px; height: 48px; font-size: 32px; }
.cur-preview { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.cur-preview > .row:first-child { font-family: var(--head); font-size: 26px; }

/* ------------------------------------------------------- tournament prizes */
.prizes-panel { margin-bottom: 18px; border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.prizes-head { margin-bottom: 4px; }
.prize-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 4px 24px; }
.prize-group .sub-head { margin: 12px 0 8px; }
.prize-place { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.prize-place .rank { width: 24px; height: 24px; font-size: 14px; flex: none; }
.prize-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.prize-item {
  --rarity: var(--line-2); position: relative; display: inline-grid; place-items: center; width: 28px; height: 46px; border-radius: 6px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rarity) 25%, transparent), transparent 70%), var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--rarity) 70%, var(--line));
}
.prize-item img { image-rendering: pixelated; }
.prize-furni { width: auto; min-width: 36px; max-width: 64px; padding: 2px 4px; }
.prize-furni img { max-height: 40px; max-width: 100%; object-fit: contain; }
.prize-dup { position: absolute; right: -6px; bottom: -4px; font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-2); }
.prize-payouts { margin-top: 14px; }
.prize-payouts summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.prize-payouts summary:hover { color: var(--text); }
/* Editor */
.prize-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.prize-edit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.prize-edit-label { min-width: 84px; font-weight: 600; font-size: 14px; }
.prize-coins { display: inline-flex; align-items: center; gap: 6px; }
.prize-coins .input { width: 100px; }
.prize-item-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.prize-item-btn:hover { border-color: var(--bad); color: var(--bad); }
.prize-chip-edit { display: inline-flex; align-items: center; }
.prize-chip-edit [data-label-key]:not(.on) { opacity: .55; }
.prize-chip-edit [data-label-key].on { color: var(--accent); }
.prize-edit [data-remove-place] { margin-left: auto; }
.prize-per-match .prize-edit-label { min-width: 170px; }
@media (max-width: 760px) {
  .prize-edit { position: relative; }
  .prize-edit-label, .prize-per-match .prize-edit-label { min-width: 0; flex-basis: 100%; padding-right: 40px; }
  .prize-edit [data-remove-place] { position: absolute; top: 4px; right: 4px; }
}

/* ------------------------------------------------------------- daily reward */
.daily-btn {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line-2); font-size: 17px; filter: grayscale(.6); opacity: .75;
}
.daily-btn:hover { border-color: var(--accent); opacity: 1; filter: none; }
.daily-btn.ready { filter: none; opacity: 1; border-color: var(--accent); animation: daily-wiggle 2.4s ease-in-out infinite; }
.daily-btn.ready::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--bg);
}
@keyframes daily-wiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* Reward cards: CS-style, the rarity colours the bottom and the glow. */
.reward-card {
  --rarity: #9aa2b4; position: relative; flex: none; width: 128px; height: 150px; padding: 10px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: var(--radius-sm); overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--rarity) 45%, var(--line)); border-bottom: 4px solid var(--rarity); text-align: center;
}
.reward-card .rc-art { flex: 1; display: grid; place-items: center; min-height: 0; position: relative; }
.reward-card .rc-pattern { position: absolute; top: 2px; left: 2px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.reward-card .rc-art img { image-rendering: pixelated; height: 80px; width: auto; }
.reward-card .rc-art img.rc-furni { height: 64px; width: 100%; object-fit: contain; }
.rc-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-coins .coin-icon { width: 54px; height: 54px; font-size: 44px; }
.rc-label { font-size: 12px; font-weight: 700; line-height: 1.25; }
.rc-chance { font-size: 12px; color: var(--rarity); font-weight: 700; }
.reward-card.won { box-shadow: 0 0 0 2px var(--rarity), 0 0 28px color-mix(in srgb, var(--rarity) 70%, transparent); animation: won-pop .5s ease-out; }
@keyframes won-pop { 50% { transform: scale(1.08); } }

.case-panel { padding: 22px 0 20px; overflow: hidden; }
.case-window {
  position: relative; overflow: hidden; padding: 14px 0;
  background: linear-gradient(90deg, var(--bg) 0, transparent 14%, transparent 86%, var(--bg) 100%), var(--bg-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.case-strip { display: flex; gap: 8px; padding-left: 8px; will-change: transform; }
.case-marker { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.case-marker::before, .case-marker::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 9px solid transparent;
}
.case-marker::before { top: 0; border-top-color: var(--accent); }
.case-marker::after { bottom: 0; border-bottom-color: var(--accent); }
.case-action { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px 0; text-align: center; }
.case-open { font-size: 17px; padding: 14px 32px; }
.case-result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.case-spinning { animation: fade 1s ease-in-out infinite alternate; }
.reward-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.reward-pool .reward-card { width: auto; }

/* Admin: reward pool editor */
.dr-list { display: flex; flex-direction: column; gap: 10px; }
.dr-row { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.dr-card .reward-card { width: 96px; height: 116px; }
.dr-card .rc-art img { height: 60px; }
.dr-card .reward-card .rc-art img.rc-furni { height: 46px; }
.dr-card .rc-coins .coin-icon { width: 40px; height: 40px; font-size: 32px; }
.dr-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; align-items: end; }
.dr-chance { display: flex; flex-direction: column; font-family: var(--head); font-size: 22px; line-height: 1.1; }
.dr-chance .hint { font-family: inherit; }
.dr-pick { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rewards grouped by rarity (lootboxes that roll a rarity first). */
.dr-mode { margin-bottom: 10px; }
.dr-group { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--rarity, var(--line)); }
.dr-group-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dr-group-weight { display: flex; align-items: center; gap: 8px; }
.dr-group-weight .input { width: 100px; }
.rarity-odds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rarity-odds .badge { font-size: 13px; padding: 4px 10px; }
@media (max-width: 760px) {
  .reward-card { width: 104px; height: 130px; }
  .reward-card .rc-art img { height: 66px; }
  .reward-card .rc-art img.rc-furni { height: 52px; }
  .rc-coins .coin-icon { width: 44px; height: 44px; font-size: 36px; }
  .reward-pool { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .dr-row { flex-wrap: wrap; align-items: flex-start; position: relative; }
  .dr-row > .btn-icon { position: absolute; top: 6px; right: 6px; }
  .dr-fields { flex-basis: 100%; }
  .daily-btn { width: 32px; height: 32px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .daily-btn.ready { animation: none; } }

/* ------------------------------------------------------------ avatar builder */
.habbo { display: block; image-rendering: pixelated; }
/* Habbo figure (ui.js habboFigure): the box has the imager's 64:110 size, the
   picture in it has room around it (AVATAR_WIDE), so big wings, capes and hats
   stick out of the box instead of being cut off. */
.habbo-fig { position: relative; aspect-ratio: 64 / 110; width: 128px; flex: none; }
.habbo-fig.n { width: 64px; }
.habbo-fig > img { position: absolute; left: -50%; top: calc(-100% * 24 / 110); width: 200%; height: calc(100% * 134 / 110); max-width: none; pointer-events: none; }
/* The figure stands on an isometric floor tile, like in a Habbo room. */
.avatar-stage { position: relative; display: grid; place-items: end center; height: 280px; padding-bottom: 26px; }
/* Tile: a 2:1 diamond centred on the feet, which sit ~15px above the bottom of the picture. */
.avatar-stage::before {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 150px; height: 75px; transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, var(--panel-2)), var(--panel-2) 85%);
}
.avatar-stage .habbo { position: relative; }
.avatar-stage .hint { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.avatar-stage.small { height: 236px; width: 150px; padding-bottom: 14px; }
.avatar-stage.small::before { width: 110px; height: 55px; bottom: 2px; }
.avatar-stage .steam-pic { position: absolute; left: 4px; bottom: 6px; border-radius: 8px; box-shadow: 0 0 0 3px var(--panel); }
.profile-avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.avatar-builder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.avatar-stage-panel { position: sticky; top: 76px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar-turn { justify-content: center; flex-wrap: nowrap; }
.avatar-foot-actions { flex-wrap: nowrap; }
.avatar-editor .tabs { margin-bottom: 4px; }
.avatar-editor .sub-head:first-of-type { margin-top: 14px; }
.ab-colors { gap: 6px; }
.ab-colors .swatch { width: 28px; height: 28px; }
.ab-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.ab-set {
  position: relative; display: grid; place-items: center; height: 96px; padding: 4px; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 2px solid var(--line); color: var(--muted);
}
.ab-set img { image-rendering: pixelated; width: 34px; height: 80px; object-fit: contain; }
.ab-set.on { border-color: var(--accent); background: var(--accent-soft); }
.ab-none { font-size: 22px; }
/* Locked: the figure is greyed out, the rarity frame stays bright as a teaser. */
.ab-set.locked { cursor: not-allowed; }
.ab-set.locked img { filter: grayscale(1) brightness(.6); opacity: .7; }
.ab-lock, .ab-owned { position: absolute; bottom: 3px; right: 3px; font-size: 12px; line-height: 1; }
.ab-owned { color: var(--gold); }
/* Fixed colours of a pattern piece: small dots in the corner. */
.pattern-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.pattern-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.ab-set .pattern-dots { position: absolute; top: 4px; left: 4px; }
.ab-pattern-note { display: flex; align-items: center; gap: 8px; }
.pattern-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
/* Rarer items: frame and a soft glow in the rarity colour (same colours as medals). */
.ab-set.has-rarity { border-color: color-mix(in srgb, var(--rarity) 70%, var(--line)); background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rarity) 18%, transparent), transparent 70%), var(--bg-2); }
.ab-set.has-rarity.on { border-color: var(--accent); }
/* Item tooltip (rarity, lock state, description); phones get the info line instead. */
@media (hover: hover) {
  .ab-set[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 20;
    width: max-content; max-width: 220px; padding: 7px 10px; border-radius: var(--radius-sm); pointer-events: none;
    background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: var(--shadow);
    color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; white-space: pre-line;
  }
}
.ab-info {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: -2px 0 12px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--rarity, var(--line-2)); font-size: 13px;
}
.ab-info-status { color: var(--rarity, var(--muted)); font-weight: 600; }
.ab-info-text { flex-basis: 100%; color: var(--muted); }
.ab-info-sources { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
/* Where an item or furni can be had: lootbox, daily reward, shop, tournament. */
.source-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); white-space: nowrap;
}
@media (hover: hover) { .source-chip:hover { border-color: var(--accent); } }
.source-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Privacy settings */
.privacy-options { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.privacy-options legend { margin-bottom: 8px; }
.privacy-option {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-height: 48px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2);
}
.privacy-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.privacy-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.privacy-option span { display: flex; flex-direction: column; gap: 2px; }
@media (hover: hover) { .ab-set:hover:not(:disabled) { border-color: var(--line-2); } }

/* ------------------------------------------------------------- items admin */
.items-toolbar { gap: 8px 10px; }
.items-bulk { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
select.items-rarity { width: auto; padding: 6px 10px; }
.items-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.item-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-cell .ab-set { width: 100%; }
.item-cell.picked .ab-set { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.item-cell.picked .ab-set::before {
  content: '✓'; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700;
}
/* Actions for the selected items stay at the bottom of the screen. */
.items-selbar {
  position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 6; margin-top: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); border-color: var(--accent);
}
.items-selbar-head, .items-selbar-actions { gap: 8px; }
.item-cell.is-taken .ab-set, .furni-card.is-taken { opacity: .45; cursor: default; }
.furni-card.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.furni-card.picked::after {
  content: '✓'; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700;
}
.picker-count { font-size: 13px; color: var(--muted); }
.item-cell .ab-set.is-locked { border-style: dashed; background: color-mix(in srgb, #ffb86b 8%, var(--bg-2)); }
.item-meta { display: flex; justify-content: center; gap: 4px; font-size: 11px; white-space: nowrap; }
.item-name { display: block; font-size: 11px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-head { align-items: flex-start; gap: 16px; }
.item-preview { width: 72px; height: 104px; cursor: default; flex: none; }
.imp-sets { display: flex; flex-direction: column; gap: 6px; }
.imp-set { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; }
.imp-set:not(.new) { opacity: .6; cursor: default; }
.imp-set img { image-rendering: pixelated; flex: none; }
.imp-set .grow { min-width: 0; display: flex; flex-direction: column; }
.imp-set input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.imp-spacer { width: 20px; flex: none; }
@media (max-width: 760px) {
  .items-toolbar .seg { width: 100%; }
  .items-toolbar .seg button { flex: 1; padding-left: 4px; padding-right: 4px; }
  /* Many options: a tidy 3-column grid instead of buttons breaking onto half-filled lines. */
  .items-toolbar .seg:has(> :nth-child(5)) { display: grid; grid-template-columns: repeat(3, 1fr); }
  .items-toolbar select.items-rarity { width: 100%; }
  .items-selbar { margin-left: -4px; margin-right: -4px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .items-selbar { padding: 10px 12px; gap: 8px; }
  .items-selbar-head { flex-wrap: nowrap; }
  .items-selbar-head b { flex: 1; min-width: 0; }
  /* One row of actions that scrolls sideways keeps the bar small. */
  .items-selbar-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
  .items-selbar-actions::-webkit-scrollbar { display: none; }
  .items-selbar-actions > * { flex: none; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .item-head > .btn { width: 100%; }
}
@media (max-width: 760px) {
  .avatar-builder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* The preview stays in view while scrolling through the clothes. */
  .avatar-stage-panel { top: 64px; z-index: 6; flex-direction: row; justify-content: space-between; padding: 8px 12px; box-shadow: var(--shadow); }
  .avatar-stage-panel .avatar-stage { height: 170px; width: 110px; padding-bottom: 14px; flex: none; }
  .avatar-stage-panel .avatar-stage::before { width: 96px; height: 48px; bottom: 0; }
  .avatar-stage-panel .habbo { width: 85px; height: auto; }
  .avatar-stage-panel .hint { font-size: 11px; }
  .avatar-controls { flex: 1; min-width: 0; }
  .avatar-controls .seg { flex-wrap: nowrap; }
  .avatar-builder + .wizard-foot, .avatar-foot-actions { gap: 6px; }
  .avatar-builder + .wizard-foot .btn { padding-left: 12px; padding-right: 12px; }
  .ab-sets { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}

/* -------------------------------------------------------------- club room */
.room-main { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.room-stage {
  position: relative; height: min(68vh, 620px); min-height: 320px; border-radius: var(--radius-sm); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #222838, #0b0d12 75%);
}
.room-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.room-stage canvas.room-front { position: absolute; inset: 0; pointer-events: none; }
.room-tv { position: absolute; top: 0; left: 0; width: 320px; height: 224px; transform-origin: top left; pointer-events: none; }
.room-tv-head, .room-tv-controls { display: none; }
.room-tv-screen { height: 224px; }
.room-tv-start { display: block; width: 320px; height: 224px; opacity: 0; pointer-events: none; }
.room-tv-start:focus-visible { opacity: 1; background: #101b2b; color: white; outline: 4px solid var(--accent); }
.room-tv-video { position: absolute; inset: 0; pointer-events: auto; }
.room-tv-player > :not(.room-youtube) { display: none; }
.room-tv-player .room-youtube iframe { height: 224px; border-radius: 0; }
.room-youtube video { display: block; width: 100%; height: 240px; background: #000; border-radius: 12px; }
.room-tv-player .room-youtube video { height: 224px; border-radius: 0; }
.room-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.room-zoom .btn { background: rgba(14, 16, 21, .8); backdrop-filter: blur(4px); font-size: 16px; }
/* What the jukeboxes play: top left of the room, next to the zoom buttons. */
.room-jukebox {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 80px); display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(14, 16, 21, .88); border: 1px solid var(--line-2);
}
.room-jukebox[hidden] { display: none; }
.room-jukebox-note { flex: none; font-size: 18px; }
/* Lootbox openings live: a small case on top of the room, centred under the jukebox line. */
.room-unbox {
  --rarity: #9aa2b4; position: absolute; z-index: 3; top: 54px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 128px));
  border-radius: 14px; background: rgba(14, 16, 21, .92); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  overflow: hidden; pointer-events: none; animation: room-unbox-in .25s ease-out;
}
.room-unbox[hidden] { display: none; }
.room-unbox-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; font-size: 13px; line-height: 1.3; }
.room-unbox-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-unbox-live {
  flex: none; padding: 2px 8px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.room-unbox-won { color: var(--rarity); }
.room-unbox-rarity { font-size: 11px; color: var(--muted); }
.room-unbox-close {
  flex: none; width: 28px; height: 28px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  font-size: 12px; line-height: 1; color: inherit; background: var(--panel-2); border: 1px solid var(--line-2);
}
.room-unbox .case-window { padding: 6px 0; }
.room-unbox .case-marker::before, .room-unbox .case-marker::after { border-width: 6px; }
.room-unbox .case-strip { gap: 6px; }
.room-unbox .reward-card { width: 76px; height: 92px; padding: 6px 4px 7px; gap: 3px; border-bottom-width: 3px; }
.room-unbox .reward-card .rc-art img { height: 50px; }
.room-unbox .reward-card .rc-art img.rc-furni { height: 40px; }
.room-unbox .rc-coins .coin-icon { width: 32px; height: 32px; font-size: 26px; }
.room-unbox .rc-label { font-size: 10px; -webkit-line-clamp: 1; }
.room-unbox .rc-pattern { font-size: 10px; }
.room-unbox .reward-card.won { box-shadow: 0 0 0 2px var(--rarity), 0 0 18px color-mix(in srgb, var(--rarity) 70%, transparent); }
/* Epic and legendary drops: the box glows in the rarity and sparkles burst from the card. */
.room-unbox.cheer { border-color: var(--rarity); box-shadow: 0 0 0 1px var(--rarity), 0 0 34px color-mix(in srgb, var(--rarity) 55%, transparent); }
.room-unbox.cheer .room-unbox-head { background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 28%, transparent), transparent 70%); }
.room-unbox-burst { position: absolute; left: 50%; top: 62%; width: 0; height: 0; pointer-events: none; }
.room-unbox-burst i {
  position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 2px; background: var(--rarity); opacity: 0;
  box-shadow: 0 0 8px var(--rarity); animation: room-unbox-burst 1.4s ease-out forwards;
}
.room-unbox-burst i:nth-child(3n) { background: #fff; }
@keyframes room-unbox-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes room-unbox-burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4); }
}
@media (prefers-reduced-motion: reduce) { .room-unbox, .room-unbox-burst i { animation: none; } .room-unbox-burst { display: none; } }
@media (max-width: 760px) {
  .room-unbox { top: 50px; left: 8px; right: 56px; width: auto; transform: none; animation: none; }
  .room-unbox-head { font-size: 12px; }
  .room-unbox .reward-card { width: 62px; height: 78px; }
  .room-unbox .reward-card .rc-art img { height: 40px; }
  .room-unbox .reward-card .rc-art img.rc-furni { height: 32px; }
}
@media (pointer: coarse) { .room-unbox-close { width: 40px; height: 40px; } }
.room-jukebox-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.room-jukebox-name b, .room-jukebox-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-jukebox-name span { font-size: 12px; color: var(--muted); }
.room-jukebox-mute {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: inherit; background: var(--panel-2); border: 1px solid var(--line-2);
}
.room-jukebox-mute[aria-pressed="true"] { border-color: var(--bad); }
@media (hover: hover) { .room-jukebox-mute:hover { border-color: var(--accent); } }
/* Volume: a thin track filled in the clan colour up to the knob. */
.room-jukebox-volume {
  flex: none; width: 90px; height: 34px; margin: 0 6px 0 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; --fill: 80%;
}
.room-jukebox-volume::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), rgba(255, 255, 255, .15) var(--fill));
}
.room-jukebox-volume::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.room-jukebox-volume::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.room-jukebox-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0;
}
.room-jukebox-volume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.room-jukebox-volume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (pointer: coarse) {
  .room-jukebox-mute { width: 40px; height: 40px; }
  .room-jukebox-volume { height: 40px; }
  .room-jukebox-volume::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
  .room-jukebox-volume::-moz-range-thumb { width: 20px; height: 20px; }
}
.room-jukebox-start { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 6px 8px 6px 0; min-height: 32px; text-align: left; }
.room-picked {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(14, 16, 21, .88); border: 1px solid var(--line-2);
}
.room-picked .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.room-picked.room-tv-menu { flex-wrap: wrap; border-radius: 14px; }
.room-tv-menu-actions { flex: 0 0 100%; display: flex; gap: 8px; }
.room-tv-menu-actions .btn { flex: 1; min-width: 0; white-space: normal; }
.room-picked .owner, .room-place .owner { display: block; font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
/* The box with your furni, Habbo-style, bottom right of the room. */
.room-box {
  position: absolute; right: 10px; bottom: 10px; width: 52px; height: 52px; border-radius: 14px; cursor: pointer;
  font-size: 28px; line-height: 1; display: grid; place-items: center;
  background: rgba(14, 16, 21, .85); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
@media (hover: hover) { .room-box:hover { border-color: var(--accent); transform: translateY(-1px); } }
.room-picked { right: 72px; max-width: none; }
/* Writing a note: the letter button sits on top of the furni box. */
.room-box.room-note-btn { bottom: 72px; font-size: 24px; }
.room-box.room-gift-btn { bottom: 134px; font-size: 24px; }
/* Room furni without an owner (admins): above the gift; alone in the casino. */
.room-box.room-furnish-btn { bottom: 196px; font-size: 24px; }
.room-box.room-furnish-btn.alone { bottom: 10px; }
/* Leaving a gift: the own pieces to pick from. */
.gift-pieces { max-height: 300px; overflow-y: auto; }
/* The members' own rooms (views/homes.js, room.js with kind 'home'). */
.home-owner { display: flex; align-items: center; gap: 10px; }
.home-owner img { width: 40px; height: 56px; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.home-side .row { flex-wrap: wrap; }
.home-buy { margin-bottom: 14px; }
.home-buy .home-owner { flex-wrap: wrap; }
.home-buy .grow { flex: 1 1 220px; }
@media (max-width: 760px) { .home-buy .btn { flex: 1 0 100%; } }
.homes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.home-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; color: inherit; text-decoration: none; overflow: hidden; min-width: 0; }
.home-card.mine { border-color: var(--accent); }
@media (hover: hover) { .home-card:hover { border-color: var(--accent); } }
.home-card-floor { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(135deg, var(--t1) 0 6px, var(--t2) 6px 12px); border-right: 2px solid var(--w); }
.home-card img { width: 48px; height: 66px; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.home-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-card-main b { font-size: 16px; }
.home-card .ellipsis, .home-owner .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card-desc { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; }
.home-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-2); color: inherit; cursor: pointer; }
.home-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.home-swatch-color { width: 100%; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .25); }
.home-swatch .small { text-align: center; line-height: 1.2; }
.gift-open { display: flex; justify-content: center; margin: 4px 0 14px; }
.gift-open .inv-piece { width: 100%; max-width: 420px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; margin: 0; }
/* While placing: what is being put down and the buttons for it. */
.room-place {
  position: absolute; left: 10px; right: 72px; bottom: 10px; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(14, 16, 21, .92); border: 1px solid var(--accent);
}
.room-place .name, .room-picked .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-chat { display: flex; gap: 8px; }
.room-chat .input, .room-chat .emoji-field { flex: 1; min-width: 0; }
/* Emoji picker: a button inside the right edge of a chat field (desktop only). */
.emoji-field { position: relative; display: flex; }
.emoji-field .input { flex: 1; min-width: 0; }
.emoji-field .input.has-emoji { padding-right: 44px; }
.emoji-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 19px; line-height: 1; cursor: pointer;
  border: 0; border-radius: var(--radius-sm); background: transparent; filter: grayscale(1); opacity: .7;
}
.emoji-btn[aria-expanded="true"] { filter: none; opacity: 1; background: var(--panel-2); }
.emoji-btn:disabled { cursor: default; opacity: .3; }
@media (hover: hover) { .emoji-btn:not(:disabled):hover { filter: none; opacity: 1; transform: translateY(-50%) scale(1.12); } }
.emoji-btn.full { animation: emoji-shake .3s; }
@keyframes emoji-shake { 25% { margin-right: -3px; } 75% { margin-right: 3px; } }
.emoji-panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: min(340px, 100%);
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.emoji-panel[hidden] { display: none; }
.emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.emoji-tabs button { flex: 1; min-width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 17px; cursor: pointer; }
.emoji-scroll { max-height: 260px; overflow-y: auto; padding: 0 8px 8px; position: relative; }
.emoji-group-head { position: sticky; top: 0; z-index: 1; padding: 6px 2px 4px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--panel); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emoji-grid button { height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
@media (hover: hover) { .emoji-tabs button:hover, .emoji-grid button:hover { background: var(--panel-2); } }
@media (hover: none) and (pointer: coarse) { .emoji-btn, .emoji-panel { display: none; } }
.room-own-hint a { color: var(--accent); }
.room-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.room-music { display: flex; flex-direction: column; gap: 12px; }
.room-music .room-side-head { margin-bottom: 0; }
.room-youtube iframe { display: block; width: 100%; height: 240px; min-height: 200px; border: 0; border-radius: 12px; }
.room-music-queue { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.room-music-queue li { display: flex; align-items: center; gap: 8px; }
.room-music-queue li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.room-music-thumb { flex: 0 0 88px; width: 88px; height: 50px; object-fit: cover; border-radius: 6px; background: var(--panel-2); }
.room-music .room-music-queue .btn { flex: 0 0 40px; min-width: 40px; min-height: 40px; align-self: center; }
.room-music-queue span { display: block; }
#room-music-now { overflow-wrap: anywhere; }
#room-music-now .btn { margin-top: 8px; }
.room-music .btn { align-self: flex-start; max-width: 100%; white-space: normal; }
.room-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.room-online { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.room-person {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 2px 8px; min-height: 44px; overflow: hidden;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left;
}
.room-person img { width: 32px; height: 44px; object-fit: cover; object-position: 50% 20%; }
.room-person .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Casino: win/loss under the name. */
.room-person-stats { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); }
.room-person-stats .amount { font-size: 12px; }
.room-person.on { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .room-person:hover { background: var(--panel-2); } }
/* Casino (views/room.js with kind 'casino') and its blackjack popup (views/blackjack.js). */
.casino-side .room-side-head { margin-bottom: 6px; }
.casino-tables { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.casino-table-icon { width: 32px; text-align: center; font-size: 22px; }
.casino-side p { margin: 0; }
/* The tournament jackpot (views/jackpot.js): in the casino and in the prize panel of the marked tournament. */
.jackpot-box {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid color-mix(in srgb, var(--gold, #f5c542) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold, #f5c542) 18%, var(--panel)), var(--panel));
}
.jackpot-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jackpot-pot .amount { font-family: var(--head); font-size: 32px; line-height: 1.1; }
.jackpot-pot .amount b { font-variant-numeric: tabular-nums; }
.jackpot-box a { text-decoration: underline; overflow-wrap: anywhere; }
.jackpot-add { margin-top: 8px; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.jackpot-add .field { min-width: min(220px, 100%); }
.jackpot-live { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.jackpot-prize .hint a { text-decoration: underline; }
.bj { display: flex; flex-direction: column; gap: 14px; }
.bj-felt {
  position: relative; padding: 16px 14px 14px; border-radius: 18px 18px 120px 120px / 18px 18px 60px 60px;
  background: radial-gradient(ellipse at 50% 0%, #2b9a60, #1a6a40 55%, #12502f); border: 6px solid #5a3420;
  box-shadow: inset 0 0 0 2px rgba(245, 197, 66, .35), inset 0 10px 30px rgba(0, 0, 0, .3); color: #f3f7f2;
}
.bj-dealer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-label { font-family: var(--head); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.bj-label b { font-size: 20px; color: #fff; }
.bj-msg { margin: 12px 0 2px; text-align: center; font-size: 15px; min-height: 22px; }
.bj-rules { margin: 0 0 12px; text-align: center; font-size: 12px; color: rgba(245, 197, 66, .85); letter-spacing: .04em; }
.bj-cards { display: flex; justify-content: center; min-height: 64px; }
.bj-card {
  position: relative; flex: none; width: 44px; height: 62px; margin-left: -14px; border-radius: 6px; background: #fff; color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.bj-card:first-child { margin-left: 0; }
.bj-card b { font-family: var(--head); font-size: 20px; font-weight: 700; }
.bj-card i { font-style: normal; font-size: 20px; }
.bj-card.red { color: #c8202f; }
.bj-card.back { background: repeating-linear-gradient(45deg, #7a1f2b 0 5px, #8f2735 5px 10px); border: 3px solid #fff; }
.bj-card.ghost { background: transparent; border: 2px dashed rgba(255, 255, 255, .25); box-shadow: none; }
.bj-card.deal { animation: bj-deal .3s ease-out; }
@keyframes bj-deal { from { transform: translate(30px, -40px) rotate(-12deg); opacity: 0; } }
.bj-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bj-seat {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px;
  background: rgba(0, 0, 0, .18); border: 2px solid transparent; text-align: center;
}
.bj-seat.empty { justify-content: center; min-height: 150px; border: 2px dashed rgba(255, 255, 255, .2); background: transparent; }
.bj-seat-no { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.bj-seat.me { background: rgba(0, 0, 0, .3); }
.bj-seat.turn { border-color: var(--gold); box-shadow: 0 0 14px rgba(245, 197, 66, .45); }
.bj-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; width: 100%; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-radius: 10px; padding: 2px 4px; border: 2px solid transparent; }
.bj-hand.split { flex: 1 1 0; }
.bj-hand.split .bj-card { width: 36px; height: 52px; margin-left: -12px; }
.bj-hand.split .bj-card b, .bj-hand.split .bj-card i { font-size: 16px; }
.bj-hand.on { border-color: rgba(245, 197, 66, .7); background: rgba(0, 0, 0, .18); }
.bj-hand.out .bj-cards { opacity: .55; }
.bj-who { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.bj-head { flex: none; width: 34px; height: 40px; object-fit: cover; object-position: 50% 16%; }
.bj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.bj-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.bj-total { font-family: var(--head); font-weight: 700; font-size: 18px; padding: 0 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.bj-total.bad { color: #ff9a9d; }
.bj-bet .amount { background: rgba(0, 0, 0, .35); padding: 1px 8px; border-radius: 99px; }
.bj-result { font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.bj-result.good { background: var(--good); color: #062b19; }
.bj-result.bad { background: rgba(242, 85, 90, .85); color: #fff; }
.bj-ins { text-align: center; color: var(--muted); }
.bj-ins.good { color: var(--good); }
.bj-ins.bad { color: var(--bad); }
.bj-timer { width: 100%; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.bj-timer i { display: block; height: 100%; width: 100%; background: var(--gold); transition: width .25s linear; }
.bj-controls { display: flex; flex-direction: column; gap: 10px; }
.bj-controls p { margin: 0; }
.bj-betform { display: flex; flex-direction: column; gap: 10px; }
.bj-betform .row { flex-wrap: nowrap; }
.bj-betform .input { flex: 1; min-width: 0; }
.bj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-chip {
  width: 52px; height: 52px; border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .85); background: #b8243a; color: #fff;
  font-family: var(--head); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.bj-chip:nth-child(3n+2) { background: #1f5fbf; }
.bj-chip:nth-child(3n) { background: #1c7a45; }
@media (hover: hover) { .bj-chip:hover { transform: translateY(-2px); } }
.bj-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-actions .btn { flex: 1 1 140px; }
.bj-wait { justify-content: space-between; }
.bj-balance { margin-right: auto; font-size: 14px; color: var(--muted); }
.bj-count { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.bj-count strong { font: 700 20px var(--head); }
.bj-count-notice { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* Poker (views/poker.js): same table as blackjack, blue felt, dealer button and blinds as tags. */
.pk-felt { background: radial-gradient(ellipse at 50% 30%, #2e5aa8, #1c3a74 70%, #142a56); }
.pk-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 99px; background: rgba(0, 0, 0, .4); color: #fff; }
.pk-tag.d { background: #fff; color: #111; }
.pk-stack { display: inline-flex; align-items: center; gap: 4px; }
.pk-stack small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.pk-stack .amount { font-size: 13px; color: rgba(255, 255, 255, .85); }
.pk-total { font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .6); text-transform: none; }
/* What lies in front of a seat in the current betting round. */
.pk-put { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border-radius: 99px; background: rgba(245, 197, 66, .18); border: 1px solid rgba(245, 197, 66, .5); font-size: 13px; }
.pk-chip { width: 14px; height: 14px; border-radius: 50%; background: #e8c547; border: 3px dashed #b8243a; box-sizing: border-box; }
.pk-hand.mine { color: rgba(255, 255, 255, .75); text-transform: none; letter-spacing: 0; font-family: inherit; font-weight: 600; font-size: 13px; }
.pk-confirm { align-items: center; }
.pk-confirm span { flex: 1 1 100%; font-size: 14px; }
.pk-hand { font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.pk-raise .bj-chip { width: auto; min-width: 64px; height: 48px; padding: 0 10px; border-radius: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.pk-raise .bj-chip small { font-size: 11px; font-weight: 600; opacity: .9; }
/* Chess (views/chess.js): board left, players and clocks above and below it, moves and buttons beside it. */
.chess-table { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.chess-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chess-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chess-side .bj-msg { margin: 0; text-align: left; }
.chess-rules { margin: 0; font-size: 12px; color: var(--muted); }
.chess-player { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 2px 10px 2px 4px; border-radius: 10px; background: var(--panel-2); border: 2px solid transparent; }
.chess-player.turn { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 197, 66, .3); }
.chess-player.empty { padding-left: 10px; border: 2px dashed var(--line-2); background: transparent; }
.chess-player .bj-head { width: 30px; height: 38px; }
.chess-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.chess-tags { display: flex; gap: 4px; margin-right: auto; min-width: 0; overflow: hidden; }
.chess-tags .badge { white-space: nowrap; }
.chess-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #11131a; }
.chess-dot.w { background: #f4f1e8; }
.chess-dot.b { background: #2a2b33; border-color: #8a8f9c; }
.chess-clock { flex: none; margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; padding: 0 10px; border-radius: 8px; background: rgba(0, 0, 0, .3); color: var(--muted); }
.chess-clock.on { color: #fff; background: rgba(245, 197, 66, .2); }
.chess-clock.low.on { color: #ff9a9d; }
.chess-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; border: 6px solid #5a3420; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.chess-sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; cursor: default; font: inherit; }
.chess-sq.light { background: #eedcb4; }
.chess-sq.dark { background: #b07c50; }
.chess-sq.last { box-shadow: inset 0 0 0 100px rgba(245, 197, 66, .38); }
.chess-sq.check { box-shadow: inset 0 0 0 100px rgba(242, 85, 90, .55); }
.chess-sq.picked { box-shadow: inset 0 0 0 100px rgba(62, 207, 142, .5); }
.chess-board.mine .chess-sq { cursor: pointer; }
.chess-sq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 60, 40, .45); pointer-events: none; }
.chess-sq.target.take::after { width: 86%; height: 86%; background: transparent; border: 4px solid rgba(20, 60, 40, .5); }
.chess-sq i { position: absolute; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; opacity: .7; pointer-events: none; }
.chess-sq.light i { color: #8a5a34; }
.chess-sq.dark i { color: #f3e3c3; }
.chess-sq .chess-rank { top: 2px; left: 3px; }
.chess-sq .chess-file { bottom: 2px; right: 3px; }
.chess-piece { font-size: clamp(22px, 9vw, 40px); line-height: 1; pointer-events: none; user-select: none; }
.chess-piece.w { color: #fbfaf4; text-shadow: 0 0 1px #111, 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 0 2px 3px rgba(0, 0, 0, .4); }
.chess-piece.b { color: #1d1d23; text-shadow: 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .25), 0 2px 3px rgba(0, 0, 0, .35); }
.chess-moves { margin: 0; padding: 8px 10px; list-style: none; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); gap: 2px 10px; border-radius: 10px; background: var(--panel-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.chess-promote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chess-promote > span { flex: 1 1 100%; font-weight: 700; }
.chess-promote .chess-piece { font-size: 24px; }
@media (max-width: 900px) {
  .chess-table { grid-template-columns: minmax(0, 1fr); }
  .chess-main { max-width: 440px; width: 100%; margin: 0 auto; }
  .chess-moves { max-height: 120px; }
}
@media (max-width: 760px) {
  .chess-board { border-width: 4px; }
  .chess-clock { font-size: 20px; }
}
/* The rules as a small second window next to the table dialog (views/table-rules.js):
   beside the centred dialog when the screen has room, otherwise below the table inside it. */
.modal { position: relative; }
.game-side { padding: 14px 16px; font-size: 13px; color: var(--text); }
.game-side.beside { position: absolute; top: 0; width: var(--side-w, 320px); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; animation: pop .18s ease-out; }
.game-side.beside.right { left: 100%; margin-left: 16px; }
.game-side.beside.left { right: 100%; margin-right: 16px; }
.modal-body > .game-side { margin-top: 14px; background: var(--panel-2); }
.game-chat { display: flex; flex-direction: column; gap: 8px; }
.game-chat h4 { margin: 0; font-size: 14px; }
.game-chat.beside { height: min(520px, 88vh); }
.game-chat .game-chat-log { flex: 1; min-height: 0; max-height: none; font-size: 13px; }
.modal-body > .game-chat .game-chat-log { height: 130px; flex: none; }
.game-chat-form { display: flex; gap: 6px; }
.game-chat-form .input { flex: 1; min-width: 0; padding: 7px 10px; }
.game-rules h4 { margin: 0 0 8px; font-size: 14px; }
.game-rules ul { margin: 0; padding-left: 18px; }
.game-rules li { margin: 0 0 6px; }
.game-rules li:last-child { margin-bottom: 0; }
.pk-ranks { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.pk-ranks caption { caption-side: top; text-align: left; padding: 0 0 6px; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pk-ranks td { padding: 5px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.pk-rank-no { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-rank-name { font-weight: 700; }
.pk-rank-name small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.pk-ex { text-align: right; min-width: 72px; word-spacing: 2px; line-height: 1.3; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.pk-ex .red { color: var(--bad); }
@media (max-width: 760px) {
  .bj-felt { padding: 12px 8px; border-width: 4px; border-radius: 14px 14px 60px 60px / 14px 14px 30px 30px; }
  .bj-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-seat.empty { min-height: 96px; }
  .bj-card { width: 36px; height: 52px; margin-left: -12px; }
  .bj-card b, .bj-card i { font-size: 16px; }
  .bj-cards { min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .bj-card.deal { animation: none; } }
.room-fund { display: flex; flex-direction: column; gap: 8px; }
.room-fund .room-side-head { margin-bottom: 0; }
.room-fund p { margin: 0; }
.fund-bar { height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.fund-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); border-radius: 99px; transition: width .4s; }
.fund-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.fund-sum .small { margin-left: auto; }
.fund-form { display: flex; gap: 8px; }
.fund-form .input { flex: 1; min-width: 0; }
.fund-rest { align-self: flex-start; }
.fund-head { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 0; }
.fund-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.fund-list li { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.fund-list img { width: 28px; height: 34px; object-fit: cover; object-position: 50% 18%; flex: none; }
.fund-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fund-bar > i { transition: none; } }
.room-log { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; font-size: 14px; overflow-wrap: anywhere; }
.room-log time { color: var(--faint); font-size: 12px; margin-right: 4px; }
.room-log .sys { color: var(--faint); font-style: italic; font-size: 13px; }

/* ---------------------------------------------------------- furni & inventory */
.furni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.furni-groups { margin-bottom: 12px; }
@media (max-width: 760px) {
  /* One row that scrolls sideways instead of half the sheet full of buttons. */
  .furni-groups { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .furni-groups button { flex: none; white-space: nowrap; }
}
.furni-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.furni-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; min-width: 0;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 2px solid var(--rarity, var(--line)); text-align: center; color: inherit;
}
button.furni-card { cursor: pointer; font: inherit; }
@media (hover: hover) { button.furni-card:hover { border-color: var(--accent); } }
.furni-card img { height: 56px; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; margin-bottom: 2px; }
.furni-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.furni-count { font-size: 12px; color: var(--muted); }
.furni-card .btn { margin-top: auto; }
.r-badge { color: var(--rarity); border-color: color-mix(in srgb, var(--rarity) 45%, transparent); }
/* Admin: a member's pieces, one row each. */
.inv-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px; }
.inv-piece {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-width: 0; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--line); color: inherit; font: inherit;
}
.inv-piece:not(.r-common) { border-left-color: var(--rarity); }
.inv-piece-art { position: relative; flex: none; width: 48px; height: 64px; display: grid; place-items: center; }
.inv-piece-art img { image-rendering: pixelated; max-height: 64px; max-width: 48px; object-fit: contain; }
.inv-piece-art .pattern-dots { position: absolute; top: 0; left: 0; }
.inv-piece-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-piece-text b, .inv-piece-text .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-preview .pattern-dots { position: absolute; top: 4px; left: 4px; }
.ip-values { gap: 12px; align-items: flex-end; }
.ip-values .field { flex: 1 1 140px; min-width: 0; }
/* Cassettes: one row each with the label, the sound and a button to the club room. */
.cassette-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 8px; }
.cassette-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--line-2); text-align: left; color: inherit; font: inherit;
}
.cassette-row:not(.r-common) { border-left-color: var(--rarity); }
.cassette-art { flex: none; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cassette-art img { width: 64px; height: auto; image-rendering: pixelated; display: block; }
.cassette-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cassette-main > b { max-width: 100%; }
.cassette-audio { align-self: stretch; width: 100%; height: 36px; display: block; }
.cassette-row > .btn { flex: none; }
.cassette-pick { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
button.cassette-row { cursor: pointer; width: 100%; }
@media (hover: hover) { button.cassette-row:hover { border-color: var(--accent); } }
.cassette-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.cassette-color {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--c); cursor: pointer; padding: 0;
  position: relative; overflow: hidden;
}
.cassette-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.cassette-color-own { background: conic-gradient(#e0533d, #f5c542, #3ecf8e, #4f8dff, #b56cff, #e0533d); }
.cassette-color-own input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cassette-big { width: 120px; height: auto; image-rendering: pixelated; flex: none; }
.cassette-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
@media (pointer: coarse) { .cassette-color { width: 40px; height: 40px; } }
.inv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 12px; }
.inv-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.inv-item .ab-set { width: 72px; }
.inv-item-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Picking pieces (trade-up, trade offers): the same rows, selectable. */
button.inv-piece { position: relative; }
.inv-piece.on { border-color: var(--accent); background: var(--accent-soft); }
.inv-piece:disabled { opacity: .4; cursor: default; }
.inv-piece.gone { opacity: .5; }
.inv-piece-check { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-weight: 700; color: var(--accent-ink, #000); }
.inv-piece.on .inv-piece-check { background: var(--accent); border-color: var(--accent); }
.r-text { color: var(--rarity); font-weight: 600; }

.piece-values { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 18px; margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.piece-values > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.piece-values b { font-size: 18px; font-variant-numeric: tabular-nums; }
.inv-item-values { font-variant-numeric: tabular-nums; }
.furni-pieces { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.furni-piece { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.furni-piece:hover { border-color: var(--line); color: var(--text); }
.furni-pieces summary { cursor: pointer; font-size: 12px; }

/* The piece a member shows on the profile. */
.showcase { display: flex; gap: 18px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--rarity, var(--line)); max-width: 720px; }
.showcase.r-common { border-left-color: var(--line-2); }
.showcase-art { flex: none; background: none; border: 0; padding: 0; cursor: pointer; }
.showcase-art .item-preview { width: 110px; height: 130px; display: grid; place-items: center; }
.showcase-art .item-preview img { max-width: 90px; max-height: 110px; image-rendering: pixelated; object-fit: contain; }
.showcase-art .inv-piece-furni { transform: scale(2); }
.showcase-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.showcase-text .piece-values { margin-top: 2px; }
.showcase-text p { margin: 0; }
.showcase-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.showcase-name { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-empty { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-style: dashed; }
.showcase-plus { font-size: 34px; }
.sc-pieces { max-height: 420px; overflow-y: auto; align-content: start; }
.worn-pieces { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.worn-pieces .inv-piece-text .hint { white-space: normal; }
@media (max-width: 760px) {
  .showcase { flex-direction: column; align-items: stretch; }
  .showcase-art { align-self: center; }
  .piece-values { grid-template-columns: auto auto; }
  .piece-values .piece-float { grid-column: 1 / -1; }
}
@media (pointer: coarse) { .furni-piece { min-height: 36px; } }
.tu-pieces, .tc-pieces { max-height: 460px; overflow-y: auto; align-content: start; padding-right: 2px; }
.tc-pieces { max-height: 320px; grid-template-columns: minmax(0, 1fr); }
.tu-layout { margin-top: 12px; }
.tu-layout .items-toolbar { margin-bottom: 10px; }
.tu-side { position: sticky; top: 12px; }
@media (max-width: 760px) {
  /* Count, chances and the button first; the list below scrolls on its own. */
  .tu-layout .tu-side { order: -1; position: static; }
  .tu-pieces { max-height: 55vh; }
}
.tu-count { font-family: var(--head); font-size: 22px; }
.tu-count b { font-size: 34px; }
.tu-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 6px 0 12px; }
.tu-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.tu-outcomes { max-height: 300px; overflow-y: auto; }
#tu-case .case-result { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.trade-card { margin-bottom: 12px; }
.trade-head { gap: 10px; flex-wrap: nowrap; }
.trade-who { display: flex; flex-direction: column; min-width: 0; }
.trade-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-msg { margin: 8px 0 0; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.trade-pieces { display: grid; gap: 6px; }
.trade-history > summary { cursor: pointer; list-style: none; }
.trade-history > summary::-webkit-details-marker { display: none; }

/* Admin: collections */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.coll-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; min-width: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line);
}
@media (hover: hover) { .coll-card:hover { border-color: var(--accent); } }
.coll-icon { font-size: 28px; line-height: 1; flex: none; }
/* Own pictures of collections and lootboxes (pictureHTML in ui.js) */
.pic { display: inline-block; object-fit: contain; flex: none; }
.pic-inline { width: 1.3em; height: 1.3em; vertical-align: -.3em; border-radius: 3px; }
img.coll-icon { width: 64px; height: 64px; border-radius: 10px; }
img.shop-box-icon { width: 96px; height: 96px; }
img.lootbox-icon { width: 64px; height: 64px; border-radius: 10px; }
.coll-shop-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.coll-shop-head > img.pic { width: 72px; height: 72px; border-radius: 12px; }
.coll-shop-head > div { min-width: 0; }
@media (max-width: 760px) { .coll-shop-head > img.pic { width: 56px; height: 56px; } }
.coll-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coll-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-grades { gap: 4px; }
.coll-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.coll-mini { --rarity: var(--line-2); flex: none; width: 32px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: var(--bg); border-bottom: 3px solid var(--rarity); overflow: hidden; }
.coll-mini img { max-width: 28px; max-height: 36px; object-fit: contain; image-rendering: pixelated; }
.coll-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px; }
.coll-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--bg-2); }
.coll-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-picker { max-height: 300px; }
/* Admin: collection proposals (collection-ideas.js) */
.ideas-head { align-items: flex-start; gap: 12px; }
.ideas-grid { margin-top: 14px; }
.idea-card { cursor: default; }
.idea-card .coll-text { flex: 1; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.idea-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .link-btn:hover { color: var(--accent); } }
.idea-actions { gap: 4px; margin-top: 4px; flex-wrap: nowrap; }
.idea-error { color: var(--bad); }
.spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: step-spin .8s linear infinite; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (max-width: 760px) { .ideas-head, .idea-actions { flex-wrap: wrap; } .ideas-head > .grow { flex-basis: 100%; } }
.coll-picker .member-row { gap: 8px; }

/* Notifications: the bell in the header and its list. */
.bell-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: inherit; font-size: 17px; cursor: pointer; }
.bell-btn .nav-count { position: absolute; top: -4px; right: -4px; margin: 0; }
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notif-list a, .notif-list span.notif { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); color: inherit; }
.notif-list .unread { border-left: 3px solid var(--accent); }
.notif-list time { margin-left: auto; flex: none; font-size: 12px; color: var(--faint); }
.notif-foot { justify-content: space-between; }
/* push on the phone (views/push-settings.js) */
.push-device { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); }
.push-device p { margin: 0 0 10px; }
.push-device > :last-child { margin-bottom: 0; }
.push-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.push-install { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.push-kinds { display: grid; gap: 4px; }
.push-kind { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.push-kind input { margin-top: 3px; flex: none; }
.push-kind > span { display: grid; gap: 2px; min-width: 0; }
.push-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.push-devices li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: var(--radius-sm); background: var(--bg-2); }
.push-devices .grow { display: grid; gap: 2px; min-width: 0; }
.push-devices b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Club room: announcements in the chat, coloured by rarity (like unboxings in CS). */
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.room-actions .btn { flex: 1 1 auto; }
.room-log .announce { color: var(--rarity); font-weight: 600; font-style: normal; font-size: 14px; }
.room-log .announce.r-common { color: var(--accent); }

/* Admin: furni list and import */
.furni-admin-card { cursor: pointer; }
.list-tools { flex-wrap: nowrap; margin-bottom: 14px; }
.list-tools .input.grow { min-width: 0; }
.furni-admin-meta { font-size: 12px; color: var(--faint); }
.fi-search { flex-wrap: nowrap; }
.fi-search #fi-link { flex: 1; min-width: 0; }
.fi-search select { width: auto; flex: none; max-width: 40%; }
/* Random suggestions of the Habbo catalogue (views/habbo-suggest.js). */
.hs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hs-filters select { flex: 1 1 200px; width: auto; min-width: 0; }
.hs-head { margin: 0 0 10px; }
.fi-hits { margin-bottom: 4px; }
.fi-hits .furni-card img { height: 48px; }
.fi-hits .furni-name { white-space: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-size: 14px; }
@media (max-width: 760px) {
  .fi-search { flex-wrap: wrap; }
  .fi-search #fi-link { flex-basis: 100%; }
  .fi-search select { flex: 1; max-width: none; }
  .hs-filters select { flex-basis: 100%; }
}
.furni-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.furni-color { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 12px; }
.furni-color img { height: 60px; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.furni-color.on { border-color: var(--accent); background: var(--accent-soft); }
.furni-color.exists { opacity: .45; cursor: default; }
.furni-color input { position: absolute; opacity: 0; pointer-events: none; }
.furni-preview { display: grid; place-items: center; min-height: 110px; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-2); }
.furni-preview img { max-height: 140px; max-width: 100%; image-rendering: pixelated; }

/* --------------------------------------------------------- shop & lootboxes */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.shop-grid-boxes { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.shop-card, .shop-box {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; min-width: 0; text-align: center;
  border-radius: var(--radius); background: var(--panel); border: 2px solid var(--rarity, var(--line)); color: inherit; font: inherit;
}
.shop-card .btn, .shop-card .badge-done { margin-top: auto; }
.shop-art { display: grid; place-items: center; height: 84px; }
.shop-art img { image-rendering: pixelated; }
.shop-item { height: 80px; width: auto; }
.shop-furni { width: 100%; height: 72px; object-fit: contain; }
.shop-price { font-family: var(--head); font-size: 20px; }
.shop-price .amount { gap: 6px; }
.shop-balance { font-weight: 600; }
.shop-box {
  cursor: pointer; gap: 8px; padding: 18px 14px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rarity, var(--accent)) 16%, var(--panel)), var(--panel) 70%);
}
.shop-box-icon { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.shop-box-name { font-family: var(--head); font-size: 21px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-box.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shop-box.off, .offer-row.off { opacity: .55; }
@media (hover: hover) { .shop-box:hover { transform: translateY(-2px); border-color: var(--accent); } }
.shop-box { transition: transform .15s, border-color .15s; }
.shop-confirm { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.shop-confirm .shop-art { width: 110px; height: 110px; border-radius: var(--radius-sm); background: var(--bg-2); border: 2px solid var(--rarity, var(--line)); }

/* --------------------------------------------------------- community market */
.mk-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
.mk-search { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.mk-select { width: auto; flex: 0 1 200px; min-width: 0; max-width: 100%; }
.mk-card { text-decoration: none; gap: 4px; }
.mk-card .shop-art { height: 100px; }
@media (hover: hover) { .mk-card:hover { border-color: var(--accent); } }
.mk-set { height: 80px; width: auto; }
.mk-furni { width: 100%; height: 72px; object-fit: contain; }
.mk-from { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.mk-owned { position: absolute; top: 8px; right: 8px; font-size: 11px; }
.mk-mine-head { gap: 12px; align-items: center; margin-bottom: 4px; }
.mk-item-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 260px; color: inherit; text-decoration: none; }
.mk-cell-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mk-thumb { position: relative; flex: none; width: 40px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.mk-thumb:not(.r-common) { border-color: var(--rarity); }
.mk-thumb > img { max-width: 36px; max-height: 44px; width: auto; height: auto; image-rendering: pixelated; object-fit: contain; }
.mk-thumb .pattern-dots { position: absolute; top: 2px; left: 2px; }
.mk-seller { display: inline-flex; align-items: center; gap: 6px; color: inherit; max-width: 160px; }
.mk-seller span { overflow: hidden; text-overflow: ellipsis; }
.mk-back { margin-bottom: 10px; }
.mk-head { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.mk-show {
  position: relative; display: grid; place-items: center; min-height: 260px; padding: 10px; border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rarity, var(--accent)) 14%, var(--panel)), var(--panel) 70%);
  border: 2px solid var(--rarity, var(--line));
}
.mk-room { width: 360px; max-width: 100%; height: auto; aspect-ratio: 360 / 260; display: block; }
.mk-turn { position: absolute; right: 10px; bottom: 10px; }
.mk-wear { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.mk-wear img { image-rendering: pixelated; }
.mk-big-set { height: 120px; width: auto; }
.mk-big-avatar { width: 120px; margin: 56px 60px 0; }
/* Wide figures for wings & co.: the picture sticks out of the box (.habbo-fig), the margins keep it inside. */
.habbo-fig.mk-fig { width: 48px; margin-top: 18px; }
.mk-thumb .habbo-fig.mk-fig { width: 22px; margin-top: 7px; }
.shop-confirm .habbo-fig.mk-fig { width: 50px; margin-top: 20px; }
.mk-big-cassette { width: 180px; height: auto; image-rendering: pixelated; }
.mk-cassette { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; }
.mk-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-info h1 { margin: 0; overflow-wrap: anywhere; }
.mk-info .row { gap: 8px; align-items: center; }
.mk-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.mk-stats b { font-family: var(--head); font-size: 22px; }
.mk-admin-stats { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.mk-actions { flex-wrap: wrap; }
.mk-my-orders { margin-top: 14px; display: grid; gap: 6px; }
.mk-my-orders .row { gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-chart-box { padding: 12px 14px; }
.mk-chart { width: 100%; height: auto; display: block; }
.mk-chart-empty { padding: 40px 0; text-align: center; margin: 0; }
.mk-grid-line { stroke: var(--line); stroke-width: 1; }
.mk-axis { fill: var(--muted); font-size: 12px; font-family: var(--body, inherit); }
.mk-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mk-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.mk-range { stroke: var(--accent); stroke-opacity: .35; stroke-width: 6; stroke-linecap: round; }
.mk-vol { fill: var(--muted); fill-opacity: .35; }
.mk-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; }
.mk-key { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: -8px; vertical-align: middle; }
.mk-key-line { background: var(--accent); height: 3px; }
.mk-key-range { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.mk-key-vol { background: color-mix(in srgb, var(--muted) 35%, transparent); height: 10px; width: 6px; }
.mk-book { margin-top: 24px; gap: 14px; }
.mk-side { padding: 12px 14px; min-width: 0; }
.mk-side h3 { margin: 0 0 6px; }
.mk-depth td { position: relative; }
.mk-depth tr td:first-child { background: linear-gradient(90deg, var(--depth-c) var(--depth), transparent var(--depth)); }
.mk-ask { --depth-c: color-mix(in srgb, var(--bad) 12%, transparent); }
.mk-bid { --depth-c: color-mix(in srgb, var(--good) 12%, transparent); }
.mk-pick { max-height: 50vh; overflow-y: auto; }
.mk-sell-picked { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.mk-sell-picked .inv-piece { flex: 1 1 260px; cursor: default; }
@media (max-width: 760px) {
  .mk-head { grid-template-columns: minmax(0, 1fr); }
  .mk-show { min-height: 200px; }
  .mk-stats b { font-size: 18px; }
  .mk-col-piece, .mk-col-date, .mk-col-seller { display: none; }
  .mk-item-cell { max-width: 170px; }
}
@media (pointer: coarse) { .mk-turn { min-width: 40px; min-height: 40px; } }
.lootbox-title { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lootbox-icon { font-size: 40px; line-height: 1; }
.lootbox-price { font-family: var(--head); font-size: 26px; }
.case-open .amount { margin-left: 4px; }

/* Admin: offers */
.offer-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.offer-row {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--rarity, var(--line));
}
.offer-row .shop-art { width: 64px; height: 72px; flex: none; }
.offer-row .shop-item { height: 66px; }
.offer-row .shop-furni { height: 56px; }
.offer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-fields { display: flex; align-items: flex-end; gap: 14px; }
/* shop rotation: count and price per rarity */
.rot-days { max-width: 220px; }
.box-rot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.box-rot { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.box-rot.off { opacity: .6; }
.box-rot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-rarities { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px; gap: 8px 12px; align-items: center; max-width: 560px; }
.rot-rarity { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.offer-price { width: 110px; }
/* shop rotation by collection: price per rarity and kind, the collections in turn */
.rot-kinds { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 120px); gap: 8px 12px; align-items: center; max-width: 640px; }
.col-rot-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.col-rot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.col-rot.off { opacity: .7; }
.col-rot-pick { flex: 1 1 220px; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.col-rot-turn { min-width: 1.6em; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.col-rot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---------------------------------------------------------------- activity */
.act-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; min-width: 0; }
.act-groups { display: flex; max-width: 100%; }
.act-search { flex-wrap: nowrap; }
.act-search select { flex: 0 1 220px; min-width: 0; }
.act-search input { flex: 1; min-width: 0; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
/* Collection generator settings: "Alle · Keine" behind a group of kinds. */
.ci-kinds { display: flex; flex-direction: column; gap: 6px; }
.ci-kinds[hidden] { display: none; }
.ci-group-head { display: block; margin-top: 6px; }
.ci-group-head .linkish { margin-left: 4px; }
@media (pointer: coarse) { .ci-group-head .linkish { padding: 10px 6px; margin: -10px 0; } }
.act-feed { list-style: none; margin: 0; padding: 0; }
.act-day { padding: 16px 4px 6px; font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.act-row { display: grid; grid-template-columns: 44px 24px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 4px; border-top: 1px solid var(--line); }
.act-row time { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.act-icon { text-align: center; }
.act-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.act-user { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) { .act-user:hover b { text-decoration: underline; } }
.act-summary { color: var(--muted); }
.act-admin .act-summary { color: var(--text); }
.act-members ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
.act-member {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 44px; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.act-member b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-member .grow { min-width: 0; }
.act-member.on { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .act-member:hover { background: var(--panel-2); } }

/* ------------------------------------------------------ phones: navigation */
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: -8px;
    border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, background .2s;
  }
  .nav-toggle span { position: relative; }
  .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .nav-open .nav-toggle span { background: transparent; }
  .nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 19;
    flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100dvh - 56px);
    padding: 10px max(12px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom));
    background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .nav-open .nav { visibility: visible; opacity: 1; transform: none; }
  .nav a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 16px; }
  .nav a.active { color: var(--accent-ink); }
  /* In the phone menu the groups are headings with their pages below, nothing to open. */
  .nav { align-items: stretch; gap: 0; }
  .nav-group + .nav-group { margin-top: 8px; }
  .nav-group-btn {
    width: 100%; padding: 8px 14px 4px; border-radius: 0; pointer-events: none;
    font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  }
  .nav-group.active .nav-group-btn, .nav-group-btn:hover { color: var(--faint); background: transparent; }
  .caret, .nav-group:has(.nav-count) .nav-group-btn::after { display: none; }
  .nav-sub { position: static; display: flex; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .nav .nav-guest:not([hidden]) { display: flex; }
  /* The menu keeps the logged-out header to the login button. */
  .session .btn-ghost { display: none; }
  .user-menu > button span { display: none; }
  .user-menu > button { padding: 3px; }
}

/* --------------------------------------------------------------- invites */
.invite-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.invite-checks li { display: flex; gap: 10px; align-items: flex-start; }
.invite-checks li .hint { display: block; margin-top: 2px; }
.invite-checks li.ok { color: var(--muted); }
.ir-name { gap: 8px; flex-wrap: nowrap; min-width: 0; max-width: 220px; }
.ir-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-rules-table select { min-width: 130px; }
.referral-earned { text-align: right; }
.referral-earned .hint { display: block; }
.referral-list { display: grid; gap: 8px; margin-top: 14px; }
.referral-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.referral-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.referral-checks .ok { color: inherit; opacity: .8; }
.referral-checks span:not(.ok):not(.faint) { color: var(--text, #e8eaf0); }
.referral-state { text-align: right; }
@media (max-width: 760px) {
  .invite-table .ir-hide { display: none; }
  .referral-row { grid-template-columns: minmax(0, 1fr) auto; }
  .referral-checks { grid-column: 1 / -1; grid-row: 2; }
  .referral-earned { text-align: left; }
}

/* ------------------------------------------------- phones: touch & layout */
@media (max-width: 760px) {
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  .page-head { margin-bottom: 18px; }
  .section { margin-top: 28px; }
  .panel-pad { padding: 16px; }
  .t-header { padding: 18px; }
  .profile-head { padding: 18px; gap: 16px; }
  .join-card { padding: 24px 18px; }
  .empty { padding: 30px 16px; }

  /* Tabs scroll sideways in one row instead of stacking into many lines. */
  .tabs, .steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
  .tabs::-webkit-scrollbar, .steps::-webkit-scrollbar { display: none; }
  .tab, .step { flex: none; }

  /* Tables: scroll with momentum and fade the cut-off edge. */
  .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .board th, .board td { padding: 9px 8px; }

  .wizard-foot { position: sticky; bottom: 0; z-index: 5; margin: 22px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .home-with-widget .grid-cards { grid-template-columns: 1fr; }
  .server-banner.small { width: 100%; }
  .icon-field { flex-wrap: wrap; }
  .icon-field .input { max-width: none; flex: 1; }
  .result-team { grid-template-columns: 1fr; }
  .cat-row.adj-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .cat-row.adj-row > :first-child { grid-column: 1 / -1; }
  .result-inputs { justify-content: flex-start; }

  /* Dialogs become bottom sheets with the buttons always in reach. */
  .modal-backdrop { align-items: flex-end; padding: 0; overflow: hidden; }
  .modal, .modal.wide { max-width: none; max-height: 92dvh; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; border-bottom: 0; animation: sheet .22s ease-out; }
  .modal-head { padding: 14px 16px; flex: none; }
  .modal-body { padding: 16px; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
  .modal-foot { flex: none; flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .left { flex-grow: 0; }
  .modal-foot .picker-count { flex-basis: 100%; order: -1; }
  .modal .form-grid { grid-template-columns: 1fr; }
  [style*="grid-column: span 2"] { grid-column: auto !important; }

  /* Club room: the room fills the width, the chat field stays right below it. */
  .room-main { padding: 0; border: 0; background: transparent; }
  .room-stage { height: auto; min-height: 260px; max-height: 60dvh; aspect-ratio: 5 / 4; margin: 0 -16px; border-radius: 0; }
  .room-online { max-height: 220px; }
  .room-log { max-height: 180px; padding: 0; }
  .act-search { flex-wrap: wrap; }
  .act-search select { flex: 1 1 100%; }
  .act-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .act-groups button { flex: none; }
  .act-row { grid-template-columns: 40px 22px minmax(0, 1fr); padding: 10px 0; }
  .act-members ul { max-height: 320px; }
  .offer-row { flex-wrap: wrap; position: relative; padding-right: 48px; }
  .offer-row > .btn-icon { position: absolute; top: 6px; right: 6px; }
  .offer-row > .btn-icon[data-label] { top: auto; bottom: 6px; }
  .offer-row > .offer-main { flex-basis: calc(100% - 78px); }
  .offer-fields { flex-basis: 100%; justify-content: space-between; }
  .rot-days { max-width: none; }
  .rot-rarities { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .rot-rarities > .rot-head { display: none; }
  .rot-rarity { grid-column: 1 / -1; margin-top: 6px; }
  .rot-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .rot-kinds > .rot-head { display: none; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 10px; }
  .lootbox-icon { font-size: 32px; }
  .room-box { width: 48px; height: 48px; font-size: 26px; }
  .room-picked { left: 8px; right: 64px; bottom: 8px; }
  .room-jukebox { top: 8px; left: 8px; max-width: calc(100% - 72px); }
  .room-jukebox-name b { font-size: 14px; }
  .room-jukebox-volume { width: 64px; }
  .cassette-row { flex-wrap: wrap; }
  .cassette-row > .btn { flex: 1 0 100%; }
  .cassette-art img { width: 52px; }
  .room-place { left: 8px; right: 64px; bottom: 8px; gap: 6px; padding-left: 10px; }
  .room-place .name { font-size: 14px; }
  .room-place [data-place-ok] { padding-left: 10px; padding-right: 10px; }
  .room-box { right: 8px; bottom: 8px; }
  .room-box.room-note-btn { bottom: 64px; font-size: 22px; }
  /* The room is low on phones: the gift sits next to the letter, below the zoom buttons. */
  .room-box.room-gift-btn { bottom: 64px; right: 64px; font-size: 22px; }
  .room-box.room-furnish-btn { bottom: 120px; right: 64px; font-size: 22px; }
  .room-box.room-furnish-btn.alone { bottom: 8px; right: 8px; }
  .gift-pieces { max-height: 40vh; }
  .toasts { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
body.modal-open { overflow: hidden; }

/* Touch screens: fingers need bigger targets than mouse pointers. */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }
  .btn-icon { min-width: 40px; }
  .seg button { padding: 9px 14px; }
  .tab { padding: 10px 16px; }
  .tabs-sub .tab { padding: 10px 14px; }
  .check input, .member-row input { width: 20px; height: 20px; }
  .star-btn { padding: 6px 8px; }
  .captain-toggle { padding: 6px 10px; }
  .menu a, .menu button { padding: 12px 14px; font-size: 15px; }
  .bell-btn { width: 40px; height: 40px; }
  /* Below 16px, iOS zooms into the page when a field gets focus. */
  .input, select.input, textarea.input, .h2h-search { font-size: 16px; }
}

/* ---------------------------------------------------------------- accounts */
.avatar { border-radius: 8px; object-fit: cover; flex: none; background: var(--panel-2); display: inline-block; }
.avatar-blank { display: inline-grid; place-items: center; font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); }
.user-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.user-inline:hover span { color: var(--accent); }
.avatar-stack { display: flex; }
.avatar-stack > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.avatar-stack > *:first-child { margin-left: 0; }
.badge-role-admin { color: var(--bad); border-color: rgba(242, 85, 90, .4); background: rgba(242, 85, 90, .08); }
.badge-role-moderator { color: var(--info); border-color: rgba(90, 169, 255, .4); background: rgba(90, 169, 255, .08); }
.badge-open { color: var(--info); border-color: rgba(90, 169, 255, .4); background: rgba(90, 169, 255, .08); }

.btn-steam { background: #1b2838; border-color: #2a475e; color: #fff; }
.btn-steam:hover { background: #2a475e; border-color: #66c0f4; }
.btn-steam svg { width: 18px; height: 18px; }
.btn-discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn-discord:hover { background: #4752c4; border-color: #4752c4; }
.btn-discord svg, .discord-badge svg { width: 18px; height: 18px; flex-shrink: 0; }
.discord-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #c9cdfb; background: rgba(88, 101, 242, .14); border: 1px solid rgba(88, 101, 242, .45); }
.discord-badge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Discord bot admin page */
.dc-bot-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.dc-bot-head .grow { min-width: 0; }
.dc-bot-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #5865f2; color: #fff; flex-shrink: 0; }
.dc-bot-icon svg { width: 26px; height: 26px; }
.setup-list { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); overflow-wrap: anywhere; }
.error-text { color: var(--bad); }
.discord-ask { display: flex; gap: 14px; align-items: flex-start; }
.discord-ask p { margin: 0 0 8px; }
.member-row .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-settings { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.voice-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.voice-member { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voice-member span { min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu { position: relative; }
.user-menu > button { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 3px; cursor: pointer; color: var(--text); font-weight: 600; }
.user-menu > button:hover { background: var(--panel); border-color: var(--line); }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; display: none; box-shadow: var(--shadow); z-index: 30; }
.user-menu.open .menu { display: block; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; color: var(--text); font-size: 14px; }
.menu a:hover, .menu button:hover { background: var(--panel-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu a > span[aria-hidden], .menu button > span[aria-hidden] { width: 20px; text-align: center; flex: none; }
.menu .nav-count { margin-left: auto; }
.menu-head { padding: 8px 12px; }

/* "← Verwaltung" above admin pages. */
.crumb { padding-top: 18px; padding-bottom: 0; margin-bottom: -14px; }
.crumb a { color: var(--muted); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .crumb a:hover { color: var(--text); } }

/* The admin overview: one card per page. */
.admin-group:first-of-type { margin-top: 0; }
.admin-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.admin-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; color: var(--text); }
@media (hover: hover) { .admin-card:hover { border-color: var(--accent); } }
.admin-card-icon { font-size: 26px; line-height: 1; flex: none; }
.admin-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-card-text > span { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Roles & permissions. */
.role-card { display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--role, var(--line-2)); }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.role-chip { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--role, var(--text)); background: color-mix(in srgb, var(--role, var(--muted)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--role, var(--muted)) 45%, transparent); }
.role-chip.builtin { --role: var(--accent); }
.role-chip.small-chip { font-size: 12px; padding: 2px 9px; }
.perm-list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.role-members { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.role-members ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.role-members li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.role-members li a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-members li .faint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }
.perm-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px 12px; margin: 0; min-width: 0; }
.perm-group legend { padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.perm-matrix th, .perm-matrix td { text-align: center; white-space: nowrap; }
.perm-matrix th[scope="row"] { text-align: left; white-space: normal; min-width: 180px; max-width: 340px; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--text); }
.perm-matrix th[scope="row"] .muted { display: block; line-height: 1.4; font-weight: 400; }
.perm-matrix th[scope="row"] summary { cursor: pointer; }
.perm-matrix th[scope="row"] details[open] summary { margin-bottom: 4px; }
.perm-matrix .perm-matrix-group th { text-align: left; font-family: var(--head); font-size: 15px; color: var(--muted); padding-top: 14px; }
.perm-matrix .perm-yes { color: var(--good); font-weight: 700; }
.perm-matrix .perm-no { color: var(--faint); }
.perm-matrix th[scope="row"], .perm-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
@media (max-width: 760px) { .perm-matrix th[scope="row"] { min-width: 140px; max-width: 160px; } }
.perm-option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 14px; line-height: 1.4; }
.perm-option input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.perm-option.locked { cursor: default; opacity: .65; }
.perm-option .badge { font-size: 11px; padding: 0 7px; }

.join-card { max-width: 460px; margin: 6vh auto 0; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.join-card .code { font-family: ui-monospace, monospace; letter-spacing: .15em; font-size: 18px; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-2); font-size: 14px; text-align: left; }
.alert.error { border-color: var(--bad); color: #ffb3b5; background: rgba(242, 85, 90, .08); }
.alert.info { border-color: rgba(90, 169, 255, .4); background: rgba(90, 169, 255, .06); }

.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.user-card { padding: 14px; display: flex; gap: 12px; align-items: center; }
.user-card .info { flex: 1; min-width: 0; }
/* Admin controls move to their own line instead of squeezing the name. */
.user-card { flex-wrap: wrap; }
.user-card .info { flex-basis: 110px; }
.user-card-pic { position: relative; flex: none; width: 96px; display: flex; justify-content: center; }
.user-card-pic .steam-pic { position: absolute; left: 0; bottom: 0; line-height: 0; border-radius: 7px; box-shadow: 0 0 0 2px var(--panel); }
.user-card .info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Members page: portrait cards like the tournament podium – picture on top, everything centred below. */
.user-grid:has(.user-card.tall) { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.user-card.tall { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 18px 14px 16px; text-align: center; }
.user-card.tall .info { flex: none; width: 100%; }
.user-card.tall .info b { font-size: 16px; }
.user-card.tall .info .row { justify-content: center; }
.user-card.tall .user-card-pic { width: auto; min-height: calc(var(--card-h) + 60px); align-items: flex-end; }
/* Big avatar as the main motif of the card. */
.user-card.tall { --card-h: 220px; }
.user-card.tall .avatar-scene { --h: var(--card-h); }
.user-card.tall .user-card-pic .steam-pic { left: -14px; }
.user-card.tall .user-card-actions { margin-top: auto; }
.user-card-actions { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  /* Two portrait member cards side by side instead of one long column. */
  .user-grid:has(.user-card.tall) { grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr)); gap: 10px; }
  .user-card.tall { padding: 14px 8px 12px; --card-h: 176px; }
  .user-card.tall .info b { font-size: 15px; }
}
.profile-head { display: flex; gap: 22px; align-items: center; padding: 24px; flex-wrap: wrap; }
.profile-facts { margin-top: 8px; gap: 8px 10px; }
.profile-links { margin-top: 12px; gap: 8px; }
/* "Profil bearbeiten": one row per setting, value under the label, button right. */
.profile-edit-list { display: flex; flex-direction: column; }
.profile-edit-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.profile-edit-row:last-child { border-bottom: 0; }
.profile-edit-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-edit-row .grow .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-edit-icon { width: 28px; text-align: center; font-size: 18px; flex-shrink: 0; display: inline-flex; justify-content: center; }
.profile-edit-icon svg { width: 18px; height: 18px; }

.member-picker { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line-2); }
.member-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.member-row:hover { background: var(--panel); }
.member-row .grow { min-width: 0; }
.captain-toggle { border: 1px solid var(--line-2); background: transparent; border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--faint); }
.captain-toggle.on { color: var(--accent); border-color: var(--accent); }

.reg-list { display: flex; flex-direction: column; gap: 8px; }
.reg-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--team); flex-wrap: wrap; }
.reg-row .players { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.checkin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px 16px; align-items: start; margin-top: 14px; }
.checkin-fields .check { padding-top: 26px; }
.checkin-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-3, var(--bg)); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.checkin-chip.in { color: var(--good, #3ecf8e); border-color: currentColor; }

/* random teams: solo sign-ups, the drawn groups and the teams they can play as */
.solo-row { border-left-color: var(--line-2); }
.solo-row.sits-out { opacity: .55; }
@media (max-width: 760px) { .solo-row { gap: 8px 10px; } .solo-row .btn { margin-left: auto; } }
.solo-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shuffled-teams { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.shuffled-team { border-top: 4px solid var(--team); display: flex; flex-direction: column; gap: 10px; }
.shuffled-head { gap: 12px; }
.shuffled-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shuffled-team .players { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.shuffled-team .sub-head { margin: 4px 0 0; }
.wish-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wish-picks .pick { min-width: 0; }
.wish-picks .pick .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wish-picks .pick .tick { margin-left: 0; }
.wish-picks .pick[disabled] { cursor: default; opacity: .75; }
.wish-picks .pick[disabled].on { opacity: 1; }
.shuffled-team .found-team { align-self: flex-start; }
.wish-picks .chip { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 760px) { .wish-picks .pick { gap: 8px; padding: 10px; } .wish-picks .chip { font-size: 11px; padding: 2px 7px; } }
.fixed-members { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line-2); font-size: 14px; }
.fixed-member { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pick-reminder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-color: var(--accent); }
@media (max-width: 760px) { .checkin-fields .check { padding-top: 0; } }
.invite-row td { vertical-align: middle; }
.code-pill { font-family: ui-monospace, monospace; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-2); }
.member-row input { accent-color: var(--accent); width: 17px; height: 17px; }

/* ------------------------------------------------------------------ medals */
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.medal-card { position: relative; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border-top: 3px solid var(--rarity); }
.medal-card.featured { box-shadow: 0 0 0 1px var(--rarity), 0 8px 24px color-mix(in srgb, var(--rarity) 18%, transparent); }
.medal-card b { font-size: 14px; }
.medal-card .desc { font-size: 12px; color: var(--muted); }
.medal-card .rarity { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--rarity); font-weight: 700; }
.medal-card .corner { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.ach-tile { --tier: var(--line-2); display: flex; align-items: flex-start; gap: 12px; padding: 14px; text-align: left; color: inherit; font: inherit; cursor: pointer; border-left: 3px solid var(--tier); min-width: 0; }
.ach-tile.locked .ach-icon { filter: grayscale(1); opacity: .45; }
.ach-tile.locked b { color: var(--muted); }
.ach-tile.t0, .ach-tiers .t0 { --tier: var(--bronze); }
.ach-tile.t1, .ach-tiers .t1 { --tier: var(--silver); }
.ach-tile.t2, .ach-tiers .t2 { --tier: var(--gold); }
.ach-tile.t3, .ach-tiers .t3 { --tier: #7fe3e0; }
.ach-tile.t4, .ach-tiers .t4 { --tier: #9ab8ff; }
.ach-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; background: color-mix(in srgb, var(--tier) 16%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--tier); }
.ach-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ach-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.ach-text .desc { font-size: 12px; color: var(--muted); }
.ach-tier { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tier); font-weight: 700; }
.ach-progress { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ach-progress .progress { flex: 1; }
.ach-pips { display: flex; gap: 4px; }
.ach-pips i { width: 14px; height: 4px; border-radius: 99px; background: var(--panel-2); }
.ach-pips i.on.t0 { background: var(--bronze); } .ach-pips i.on.t1 { background: var(--silver); } .ach-pips i.on.t2 { background: var(--gold); }
.ach-pips i.on.t3 { background: #7fe3e0; } .ach-pips i.on.t4 { background: #9ab8ff; }
@media (hover: hover) { .ach-tile:hover { border-color: var(--line-2); border-left-color: var(--tier); background: var(--panel-2); } }
.ach-admin { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ach-admin-list > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.ach-admin-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.ach-admin-row.off .ach-admin-tiers, .ach-admin-row.off .ach-admin-icon { opacity: .4; }
.ach-admin-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ach-admin-head > input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.ach-admin-head .grow { min-width: 0; }
.ach-admin-head .hint { display: block; }
.ach-admin-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); border: 1px dashed var(--line-2); cursor: pointer; color: inherit; }
@media (hover: hover) { .ach-admin-icon:hover { border-color: var(--accent); } }
.ach-admin-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; margin-top: 10px; }
.ach-admin-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; padding: 8px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.ach-admin-tier .field { gap: 2px; min-width: 0; }
.ach-admin-tier .field:only-of-type { grid-column: 1 / -1; }
.ach-admin-tier-name, .ach-admin-tier > .hint { grid-column: 1 / -1; }
.ach-admin-tier-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ach-img { display: block; object-fit: contain; }
.ach-icon-preview { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--panel-2); }
.ach-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ach-tiers li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.ach-tiers li:not(.on) { opacity: .7; }
.ach-tiers .hint { display: block; }
.ach-medal { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 13px; color: var(--tier); box-shadow: inset 0 0 0 2px var(--tier); }
.ach-tiers li.on .ach-medal { background: var(--tier); color: #111; }
.medal-img { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 25%, transparent), transparent 70%); }
.medal-img img { width: 100%; height: 100%; object-fit: contain; }
.medal-img .fallback { font-size: 60%; }
.medal-row { display: flex; gap: 4px; }
.r-common { --rarity: #9aa2b4; }
.r-rare { --rarity: #5aa9ff; }
.r-epic { --rarity: #b57cf2; }
.r-legendary { --rarity: #f5c542; }
.star-btn { border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--faint); padding: 2px 4px; border-radius: 6px; }
.star-btn:hover { background: var(--panel-2); }
.star-btn.on { color: var(--gold); }
.user-card.inactive { opacity: .75; border-style: dashed; }
.badge-inactive { color: var(--faint); border-style: dashed; }
.bio { white-space: pre-wrap; color: var(--muted); margin-top: 10px; max-width: 640px; }
.profile-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-card-info { flex: 1; min-width: min(220px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.profile-card-info p { margin: 0; }
.profile-card-head { margin: 18px 0 8px; font-size: 15px; }
.profile-card-medals { gap: 6px; }
@media (max-width: 760px) {
  /* Bottom sheet: avatar next to the facts, a bit smaller. */
  .profile-card { gap: 12px; flex-wrap: nowrap; align-items: flex-start; }
  .profile-card .avatar-stage.small { height: 170px; width: 110px; flex: none; }
  .profile-card .avatar-stage.small::before { width: 96px; height: 48px; }
  .profile-card .avatar-stage .habbo { width: 85px; height: auto; }
  .profile-card-info { min-width: 0; }
}

/* --------------------------------------------------------- tournament logo */
.t-logo { border-radius: 18%; overflow: hidden; }
.t-logo img { object-fit: cover; }
.t-title { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.t-card-title { display: flex; gap: 12px; align-items: center; min-width: 0; }

/* ---------------------------------------------------------------- branding */
.brand-mark img, .brand-mark svg { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.brand-logo { display: inline-flex; flex: none; }
.brand-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-pill { position: relative; flex: none; padding: 2px 8px; cursor: pointer; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.brand-pill[hidden] { display: none; }
/* The staging copy: a gold line over the whole page; the pill only where there is room. */
body.staging .topbar { box-shadow: inset 0 3px 0 var(--gold); }
@media (max-width: 760px) { .brand-pill.staging { display: none; } }
.brand-pill.staging { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); cursor: default; }
.brand-pill::before { content: ''; position: absolute; inset: -10px -6px; }
@media (hover: hover) { .brand-pill:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
.brand-pill-info { white-space: pre-line; line-height: 1.55; margin: 0; }
.brand-logo img, .brand-logo svg { width: 100%; height: 100%; object-fit: contain; }
.hero-art img, .hero-art svg { width: 100%; height: 100%; object-fit: contain; }
.color-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.color-row .input { width: 110px; font-family: ui-monospace, monospace; }
.brand-preview { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.brand-preview .bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.brand-preview .bar b { font-family: var(--head); font-size: 19px; }
.brand-preview .body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ videos */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.video-card { overflow: hidden; display: flex; flex-direction: column; }
.video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s, opacity .25s; opacity: .9; }
@media (hover: hover) { .video-frame:hover img { transform: scale(1.03); opacity: 1; } }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame video { object-fit: contain; background: #000; }
.play-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(0, 0, 0, .7); transition: background .15s; }
.play-btn::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.video-frame:hover .play-btn { background: #ff0033; }
.video-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.video-title { line-height: 1.35; }

.nav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* ------------------------------------------------------------- updates page */
.updates { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.update { padding: 20px; }
.update-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.update h2 { font-size: 22px; margin-bottom: 14px; }
.update-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.update-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; }
.update-list li > .badge { justify-content: center; margin-top: 2px; }
.update-text p { margin: 0; }
.update-shot { display: block; width: fit-content; max-width: 100%; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
/* Shown at its own size, only shrunk to fit – stretching makes screenshots blurry. */
.update-shot img { display: block; max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .update { padding: 16px; }
  /* The badge goes above its text, so the text keeps the full width. */
  .update-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .update-list li > .badge { justify-self: start; }
}
.badge-rejected { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.video-pending { border-color: #ffb86b; }

.home-with-widget { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.home-with-widget .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.discord-widget iframe { display: block; width: 100%; max-width: 350px; height: 500px; border: 0; border-radius: var(--radius); background: var(--panel); }
@media (max-width: 900px) { .home-with-widget { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- countdowns */
.countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.next-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 22px; margin-top: 18px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%), var(--panel); }
.next-event .label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.next-event h2 { margin: 4px 0; }
.countdown-boxes { display: flex; gap: 8px; }
.cd-box { min-width: 64px; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); text-align: center; }
.cd-box b { display: block; font-family: var(--head); font-size: 30px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-box span { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.draft-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius-sm);
  border: 1px dashed #ffb86b; background: rgba(255, 184, 107, .08); }
.badge-draft { color: #ffb86b; border-color: rgba(255, 184, 107, .5); border-style: dashed; }
@media (max-width: 760px) {
  .next-event { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cd-box { min-width: 56px; }
}

/* ------------------------------------------------------------ game servers */
.servers-summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: 16px; }
.servers-summary .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.servers-summary .dot.on { background: var(--good); box-shadow: 0 0 10px var(--good); }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.server-card { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--line-2); overflow: hidden; }
.server-card.is-online { border-top-color: var(--good); }
.server-name { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-address { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.server-address code { flex: 1 1 160px; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.server-controls { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------- CS2 matches */
.match .foot { gap: 8px; }
.match .foot > span:first-child { display: inline-flex; align-items: center; min-width: 0; }
.match .foot > span:last-child { white-space: nowrap; }
.cs2-chip { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cs2-setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs2-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 8px 12px; }
.cs2-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px 12px; }
.cs2-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.cs2-map { display: flex; flex-direction: column; gap: 2px; padding: 12px; min-height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-2); text-align: left; color: var(--text); font: inherit; }
.cs2-map span { font-size: 12px; color: var(--muted); }
button.cs2-map { cursor: pointer; border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
button.cs2-map span { color: var(--accent); font-weight: 600; }
@media (hover: hover) { button.cs2-map:hover { background: var(--accent-soft); } }
.cs2-map.ban { opacity: .45; }
.cs2-map.ban b { text-decoration: line-through; }
.cs2-map.pick, .cs2-map.decider { border-color: var(--good); }
.cs2-map.pick span, .cs2-map.decider span { color: var(--good); font-weight: 600; }
.cs2-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.cs2-score b { font-size: 28px; font-variant-numeric: tabular-nums; }
.cs2-team { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cs2-team.right { text-align: right; }
.cs2-series { display: flex; flex-wrap: wrap; gap: 6px; }
.cs2-series > div { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.cs2-series > div.now { border-color: var(--accent); }
.cs2-feed { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cs2-feed div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-feed .ct, .cs2-side.ct { color: #6fb6ff; }
.cs2-feed .t, .cs2-side.t { color: #ffb86b; }
.cs2-side { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--faint); }
.cs2-side.ct { background: #6fb6ff; }
.cs2-side.t { background: #ffb86b; }
/* UT99 in the same dialog: red and blue team */
.cs2-feed .red, .cs2-side.red { color: #ff6b70; }
.cs2-feed .blue, .cs2-side.blue { color: #6f9dff; }
.cs2-side.red { background: #ff6b70; }
.cs2-side.blue { background: #6f9dff; }
.cs2-table td, .cs2-table th { text-align: right; }
.cs2-table td:first-child, .cs2-table th:first-child { text-align: left; }
.cs2-table .cs2-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-table tr.sep td { padding: 2px; border: 0; }
.cs2-actions { flex-wrap: wrap; gap: 8px; }
.cs2-commands { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.cs2-commands > div { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.cs2-commands code { color: var(--accent); font-weight: 600; }
.cs2-console { margin-top: 14px; }
.cs2-console summary { cursor: pointer; font-weight: 600; padding: 6px 0; min-height: 40px; display: flex; align-items: center; }

/* ------------------------------------------------------------- live console */
.console-box { display: flex; flex-direction: column; gap: 8px; }
.console-out { height: 260px; overflow-y: auto; padding: 10px; border-radius: var(--radius-sm); background: #0b0c10; border: 1px solid var(--line);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfd3dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-out .console-cmd { color: var(--accent); }
.console-out p { margin: 0; }
.console-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.console-in { display: flex; gap: 8px; }
.console-in .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 760px) { .console-out { height: 220px; } }
.cs2-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
.cs2-sides > span { display: inline-flex; align-items: center; min-width: 0; }
.cs2-table tr.cs2-wrong td { background: rgba(242, 85, 90, .08); }
.cs2-table .cs2-name .badge { font-size: 11px; padding: 1px 6px; margin-left: 6px; }
/* The scoreboard after a match (also on the custom match page): one header row per team, tabs per map. */
.cs2-table tr.cs2-team-row td { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg-2); }
.cs2-final .cs2-name a:hover { color: var(--accent); }
.cs2-boards { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs2-board-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.cs2-board-tabs button { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cs2-setup-grid { grid-template-columns: 1fr; }
  .cs2-table .hide-phone { display: none; }
  .cs2-score b { font-size: 22px; }
}
.srv-row { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
@media (max-width: 760px) { .srv-row .form-grid { grid-template-columns: 1fr !important; } }

.server-banner { margin: 0 -16px; aspect-ratio: 460 / 215; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--panel-2)), var(--panel-2)); display: grid; place-items: center; overflow: hidden; }
.server-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.server-banner .fallback { font-family: var(--head); font-size: 56px; font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, white); }
.server-banner.small { margin: 0; width: 184px; border-radius: var(--radius-sm); flex: none; }
.server-banner.small .fallback { font-size: 34px; }
.srv-image { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.chat-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.chat-preview > div { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.chat-preview > div > span { flex: 0 0 72px; }
.chat-preview code { min-width: 0; overflow-wrap: anywhere; background: none; padding: 0; }
@media (max-width: 760px) { .chat-preview > div { flex-direction: column; gap: 2px; } .chat-preview > div > span { flex: none; } }
.server-card:not(.is-online) .server-banner img { filter: grayscale(.7) brightness(.8); }
.challenge-server-card .btn-primary { align-self: flex-start; margin-top: auto; }
.challenge-server-card .server-banner .fallback { font-size: 64px; }
.challenge-banner { position: relative; }
.challenge-banner .banner-bg { position: absolute; inset: 0; }
.challenge-banner > :not(.banner-bg) { position: relative; }
.challenge-server-card .server-banner .challenge-icon { width: 96px; height: 96px; border-radius: 16px; box-shadow: var(--shadow); filter: none; }
.challenge-server-card .server-banner .challenge-emoji { font-size: 64px; }

.server-address.locked { color: var(--muted); font-size: 13px; border-style: dashed; }

/* ------------------------------------------------------------ head-to-head */
.h2h-search { max-width: 220px; padding: 6px 10px; }
.h2h-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.h2h-fact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.h2h-fact .grow > b { display: block; font-family: var(--head); font-size: 22px; line-height: 1.2; }
a.h2h-fact:hover { border-color: var(--accent); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.h2h-bar { display: flex; height: 8px; min-width: 80px; border-radius: 99px; overflow: hidden; background: var(--panel-2); }
.h2h-bar i { display: block; height: 100%; }
.h2h-bar .w { background: var(--good); }
.h2h-bar .d { background: var(--line-2); }
.h2h-bar .l { background: var(--bad); }
.h2h-row { cursor: pointer; }
.h2h-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.h2h-chevron { display: inline-block; transition: transform .15s; }
.h2h-row[aria-expanded="true"] .h2h-chevron { transform: rotate(180deg); }
.board .h2h-detail td { background: var(--bg-2); white-space: normal; padding: 6px 12px 10px; }
.h2h-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.h2h-matches li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 140px 96px 140px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.h2h-side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-side.mine { text-align: right; }
.h2h-matches li:last-child { border-bottom: 0; }
.h2h-matches a:hover { color: var(--accent); }
.h2h-result { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-weight: 700; font-size: 12px; flex: none; }
.h2h-result.win { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.h2h-result.draw { background: var(--panel-2); color: var(--muted); }
.h2h-result.loss { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.h2h-result.place { background: var(--panel-2); color: var(--text); }
.h2h-team { border-left: 3px solid var(--team); padding-left: 6px; }
.h2h-score { font-family: var(--head); font-size: 16px; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
/* Elo: Bestenliste tab + profile section */
.elo-cats { display: grid; gap: 14px; }
.elo-cat-head { display: flex; gap: 8px; align-items: center; }
.elo-cat-head .input:not(.elo-cat-icon) { flex: 1; min-width: 0; }
.elo-cat-icon { width: 72px; flex: none; text-align: center; }
.elo-cat-preview { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.elo-cat-preview .tab-icon { margin: 0; object-fit: contain; }
.elo-cat-iconrow { margin-top: 8px; gap: 8px; align-items: center; }
.elo-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px 18px; }
.elo-game { display: flex; flex-direction: column; gap: 4px; }
.elo-game .check.small { padding-left: 22px; }
a.elo-card { color: inherit; }
a.elo-card:hover { border-color: var(--accent); }
.elo-badge { display: inline-flex; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); vertical-align: middle; }
.elo-cell { display: inline-flex; align-items: center; gap: 6px; }
.elo-head { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; padding: 2px 10px 2px 4px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.elo-head > span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.1; color: var(--text); }
.elo-head small { font-size: 11px; font-weight: 500; color: var(--muted); font-family: var(--body, inherit); }
.elo-head:hover { border-color: var(--accent); }
.elo-rank-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; white-space: nowrap; }
.elo-delta { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.elo-delta.up { color: var(--good); }
.elo-delta.down { color: var(--bad); }
.elo-table .trend-col { white-space: nowrap; }
.elo-table .trend-col .elo-delta { display: inline-block; min-width: 30px; font-size: 14px; }
.h2h-fact .grow > b.elo-big { font-size: 30px; color: var(--accent); }
.elo-matches { list-style: none; margin: 0; padding: 0; }
.elo-matches li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 86px 80px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.elo-matches li:last-child { border-bottom: 0; }
.elo-vs { display: flex; flex-direction: column; min-width: 0; }
.elo-vs > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elo-change { display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; line-height: 1.1; }
@media (max-width: 760px) {
  .elo-table .peak-col { display: none; }
  .elo-table th, .elo-table td { padding-left: 8px; padding-right: 8px; }
  .elo-matches li { grid-template-columns: 24px minmax(0, 1fr) 54px 54px; gap: 8px; }
  .elo-vs > span { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .elo-table .trend-col { display: none; }
}
@media (max-width: 720px) {
  .h2h-table th:nth-child(2), .h2h-table .h2h-row td:nth-child(2),
  .h2h-table th:nth-child(4), .h2h-table .h2h-row td:nth-child(4) { display: none; }
  .h2h-table th, .h2h-table td { padding-left: 8px; padding-right: 8px; }
  .h2h-search { max-width: none; width: 100%; }
  .h2h-matches li { grid-template-columns: 24px minmax(0, 1fr) 76px minmax(0, 1fr); }
  .h2h-matches li > .grow { grid-column: 2 / -1; }
  .h2h-side.mine { grid-column: 2; }
}

/* ------------------------------------------------------ prediction game */
.phase-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.match .foot .badge { font-size: 11px; padding: 1px 7px; margin-right: 6px; }
.tips-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.tips-layout .sub-head:first-child { margin-top: 0; }
.tip-list { display: flex; flex-direction: column; gap: 10px; }
.tip-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tip-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.tip-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tip-options.many { grid-template-columns: 1fr; }
.tip-options.with-draw { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.tip-opt.draw .tip-name { flex: none; }
.tip-opt {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; width: 100%;
  border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--team);
}
button.tip-opt { cursor: pointer; }
button.tip-opt:hover { border-color: var(--accent); border-left-color: var(--team); }
.tip-opt.mine { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); border-color: var(--accent); border-left-color: var(--team); }
.tip-opt.mine::after { content: 'Your tip'; position: absolute; top: -9px; right: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); }
.tip-opt.won { border-color: var(--good); border-left-color: var(--team); }
.tip-opt.missed { background: color-mix(in srgb, var(--bad) 8%, var(--bg-2)); border-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.tip-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-draw { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--panel-2); font-weight: 700; color: var(--muted); flex: none; }
.tip-pct { font-family: var(--head); font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tip-score { font-family: var(--head); font-size: 18px; }
.tip-check { color: var(--good); font-weight: 700; }
.tip-who { margin-left: 4px; }
.tip-foot { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.tip-ready { padding: 4px 14px; }
.tip-ready .row { padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.tip-ready .row:last-child { border-bottom: 0; }
.tip-board tr.me td { background: var(--accent-soft); }
@media (max-width: 900px) { .tips-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .tip-options, .tip-options.with-draw { grid-template-columns: minmax(0, 1fr); }
  .tip-opt.draw .tip-name { flex: 1; }
}

/* ------------------------------------------------- tournament media, tab icons */
.t-header.with-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); align-items: start; }
.t-info { min-width: 0; flex: 1; }
.t-actions { margin-top: 16px; gap: 8px; }
.t-media { display: flex; flex-direction: column; gap: 8px; }
.t-media-label { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.embed-frame { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.tab-icon { display: inline-block; margin-right: 6px; vertical-align: -3px; object-fit: contain; border-radius: 4px; line-height: 1; }

/* --------------------------------------------------------------- icons */
/* Emojis drawn as icons (public/js/icons.js); size follows the text. */
.ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--ic-stroke, 2); stroke-linecap: round; stroke-linejoin: round; }
img.ic { object-fit: contain; stroke: none; }
/* On accent buttons and active tabs the icon takes the text color, else gold on gold disappears. */
.tab.on .ic, .btn-primary .ic, .seg .on .ic, .nav-group.open > .nav-group-btn .ic { color: inherit !important; }
.tab-icon .ic { vertical-align: top; }
.admin-card-icon { color: var(--accent); }
.ic-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.ic-pick { display: grid; place-items: center; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 24px; cursor: pointer; }
.ic-pick.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; color: var(--accent); }
@media (hover: hover) { .ic-pick:hover { border-color: var(--line-2); background: var(--panel); } }
.ic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.ic-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; text-align: left; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
@media (hover: hover) { .ic-card:hover { border-color: var(--line-2); } }
.ic-card-icon { font-size: 26px; line-height: 1; flex: none; width: 34px; text-align: center; }
.ic-card-text { display: flex; flex-direction: column; min-width: 0; }
.ic-card-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-card-text span { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-card.changed { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ic-preview-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 26px; color: var(--text); }
.ic-big { font-size: 56px; line-height: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); flex: none; }
.live-stream { margin-top: 22px; }
.live-stream .embed-frame { border-radius: var(--radius); box-shadow: var(--shadow); }
.live-stream-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.live-stream-head h2 { flex: 1; min-width: 0; }
.live-kicker { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--body, inherit); font-weight: 600; }
.live-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .t-header.with-media { grid-template-columns: 1fr; } }
.icon-field { gap: 8px; flex-wrap: nowrap; }
.icon-field .input { max-width: 180px; }
.icon-preview { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 20px; object-fit: contain; flex: none; }

/* ------------------------------------------------- scrolling rows on the home page */
.marquee {
  overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee:not(.running) .marquee-track { margin: 0 auto; }
.marquee-group { display: flex; gap: 22px; padding-right: 22px; }
.marquee.running .marquee-track { animation: marquee var(--duration) linear infinite; }
.marquee.reverse.running .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(var(--shift)); } }
.marquee-item { display: block; flex: none; transition: transform .15s, opacity .15s, filter .15s; }
@media (hover: hover) { .marquee-item:hover { transform: scale(1.12); } }
/* Inactive teams and the member avatars stay in the background until hovered. */
.marquee-item.faded { opacity: .5; filter: grayscale(.6); }
.marquee-item.faded:hover { opacity: 1; filter: none; }
.marquee-item .avatar { border-radius: 50%; }
/* Without motion: a plain row you can scroll sideways. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; }
  .marquee.running .marquee-track { animation: none; }
}

/* ------------------------------------------------ Discord message settings */
.dc-tabs { margin: 4px 0 0; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.dc-dot.on { background: #3ba55d; }
.tab.on .dc-dot.on { background: var(--accent-ink); }
.dc-editor { gap: 22px; }
.dc-placeholders { gap: 6px; }
.dc-placeholders .chip { cursor: pointer; font-family: ui-monospace, monospace; }
.dc-options { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.dc-options .check { margin-top: 2px; }
.dc-color-input { width: 52px; height: 38px; padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; }
.dc-preview-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 76px; }
.dc-preview-head { min-height: 34px; }
.dc-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }

/* The preview, in Discord's dark look. */
.dcp { background: #313338; color: #dbdee1; border-radius: var(--radius-sm); padding: 14px 14px 16px 10px; font-family: "gg sans", "Noto Sans", Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.375; overflow: hidden; }
.dcp-loading { margin: 0; padding: 4px 6px; color: #949ba4; }
.dcp-msg { display: flex; gap: 14px; min-width: 0; }
.dcp-msg + .dcp-msg { margin-top: 14px; }
.dcp-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.dcp-avatar-blank { display: grid; place-items: center; background: #5865f2; overflow: hidden; font-size: 20px; }
.dcp-avatar-blank img { width: 100%; height: 100%; object-fit: cover; }
.dcp-body { min-width: 0; flex: 1; }
.dcp-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcp-name { color: #f2f3f5; font-weight: 600; }
.dcp-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; line-height: 1.3; }
.dcp-time { color: #949ba4; font-size: 12px; }
.dcp-content { margin-top: 2px; overflow-wrap: anywhere; }
.dcp a { color: #00a8fc; text-decoration: none; }
.dcp code { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 0 3px; font-size: 13px; }
.dcp-code { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 7px 9px; margin: 4px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dcp-embed { margin-top: 6px; max-width: 520px; background: #2b2d31; border-left: 4px solid #5865f2; border-radius: 4px; display: flex; }
.dcp-embed-main { padding: 8px 16px 14px 12px; min-width: 0; flex: 1; display: grid; gap: 8px; }
.dcp-title { color: #f2f3f5; font-weight: 600; font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }
.dcp-desc { font-size: 14px; overflow-wrap: anywhere; }
.dcp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dcp-field { grid-column: 1 / -1; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.dcp-field.inline { grid-column: auto; }
.dcp-fname { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.dcp-image { display: block; width: 100%; max-width: 400px; border-radius: 4px; margin-top: 8px; }
.dcp-footer { display: flex; align-items: center; gap: 8px; color: #949ba4; font-size: 12px; margin-top: 4px; }
.dcp-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dcp-dm-label { margin: 16px 0 8px 4px; color: #949ba4; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) {
  .dc-preview-col { position: static; }
  .dc-options { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dcp { padding: 12px 10px 14px 8px; }
  .dcp-msg { gap: 10px; }
  .dcp-avatar { width: 34px; height: 34px; }
  .dcp-embed-main { padding: 8px 12px 12px 10px; }
  .dcp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.new-category { margin-top: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.video-tags { gap: 8px; align-items: center; }
.game-chip { display: inline-flex; align-items: center; gap: 2px; }
.game-chip:hover, .filter-chip:hover { border-color: var(--accent); color: var(--text); }
.video-filter { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; }
.video-filter-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; width: min(360px, calc(100vw - 32px)); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.t-casters { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; }
.h2h-overall { display: flex; align-items: center; gap: 18px; padding: 14px 16px; margin-top: 14px; }
.h2h-overall > div:not(.grow) { display: flex; flex-direction: column; }
.h2h-overall b { font-family: var(--head); font-size: 22px; line-height: 1.2; }
.h2h-overall .num { text-align: right; }
.h2h-overall .h2h-bar { height: 12px; }

/* ------------------------------------------------------ profile video */
.profile-head.with-media { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(280px, 40%); align-items: start; }
.profile-media { display: flex; flex-direction: column; gap: 8px; }
.profile-media-empty {
  aspect-ratio: 16 / 9; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--muted); cursor: pointer; font-weight: 600;
}
.profile-media-empty span { font-size: 28px; }
.profile-media-empty:hover { border-color: var(--accent); color: var(--text); }
.pick-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pick-video { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; border-radius: var(--radius-sm); background: var(--bg-2); border: 2px solid var(--line); cursor: pointer; }
.pick-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.pick-video span { font-size: 13px; font-weight: 600; }
.pick-video:hover, .pick-video.on { border-color: var(--accent); }
@media (max-width: 900px) {
  .profile-head.with-media { grid-template-columns: auto minmax(0, 1fr); }
  .profile-head.with-media .profile-media { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .profile-head.with-media { grid-template-columns: minmax(0, 1fr); }
  .profile-head .profile-avatar { width: 100%; }
}

/* ------------------------------------------------- tournament series */
.series-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--series, var(--accent)); background: color-mix(in srgb, var(--series, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--series, var(--accent)) 45%, transparent); }
.series-chip .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-chip .faint { font-weight: 500; }
@media (hover: hover) { a.series-chip:hover { background: color-mix(in srgb, var(--series, var(--accent)) 22%, transparent); } }
.series-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -8px 0 24px; }
.series-bar .series-chip { padding: 6px 12px; }
.t-card-series { margin-top: -6px; min-width: 0; }
.series-head { border-top: 4px solid var(--series); }
.series-head .desc { color: var(--muted); margin-top: 10px; max-width: 720px; white-space: pre-wrap; }
.series-title { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; min-width: 0; }
.series-title h1 { min-width: 0; overflow-wrap: anywhere; }
.series-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--series); box-shadow: 0 0 0 4px color-mix(in srgb, var(--series) 25%, transparent); }
.series-table td:nth-child(n+3), .series-table th:nth-child(n+3) { text-align: center; }
.series-team { max-width: 280px; }
.series-teams { margin: 2px 0 0 34px; white-space: normal; }
.copy-setup { margin-bottom: 16px; border-style: dashed; }
.copy-setup .hint { display: block; margin: 6px 0 12px; }
.copy-setup-row { display: flex; gap: 8px; }
.copy-setup-row select { flex: 1; min-width: 0; }
.copy-done { margin-top: 10px; color: var(--good); }

/* -------------------------------------------------- tournament calendar */
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-nav h2 { min-width: 9.5em; text-align: center; }
.cal-bar .cal-filter { width: auto; flex: 0 1 260px; min-width: 0; }
.cal-panel { padding: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { padding: 4px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cal-day { min-height: 96px; min-width: 0; padding: 6px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.cal-day.outside { opacity: .4; }
.cal-day.today { border-color: var(--accent); }
.cal-day.today .cal-num { color: var(--accent-ink); background: var(--accent); }
.cal-num { align-self: flex-start; min-width: 24px; padding: 1px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; color: var(--muted); }
.cal-ev { display: block; min-width: 0; padding: 2px 6px; border-radius: 5px; font-size: 12px; line-height: 1.35; color: var(--text);
  background: color-mix(in srgb, var(--series) 18%, transparent); border-left: 3px solid var(--series); }
.cal-ev-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.deadline { background: transparent; border-left-style: dashed; color: var(--muted); }
.cal-ev.draft { opacity: .7; border-left-style: dotted; }
@media (hover: hover) { .cal-ev:hover { background: color-mix(in srgb, var(--series) 32%, transparent); } }
.cal-agenda { display: flex; flex-direction: column; gap: 8px; }
.cal-agenda-day { margin-top: 10px; font-family: var(--head); font-weight: 700; font-size: 16px; color: var(--muted); scroll-margin-top: 70px; }
.cal-agenda-day:first-child { margin-top: 0; }
.cal-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0; border-left: 4px solid var(--series); }
.cal-time { flex: none; width: 58px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); font-size: 14px; }
.cal-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cal-item-main .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
@media (hover: hover) { .cal-item:hover { border-color: var(--line-2); border-left-color: var(--series); } }
@media (max-width: 760px) {
  .cal-nav { flex: 1 1 100%; }
  .cal-nav h2 { flex: 1; min-width: 0; }
  .cal-bar .cal-filter { flex: 1 1 100%; width: 100%; }
  .cal-panel { padding: 6px; }
  .cal-grid { gap: 2px; }
  .cal-wd { padding: 2px; text-align: center; font-size: 11px; letter-spacing: 0; }
  /* Phones: days with dates get coloured dots; tapping the day jumps to the list below. */
  .cal-day { min-height: 46px; padding: 3px 2px; align-items: center; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 2px; }
  .cal-day.has-events { cursor: pointer; }
  .cal-num { flex-basis: 100%; align-self: auto; padding: 1px 0; font-size: 12px; min-width: 0; }
  .cal-day.today .cal-num { background: none; color: var(--accent); }
  .cal-ev { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--series); pointer-events: none; }
  .cal-ev.deadline { background: transparent; box-shadow: inset 0 0 0 2px var(--series); }
  .cal-ev-text { display: none; }
  .cal-item { padding: 10px 12px; gap: 10px; }
  .cal-time { width: 44px; font-size: 13px; }
  .copy-setup-row { flex-wrap: wrap; }
  .copy-setup-row select, .copy-setup-row .btn { flex: 1 1 100%; }
  .series-table .hide-phone { display: none; }
  .voice-table .hide-phone { display: none; }
  .de-table .hide-phone { display: none; }
  .voice-member span { max-width: 6.5em; }
  .voice-table th, .voice-table td { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}

/* ---------- community challenges ---------- */
.challenge-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.challenge-card { display: flex; flex-direction: column; gap: 10px; }
.challenge-card h3 { margin: 0; }
.challenge-card .btn-primary { align-self: flex-start; margin-top: auto; }
.challenge-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.challenge-mods ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-mods a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; }
@media (pointer: coarse) { .challenge-mods a { min-height: 40px; } }
.challenge-icon { width: var(--size, 48px); height: var(--size, 48px); flex-shrink: 0; border-radius: 8px; image-rendering: pixelated; object-fit: cover; }
.challenge-emoji { display: inline-grid; place-items: center; font-size: calc(var(--size, 48px) * .55); background: var(--panel-2); border: 1px solid var(--line); }
.challenge-blocker { margin: 0 0 16px; }
.challenge-blocker a { color: inherit; text-decoration: underline; }
.challenge-live { display: flex; flex-direction: column; gap: 14px; border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.challenge-live-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.challenge-live-head h2 { margin: 6px 0 2px; }
.run-timer { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-timer.done { color: var(--gold); }
.challenge-address { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.challenge-address code { font-size: 15px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.challenge-address .btn { margin-left: auto; }
.run-players { display: flex; flex-wrap: wrap; gap: 8px; }
.run-player { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.run-player > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-player.online { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.run-player.dead { opacity: .55; }
.milestone-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.milestone-track li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); color: var(--faint); }
.milestone-track li.done { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); color: var(--text); }
.ms-icon { display: inline-block; flex-shrink: 0; vertical-align: -3px; object-fit: contain; }
.ms-emoji { line-height: 1; vertical-align: -2px; }
.milestone-track .ms-icon { filter: grayscale(1); opacity: .6; }
.milestone-track li.done .ms-icon { filter: none; opacity: 1; }
.ms-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ms-text b { overflow-wrap: break-word; hyphens: auto; }
.ms-cell { display: inline-flex; align-items: center; gap: 6px; }
.challenge-table .show-phone { display: none; }
.run-category { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.run-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.board-tabs .seg-count { font-size: 11px; opacity: .7; margin-left: 2px; }
@media (max-width: 760px) { .board-tabs { width: 100%; flex-wrap: nowrap; } .board-tabs button { flex: 1; padding-left: 4px; padding-right: 4px; white-space: nowrap; } }
@media (max-width: 400px) { .board-tabs .seg-icon { display: none; } }
.run-deaths { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Force Item Battle: the live score, the board's challenge tabs, mods per challenge (admin). */
.battle-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.battle-scores li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.battle-scores li.online { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.battle-ready { color: var(--good); font-weight: 600; }
.battle-scores li.dead { opacity: .55; }
.battle-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.battle-who > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-jokers { white-space: nowrap; }
.battle-count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-variant-numeric: tabular-nums; }
.battle-count b { font-size: 22px; }
.battle-rank { flex-shrink: 0; }
.battle-scores li.battle-team { border-left: 4px solid var(--team); background: linear-gradient(90deg, color-mix(in srgb, var(--team) 14%, var(--panel-2)), var(--panel-2) 60%); }
.battle-team-name { color: color-mix(in srgb, var(--team) 70%, var(--text)); }
.battle-members { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; white-space: normal !important; }
.battle-members > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.battle-members > span.online { color: var(--good); }
.battle-team-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--team) 75%, var(--text)); background: color-mix(in srgb, var(--team) 18%, transparent); border: 1px solid color-mix(in srgb, var(--team) 55%, transparent); white-space: nowrap; }
.board-challenges { flex-wrap: wrap; }
[data-board-tabs]:not(:empty) { margin: -4px 0 12px; }
@media (max-width: 760px) { .board-challenges { width: 100%; } .board-challenges button { flex: 1; white-space: nowrap; } .battle-jokers, .battle-board-jokers { display: none; } .battle-board td:nth-child(2) { white-space: normal; } }
.ch-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-mods li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.warn-text { color: #ffb86b; }
.run-row { cursor: pointer; }
.run-toggle { min-width: 32px; }
.board .run-detail-row td { white-space: normal; background: var(--bg-2); }
.run-item-detail { flex-basis: 100%; min-width: 0; }
.run-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px 24px; padding: 4px 0; }
.run-detail > div { min-width: 0; }
/* Challenge pools (Verwaltung → Challenge-Server): chips per pool, editor dialog with search */
.pool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pool-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.pool-tools [type="search"] { flex: 1 1 220px; min-width: 0; }
.pool-tools select { flex: 0 0 auto; width: auto; }
.pool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pool-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.pool-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; min-width: 0; opacity: .6; }
.pool-row.on { opacity: 1; background: rgba(255, 255, 255, .03); }
.pool-row input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-tier { flex: none; color: var(--muted); }
@media (pointer: coarse) { .pool-row { min-height: 40px; } }
@media (max-width: 760px) { .pool-tools select { flex: 1 1 100%; } .pool-list { max-height: none; overflow: visible; } .pool-name .faint { display: none; } }
.run-detail-list { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.run-detail-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.run-detail-list li .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-detail-list .num { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
.run-detail-list .grow { flex: 1; }
.run-group { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.run-group .user-inline span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-list { display: flex; flex-direction: column; gap: 8px; }
.run-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.run-item-main { flex: 1; min-width: min(260px, 100%); display: flex; flex-direction: column; gap: 4px; }
.how-to { margin-top: 28px; }
.how-to h3 { margin-top: 0; }
.how-to ol { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.challenge-info { margin-top: 28px; --split: 1fr; align-items: stretch; }
.challenge-info .how-to { margin-top: 0; }
.reward-lines { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.reward-bonus { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 6px 16px; }
.reward-bonus li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.reward-bonus li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-bonus li.got .amount { opacity: .55; }
.reward-got { color: var(--good); font-weight: 700; }
.reward-again { white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-coins { font-size: 13px; white-space: nowrap; }
.mc-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #a6e3a1; background: rgba(98, 180, 72, .12); border: 1px solid rgba(98, 180, 72, .45); }
.mc-badge span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Zusammen gespielt" (views/together.js): one match history over every game. */
.lol-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #e8c872; background: rgba(200, 155, 60, .12); border: 1px solid rgba(200, 155, 60, .45); }
.lol-logo { width: auto; height: 1.3em; flex: none; vertical-align: -0.3em; object-fit: contain; }
.lol-badge .lol-logo { height: 20px; }
.profile-edit-icon img.lol-logo { width: auto; height: 22px; }
.lol-badge span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-profile-lol { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.tg-rank { white-space: nowrap; }
.tg-champs { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.tg-champ { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 12px; }
.tg-champ img { width: 22px; height: 22px; border-radius: 50%; }
.tg-champ:not(:has(img)) { padding-left: 8px; }
.tg-pays { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tg-pay { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line-2); min-width: 92px; }
.tg-toolbar { justify-content: flex-start; }
.tg-toolbar h2 { margin-right: auto; }
select.input.tg-filter { width: 240px; max-width: 100%; }
.tg-acc .grow .small { white-space: normal; }
.tg-acc-rank { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 4px; }
.tg-list { display: grid; gap: 10px; }
.tg-match { padding: 12px 14px; display: grid; gap: 10px; }
.tg-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.tg-game { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tg-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-when { white-space: nowrap; }
.tg-sides { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.tg-side { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border-left: 3px solid var(--line-2); }
.tg-side.won { border-left-color: var(--good); }
.tg-side.mine { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.tg-team { width: 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-people { display: flex; flex-wrap: wrap; gap: 6px 12px; min-width: 0; flex: 1 1 auto; }
.tg-people .user-inline { min-width: 0; max-width: 100%; }
.tg-people .user-inline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-side-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.tg-score { font-family: var(--head); font-size: 22px; font-variant-numeric: tabular-nums; }
.tg-coins { font-weight: 600; color: var(--good); white-space: nowrap; }
.tg-vs { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.tg-legal { margin-top: 16px; }
.tg-source { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.tg-source legend { padding: 0 6px; font-weight: 700; }
@media (max-width: 760px) {
  .tg-toolbar .seg, select.input.tg-filter { width: 100%; }
  .tg-vs { width: 100%; text-align: center; }
  .tg-when { width: 100%; }
}
.ms-admin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-admin li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-admin li .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-admin .ms-icon { width: 32px; text-align: center; }
.setup-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-steps li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; color: var(--faint); }
.setup-steps .step-mark { width: 18px; flex-shrink: 0; text-align: center; font-weight: 700; line-height: 1.4; }
.setup-steps .step-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.setup-steps .step-text .small { color: var(--muted); }
.setup-steps .step-done, .setup-steps .step-running { color: var(--text); }
.setup-steps .step-done .step-mark { color: var(--good); }
.setup-steps .step-failed { color: var(--bad); }
.setup-steps .step-failed .small { color: var(--bad); }
.setup-steps .step-warn { color: #ffb86b; }
.setup-steps .step-warn .small { color: #ffb86b; }
.setup-steps .spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: step-spin .8s linear infinite; vertical-align: -1px; }
@keyframes step-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .setup-steps .spinner { animation: none; } }
.challenge-live .setup-steps { margin: 0; }
.setup-report { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.setup-report .ok { color: var(--good); }
.setup-report .bad { color: #ffb86b; }
.motd-preview { padding: 10px 12px; border-radius: 6px; background: #1d1d1d; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .challenge-live-head { flex-wrap: wrap; }
  .run-timer { font-size: 24px; width: 100%; }
  .challenge-table .hide-phone { display: none; }
  .challenge-table .show-phone { display: block; margin-top: 2px; }
  .milestone-track { grid-template-columns: 1fr 1fr; }
  .milestone-track li { padding: 7px 8px; }
  .challenge-address .btn { margin-left: 0; }
}
@media (max-width: 359px) {
  .milestone-track { grid-template-columns: 1fr; }
}

/* Sign-ups: members without a team */
.free-agents { border-style: dashed; }
.free-agent-list { display: flex; flex-direction: column; gap: 6px; }
.free-agent { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-width: 0; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap; }
.free-agent.me { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.free-agent .user-inline { min-width: 0; }
.free-agent-note { flex: 1 1 160px; min-width: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.free-agent-actions { margin-left: auto; }
@media (max-width: 760px) {
  .free-agents .section-head .btn { width: 100%; }
  .free-agent-note { flex-basis: 100%; }
}

/* Prizes: late payout */
.prize-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px dashed var(--line-2); }
.missing-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.missing-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; min-width: 0; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.missing-row .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.missing-row > span { flex: none; color: var(--muted); }
@media (max-width: 760px) { .prize-missing .btn { width: 100%; } }

/* ---------------------------------------------------------------- birthday */
.confetti { position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; pointer-events: none; }
.birthday-btn { font-size: 18px; }
.birthday-badge { background: color-mix(in srgb, #ff5d73 16%, transparent); border-color: color-mix(in srgb, #ff5d73 45%, transparent); }
.birthday-fields { grid-template-columns: 1fr 2fr; }
.birthday-pop { display: flex; flex-direction: column; gap: 16px; }
.birthday-hello { display: flex; align-items: center; gap: 16px; }
.birthday-hello h2 { margin: 0 0 4px; }
.birthday-cake { flex: none; font-size: 56px; line-height: 1; animation: daily-wiggle 2.4s ease-in-out infinite; }
.birthday-case { margin: 0 -20px; }
.birthday-pool summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.birthday-pool .reward-pool { max-height: 320px; overflow-y: auto; }
@media (max-width: 760px) {
  .birthday-case { margin: 0 -16px; }
  .birthday-cake { font-size: 42px; }
  .birthday-hello { gap: 12px; }
  .modal .birthday-fields { grid-template-columns: 1fr 2fr; }
}
@media (prefers-reduced-motion: reduce) { .birthday-cake { animation: none; } }

/* Discord role buttons (preview) and the role panel */
.dcp-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dcp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 14px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-btn.primary { background: #5865f2; }
.dc-pings { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dc-role-card { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 10px; min-width: 0; }
.dc-role-name { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }

/* ----------------------------------------------------------- custom matches */
.cm-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.cm-server { padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.cm-server-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cm-server-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-server.locked, .cm-server.offline { opacity: .75; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 14px; align-items: start; }
.cm-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cm-card.mine { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cm-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cm-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cm-vs { align-self: center; font-family: var(--head); font-weight: 700; color: var(--faint, var(--muted)); font-size: 15px; }
.cm-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.cm-side.winner { border-color: rgba(62, 207, 142, .45); }
.cm-side .btn { align-self: flex-start; }
.cm-side-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-side-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-score { font-family: var(--head); font-size: 22px; color: var(--muted); }
.cm-score.win { color: var(--good); }
.cm-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cm-slot { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.cm-slot.open .avatar { opacity: .5; }
.cm-player { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-player:hover { color: var(--accent); }
.cm-slot .btn-icon { margin-left: auto; padding: 2px 6px; }
.cm-actions { gap: 8px; flex-wrap: wrap; }
.cm-howto { padding: 16px; }
.cm-howto ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.cm-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cm-create-grid[hidden] { display: none; }
.cm-create-grid-3 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.cm-ut-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
/* Played matches, like the runs of the challenges. */
.cm-past { cursor: pointer; align-items: flex-start; }
.cm-past .run-item-main { min-width: 0; }
.cm-past-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; max-width: 560px; }
.cm-past-side { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.cm-past-side b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-past-side.right { flex-direction: row-reverse; text-align: right; }
.cm-past-side.win { color: var(--text); }
.cm-past-side.win b::after { content: ' 🏆'; }
.cm-past-score { font-family: var(--head); font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-past .run-item-detail { cursor: default; }
.cm-past-coins { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cm-past-coins .mine { color: var(--text); font-weight: 600; }
.cm-reward { display: flex; gap: 8px; align-items: baseline; }
.cm-past-detail { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; min-width: 0; }
.cm-past-admin { justify-content: flex-end; margin-top: 10px; }
.cm-past-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px 24px; }
.cm-past-lineup .run-group { margin-top: 6px; }
.custom-server-card .btn-primary { align-self: flex-start; margin-top: auto; }
.custom-server-card .server-banner .fallback { font-size: 64px; }
@media (max-width: 760px) {
  .cm-versus { grid-template-columns: minmax(0, 1fr); }
  .cm-vs { justify-self: center; }
  .cm-create-grid { grid-template-columns: minmax(0, 1fr); }
  .cm-actions .btn { flex: 1; }
  .cm-past-line { gap: 8px; }
  .cm-past-score { font-size: 19px; }
}

/* ------------------------------------------------------------ UT99 mod */
/* Kill feed lines, shared with the OBS HUD (ut99.css). */
.u-feed-line { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.u-name { color: var(--team, var(--text)); font-weight: 700; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.u-wicon { display: inline-flex; vertical-align: middle; }
.u-wicon svg, .uh-wicon { display: block; flex: none; }
.u-weapon { padding: 1px 9px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .85em; white-space: nowrap; }
.u-hs { color: var(--bad); font-weight: 700; font-size: .85em; letter-spacing: .04em; }
.u-tk { color: var(--bad); font-size: .85em; }
.u-feed-text { color: var(--muted); }
.u-call { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.u-call-spree { color: #ffb86b; }
.u-feed-line { flex-wrap: wrap; row-gap: 2px; }
.u-warn { color: #ffb86b; }
/* The UT99 part of a server under Gameserver → Server verwalten. */
.srv-mod { border-top: 1px solid var(--line); padding-top: 10px; }
.srv-mod > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; font-weight: 600; }
.srv-mod[open] > summary { margin-bottom: 10px; }
.srv-mod-body { display: flex; flex-direction: column; gap: 12px; }
.u-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.u-inline { display: flex; gap: 8px; align-items: center; min-width: 0; }
.u-inline .input { flex: 1; min-width: 0; }
.u-hud-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.u-hud-box > .btn { align-self: flex-start; }
.u-hud-parts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
@media (max-width: 760px) {
  .u-inline { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- caster page + overlay control */
.cc-preview-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* stinger preview on the caster page: a checkerboard shows what stays transparent */
.caster-stinger { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-conic-gradient(#2a2f3a 0 25%, #20242d 0 50%) 0 0 / 24px 24px; }
.caster-stinger canvas { display: block; width: 100%; height: 100%; }
.thumb-preview { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0d0f14; }
.thumb-preview canvas { display: block; width: 100%; height: 100%; }
.cc-preview {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #2b3140 linear-gradient(135deg, #39465e, #1a1e27);
}
.cc-preview iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .2)); pointer-events: none; }
.caster-previews { grid-template-columns: 1fr; align-content: start; }
.caster-help summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.caster-help ol { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.caster-help b { color: var(--text); }
.caster-help code { overflow-wrap: anywhere; }
.cc-main { max-width: 1100px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.cc-main .seg button { padding: 8px 12px; }
.cc-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.cc-offer > span:first-child { min-width: 0; font-weight: 600; }
@media (max-width: 760px) {
  .caster-card .section-head { align-items: flex-start; }
  .caster-card .u-inline { flex-wrap: wrap; }
  .caster-card .u-inline .input { flex-basis: 100%; }
}

/* ------------------------------------------------------ member statistics */
.ms-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.ms-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ms-card h3 { margin: 0; }
.ms-tiles { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ms-tile b { display: block; font-family: var(--head); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ms-tile span { color: var(--muted); font-size: 13px; }
.ms-tile.good b { color: var(--good); }
.ms-tile.bad b { color: var(--bad); }
.ms-chart { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-tip { color: var(--text); min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-legend { display: flex; gap: 14px; color: var(--muted); }
.ms-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ms-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ms-plot { position: relative; height: 120px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat; }
.ms-max { position: absolute; top: -1px; right: 0; transform: translateY(-100%); font-variant-numeric: tabular-nums; }
.ms-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ms-bar { all: unset; position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; height: 100%; cursor: pointer; padding: 0 1px; }
.ms-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.ms-bar.on, .ms-hit .ms-bar:hover { background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 4px; }
.ms-seg { display: block; width: min(100%, 22px); min-height: 2px; border-radius: 4px 4px 0 0; }
.ms-seg + .ms-seg { border-radius: 4px 4px 0 0; }
.c-accent { background: var(--accent); }
.c-good { background: var(--good); }
.c-bad { background: var(--bad); }
.ms-none { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ms-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); white-space: nowrap; }
.ms-axis span { overflow: visible; text-align: center; font-size: 11px; display: flex; justify-content: center; }
.ms-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-line polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.ms-line polygon { fill: var(--accent-soft); fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.ms-hit .ms-bar.on::after { content: ''; position: absolute; inset: 0 auto 0 50%; border-left: 1px dashed var(--muted); }
.ms-sources { display: flex; flex-direction: column; gap: 8px; }
.ms-source { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.ms-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ms-src-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ms-src-bar i { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.ms-source b { font-variant-numeric: tabular-nums; }
/* Economy dashboard (Coins & Belohnungen → Auswertung, economy-stats.js); reuses the ms-* charts. */
.c-gold { background: var(--gold); }
.c-accent-2 { background: var(--accent-2); }
.c-muted { background: var(--muted); }
.c-violet { background: #a78bfa; }
.ms-src-bar i.c-violet { background: #a78bfa; }
.ms-legend { flex-wrap: wrap; row-gap: 4px; }
.ms-legend + .ms-plot { margin-top: 18px; }
.eco-flows .ms-source { grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; }
.ms-src-bar i.c-accent { background: var(--accent); }
.ms-src-bar i.c-bad { background: var(--bad); }
.ms-src-bar i.c-gold { background: var(--gold); }
.ms-src-bar i.c-accent-2 { background: var(--accent-2); }
.ms-src-bar i.c-muted { background: var(--muted); }

/* Verwaltung → Kosten (views/costs.js) */
.cost-cats .ms-source { grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; }
.cost-cover { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 14px; }
.cost-due { display: flex; flex-direction: column; }
.cost-due-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cost-due-row:first-child { border-top: 0; padding-top: 0; }
.cost-due-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cost-due-name > b, .cost-due-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-due-row.overdue .cost-due-name .faint { color: var(--bad); }
.cost-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-table td.num, .cost-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-row { cursor: pointer; }
.cost-row.stopped { opacity: .5; }
.cost-name { min-width: 0; max-width: 260px; }
.cost-name b, .cost-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-amount { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (hover: hover) { .cost-row:hover td { background: rgba(255, 255, 255, .03); } }
@media (max-width: 760px) {
  .cost-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-table th:nth-child(2), .cost-table td:nth-child(2),
  .cost-table th:nth-child(4), .cost-table td:nth-child(4) { display: none; }
  .cost-name { max-width: 150px; }
  .cost-due-row.pay { flex-wrap: wrap; row-gap: 6px; }
  .cost-due-row.pay .cost-due-name { flex-basis: 100%; }
  .cost-due-row.pay .cost-num { flex: 1; }
  .cost-cats .ms-source { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name sum' 'bar bar' 'sub sub'; row-gap: 4px; }
  .cost-cats .ms-src-name { grid-area: name; }
  .cost-cats .ms-source > b { grid-area: sum; }
  .cost-cats .ms-src-bar { grid-area: bar; }
  .cost-cats .eco-sub { grid-area: sub; }
}
.eco-head { gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.eco-head p { margin: 0; min-width: min(260px, 100%); }
.eco-kpis { margin-bottom: 16px; gap: 12px 28px; }
.eco-sub { grid-column: 1 / -1; margin-top: -6px; }
.eco-row { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; }
.eco-row span { color: var(--muted); }
.eco-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.eco-members { margin-top: 16px; padding: 0; gap: 0; }
.eco-members h3 { margin-bottom: 4px; }
.eco-members .panel-pad p { margin: 0; }
.eco-table .good { color: var(--good); }
.eco-table .bad { color: var(--bad); }
.eco-table td { white-space: nowrap; }
.eco-table td.no-icons { white-space: normal; min-width: 180px; }
.eco-idle td { opacity: .55; }
.eco-modal h4 { margin: 18px 0 6px; }
.eco-who { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; max-width: 200px; min-height: 32px; }
.eco-who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.eco-who:hover span, .eco-who:focus-visible span { color: var(--accent); text-decoration: underline; }
/* economy rebalance (economy-rebalance.js) */
.ms-tile.warn b { color: var(--gold); }
.rb-head { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.rb-head .eco-kpis { margin-bottom: 0; }
.rb-head p { margin: 0; }
.rb-target { gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.rb-target label { font-weight: 600; min-width: 0; }
.rb-target .input { width: 96px; }
.rb-actions { gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.rb-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.rb-group { padding: 0; }
.rb-group > summary { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.rb-group > summary::-webkit-details-marker { display: none; }
.rb-group > summary::before { content: '▸'; color: var(--muted); }
.rb-group[open] > summary::before { content: '▾'; }
.rb-group > summary h3 { margin: 0; }
.rb-row { padding: 12px 18px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rb-row.has-tip { box-shadow: inset 3px 0 0 var(--accent); }
.rb-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.rb-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rb-link { margin-left: auto; }
.rb-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; }
.rb-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rb-part > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-tip { color: var(--accent); }
.rb-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.rb-foot p { margin: 0; flex: 1 1 260px; min-width: 0; }
.rb-btns { gap: 8px; flex-wrap: wrap; }
.rb-ok { color: var(--good); font-weight: 600; }
@media (max-width: 760px) {
  .ms-tile b { font-size: 22px; }
  .ms-plot { height: 100px; }
  .eco-table .eco-opt { display: none; }
  .eco-who { max-width: 140px; min-height: 40px; }
  .rb-head .ms-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-row { padding: 12px 14px 14px; }
  .rb-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-actions .btn-primary { width: 100%; }
  .rb-btns, .rb-btns .btn { width: 100%; }
}

/* ------------------------------------------------------ tournament themes */
/* A tournament can have its own looks (tournament-theme.js). Only how things
   look changes here, never what is shown or clickable. A member can put the
   same looks (and the profile styles below) on their profile page
   (profile-style.js); its head .profile-head gets the decoration of .t-header. */

/* Winter: snowflakes falling over the page. */
.tt-snow { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.tt-snow i {
  position: absolute; top: -20px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff 30%, rgba(255, 255, 255, .5) 60%, transparent 72%);
  animation: tt-fall var(--fall) linear var(--delay) infinite, tt-sway calc(var(--fall) / 3) ease-in-out var(--delay) infinite alternate;
}
.tt-snow i.flake { background: none; width: auto; height: auto; color: #fff; font: normal calc(var(--s) * 1.8)/1 sans-serif; font-variant-emoji: text; text-shadow: 0 0 6px rgba(180, 220, 255, .8); }
@keyframes tt-fall { to { top: 105%; } }
@keyframes tt-sway { from { translate: calc(var(--sway) * -1) 0; } to { translate: var(--sway) 0; } }
@media (prefers-reduced-motion: reduce) { .tt-snow { display: none; } }
body[data-t-theme="winter"] {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(150, 200, 255, .12), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgba(200, 230, 255, .08), transparent 60%),
    var(--bg);
}

/* Weihnachten: dark green-red night, snow and a string of lights over the head of the page. */
body[data-t-theme="xmas"] {
  background:
    radial-gradient(1100px 520px at 10% -10%, rgba(214, 40, 57, .18), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(30, 140, 80, .16), transparent 60%),
    #0d1311;
}
body[data-t-theme="xmas"] #app { --accent: #e23b4a; --accent-ink: #fff; --accent-hover: #f0606c; --accent-soft: rgba(226, 59, 74, .1); --accent-2: #2fa565; --panel: #151d1a; --panel-2: #1c2622; --bg-2: #111815; --line: #263530; --line-2: #33473f; --gold: #f2c94c; }
body[data-t-theme="xmas"] #app :is(.t-header, .profile-head) { position: relative; padding-top: 38px; }
body[data-t-theme="xmas"] #app :is(.t-header, .profile-head)::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 8px; height: 18px; pointer-events: none;
  background:
    radial-gradient(circle at 12px 11px, #ff4d5e 0 4px, transparent 5px) 0 0 / 96px 18px repeat-x,
    radial-gradient(circle at 36px 13px, #ffd34d 0 4px, transparent 5px) 0 0 / 96px 18px repeat-x,
    radial-gradient(circle at 60px 11px, #4dd88a 0 4px, transparent 5px) 0 0 / 96px 18px repeat-x,
    radial-gradient(circle at 84px 13px, #5aa9ff 0 4px, transparent 5px) 0 0 / 96px 18px repeat-x,
    linear-gradient(#3a4a3f, #3a4a3f) 0 6px / 100% 1px no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 220, 120, .6));
  animation: tt-twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes tt-twinkle { from { opacity: 1; } to { opacity: .55; } }
body[data-t-theme="xmas"] .tt-snow i.flake { text-shadow: 0 0 6px rgba(255, 255, 255, .7); }

/* Halloween: night purple and pumpkin orange, leaves and bats drifting down. */
body[data-t-theme="halloween"] {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(255, 122, 26, .2), transparent 60%),
    radial-gradient(1000px 600px at 0% 10%, rgba(120, 50, 170, .22), transparent 60%),
    #100b16;
}
body[data-t-theme="halloween"] #app { --accent: #ff7a1a; --accent-ink: #1a0d02; --accent-hover: #ff9a4d; --accent-soft: rgba(255, 122, 26, .1); --accent-2: #a46bff; --panel: #1a1322; --panel-2: #22192c; --bg-2: #150f1c; --line: #2f2440; --line-2: #3d2f52; --good: #8be04e; }
body[data-t-theme="halloween"] #app .panel { box-shadow: 0 0 0 1px rgba(255, 122, 26, .08), 0 12px 30px rgba(0, 0, 0, .35); }
body[data-t-theme="halloween"] #app h1 { text-shadow: 0 0 18px rgba(255, 122, 26, .45); }
body[data-t-theme="halloween"] .tt-snow i.flake { color: initial; font-variant-emoji: emoji; text-shadow: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }

/* Neon: cyberpunk night with a glowing grid, magenta and cyan edges. */
body[data-t-theme="neon"] {
  background:
    linear-gradient(transparent 60%, rgba(255, 46, 160, .12)),
    linear-gradient(rgba(0, 240, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(0, 240, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(1000px 500px at 50% -10%, rgba(255, 46, 160, .2), transparent 65%),
    #07060f;
  background-attachment: fixed;
}
body[data-t-theme="neon"] #app { --accent: #ff2ea0; --accent-ink: #fff; --accent-hover: #ff62b9; --accent-soft: rgba(255, 46, 160, .1); --accent-2: #00f0ff; --panel: rgba(16, 12, 30, .9); --panel-2: #1a1430; --bg-2: #0e0b1c; --line: #3a2a6a; --line-2: #4c3a85; --text: #f2eeff; --muted: #a9a2c8; --good: #39ffb0; }
body[data-t-theme="neon"] #app .panel { border-color: rgba(0, 240, 255, .35); box-shadow: 0 0 0 1px rgba(0, 240, 255, .08), 0 0 22px rgba(0, 240, 255, .12); }
body[data-t-theme="neon"] #app .tab.on, body[data-t-theme="neon"] #app .btn-primary { box-shadow: 0 0 16px rgba(255, 46, 160, .55); }
body[data-t-theme="neon"] #app h1, body[data-t-theme="neon"] #app h2 { text-shadow: 0 0 10px rgba(255, 46, 160, .7), 0 0 26px rgba(255, 46, 160, .35); }
body[data-t-theme="neon"] #app .match { border-color: rgba(255, 46, 160, .3); }

/* Sommer: sunset over the sea – warm, but still dark enough to read. */
body[data-t-theme="summer"] {
  background:
    radial-gradient(circle at 70% 130px, rgba(255, 214, 102, .6) 0 90px, rgba(255, 150, 70, .22) 160px, transparent 420px),
    linear-gradient(180deg, #3a1f3d 0, #6b2f45 260px, #1d2b3f 620px, #10202e);
  background-attachment: fixed;
}
body[data-t-theme="summer"] #app { --accent: #ffb547; --accent-ink: #2a1500; --accent-hover: #ffc76f; --accent-soft: rgba(255, 181, 71, .12); --accent-2: #2ec5c9; --panel: rgba(24, 28, 44, .8); --panel-2: #262b40; --bg-2: rgba(16, 20, 34, .9); --line: #3b3f58; --line-2: #4a4f6c; --muted: #b6b2c8; }
body[data-t-theme="summer"] #app .panel { backdrop-filter: blur(6px); }
/* Waves along the bottom of the head of the page. */
body[data-t-theme="summer"] #app :is(.t-header, .profile-head) { position: relative; padding-bottom: 40px; overflow: hidden; }
body[data-t-theme="summer"] #app :is(.t-header, .profile-head)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; opacity: .55;
  background:
    radial-gradient(14px 9px at 14px 0, transparent 92%, #2ec5c9 100%) 0 4px / 28px 9px repeat-x,
    radial-gradient(14px 9px at 14px 0, transparent 92%, rgba(46, 197, 201, .5) 100%) 14px 13px / 28px 9px repeat-x;
}

/* Esport: dark tactical look in orange, hard corners and an orange edge on the left. */
body[data-t-theme="esport"] {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 14px),
    radial-gradient(900px 420px at 0% -10%, rgba(255, 140, 0, .16), transparent 60%),
    #0c0d10;
}
body[data-t-theme="esport"] #app { --accent: #ff8c00; --accent-ink: #160b00; --accent-hover: #ffa53a; --accent-soft: rgba(255, 140, 0, .1); --accent-2: #4fb3ff; --panel: #15171c; --panel-2: #1d2027; --bg-2: #111318; --line: #262a33; --line-2: #343945; --radius: 3px; --radius-sm: 2px; }
body[data-t-theme="esport"] #app .panel { box-shadow: inset 3px 0 var(--accent); }
body[data-t-theme="esport"] #app h1, body[data-t-theme="esport"] #app h2, body[data-t-theme="esport"] #app .tab { text-transform: uppercase; letter-spacing: .06em; }

/* Retro: Windows 98 – teal desktop, grey windows with bevels, blue title bars, taskbar. */
body[data-t-theme="retro"] {
  background: #008080;
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}
body[data-t-theme="retro"] #app {
  --bg: #008080;
  --bg-2: #fff;
  --panel: #c0c0c0;
  --panel-2: #c0c0c0;
  --line: #808080;
  --line-2: #808080;
  --text: #000;
  --muted: #202020;
  --faint: #505050;
  --accent: #000080;
  --accent-ink: #fff;
  --accent-hover: #1084d0;
  --accent-soft: rgba(0, 0, 128, .08);
  --good: #007000;
  --bad: #c00000;
  --gold: #806000;
  --silver: #505050;
  --bronze: #8a4a1a;
  --info: #000080;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --head: 'VT323', 'Tahoma', 'Verdana', sans-serif;
  --raised: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000;
  color: #000;
  color-scheme: light;
  /* VT323 draws small; this lifts it to the size of the other text (Inter stays as it is). */
  font-size-adjust: .55;
  font-family: 'Tahoma', 'Verdana', 'Segoe UI', sans-serif;
}
body[data-t-theme="retro"] #app .panel,
body[data-t-theme="retro"] #app .empty { border: 0; box-shadow: var(--raised); background: #c0c0c0; }
body[data-t-theme="retro"] #app .panel-pad { padding: 18px; }
body[data-t-theme="retro"] #app .btn,
body[data-t-theme="retro"] #app .tab,
body[data-t-theme="retro"] #app .seg button {
  border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--raised); font-weight: 600;
}
body[data-t-theme="retro"] #app .btn:active,
body[data-t-theme="retro"] #app .tab.on { box-shadow: var(--sunken); background: #fff; color: #000; transform: none; }
body[data-t-theme="retro"] #app .btn-primary { outline: 1px solid #000; outline-offset: -1px; }
/* Windows 98 had no flat buttons. */
body[data-t-theme="retro"] #app .btn-ghost { box-shadow: var(--raised); background: #c0c0c0; }
/* Text straight on the teal desktop is white, like the labels of desktop icons. */
body[data-t-theme="retro"] #app :is(h1, h2, h3, .sub-head, .round-title, .muted, .faint, .small, .hint):not(:is(.panel, .match, .table-wrap, .empty, .badge, .chip, .btn) *) {
  color: #fff;
}
body[data-t-theme="retro"] #app .btn-danger { color: var(--bad); }
body[data-t-theme="retro"] #app .tab .tick { color: var(--good); }
body[data-t-theme="retro"] #app a:not(.btn):not(.badge) { color: #0000ee; text-decoration: underline; }
body[data-t-theme="retro"] #app .input { background: #fff; color: #000; border: 0; border-radius: 0; box-shadow: var(--sunken); }
body[data-t-theme="retro"] #app .badge,
body[data-t-theme="retro"] #app .chip { border-radius: 0; background: #c0c0c0; color: #000; border: 0; box-shadow: var(--raised); }
body[data-t-theme="retro"] #app .badge-live { color: var(--good); }
body[data-t-theme="retro"] #app .badge-live::before { box-shadow: none; }
body[data-t-theme="retro"] #app .match { background: #fff; border: 0; box-shadow: var(--sunken); }
body[data-t-theme="retro"] #app .match .score { font-family: var(--head); }
/* The tournament head is a window with a title bar. */
body[data-t-theme="retro"] #app :is(.t-header, .profile-head) { padding: 34px 20px 20px; position: relative; }
body[data-t-theme="retro"] #app :is(.t-header, .profile-head)::before {
  content: attr(data-title); position: absolute; left: 3px; right: 3px; top: 3px; height: 22px; padding: 0 64px 0 8px;
  display: flex; align-items: center; color: #fff; font: 700 13px/1 'Tahoma', 'Verdana', sans-serif;
  background: linear-gradient(90deg, #000080, #1084d0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Minimise, maximise and close – only drawn. */
body[data-t-theme="retro"] #app :is(.t-header, .profile-head)::after {
  content: ''; position: absolute; right: 6px; top: 6px; width: 52px; height: 16px; pointer-events: none;
  background:
    linear-gradient(#000, #000) 4px 11px / 6px 2px no-repeat,
    linear-gradient(#000, #000) 20px 4px / 8px 2px no-repeat,
    linear-gradient(#000, #000) 20px 4px / 1px 8px no-repeat,
    linear-gradient(#000, #000) 27px 4px / 1px 8px no-repeat,
    linear-gradient(#000, #000) 20px 11px / 8px 1px no-repeat,
    linear-gradient(45deg, transparent 45%, #000 45% 55%, transparent 55%) 40px 4px / 8px 8px no-repeat,
    linear-gradient(-45deg, transparent 45%, #000 45% 55%, transparent 55%) 40px 4px / 8px 8px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 0 0 / 16px 14px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 16px 0 / 16px 14px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) 36px 0 / 16px 14px no-repeat;
}
body[data-t-theme="retro"] #app :is(.t-header, .profile-head) h1 { font-weight: 400; }
body[data-t-theme="retro"] #app :is(.t-header, .profile-head) .desc,
body[data-t-theme="retro"] #app :is(.t-header, .profile-head) .meta { color: #000; }
body[data-t-theme="retro"] #app table th { background: #c0c0c0; color: #000; box-shadow: var(--raised); }
body[data-t-theme="retro"] #app table td { border-color: #808080; }
body[data-t-theme="retro"] #app .table-wrap { background: #fff; box-shadow: var(--sunken); }
/* Taskbar at the bottom, only decoration. */
.tt-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; height: calc(30px + env(safe-area-inset-bottom));
  padding: 3px 4px env(safe-area-inset-bottom); display: flex; align-items: flex-start; gap: 4px; pointer-events: none;
  background: #c0c0c0; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; color: #000; font: 12px/1 'Tahoma', 'Verdana', sans-serif;
}
.tt-taskbar > span { height: 24px; display: flex; align-items: center; padding: 0 8px; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.tt-start::before { content: ''; width: 14px; height: 12px; margin-right: 5px; background: conic-gradient(from 90deg at 50% 50%, #e33 0 25%, #2b2 0 50%, #fc0 0 75%, #36f 0); transform: skewY(-6deg); }
.tt-task { flex: 0 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; line-height: 24px; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000 !important; background: #e8e8e8; font-weight: 700; }
.tt-clock { margin-left: auto; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080 !important; }

/* --------------------------------------------------------- profile styles */
/* Looks only a profile page can have (server/members/profile-styles.js), on top of the
   tournament looks above. Same rule: colours, boxes, decoration – nothing else. */

/* Ozean: deep blue water, turquoise light from above. */
body[data-t-theme="ocean"] {
  background:
    radial-gradient(1100px 480px at 30% -10%, rgba(46, 197, 201, .18), transparent 60%),
    linear-gradient(180deg, #0a1a28, #07141f 600px);
  background-attachment: fixed;
}
body[data-t-theme="ocean"] #app { --accent: #2ec5c9; --accent-ink: #03191a; --accent-hover: #5fd8db; --accent-soft: rgba(46, 197, 201, .1); --accent-2: #4f8dff; --panel: #0f2231; --panel-2: #152b3d; --bg-2: #0b1a26; --line: #1f3a4f; --line-2: #2a4a63; --muted: #9bb3c4; }
body[data-t-theme="ocean"] #app .profile-head { background: linear-gradient(180deg, #123047, #0f2231); }

/* Wald: dark green, moss and a bit of wood. */
body[data-t-theme="forest"] {
  background:
    radial-gradient(1000px 500px at 0% -10%, rgba(124, 197, 107, .14), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(176, 124, 70, .12), transparent 60%),
    #0b130d;
}
body[data-t-theme="forest"] #app { --accent: #7cc56b; --accent-ink: #0c1a08; --accent-hover: #9bd78d; --accent-soft: rgba(124, 197, 107, .1); --accent-2: #c8955a; --panel: #142019; --panel-2: #1b2a21; --bg-2: #101a13; --line: #24362a; --line-2: #314636; --muted: #a3b3a2; }
/* The head of the profile takes a little of the accent colour. */
body:is([data-t-theme="forest"], [data-t-theme="sakura"], [data-t-theme="midnight"]) #app .profile-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* Kirschblüte: night blue with soft pink. */
body[data-t-theme="sakura"] {
  background:
    radial-gradient(1000px 480px at 80% -10%, rgba(255, 143, 184, .18), transparent 60%),
    radial-gradient(900px 420px at 0% 0%, rgba(140, 120, 255, .1), transparent 60%),
    #150d14;
}
body[data-t-theme="sakura"] #app { --accent: #ff8fb8; --accent-ink: #2a0716; --accent-hover: #ffb0cc; --accent-soft: rgba(255, 143, 184, .1); --accent-2: #b9a6ff; --panel: #221522; --panel-2: #2b1b2b; --bg-2: #1a1019; --line: #3a2638; --line-2: #4a3147; --muted: #c0a9bb; }
body[data-t-theme="sakura"] #app h1 { color: #ffd6e6; }

/* Mitternacht: violet night with a few still stars. */
body[data-t-theme="midnight"] {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 33% 8%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 22%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 76% 12%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 30%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 22% 40%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1100px 520px at 50% -10%, rgba(157, 140, 255, .18), transparent 65%),
    #0a0a1a;
  background-attachment: fixed;
}
body[data-t-theme="midnight"] #app { --accent: #9d8cff; --accent-ink: #0d0826; --accent-hover: #b9adff; --accent-soft: rgba(157, 140, 255, .1); --accent-2: #5ad1ff; --panel: #15152c; --panel-2: #1c1c38; --bg-2: #101024; --line: #29294a; --line-2: #35355d; --muted: #a6a6c8; }

/* Schwarz-Gold: black boxes with thin golden edges. */
body[data-t-theme="gold"] {
  background:
    radial-gradient(1000px 460px at 50% -12%, rgba(232, 193, 103, .14), transparent 62%),
    #08070a;
}
body[data-t-theme="gold"] #app { --accent: #e8c167; --accent-ink: #1c1405; --accent-hover: #f3d58e; --accent-soft: rgba(232, 193, 103, .08); --accent-2: #c9a2ff; --panel: #121014; --panel-2: #1a171c; --bg-2: #0e0c10; --line: #3a3020; --line-2: #4d3f26; --muted: #b3aa98; }
body[data-t-theme="gold"] #app .panel { border-color: rgba(232, 193, 103, .35); box-shadow: inset 0 1px rgba(255, 230, 170, .08), 0 12px 30px rgba(0, 0, 0, .45); }
body[data-t-theme="gold"] #app h1, body[data-t-theme="gold"] #app h2 {
  background: linear-gradient(180deg, #fff1c8, #e8c167 55%, #b8862f); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The member's card on the members page wears the style, too: the same
   colours as its profile, as background, edge and accent of the card. */
.user-card[data-ps] {
  --accent: var(--psc-accent); --accent-ink: var(--psc-ink, #111);
  background: var(--psc-bg); border-color: var(--psc-edge); color: var(--psc-text, var(--text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--psc-edge) 40%, transparent), var(--psc-glow, 0 0 0 transparent);
}
.user-card[data-ps] .info b { color: var(--psc-name, var(--text)); }
.user-card[data-ps] .faint { color: var(--psc-faint, var(--faint)); }
.user-card[data-ps="ocean"] { --psc-accent: #2ec5c9; --psc-bg: linear-gradient(180deg, #123047, #0b1a26); --psc-edge: #2a5a73; --psc-name: #bdf3f4; }
.user-card[data-ps="forest"] { --psc-accent: #7cc56b; --psc-bg: linear-gradient(180deg, #1d3322, #101a13); --psc-edge: #3d5a3c; --psc-name: #d4f0cc; }
.user-card[data-ps="sakura"] { --psc-accent: #ff8fb8; --psc-bg: linear-gradient(180deg, #3a2134, #1a1019); --psc-edge: #6a3c5c; --psc-name: #ffd6e6; }
.user-card[data-ps="midnight"] {
  --psc-accent: #9d8cff; --psc-edge: #3e3a78; --psc-name: #dcd6ff;
  --psc-bg: radial-gradient(1.5px 1.5px at 18% 14%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 72% 9%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 30%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 30% 34%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(180deg, #1f1d44, #0e0e22);
}
.user-card[data-ps="winter"] { --psc-accent: #96c8ff; --psc-bg: linear-gradient(180deg, #1c2a3f, #121823); --psc-edge: #3a5478; --psc-name: #e4f1ff; }
.user-card[data-ps="summer"] { --psc-accent: #ffb547; --psc-bg: radial-gradient(circle at 75% 18%, rgba(255, 214, 102, .45) 0 26px, transparent 70px), linear-gradient(180deg, #5a2a40, #2a2a44 60%, #15243a); --psc-edge: #7a4a5a; --psc-name: #ffe2b0; }
.user-card[data-ps="halloween"] { --psc-accent: #ff7a1a; --psc-bg: radial-gradient(120px 90px at 85% 0%, rgba(255, 122, 26, .22), transparent 70%), linear-gradient(180deg, #24182f, #130d19); --psc-edge: #5a3a6a; --psc-name: #ffc08f; }
.user-card[data-ps="xmas"] {
  --psc-accent: #e23b4a; --psc-ink: #fff; --psc-edge: #2f5a44; --psc-name: #ffe9ea;
  --psc-bg: radial-gradient(circle at 12px 8px, #ff4d5e 0 3px, transparent 4px) 0 0 / 48px 16px repeat-x, radial-gradient(circle at 36px 10px, #ffd34d 0 3px, transparent 4px) 0 0 / 48px 16px repeat-x,
    linear-gradient(180deg, #1b2a23, #111815);
}
.user-card[data-ps="esport"] { --psc-accent: #ff8c00; --psc-bg: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 12px), linear-gradient(180deg, #1c1f26, #111318); --psc-edge: #3a3f4a; --psc-name: #ffd4a0; border-radius: 3px; box-shadow: inset 3px 0 #ff8c00; }
.user-card[data-ps="neon"] { --psc-accent: #ff2ea0; --psc-ink: #fff; --psc-bg: linear-gradient(rgba(0, 240, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(0, 240, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px, #0c0918; --psc-edge: rgba(0, 240, 255, .5); --psc-glow: 0 0 18px rgba(0, 240, 255, .18); --psc-name: #ffd0ea; }
.user-card[data-ps="neon"] .info b { text-shadow: 0 0 10px rgba(255, 46, 160, .8); }
.user-card[data-ps="gold"] { --psc-accent: #e8c167; --psc-ink: #1c1405; --psc-bg: radial-gradient(160px 80px at 50% 0%, rgba(232, 193, 103, .16), transparent 70%), #121014; --psc-edge: rgba(232, 193, 103, .55); --psc-name: #f3d58e; }
/* Retro: a grey Windows 98 window with black text. */
.user-card[data-ps="retro"] {
  --psc-accent: #000080; --psc-ink: #fff; --psc-bg: #c0c0c0; --psc-edge: #c0c0c0; --psc-name: #000; --psc-text: #000; --psc-faint: #404040;
  border-radius: 0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.user-card[data-ps="retro"] .info b { font-family: 'Tahoma', 'Verdana', sans-serif; }
.user-card[data-ps="retro"] .input { background: #fff; color: #000; border: 0; border-radius: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000; }
.user-card[data-ps="retro"] .btn { color: #000; border-radius: 0; }
.user-card[data-ps="retro"] .badge { border-radius: 0; background: #dfdfdf; }
.user-card[data-ps] .user-card-pic .steam-pic { box-shadow: 0 0 0 2px var(--psc-edge); }

/* The picker. */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 10px; }
.ps-group { margin: 18px 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ps-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; padding: 8px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); cursor: pointer;
}
.ps-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ps-card.locked { cursor: help; }
.ps-card.locked .ps-swatch { filter: grayscale(.85) brightness(.7); }
.ps-swatch { display: block; height: 62px; border-radius: 6px; background: var(--ps-bg); position: relative; overflow: hidden; margin-bottom: 4px; }
.ps-swatch i { position: absolute; left: 10px; right: 30px; height: 18px; border-radius: 4px; background: var(--ps-box); box-shadow: inset 3px 0 var(--ps-accent); }
.ps-swatch i:first-child { top: 10px; }
.ps-swatch i:last-child { top: 34px; right: 50px; }
.ps-swatch::after { content: ''; position: absolute; right: 10px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--ps-accent); }
.ps-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-text { color: var(--muted); font-size: 13px; line-height: 1.3; }
.ps-on { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
/* Verwaltung → Aussehen. */
.ps-admin-table td { vertical-align: middle; }
.ps-admin-name { white-space: nowrap; font-weight: 600; }
.ps-need { width: 90px; display: inline-block; margin-right: 8px; }
.ps-admin-table th { text-align: left; }
@media (hover: hover) { .ps-card:not(.locked):hover { border-color: var(--line-2); } }
@media (max-width: 760px) {
  .ps-swatch { height: 44px; }
  .ps-swatch i { height: 12px; }
  .ps-swatch i:last-child { top: 26px; }
  .ps-on { top: 10px; left: 10px; }
  .ps-need { width: 64px; margin-right: 0; }
  .ps-default { display: none; }
  .ps-admin-name { white-space: normal; }
}

/* ---------------------------------------------------------- daily puzzles */
.alert.success { border-color: rgba(62, 207, 142, .45); color: #b5f0d4; background: rgba(62, 207, 142, .08); }
.pz-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 20px; padding: 0 0 0 18px; color: var(--muted); font-size: 14px; }
.pz-steps li::marker { color: var(--accent); font-weight: 700; }
.pz-steps b { color: var(--text); }
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.pz-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pz-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pz-head h3 { font-size: 22px; }
.pz-icon { font-size: 30px; line-height: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); flex: none; }
.pz-reward { color: var(--muted); }
.pz-form { display: flex; flex-direction: column; gap: 10px; }
.pz-play { align-self: flex-start; }
.pz-text { resize: vertical; min-height: 76px; font-size: 14px; }
.pz-actions { justify-content: flex-end; }
.pz-login { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pz-link { color: var(--accent); text-decoration: underline; }
.pz-done { font-weight: 600; }
.pa-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 12px; }
.pa-icon { display: flex; align-items: center; gap: 8px; }
.pa-icon .input { flex: 1; min-width: 0; }
.pa-icon-preview { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.pa-icon-preview img, .pz-icon img { object-fit: contain; border-radius: 6px; }
.pz-icon .tab-icon, .pa-icon-preview .tab-icon { margin: 0; vertical-align: 0; }
.pa-item legend { padding: 0 6px; font-family: var(--head); font-size: 17px; }
.pz-solvers .sub-head { margin: 4px 0 8px; font-size: 14px; }
.pz-solvers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pz-solvers summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: 6px; list-style: none; min-width: 0; }
.pz-solvers summary::-webkit-details-marker { display: none; }
.pz-solvers summary .user-inline { min-width: 0; overflow: hidden; }
.pz-solvers summary .user-inline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-solvers summary > .muted { flex: none; }
.pz-solvers details[open] summary, .pz-solvers summary:focus-visible { background: var(--panel-2); }
@media (hover: hover) { .pz-solvers summary:hover { background: var(--panel-2); } }
.pz-share { margin: 6px 0 4px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 13px/1.45 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
@media (max-width: 760px) {
  .pz-steps { flex-direction: column; margin-top: -4px; }
}
@media (pointer: coarse) { .pz-solvers summary { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { body[data-t-theme="xmas"] #app :is(.t-header, .profile-head)::before { animation: none; } }

/* Minecraft matches (views/minecraft-match.js): what each team found */
.mc-items summary { cursor: pointer; }
.mc-item-list { margin: 6px 0 0; padding-left: 22px; line-height: 1.6; }

/* ------------------------------------------------------------------- polls */
.pl-list { display: grid; gap: 16px; }
.pl-card { padding: 18px 20px; display: grid; gap: 10px; min-width: 0; scroll-margin-top: 80px; }
.pl-card.closed { opacity: .92; }
.pl-card.pl-focus { box-shadow: 0 0 0 2px var(--accent); }
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-kind { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-question { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.pl-desc { color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--faint, var(--muted)); }
.pl-opts, .pl-dates { display: grid; gap: 8px; }
.pl-opt, .pl-date { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); min-width: 0; }
.pl-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; transition: width .3s; }
.pl-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.pl-card.closed .pl-opt { cursor: default; }
.pl-opt > :not(.pl-bar), .pl-date > :not(.pl-bar) { position: relative; }
.pl-opt input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.pl-tick { width: 18px; flex: none; color: var(--accent); font-weight: 700; text-align: center; }
.pl-label { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; font-weight: 600; }
.pl-names { font-size: 12px; font-weight: 400; color: var(--muted); }
.pl-count { flex: none; display: grid; justify-items: end; font-size: 12px; color: var(--muted); }
.pl-count b { font-family: var(--head); font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-opt.mine, .pl-date.mine { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.pl-opt.win { border-color: var(--gold); }
.pl-opt.win .pl-bar { background: color-mix(in srgb, var(--gold) 22%, transparent); }
.pl-date { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 10px 14px; }
.pl-date.best { border-color: var(--gold); }
.pl-date .pl-bar { background: color-mix(in srgb, var(--good) 14%, transparent); }
.pl-when { display: grid; min-width: 0; }
.pl-when b { font-family: var(--head); font-size: 18px; white-space: nowrap; }
.pl-when span { font-size: 13px; color: var(--muted); }
.pl-tally { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pl-yes { color: var(--good); font-weight: 700; }
.pl-maybe { color: var(--gold); font-weight: 700; }
.pl-answer button[data-answer="yes"].on { background: var(--good); color: #0d1a12; }
.pl-answer button[data-answer="maybe"].on { background: var(--gold); color: #1e1606; }
.pl-answer button[data-answer="no"].on { background: var(--bad); color: #fff; }
.pl-take { justify-self: end; }
.pl-who { grid-column: 1 / -1; display: grid; gap: 2px; font-size: 12px; overflow-wrap: anywhere; }
.pl-voters { display: flex; align-items: center; gap: 8px; }
.pl-actions { flex-wrap: wrap; gap: 8px; }
.pl-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.pl-row { display: flex; gap: 6px; align-items: center; }
.pl-row .input { flex: 1; min-width: 0; }
.pla-links { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }
.pla-links a { color: var(--accent); }
.t-polls { margin: 0 0 16px; }
@media (max-width: 760px) {
  .pl-card { padding: 14px; }
  .pl-question { font-size: 18px; }
  .pl-date { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-answer, .pl-take { grid-column: 1 / -1; }
  .pl-answer { display: grid; grid-template-columns: repeat(3, 1fr); }
  .pl-take { justify-self: stretch; }
}
@media (pointer: coarse) { .pl-opt { min-height: 48px; } .pl-opt input { width: 22px; height: 22px; } }
.pl-card.pinned { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pl-pin { font-size: 12px; font-weight: 700; color: var(--accent); }

/* -------------------------------------------------------------- DACHCS-Liga */
/* The clan's teams in the DACH CS league (views/dachcs.js), read from dachcs.de. */
.dc-logo { border-radius: 8px; object-fit: contain; flex: none; background: var(--bg-2); }
.dc-logo-text { display: inline-flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700; color: var(--muted); border: 1px solid var(--line); }
.dc-team-head { align-items: center; gap: 12px; }
.dc-team-head h2 { margin: 0; }
.dc-team-head p { margin: 2px 0 0; }
.dc-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 8px; }
.dc-roster { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.dc-list { display: grid; gap: 10px; }
.dc-match {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px;
  padding: 12px 16px; color: inherit; text-decoration: none; border-left: 4px solid var(--line);
}
.dc-match { position: relative; }
.dc-cover { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.dc-match > :not(.dc-cover) { position: relative; z-index: 1; pointer-events: none; }
.dc-match .dc-end a, .dc-match .dc-end .btn { pointer-events: auto; }
.dc-match:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dc-match.dc-win { border-left-color: var(--good); }
.dc-match.dc-loss { border-left-color: var(--bad); }
.dc-when { display: grid; min-width: 86px; }
.dc-when b { font-family: var(--head); font-size: 17px; white-space: nowrap; }
.dc-when span { font-size: 12px; color: var(--muted); }
.dc-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
/* A team's own list leaves its own name out: score first, then the opponent. */
.dc-vs.one { grid-template-columns: auto minmax(0, 1fr); justify-content: start; }
.dc-vs.one .dc-side.right { justify-content: flex-start; }
.dc-left { white-space: nowrap; }
.dc-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-side.right { justify-content: flex-end; }
.dc-side b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-score { font-family: var(--head); font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dc-maps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dc-map { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); }
.dc-map em { font-style: normal; color: var(--muted); }
.dc-map.win b { color: var(--good); }
.dc-map.loss b { color: var(--bad); }
.dc-table .dc-us td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.dc-row-team { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; }
.dc-row-team a { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.dc-seasons a { color: inherit; }
.dc-past { margin-top: 8px; }
.dc-past summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 0; min-height: 40px; display: flex; align-items: center; gap: 8px; list-style: none; }
.dc-past summary::-webkit-details-marker { display: none; }
.dc-past summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.dc-past[open] summary::before { transform: rotate(45deg); }
.dc-past summary:hover { color: var(--text); }
.dc-past .table-wrap { margin-top: 4px; }
.dca-team { display: grid; gap: 10px; margin-bottom: 14px; }
.dca-head { display: flex; align-items: center; gap: 12px; }
.dca-head b { display: block; }
.dca-head .small { display: block; }
.dca-streams { display: grid; gap: 8px; }
.dca-stream { display: grid; gap: 4px; }
.dca-stream-row { display: flex; gap: 8px; }
.dca-stream-row .input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .dc-match { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .dc-vs { grid-column: 1 / -1; order: 2; }
  .dc-end { order: 1; }
  .dc-side b { font-size: 14px; }
  .dc-maps { order: 3; }
  /* With a stream button the right part gets its own row under the teams. */
  .dc-match:has(.dc-stream) .dc-end { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
  .dc-match:has(.dc-stream) .dc-maps { order: 4; }
  /* Phones: season table without lost games and round difference. */
  .dc-seasons th:nth-child(6), .dc-seasons td:nth-child(6), .dc-seasons th:nth-child(7), .dc-seasons td:nth-child(7),
  .dc-table th:nth-child(5), .dc-table td:nth-child(5) { display: none; }
  .dc-row-team { max-width: 150px; }
  .board.dc-table th, .board.dc-table td, .board.dc-seasons th, .board.dc-seasons td { padding-left: 8px; padding-right: 8px; }
}
.dc-home-title { display: flex; align-items: center; gap: 10px; }
.dc-home-title img { height: 1.3em; width: auto; flex: none; }
.dc-credit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.dc-credit img { height: 28px; width: auto; display: block; border-radius: 4px; }