/* DeesCorp design system. The logo is black / white / grey, so the UI is a calm monochrome with one soft highlight.
   To restyle everything change the tokens in :root only. */
:root {
  --dc-primary: #f4f4f5;          /* brand: primary buttons, active menu, focus */
  --dc-primary-rgb: 244, 244, 245;
  --dc-on-primary: #09090b;
  --dc-bg: #09090b;               /* page */
  --dc-surface: #111113;          /* cards, sidebar, modals */
  --dc-surface-2: #18181b;        /* inputs, hover, table header */
  --dc-line: #27272a;
  --dc-line-soft: #1f1f23;
  --dc-text: #fafafa;
  --dc-muted: #a1a1aa;
  --dc-faint: #71717a;
  --dc-ok: #4ade80;
  --dc-warn: #fbbf24;
  --dc-bad: #f87171;
  --dc-radius: 14px;
  --dc-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.6);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--dc-bg);
  --bs-body-color: var(--dc-text);
  --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-secondary-color: var(--dc-muted);
  --bs-tertiary-color: var(--dc-faint);
  --bs-border-color: var(--dc-line);
  --bs-tertiary-bg: var(--dc-surface-2);
  --bs-secondary-bg: var(--dc-surface-2);
  --bs-primary: var(--dc-primary);
  --bs-primary-rgb: var(--dc-primary-rgb);
  --bs-link-color: var(--dc-text);
  --bs-link-color-rgb: 250, 250, 250;
  --bs-link-hover-color: var(--dc-muted);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: var(--dc-radius);
}
body { background: var(--dc-bg); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { letter-spacing: -.02em; }
::selection { background: rgba(var(--dc-primary-rgb), .25); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid rgba(var(--dc-primary-rgb), .6); outline-offset: 2px; }

/* ---------- surfaces ---------- */
.card, .modal-content, .swal2-popup { background: var(--dc-surface) !important; border: 1px solid var(--dc-line) !important; border-radius: var(--dc-radius) !important; box-shadow: var(--dc-shadow); }
.card { --bs-card-bg: var(--dc-surface); --bs-card-border-color: var(--dc-line); }
.modal-header, .modal-footer { border-color: var(--dc-line-soft); }
.modal-backdrop { --bs-backdrop-opacity: .65; backdrop-filter: blur(3px); }
.text-secondary { color: var(--dc-muted) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 10px; font-weight: 500; transition: background .15s, border-color .15s, color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: var(--dc-primary); --bs-btn-border-color: var(--dc-primary); --bs-btn-color: var(--dc-on-primary);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: var(--dc-on-primary);
  --bs-btn-active-bg: #d4d4d8; --bs-btn-active-border-color: #d4d4d8; --bs-btn-active-color: var(--dc-on-primary);
  --bs-btn-disabled-bg: #52525b; --bs-btn-disabled-border-color: #52525b; --bs-btn-disabled-color: #d4d4d8;
  --bs-btn-focus-shadow-rgb: 244, 244, 245; font-weight: 600;
}
.btn-outline-secondary, .btn-outline-primary { --bs-btn-color: var(--dc-text); --bs-btn-border-color: var(--dc-line); --bs-btn-hover-bg: var(--dc-surface-2); --bs-btn-hover-border-color: #3f3f46; --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--dc-surface-2); --bs-btn-active-border-color: #3f3f46; --bs-btn-active-color: #fff; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--dc-muted); padding: .35rem .5rem; line-height: 1; border-radius: 8px; }
.btn-ghost:hover { background: var(--dc-surface-2); color: #fff; }
.btn-ghost.danger:hover { color: var(--dc-bad); background: rgba(248,113,113,.1); }
.btn .icon { vertical-align: -.2em; }
.icon { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- forms ---------- */
.form-control, .form-select { background-color: var(--dc-surface-2); border-color: var(--dc-line); border-radius: 10px; padding: .6rem .8rem; color: var(--dc-text); }
.form-control::placeholder { color: var(--dc-faint); }
.form-control:focus, .form-select:focus { background-color: var(--dc-surface-2); border-color: #52525b; box-shadow: 0 0 0 .22rem rgba(var(--dc-primary-rgb), .12); color: #fff; }
.form-control:disabled { opacity: .55; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--dc-muted); margin-bottom: .35rem; }
.form-text { color: var(--dc-faint); font-size: .75rem; }
.form-select-sm, .form-control-sm { padding: .4rem .7rem; font-size: .85rem; }
.form-check-input { background-color: var(--dc-surface-2); border-color: #52525b; }
.form-check-input:checked { background-color: var(--dc-primary); border-color: var(--dc-primary); }

/* ---------- badges, chips ---------- */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid var(--dc-line); background: var(--dc-surface-2); color: var(--dc-muted); white-space: nowrap; }
.pill.light { background: rgba(var(--dc-primary-rgb), .12); border-color: rgba(var(--dc-primary-rgb), .25); color: var(--dc-text); }
.pill.ok { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.25); color: var(--dc-ok); }
.pill.warn { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); color: var(--dc-warn); }
.pill.bad { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.25); color: var(--dc-bad); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #3f3f46, #18181b); border: 1px solid #3f3f46; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; color: #e4e4e7; flex: none; text-transform: uppercase; overflow: hidden; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar { position: relative; }
.player-link { color: inherit; text-decoration: none; }
.player-link:hover, .player-link:focus-visible { text-decoration: underline; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.avatar img.ok { opacity: 1; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--dc-muted); background: var(--dc-surface-2); border: 1px solid var(--dc-line-soft); padding: .1rem .4rem; border-radius: 6px; }
.cell-two { line-height: 1.25; min-width: 0; }
.cell-two .t { font-weight: 600; }
.cell-two .s { color: var(--dc-faint); font-size: .8rem; }

/* ---------- app shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 264px; flex: none; background: var(--dc-surface); border-right: 1px solid var(--dc-line) !important; display: flex; flex-direction: column; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; } }
.sidebar .offcanvas-header { border-bottom: 1px solid var(--dc-line-soft); }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.1rem .9rem; font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; background: #f4f4f5; padding: 3px; object-fit: contain; flex: none; }
.sidebar-section { color: var(--dc-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; padding: .9rem 1.1rem .35rem; }
.sidebar-nav { padding: 0 .65rem; display: grid; gap: 2px; align-content: start; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; color: var(--dc-muted); border-radius: 10px; padding: .6rem .8rem; text-decoration: none; font-weight: 500; font-size: .92rem; border: 1px solid transparent; }
.sidebar-link .icon { width: 1.2rem; height: 1.2rem; }
.sidebar-link:hover { background: var(--dc-surface-2); color: #fff; }
.sidebar-link.active { background: var(--dc-surface-2); color: #fff; border-color: var(--dc-line); box-shadow: inset 3px 0 0 var(--dc-primary); }
.sidebar-foot { margin-top: auto; padding: .9rem; border-top: 1px solid var(--dc-line-soft); }
.user-card { display: flex; align-items: center; gap: .65rem; padding: .5rem; border-radius: 12px; }
.user-card .name { font-weight: 600; font-size: .9rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .role { color: var(--dc-faint); font-size: .75rem; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: rgba(9,9,11,.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dc-line-soft); }
@media (min-width: 992px) { .topbar { padding: .7rem 1.5rem; } }
.page { padding: 1.25rem; max-width: 1280px; width: 100%; margin: 0 auto; }
@media (min-width: 992px) { .page { padding: 2rem 2.25rem 3rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.page-head p { margin: .25rem 0 0; color: var(--dc-muted); font-size: .92rem; }

/* ---------- stat cards ---------- */
.stat { padding: 1rem 1.15rem; height: 100%; }
.stat .k { color: var(--dc-muted); font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.stat .v { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.stat .h { color: var(--dc-faint); font-size: .78rem; }

/* ---------- toolbar + segmented ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--dc-line-soft); }
.segmented { display: inline-flex; padding: 3px; background: var(--dc-surface-2); border: 1px solid var(--dc-line); border-radius: 11px; gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--dc-muted); padding: .35rem .85rem; border-radius: 8px; font-size: .85rem; font-weight: 600; }
.segmented button.on { background: var(--dc-primary); color: var(--dc-on-primary); }
.table-card { padding: 0; overflow: hidden; }
.table-card .table-responsive { padding: 0 .25rem .25rem; }

/* ---------- tables (DataTables) ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--dc-text); --bs-table-border-color: var(--dc-line-soft); --bs-table-hover-bg: rgba(255,255,255,.025); --bs-table-hover-color: var(--dc-text); margin: 0; }
.table > thead > tr > th { color: var(--dc-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; background: transparent; border-bottom: 1px solid var(--dc-line) !important; padding: .85rem 1rem; white-space: nowrap; }
.table > tbody > tr > td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--dc-line-soft); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { box-shadow: none !important; }
div.dt-container { padding: 0; }
div.dt-container > .row { margin: 0; padding: .75rem 1rem; align-items: center; row-gap: .5rem; }
div.dt-container > .row:first-child { border-bottom: 1px solid var(--dc-line-soft); }
div.dt-container > .row:last-child { border-top: 1px solid var(--dc-line-soft); }
div.dt-container .dt-search input, div.dt-container .dt-length select { background-color: var(--dc-surface-2); border: 1px solid var(--dc-line); color: var(--dc-text); border-radius: 10px; padding: .45rem .75rem; }
div.dt-container .dt-search input { min-width: 220px; margin-left: .5rem; }
div.dt-container .dt-info { color: var(--dc-faint); font-size: .82rem; }
div.dt-container .dt-length label, div.dt-container .dt-search label { color: var(--dc-muted); font-size: .85rem; }
.pagination { gap: 4px; margin: 0; }
.page-link { --bs-pagination-bg: transparent; --bs-pagination-border-color: transparent; --bs-pagination-color: var(--dc-muted); --bs-pagination-hover-bg: var(--dc-surface-2); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: transparent; --bs-pagination-active-bg: var(--dc-primary); --bs-pagination-active-border-color: var(--dc-primary); --bs-pagination-active-color: var(--dc-on-primary); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent; --bs-pagination-disabled-color: #3f3f46; border-radius: 8px !important; min-width: 34px; text-align: center; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--dc-muted); }
.empty .icon { width: 2.4rem; height: 2.4rem; color: var(--dc-faint); margin-bottom: .6rem; }

/* ---------- matrix ---------- */
.matrix td, .matrix th { text-align: center; vertical-align: middle; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix tr:hover td { background: transparent; }

/* ---------- auth + landing ---------- */
.glow { background: radial-gradient(48rem 24rem at 50% -10rem, rgba(var(--dc-primary-rgb), .14), transparent 70%), radial-gradient(30rem 20rem at 90% 10%, rgba(255,255,255,.04), transparent 70%); }
.auth-wrap { min-height: 100vh; display: grid; }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.1fr .9fr; } }
.auth-side { padding: 3rem; display: none; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--dc-line-soft); background: var(--dc-surface); }
@media (min-width: 992px) { .auth-side { display: flex; } }
.auth-form { display: grid; place-items: center; padding: 1.5rem; }
.auth-form .card { width: 100%; max-width: 420px; padding: 1.75rem; }
.feature { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; color: var(--dc-muted); }
.feature .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--dc-surface-2); border: 1px solid var(--dc-line); display: grid; place-items: center; color: #fff; flex: none; }
.feature b { color: #fff; display: block; font-size: .95rem; }
.nav-glass { position: sticky; top: 0; z-index: 30; background: rgba(9,9,11,.75); backdrop-filter: blur(12px); border-bottom: 1px solid var(--dc-line-soft); }
.hero { padding: 5.5rem 0 4rem; text-align: center; }
.hero .logo-tile { width: 92px; height: 92px; border-radius: 26px; background: #f4f4f5; display: grid; place-items: center; margin: 0 auto 1.5rem; box-shadow: 0 20px 60px -15px rgba(255,255,255,.25); }
.hero .logo-tile img { width: 76px; height: 76px; object-fit: contain; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.hero p { color: var(--dc-muted); font-size: 1.1rem; max-width: 34rem; margin: 1rem auto 1.75rem; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.section-title h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.game-card { padding: 1.25rem; height: 100%; display: flex; flex-direction: column; transition: transform .18s, border-color .18s; }
.game-card:hover { transform: translateY(-3px); border-color: #3f3f46 !important; }
.game-logo { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; background: var(--dc-surface-2); border: 1px solid var(--dc-line); display: grid; place-items: center; color: var(--dc-faint); flex: none; overflow: hidden; }
.podium { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .podium { grid-template-columns: repeat(3, 1fr); } }
/* Top 3 = the in-game player card: primary community icon as the banner, avatar over it, gold / silver / bronze (2026-11-14) */
.podium { align-items: end; }
.podium .spot { padding: 0; text-align: center; overflow: hidden; position: relative; --medal: #f5c451; --medal-rgb: 245, 196, 81; transition: transform .25s ease, box-shadow .25s ease; }
.podium .spot.medal-2 { --medal: #cfd6df; --medal-rgb: 207, 214, 223; }
.podium .spot.medal-3 { --medal: #d4915b; --medal-rgb: 212, 145, 91; }
.podium .spot:not(.is-skel) { border-color: rgba(var(--medal-rgb), .35) !important; box-shadow: 0 22px 50px -30px rgba(var(--medal-rgb), .75), var(--dc-shadow); }
.podium .spot.medal-1:not(.is-skel) { border-color: rgba(var(--medal-rgb), .6) !important; box-shadow: 0 26px 70px -28px rgba(var(--medal-rgb), .95), var(--dc-shadow); }
@media (hover: hover) { .podium .spot:not(.is-skel):hover { transform: translateY(-4px); } }
.spot-banner { position: relative; height: 112px; overflow: hidden; border-radius: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(var(--medal-rgb), .38), rgba(var(--medal-rgb), .06) 60%, transparent), var(--dc-surface-2); }
.medal-1 .spot-banner { height: 136px; }
.spot-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.spot-cover.ok { opacity: 1; }
.spot-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .05) 35%, var(--dc-surface) 100%); pointer-events: none; }
.spot-rank { position: absolute; z-index: 2; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #111; background: var(--medal); box-shadow: 0 0 0 3px rgba(9, 9, 11, .45), 0 6px 16px -6px rgba(var(--medal-rgb), .9); }
.spot-crown { position: absolute; z-index: 2; top: 10px; right: 12px; color: var(--medal); filter: drop-shadow(0 2px 6px rgba(var(--medal-rgb), .7)); }
.spot-crown svg { width: 22px; height: 22px; }
.spot-body { position: relative; z-index: 2; margin-top: -46px; padding: 0 1rem 1.1rem; }
.avatar.xl { width: 88px; height: 88px; font-size: 1.35rem; border: 3px solid var(--medal, var(--dc-line)); box-shadow: 0 0 0 4px rgba(9, 9, 11, .55), 0 12px 30px -10px rgba(var(--medal-rgb, 0, 0, 0), .8); }
.medal-1 .avatar.xl { width: 104px; height: 104px; }
.spot-name { font-weight: 700; font-size: 1.05rem; margin-top: .55rem; }
.spot-handle { color: var(--dc-faint); font-size: .8rem; }
.podium .amt { font-size: 1.3rem; font-weight: 800; margin-top: .25rem; font-variant-numeric: tabular-nums; color: var(--medal); }
.medal-1 .amt { font-size: 1.5rem; }
@media (min-width: 640px) {
  .podium { display: flex; justify-content: center; align-items: flex-end; } /* 1 or 2 players stay centred */
  .podium > .spot { flex: 0 1 calc((100% - 1.5rem) / 3); min-width: 0; }
  .podium > .empty { flex: 1 1 100%; }
  .podium .spot.medal-1 { order: 2; transform: translateY(-10px); }
  .podium .spot.medal-1:not(.is-skel):hover { transform: translateY(-14px); }
  .podium .spot.medal-2 { order: 1; }
  .podium .spot.medal-3 { order: 3; }
}
@media (max-width: 639.98px) { /* phones: shorter banners, #1 stays first */
  .spot-banner, .medal-1 .spot-banner { height: 92px; }
  .avatar.xl, .medal-1 .avatar.xl { width: 80px; height: 80px; }
  .spot-body { margin-top: -40px; }
}
/* Loading skeletons (owner 2026-11-14: no glitchy pop-in) */
.skel { background: linear-gradient(90deg, var(--dc-surface-2) 25%, #232327 37%, var(--dc-surface-2) 63%) !important; background-size: 400% 100% !important; animation: dc-skel 1.3s ease infinite; border-color: transparent !important; color: transparent !important; }
.skel-line { height: .8rem; border-radius: 6px; }
.avatar.skel { border-color: transparent; box-shadow: none; }
@keyframes dc-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .podium .spot, .spot-cover, .avatar img { transition: none; } }
.page-skel { min-height: 70vh; }

/* ---------- toasts ---------- */
.swal2-container.swal2-bottom-end > .swal2-popup { border-radius: 12px !important; padding: .7rem 1rem !important; }
.swal2-title { color: var(--dc-text) !important; }
.swal2-html-container { color: var(--dc-muted) !important; }
.swal2-styled { border-radius: 10px !important; }
.swal2-timer-progress-bar { background: rgba(255,255,255,.35) !important; }

/* ---------- polish ---------- */
.form-select, .form-select-sm { padding-right: 2.2rem !important; background-position: right .7rem center; background-size: 14px 10px; }
div.dt-container .dt-length select { padding-right: 2rem; margin-right: .4rem; }
/* all DataTables columns read left to right, numbers included */
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric, table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: left !important; }
table.dataTable th.dt-type-numeric > .dt-column-header, table.dataTable th.dt-right > .dt-column-header { flex-direction: row !important; }
table.dataTable td.text-end { text-align: right !important; }
table.dataTable th.dt-orderable-none .dt-column-order, table.dataTable th.dt-ordering-asc .dt-column-order:before, table.dataTable th.dt-ordering-desc .dt-column-order:after { opacity: 1; }
.dt-column-order { opacity: .3; }
.dt-column-title { white-space: nowrap; }
.cell-two .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.cell-two .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
table.dataTable > tbody > tr > td { white-space: nowrap; }
.toolbar .form-select { min-width: 9.5rem; }

/* user card at the bottom of the sidebar opens the profile */
.user-link { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; padding: .4rem; margin: -.4rem 0 -.4rem -.4rem; border-radius: 10px; color: inherit; text-decoration: none; border: 1px solid transparent; }
.user-link:hover { background: var(--dc-surface-2); color: #fff; }
.user-link.active { background: var(--dc-surface-2); border-color: var(--dc-line); }

/* ---- tournament bracket ---- */
.bk-scroll { overflow-x: auto; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.bk-board { display: flex; gap: 1.6rem; min-width: max-content; align-items: stretch; }
.bk-col { display: flex; flex-direction: column; width: 17.5rem; }
.bk-title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-faint); font-weight: 700; margin-bottom: .6rem; }
.bk-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .8rem; }
.bk-slot { position: relative; }
.bk-col:not(:last-child) .bk-slot::after { content: ""; position: absolute; right: -1.6rem; top: 50%; width: 1.6rem; border-top: 1px solid var(--dc-line); }
.bk-col:not(:first-child) .bk-slot::before { content: ""; position: absolute; left: -1.6rem; top: 50%; width: 1.6rem; border-top: 1px solid var(--dc-line); }
.bk-match { display: block; width: 100%; text-align: left; color: inherit; background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 12px; padding: .5rem; font: inherit; }
button.bk-match { cursor: pointer; }
button.bk-match:hover { border-color: #52525b; background: var(--dc-surface-2); }
.bk-match.live { border-color: rgba(251,191,36,.55); box-shadow: 0 0 0 1px rgba(251,191,36,.2); }
.bk-match.bye { opacity: .65; }
.bk-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--dc-faint); font-weight: 600; padding: 0 .25rem .35rem; }
.bk-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-row { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: 8px; min-height: 2.9rem; }
.bk-row + .bk-row { margin-top: 2px; }
.bk-row .avatar { width: 30px; height: 30px; font-size: .68rem; }
.bk-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.bk-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sub { font-size: .72rem; color: var(--dc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .35rem; }
.bk-score { font-weight: 700; font-size: 1rem; min-width: 1.2rem; text-align: right; }
.bk-row.win { background: rgba(74,222,128,.08); }
.bk-row.win .bk-score { color: var(--dc-ok); }
.bk-row.lose { opacity: .55; }
.bk-empty { color: var(--dc-faint); font-size: .8rem; padding-left: .3rem; }
.bk-live { margin-top: .35rem; font-size: .72rem; font-weight: 700; color: var(--dc-warn); text-align: center; }
.fam { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: 0 .4rem; border: 1px solid var(--dc-line); border-radius: 999px; font-size: .68rem; color: var(--dc-muted); }
.fam-logo { width: 12px; height: 12px; border-radius: 3px; object-fit: cover; }
@media (max-width: 575px) { .bk-col { width: 15.5rem; } }

/* Fashion show (2026-11-13): outfit item grid + skin colour swatches + locked outfit placeholder */
.look-figure { position: relative; border-radius: 12px; border: 1px solid var(--dc-line); background: var(--dc-surface-2); padding: 10px; overflow: hidden; }
/* Video contest entries (cinematic / tutorial): TikTok portrait player */
.video-frame { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--dc-line); background: #000; margin-bottom: 6px; }
.video-frame.tt { aspect-ratio: 9 / 16; max-width: 325px; margin-left: auto; margin-right: auto; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.look-figure::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 46%; transform: translateX(-50%); border-radius: 40px 40px 14px 14px; background: var(--look-skin, transparent); opacity: .09; pointer-events: none; }
.look-row { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--dc-line-soft); }
.look-row:first-child { border-top: 0; }
.look-row-label { font-size: .75rem; color: var(--dc-muted); }
.look-row-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.look-item { display: block; width: 56px; height: 56px; flex: none; border-radius: 10px; background: var(--dc-surface); border: 1px solid var(--dc-line); overflow: hidden; }
.look-item:hover { border-color: var(--dc-muted); }
.look-item img { width: 100%; height: 100%; object-fit: contain; }
.look-bodyparts { position: relative; padding-top: 6px; border-top: 1px dashed var(--dc-line-soft); font-size: .75rem; color: var(--dc-muted); }
.look-bodyparts summary { cursor: pointer; }
.look-skin { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .75rem; color: var(--dc-muted); }
.look-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--dc-line); display: inline-block; }
.look-locked { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border-radius: 10px; border: 1px dashed var(--dc-line); background: var(--dc-surface-2); }
.look-locked svg { width: 16px; height: 16px; }
/* Fashion show winners (2026-11-14) */
.fashion-result { border-top: 1px dashed var(--dc-line); padding-top: 10px; }
.fashion-winner { height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dc-line); background: var(--dc-surface-2); }
.fashion-winner.rank-1 { border-color: var(--dc-warn); }
.fashion-winner svg { width: 14px; height: 14px; }
/* Language dropdown in the header (owner 2026-11-14) */
.lang-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--dc-line); background: var(--dc-surface-2); color: var(--dc-text); font-weight: 600; padding: .3rem .6rem; }
.lang-btn:hover, .lang-btn:focus-visible { border-color: var(--dc-faint); color: var(--dc-text); }
.flag { width: 20px; height: 14px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.lang-dd .dropdown-menu { background: var(--dc-surface); border: 1px solid var(--dc-line); min-width: 11rem; }
.lang-dd .dropdown-item { color: var(--dc-text); }
.lang-dd .dropdown-item.active, .lang-dd .dropdown-item:active { background: var(--dc-surface-2); color: var(--dc-text); font-weight: 600; }

/* Date + time picker (flatpickr dark theme) in the panel palette (2026-11-14) */
.flatpickr-calendar { z-index: 2000 !important; }
.when-clear { display: inline-block; margin-top: .25rem; }
.flatpickr-calendar { background: var(--dc-surface); border: 1px solid var(--dc-line); box-shadow: var(--dc-shadow); border-radius: 12px; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--dc-surface); color: var(--dc-text); }
.flatpickr-day { color: var(--dc-text); border-radius: 8px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--dc-surface-2); border-color: var(--dc-line); }
.flatpickr-day.today { border-color: var(--dc-faint); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--dc-primary); border-color: var(--dc-primary); color: var(--dc-on-primary); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--dc-faint); }
.flatpickr-time { border-top: 1px solid var(--dc-line) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--dc-text); }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--dc-surface-2); }
.when-clear { color: var(--dc-muted); text-decoration: none; font-size: .8rem; }
.when-clear:hover { color: var(--dc-text); }

/* Sidebar groups (2026-11-14) */
.sidebar-group { display: grid; gap: 2px; }
.sidebar-group + .sidebar-group { margin-top: .35rem; padding-top: .1rem; border-top: 1px solid var(--dc-line-soft); }
.sidebar-group .sidebar-section { padding: .75rem .8rem .3rem; }

/* Account menu on public pages when signed in (2026-11-14) */
.acct-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--dc-line); background: var(--dc-surface-2); color: var(--dc-text); font-weight: 600; padding: .2rem .7rem .2rem .25rem; border-radius: 999px; max-width: 13rem; }
.acct-btn:hover, .acct-btn:focus-visible, .acct-btn.show { border-color: var(--dc-faint); color: var(--dc-text); background: var(--dc-surface-2); }
.acct-btn .avatar-xs { width: 26px; height: 26px; font-size: .62rem; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dd .dropdown-menu { background: var(--dc-surface); border: 1px solid var(--dc-line); min-width: 11rem; }
.acct-dd .dropdown-item { color: var(--dc-text); }
.acct-dd .dropdown-item .icon { width: 1rem; height: 1rem; color: var(--dc-muted); }
.acct-dd .dropdown-item:hover, .acct-dd .dropdown-item:focus { background: var(--dc-surface-2); color: var(--dc-text); }
.acct-dd .dropdown-divider { border-color: var(--dc-line); }
/* Panel language picker spots */
.auth-lang { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
.sidebar-lang { padding: 0 .65rem .5rem; }
.sidebar-lang .lang-btn { width: 100%; justify-content: flex-start; }
.sidebar-lang .dropdown-menu { min-width: 100%; }
/* Header right side: language flag, then sign-in / account (2026-11-14) */
@media (max-width: 420px) { .nav-right .lang-btn span, .nav-right .acct-name { display: none; } .nav-right .acct-btn { padding-right: .45rem; } .nav-right #signIn { padding-left: .7rem !important; padding-right: .7rem !important; } .si-full { display: none; } }
.si-short { display: none; }
@media (max-width: 420px) { .si-short { display: inline; } }

/* Panel header: help, language, account (2026-11-14) + dashboard */
.topbar .acct-btn .avatar { width: 26px; height: 26px; font-size: .62rem; }
.top-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
.top-icon .icon { width: 1.1rem; height: 1.1rem; }
.acct-dd .dropdown-header { color: var(--dc-faint); padding: .5rem 1rem .4rem; }
@media (max-width: 575px) { .topbar .acct-name, .topbar .lang-btn span { display: none; } }

/* ---------- Colour system (2026-11-14): colour = which area you are in ---------- */
.tone-violet { --tone: #8b5cf6; } .tone-pink { --tone: #ec4899; } .tone-amber { --tone: #f59e0b; } .tone-orange { --tone: #f97316; }
.tone-blue { --tone: #3b82f6; } .tone-green { --tone: #22c55e; } .tone-red { --tone: #ef4444; } .tone-cyan { --tone: #06b6d4; } .tone-grey { --tone: #71717a; }
.tile { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 65%, #000)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tone) 70%, transparent); }
.tile .icon { width: 1.1rem; height: 1.1rem; }
.tile.sm { width: 26px; height: 26px; border-radius: 7px; box-shadow: none; } .tile.sm .icon { width: .85rem; height: .85rem; }
.tile.xs { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; } .tile.xs .icon { width: .78rem; height: .78rem; }
.dot-tile { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.dot-tile .icon { width: .9rem; height: .9rem; }
.badge-soft { font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); white-space: nowrap; }
/* page heads on every menu get the menu's tile */
.page-head .tile { margin-top: .15rem; }
/* stat rows on every page */
.stat.stat-tile { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; padding: .75rem .9rem; border-left: 3px solid var(--tone) !important; }
.stat.stat-tile .tile { grid-row: span 3; }
.stat.stat-tile .k { font-size: .74rem; } .stat.stat-tile .v { font-size: 1.35rem; margin-top: 0; line-height: 1.2; } .stat.stat-tile .h { font-size: .72rem; }

/* ---------- Sidebar compact + coloured icons ---------- */
.sidebar { width: 232px; }
.sidebar-brand { padding: .8rem 1rem .6rem; font-size: 1rem; }
.brand-logo { width: 30px; height: 30px; border-radius: 9px; }
.sidebar-nav { padding: 0 .5rem; gap: 1px; }
.sidebar-section { font-size: .62rem; padding: .55rem .6rem .2rem; }
.sidebar-group + .sidebar-group { margin-top: .2rem; padding-top: 0; border-top: 0; }
.sidebar-group .sidebar-section { padding: .55rem .6rem .2rem; }
.sidebar-link { gap: .6rem; padding: .38rem .6rem; font-size: .85rem; border-radius: 8px; }
.sidebar-link .icon { width: 1rem; height: 1rem; color: var(--tone); opacity: .9; }
.sidebar-link.active { background: color-mix(in srgb, var(--tone) 16%, transparent); border-color: color-mix(in srgb, var(--tone) 35%, transparent); box-shadow: inset 3px 0 0 var(--tone); color: #fff; }
.sidebar-link.active .icon { opacity: 1; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .8rem; }
.dash-head h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.dash-date { color: var(--dc-faint); font-size: .75rem; text-transform: capitalize; }
.dash-who { display: flex; align-items: center; gap: .45rem; color: var(--dc-muted); font-size: .8rem; }
.dash-who .avatar { width: 22px; height: 22px; font-size: .55rem; }
.dash-role { border: 1px solid var(--dc-line); border-radius: 6px; padding: 0 .4rem; color: var(--dc-text); text-transform: capitalize; }
.dash-stat { width: 100%; height: 100%; text-align: left; color: var(--dc-text); padding: .75rem .85rem .55rem; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 14%, var(--dc-surface)), var(--dc-surface) 70%); border-color: color-mix(in srgb, var(--tone) 30%, var(--dc-line)) !important; }
button.dash-stat:hover { border-color: color-mix(in srgb, var(--tone) 60%, var(--dc-line)) !important; }
.dash-stat .lbl { color: var(--dc-muted); font-size: .74rem; font-weight: 600; }
.dash-stat .val { font-size: 1.35rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stat .hint { color: var(--dc-faint); font-size: .7rem; }
.dash-stat .spark { display: block; width: 100%; height: 26px; margin-top: .3rem; }
.dash-card { padding: .65rem .75rem; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.dash-card h2 { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 700; margin: 0; }
.dash-more { border: 0; background: none; padding: 0; color: var(--tone); font-size: .75rem; font-weight: 600; }
.dash-more:hover { color: #fff; }
.dash-line { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .36rem .3rem; border: 0; border-radius: 8px; background: none; color: var(--dc-text); text-align: left; font-size: .85rem; }
.dash-line + .dash-line { border-top: 1px solid var(--dc-line-soft); border-radius: 0; }
button.dash-line:hover { background: color-mix(in srgb, var(--tone) 8%, transparent); }
.dash-line .small { font-size: .73rem; } .dash-line .small .icon { width: .8rem; height: .8rem; vertical-align: -.1em; }
.dash-line .pill { font-size: .68rem; }
.dash-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .35rem; padding-top: .2rem; }
.dash-q { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 9px; border: 1px solid var(--dc-line); background: var(--dc-surface-2); color: var(--dc-text); font-size: .8rem; font-weight: 600; text-decoration: none; text-align: left; }
.dash-q:hover { color: #fff; border-color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, var(--dc-surface-2)); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .75rem; color: var(--dc-muted); margin-bottom: .3rem; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .35rem; }
.chart-legend b { color: var(--dc-text); margin-left: .2rem; }
.chart-area { display: block; width: 100%; height: 190px; }
.chart-area .grid { stroke: var(--dc-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-area .hit { fill: transparent; } .chart-area .hit:hover { fill: rgba(255,255,255,.04); }
.chart-area text { fill: var(--dc-faint); font-size: 10px; }
.donut-wrap { display: flex; align-items: center; gap: 1rem; padding: .3rem 0; }
.donut { width: 130px; height: 130px; flex: none; }
.donut .n { fill: var(--dc-text); font-size: 15px; font-weight: 700; } .donut .l { fill: var(--dc-faint); font-size: 8px; }
.donut-wrap .legend { flex: 1; display: grid; gap: .35rem; font-size: .8rem; }
.donut-wrap .lg { display: flex; align-items: center; gap: .45rem; } .donut-wrap .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* ---------- Scope switcher: DeesCorp (global) or one game (2026-11-14) ---------- */
.scope-dd { padding: 0 .5rem .35rem; }
.scope-btn { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; text-align: left; color: var(--dc-text);
  background: color-mix(in srgb, var(--scope) 12%, var(--dc-surface-2)); border: 1px solid color-mix(in srgb, var(--scope) 40%, var(--dc-line)); }
.scope-btn:hover, .scope-btn.show { border-color: var(--scope); }
.scope-btn::after { margin-left: auto; color: var(--dc-muted); }
.scope-pic { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none; background: #f4f4f5; display: inline-grid; place-items: center; }
.scope-pic img { width: 100%; height: 100%; object-fit: cover; } .scope-pic img.logo { padding: 3px; object-fit: contain; }
.scope-pic.sm { width: 24px; height: 24px; border-radius: 6px; }
.scope-txt { min-width: 0; display: grid; line-height: 1.15; }
.scope-txt b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-txt small { font-size: .68rem; color: color-mix(in srgb, var(--scope) 70%, var(--dc-muted)); }
.scope-menu { background: var(--dc-surface); border: 1px solid var(--dc-line); padding: .3rem; }
.scope-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; border-radius: 8px; color: var(--dc-text); font-size: .84rem; padding: .4rem .5rem; }
.scope-menu .dropdown-item small { color: var(--dc-faint); font-size: .7rem; }
.scope-menu .dropdown-item:hover { background: var(--dc-surface-2); }
.scope-menu .dropdown-item.active { background: color-mix(in srgb, var(--scope, #e4e4e7) 14%, var(--dc-surface-2)); color: #fff; }
.scope-menu .dropdown-header { color: var(--dc-faint); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .5rem .15rem; }
.scope-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--scope); flex: none; }
.dash-scope { color: var(--scope); font-weight: 700; }