/* =====================================================================================================================
   Doorcamper Glass 1.0: the design language of doorcamper.io (Dark Frost with tinted glass), as one drop-in stylesheet.
   Load dg-fonts.css first, then this file. Everything is prefixed dg- so it can sit beside a site's own CSS.
   Dark by default when the visitor's system is dark; set data-theme="dark" or "light" on <html> to force one.
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  /* ground and surfaces */
  --dg-bg: #efece6;          /* page ground */
  --dg-bg-2: #e7e3db;        /* a second ground: wells, table stripes */
  --dg-surface: #fbfaf7;     /* what glass is tinted with */
  --dg-surface-2: #f2efe9;   /* a raised surface inside a box */
  --dg-line: #e1ddd4;        /* hairlines */
  --dg-line-strong: #cbc6ba; /* control borders, solid menus */
  /* text */
  --dg-text: #17150f;
  --dg-muted: #5f5a4f;
  --dg-faint: #8b8579;
  /* the one accent, and what it means */
  --dg-accent: #f0611f;      /* do this, active, in game */
  --dg-on-accent: #1d0e05;   /* text on a solid accent fill */
  --dg-accent-soft: #fde4d6;
  --dg-accent-text: #b4420e; /* orange text on the ground */
  /* signals: each tints its own glass */
  --dg-good: #4f7a2a;  --dg-good-soft: #e1ebd4;   /* live, verified, online */
  --dg-warn: #8f6000;  --dg-warn-soft: #f6e6bf;   /* heads-up */
  --dg-bad: #b3261e;   --dg-bad-soft: #f7dad5;    /* bans, errors, high risk */
  --dg-bad-strong: #b3261e;                       /* a fill under white text: delete */
  --dg-info: #3a6489;  --dg-info-soft: #dce7f0;   /* info, low risk */
  /* glass */
  --dg-glass-edge: rgba(0, 0, 0, .12);
  --dg-glass-edge-top: rgba(255, 255, 255, .9);
  --dg-glass-line: rgba(0, 0, 0, .1);
  --dg-hi: inset 0 1px 0 rgba(255, 255, 255, .16);           /* the light catch along a top edge */
  --dg-drop: 0 8px 20px -12px rgba(40, 30, 15, .35);         /* under a control */
  --dg-shadow: 0 18px 40px -18px rgba(40, 30, 15, .28);      /* under a box */
  --dg-float: 0 24px 60px -18px rgba(40, 30, 15, .35);       /* under a menu that opens over the page */
  --dg-tint: 55%;   /* how much of --dg-surface fills a box (0% = clear glass) */
  --dg-blur: 18px;  /* how much a box frosts what's behind it */
  --dg-frost: 16px; /* the frost on small controls */
  --dg-pri-bg: var(--dg-accent);     /* the "do this" button: solid in light, glass in dark */
  --dg-pri-text: var(--dg-on-accent);
  --dg-steam-bg: #c4501a;            /* sign-in buttons: white text on them in both themes */
  --dg-discord-bg: #5865f2;
  --dg-glow-1: rgba(240, 100, 42, .14);  /* ember glow over the page ground */
  --dg-glow-2: rgba(70, 90, 110, .12);
  /* shape */
  --dg-radius: 20px;     /* boxes */
  --dg-radius-sm: 12px;  /* fields, small panels */
  --dg-radius-menu: 18px;
  --dg-pill: 999px;      /* every control */
  /* type */
  --dg-sans: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dg-display: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --dg-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --dg-bg: #0b0c0b; --dg-bg-2: #0f100f; --dg-surface: #141513; --dg-surface-2: #1b1c19; --dg-line: #22231f; --dg-line-strong: #34352f;
  --dg-text: #efe9dd; --dg-muted: #aaa395; --dg-faint: #7d786d;
  --dg-accent: #ff6b2c; --dg-on-accent: #1d0e05; --dg-accent-soft: #2a160c; --dg-accent-text: #ff8a52;
  --dg-good: #9ed27a; --dg-good-soft: #1d2a14; --dg-warn: #f0b43c; --dg-warn-soft: #33260c;
  --dg-bad: #ff5f4d; --dg-bad-soft: #3a1611; --dg-bad-strong: #c4372a; --dg-steam-bg: color-mix(in srgb, var(--dg-accent) 60%, transparent); --dg-discord-bg: rgba(88, 101, 242, .55); --dg-info: #86b3dc; --dg-info-soft: #14202c;
  --dg-glass-edge: rgba(255, 255, 255, .07); --dg-glass-edge-top: rgba(255, 255, 255, .13); --dg-glass-line: rgba(255, 255, 255, .07);
  --dg-drop: 0 8px 20px -12px rgba(0, 0, 0, .6); --dg-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); --dg-float: 0 24px 60px -18px rgba(0, 0, 0, .7);
  --dg-pri-bg: color-mix(in srgb, var(--dg-accent) 52%, transparent); --dg-pri-text: #fff;
  --dg-glow-1: rgba(240, 100, 42, .26); --dg-glow-2: rgba(70, 90, 110, .22);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --dg-bg: #0b0c0b; --dg-bg-2: #0f100f; --dg-surface: #141513; --dg-surface-2: #1b1c19; --dg-line: #22231f; --dg-line-strong: #34352f;
  --dg-text: #efe9dd; --dg-muted: #aaa395; --dg-faint: #7d786d;
  --dg-accent: #ff6b2c; --dg-on-accent: #1d0e05; --dg-accent-soft: #2a160c; --dg-accent-text: #ff8a52;
  --dg-good: #9ed27a; --dg-good-soft: #1d2a14; --dg-warn: #f0b43c; --dg-warn-soft: #33260c;
  --dg-bad: #ff5f4d; --dg-bad-soft: #3a1611; --dg-bad-strong: #c4372a; --dg-steam-bg: color-mix(in srgb, var(--dg-accent) 60%, transparent); --dg-discord-bg: rgba(88, 101, 242, .55); --dg-info: #86b3dc; --dg-info-soft: #14202c;
  --dg-glass-edge: rgba(255, 255, 255, .07); --dg-glass-edge-top: rgba(255, 255, 255, .13); --dg-glass-line: rgba(255, 255, 255, .07);
  --dg-drop: 0 8px 20px -12px rgba(0, 0, 0, .6); --dg-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); --dg-float: 0 24px 60px -18px rgba(0, 0, 0, .7);
  --dg-pri-bg: color-mix(in srgb, var(--dg-accent) 52%, transparent); --dg-pri-text: #fff;
  --dg-glow-1: rgba(240, 100, 42, .26); --dg-glow-2: rgba(70, 90, 110, .22);
}

/* ---------------------------------------------------------------------------------------------------- page */
/* Put dg-page on <body>. The ember glow sits behind everything; a photo or video background goes under it. */
.dg-page { margin: 0; min-height: 100vh; background: var(--dg-bg); color: var(--dg-text); font: 15px/1.5 var(--dg-sans); -webkit-font-smoothing: antialiased; }
.dg-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 560px at 80% 0%, var(--dg-glow-1), transparent 70%), radial-gradient(800px 600px at 0% 100%, var(--dg-glow-2), transparent 70%); }
.dg-page ::selection { background: var(--dg-accent); color: var(--dg-on-accent); }
.dg-page :focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }
.dg-h1 { font: 700 30px/1.1 var(--dg-display); letter-spacing: .005em; margin: 0; }
.dg-hero { font: 700 clamp(44px, 7vw, 88px)/.92 var(--dg-display); margin: 0; text-wrap: balance; }
.dg-h2 { font: 650 16px/1.2 var(--dg-sans); margin: 0; }
.dg-eyebrow { font: 700 12px/1 var(--dg-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dg-accent-text); }
.dg-muted { color: var(--dg-muted); }
.dg-faint { color: var(--dg-faint); }
.dg-mono { font-family: var(--dg-mono); font-size: .86em; letter-spacing: -.01em; }
.dg-num { font: 700 40px/1 var(--dg-display); font-variant-numeric: tabular-nums; }
.dg-rule { height: 0; border: 0; border-top: 2px solid var(--dg-text); margin: 0; }  /* the one strong divider */
.dg-hairline { height: 0; border: 0; border-top: 1px solid var(--dg-glass-line); margin: 0; }

/* ---------------------------------------------------------------------------------------------------- boxes */
/* A box: graphite glass with a light catch along its top edge. A box inside a box doesn't frost twice. */
.dg-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 38%), color-mix(in srgb, var(--dg-surface) var(--dg-tint), transparent);
  -webkit-backdrop-filter: blur(var(--dg-blur)) saturate(1.4); backdrop-filter: blur(var(--dg-blur)) saturate(1.4);
  border: 1px solid var(--dg-glass-edge); border-top-color: var(--dg-glass-edge-top);
  border-radius: var(--dg-radius); box-shadow: var(--dg-hi), var(--dg-shadow);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--dg-bg) calc(100% - var(--dg-tint)), transparent);
}
.dg-card .dg-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.dg-card-body { padding: 20px 22px; }
.dg-card-head { padding: 16px 22px; border-bottom: 1px solid var(--dg-glass-line); display: flex; align-items: center; gap: 10px; }
/* A menu or results list that opens over the page: solid, so it always reads. */
.dg-menu { background: color-mix(in srgb, var(--dg-bg) 96%, var(--dg-surface)); border: 1px solid var(--dg-line-strong); border-radius: var(--dg-radius-menu);
  box-shadow: var(--dg-float), var(--dg-hi); padding: 8px 0; color: var(--dg-text); }
.dg-menu a, .dg-menu button { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 16px; border: 0; background: none;
  font: 500 14px/1.3 var(--dg-sans); color: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.dg-menu a:hover, .dg-menu button:hover { background: color-mix(in srgb, var(--dg-text) 7%, transparent); }
.dg-menu-label { padding: 6px 16px 4px; font: 600 12px/1 var(--dg-sans); color: var(--dg-faint); }

/* ---------------------------------------------------------------------------------------------------- controls */
/* Clear frost: every button, chip, badge and tab. Add a dg-tint-* class to frost it in a meaning colour. */
.dg-btn, .dg-chip, .dg-badge, .dg-seg {
  background: color-mix(in srgb, var(--dg-text) 7%, transparent); border: 1px solid color-mix(in srgb, var(--dg-text) 14%, transparent);
  -webkit-backdrop-filter: blur(var(--dg-frost)) saturate(1.6); backdrop-filter: blur(var(--dg-frost)) saturate(1.6);
  box-shadow: var(--dg-hi), var(--dg-drop); color: var(--dg-text); box-sizing: border-box;
}
.dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--dg-pill);
  font: 600 14px/1 var(--dg-sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }
.dg-btn:hover { background: color-mix(in srgb, var(--dg-text) 12%, transparent); border-color: color-mix(in srgb, var(--dg-text) 24%, transparent); }
.dg-btn:disabled { opacity: .55; cursor: default; }
.dg-btn svg, .dg-chip svg { width: 16px; height: 16px; flex: none; }
.dg-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.dg-btn--icon { width: 40px; padding: 0; }
.dg-btn--icon.dg-btn--sm { width: 32px; }
.dg-btn--block { width: 100%; height: 46px; font-size: 15.5px; }
.dg-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dg-btn--ghost:hover { background: color-mix(in srgb, var(--dg-text) 7%, transparent); border-color: transparent; }
/* "Do this": a stronger orange glass with a glow (solid orange in light, where glass text would be too faint). */
.dg-btn--primary { background: var(--dg-pri-bg); color: var(--dg-pri-text); border-color: color-mix(in srgb, var(--dg-accent) 75%, #fff 10%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 0 28px -6px color-mix(in srgb, var(--dg-accent) 80%, transparent); }
.dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-accent) 68%, transparent); border-color: color-mix(in srgb, var(--dg-accent) 85%, #fff 15%); }
:root[data-theme="light"] .dg-btn--primary:hover { background: var(--dg-accent); filter: brightness(1.06); }
.dg-btn--danger { background: var(--dg-bad-strong); border-color: var(--dg-bad-strong); color: #fff; box-shadow: var(--dg-hi); }
/* Split button: an action and its options */
.dg-split { display: inline-flex; }
.dg-split > .dg-btn:first-child { border-radius: var(--dg-pill) 0 0 var(--dg-pill); }
.dg-split > .dg-btn:last-child { border-radius: 0 var(--dg-pill) var(--dg-pill) 0; width: 38px; padding: 0; margin-left: -1px; }
/* Sign in with a provider: white text on the provider's glass */
.dg-btn--steam, .dg-btn--discord { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.dg-btn--steam { background: var(--dg-steam-bg); border-color: color-mix(in srgb, var(--dg-accent) 80%, #fff 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 28px -6px color-mix(in srgb, var(--dg-accent) 80%, transparent); }
.dg-btn--steam:hover { background: color-mix(in srgb, var(--dg-accent) 74%, #000 8%); }
.dg-btn--discord { background: var(--dg-discord-bg); border-color: rgba(140, 150, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 26px -8px rgba(88, 101, 242, .9); }
.dg-btn--discord:hover { background: #4752c4; }

/* Chips (status, filters) and badges (short loud labels) */
.dg-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--dg-pill); font: 600 13px/1 var(--dg-sans); white-space: nowrap; }
button.dg-chip, a.dg-chip { cursor: pointer; text-decoration: none; }
.dg-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--dg-pill); box-shadow: var(--dg-hi);
  font: 700 11.5px/1 var(--dg-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dg-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.dg-dot--live { color: var(--dg-good); animation: dg-pulse 1.8s ease-out infinite; }
@keyframes dg-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* Tinted glass: the meaning colours */
.dg-tint-orange { --dg-t: var(--dg-accent); --dg-t-text: var(--dg-accent-text); }
.dg-tint-green  { --dg-t: var(--dg-good);   --dg-t-text: var(--dg-good); }
.dg-tint-blue   { --dg-t: var(--dg-info);   --dg-t-text: var(--dg-info); }
.dg-tint-amber  { --dg-t: var(--dg-warn);   --dg-t-text: var(--dg-warn); }
.dg-tint-red    { --dg-t: var(--dg-bad);    --dg-t-text: var(--dg-bad); }
.dg-tint-orange, .dg-tint-green, .dg-tint-blue, .dg-tint-amber, .dg-tint-red,
.dg-seg > [aria-selected="true"], .dg-seg > .is-active, .dg-nav a[aria-current="page"], .dg-nav a.is-active {
  background: color-mix(in srgb, var(--dg-t) 17%, transparent); color: var(--dg-t-text);
  border: 1px solid color-mix(in srgb, var(--dg-t) 48%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 0 22px -8px color-mix(in srgb, var(--dg-t) 75%, transparent);
}
.dg-seg > [aria-selected="true"], .dg-seg > .is-active, .dg-nav a[aria-current="page"], .dg-nav a.is-active { --dg-t: var(--dg-accent); --dg-t-text: var(--dg-accent-text); }

/* Tabs: a frosted capsule; the active one is orange glass */
.dg-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--dg-pill); }
.dg-seg > button, .dg-seg > a { appearance: none; border: 1px solid transparent; background: none; border-radius: var(--dg-pill); padding: 7px 15px; cursor: pointer;
  font: 600 13px/1.2 var(--dg-sans); color: var(--dg-muted); text-decoration: none; white-space: nowrap; }
.dg-seg > button:hover:not([aria-selected="true"]):not(.is-active), .dg-seg > a:hover:not(.is-active) { color: var(--dg-text); background: color-mix(in srgb, var(--dg-text) 7%, transparent); }

/* Fields */
.dg-input { height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: var(--dg-radius-sm); font: 400 15px/1 var(--dg-sans); color: var(--dg-text);
  background: color-mix(in srgb, var(--dg-bg) 45%, transparent); border: 1px solid color-mix(in srgb, var(--dg-text) 20%, transparent); }
.dg-input::placeholder { color: var(--dg-faint); }
.dg-input:focus { outline: none; border-color: var(--dg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dg-accent) 25%, transparent); }
.dg-label { display: grid; gap: 6px; font: 600 13px/1.2 var(--dg-sans); color: var(--dg-muted); }

/* ---------------------------------------------------------------------------------------------------- bars */
/* Top bar: logo left, search in the true middle, account right */
.dg-topbar { position: sticky; top: 0; z-index: 20; height: 60px; box-sizing: border-box; padding: 0 28px;
  display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--dg-bg) 62%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--dg-glass-edge); }
.dg-topbar > :first-child { justify-self: start; }
.dg-topbar > :last-child { justify-self: end; display: flex; gap: 8px; align-items: center; }
.dg-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--dg-display); color: var(--dg-text); text-decoration: none; }
@media (max-width: 760px) { .dg-topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 14px; gap: 10px; } }

/* The menu: one floating glass capsule, centred in its band (same space above and below) */
.dg-nav-band { position: sticky; top: 60px; z-index: 19; display: flex; justify-content: center; padding: 10px 16px; pointer-events: none; }
.dg-nav { pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; padding: 6px; max-width: 100%; box-sizing: border-box; overflow-x: auto; border-radius: var(--dg-pill);
  background: color-mix(in srgb, var(--dg-surface) 62%, transparent); border: 1px solid var(--dg-glass-edge); border-top-color: var(--dg-glass-edge-top);
  box-shadow: var(--dg-hi), 0 18px 40px -16px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); scrollbar-width: none; }
.dg-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--dg-pill); border: 1px solid transparent;
  font: 600 14px/1 var(--dg-sans); color: var(--dg-muted); text-decoration: none; white-space: nowrap; }
.dg-nav a svg { width: 17px; height: 17px; }
.dg-nav a:hover:not([aria-current="page"]):not(.is-active) { color: var(--dg-text); background: color-mix(in srgb, var(--dg-text) 7%, transparent); }

/* Search: a pill with a soft colour light that travels round its edge */
@property --dg-glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dg-search { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; border-radius: var(--dg-pill); }
.dg-search > svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--dg-faint); pointer-events: none; }
.dg-search input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 16px 0 40px; border-radius: var(--dg-pill); border: 1px solid transparent;
  background: color-mix(in srgb, var(--dg-bg) 78%, transparent); color: var(--dg-text); font: 400 15px/1 var(--dg-sans); }
.dg-search input::placeholder { color: var(--dg-faint); }
.dg-search input:focus { outline: none; }
.dg-search::before, .dg-search::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--dg-glow-a), #f0642a, #ff4f8b, #9b6bff, #4fa3ff, #57d6b0, #ffc247, #f0642a); animation: dg-glow-spin 6s linear infinite; }
.dg-search::before { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .85; }
.dg-search::after { inset: -3px; filter: blur(10px); opacity: .38; z-index: -2; }
.dg-search:focus-within::before { opacity: 1; }
.dg-search:focus-within::after { opacity: .6; }
@keyframes dg-glow-spin { to { --dg-glow-a: 360deg; } }
/* its results: a solid rounded panel, wider than the box, centred under it */
.dg-search > .dg-menu { position: absolute; top: calc(100% + 10px); left: 50%; width: min(760px, calc(100vw - 32px)); transform: translateX(-50%); z-index: 30; }

/* ---------------------------------------------------------------------------------------------------- motion */
/* Page to page: a short crossfade. Multi-page sites get it from the browser (Chrome, Edge, Safari 18.2+);
   single-page apps call document.startViewTransition() around their render (README). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .dg-search::before, .dg-search::after, .dg-dot--live { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}