/* =====================================================================================================================
   Cyberblack Arena v5 · "Dossier"
   Loaded after styles.css on the player page and the coordinator console. Warm paper, ink type, one red for action,
   dark "console" surfaces for the moments that matter (the hero, the arcade, the vault). Colors come from the branding
   preset (brands.js): --bg paper, --panel surface, --text ink, --accent the action red. Flat: no gradients, no shadows
   except the hard offset on the selected file.
   ===================================================================================================================== */
:root {
  --paper: var(--bg); --surface: var(--panel); --sunk: var(--bg-2); --ink: var(--text); --ink-2: #343941; --faint: var(--dim);
  --red: var(--accent); --red-ink: var(--accent-text); --red-tint: color-mix(in srgb, var(--accent) 9%, var(--panel));
  --green: #16704A; --green-tint: #E5F2EB; --amber: #9A5A06; --amber-tint: #FAF0E0; --blue: #1F56C4; --blue-tint: #E8EFFB;
  --console: #0F1216; --console-2: #181C22; --console-line: #262B33; --console-line-2: #3A404A; --console-text: #C9CED6; --console-dim: #8B929C; --console-red: #FF8095;
  --ok: #16704A; --bad: #B3261E;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dz-top-h: 64px; --dz-gut: clamp(16px, 3.4vw, 48px);
}
html { background: var(--paper); }
body.dz { background: var(--paper); background-image: none; color: var(--ink); font-size: 15px; line-height: 1.5; }
body.dz h1, body.dz h2, body.dz h3, body.dz h4 { font-family: var(--display); font-stretch: 112%; letter-spacing: -0.01em; line-height: 1.1; text-transform: none; }
body.dz ::selection { background: color-mix(in srgb, var(--red) 22%, transparent); }
body.dz :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- type helpers ---------- */
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow.red { color: var(--red-ink); } .eyebrow.ink { color: var(--ink); } .eyebrow.on-dark { color: var(--console-dim); } .eyebrow.on-dark.red { color: var(--console-red); }
.mono { font-family: var(--mono); } .muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; } .strong { font-weight: 600; }
.ok { color: var(--green); }
.dz-bign { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dz-row-sb { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dz-row-base { display: flex; align-items: baseline; gap: 10px; }
.dz-fgrow { flex-grow: 1; }
.dz-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dz-pad { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.dz-pad-x { padding: 0 20px; margin: 0; }
.dz-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.dz-link:hover { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.dz-link svg { width: 14px; height: 14px; }
.dz-cardh { display: flex; align-items: center; gap: 8px; }
.dz-cardh.sb { justify-content: space-between; padding: 16px 20px 10px; }
.dz-cardh svg { width: 18px; height: 18px; }

/* ---------- surfaces and controls ---------- */
body.dz .card, body.admin .card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
body.dz .card { padding: 0; }
body.dz .card.dz-pad { padding: 20px; }
body.dz .stage > .card:not(.puzzle):not(.brief):not(.lockcard):not(.instr-tab) { padding: 24px; }
body.dz .btn, body.admin .btn { min-height: 44px; height: auto; padding: 0 18px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 4px; font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; cursor: pointer; }
body.dz .btn:hover, body.admin .btn:hover { border-color: var(--ink); background: var(--sunk); }
body.dz .btn.primary, body.admin .btn.primary { background: var(--red); border-color: var(--red); color: var(--accent-ink, #fff); }
body.dz .btn.primary:hover, body.admin .btn.primary:hover { background: var(--red-ink); border-color: var(--red-ink); }
body.dz .btn.ghost, body.admin .btn.ghost { background: transparent; border-color: var(--line-2); }
body.dz .btn.ghost:hover, body.admin .btn.ghost:hover { border-color: var(--ink); background: var(--surface); }
body.dz .btn.sm, body.admin .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
body.dz .btn.lg { min-height: 52px; padding: 0 24px; font-size: 15px; }
body.dz .btn:disabled, body.admin .btn:disabled { opacity: .5; cursor: not-allowed; }
body.dz .btn svg, body.admin .btn svg { width: 18px; height: 18px; }
body.dz .btn.sm svg { width: 16px; height: 16px; }
.dz-btn-dark, body.dz .btn.dz-btn-dark { background: transparent; color: #fff; border-color: var(--console-line-2); }
body.dz .btn.dz-btn-dark:hover { background: var(--console-2); border-color: #fff; color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; height: auto; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 3px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); white-space: nowrap; cursor: default; }
.chip svg { width: 11px; height: 11px; }
.chip.sm { min-height: 20px; font-size: 10px; padding: 0 6px; }
.chip.red { border-color: var(--red); color: var(--red-ink); background: var(--red-tint); }
.chip.green { border-color: #9CCBB2; color: var(--green); background: var(--green-tint); }
.chip.amber { border-color: #E2C28F; color: var(--amber); background: var(--amber-tint); }
.chip.ink, .chip.diff.hard { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip.diff.medium { border-color: var(--red); color: var(--red-ink); background: var(--red-tint); }
.chip.on-dark { background: transparent; border-color: var(--console-line-2); color: var(--console-text); }
.chip.red-dark { background: transparent; border-color: var(--console-red); color: var(--console-red); }
.stamp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1.5px solid var(--red); color: var(--red-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.stamp.green { border-color: var(--green); color: var(--green); }
.stamp.sm { font-size: 9.5px; padding: 1px 5px; letter-spacing: .12em; }
.stamp.on-dark { border-color: var(--console-red); color: var(--console-red); }
.dz-bar { height: 6px; background: var(--sunk); overflow: hidden; position: relative; border-radius: 0; }
.dz-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.dz-bar.dark { background: var(--console-line); } .dz-bar.dark > span { background: #fff; }
.segctl { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--surface); }
.segctl button { min-height: 36px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.segctl button:last-child { border-right: 0; }
.segctl button.on, .segctl button[aria-selected="true"] { background: var(--ink); color: #fff; }
.segctl.full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.segctl.full button { overflow: hidden; text-overflow: ellipsis; }
.segctl.sm button { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.avatar { width: 32px; height: 32px; background: var(--sunk); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; font-weight: 600; border-radius: 3px; flex: none; }
.avatar.red { background: var(--red); color: #fff; }
.dz-x { width: 32px; height: 32px; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); border-radius: 4px; }
.dz-x:hover { background: var(--sunk); }
.dz-x svg { width: 16px; height: 16px; }

/* ---------- the top bar ---------- */
.mbar, .rail, .rail-scrim, .landing-bar { display: none !important; }
.dz-top { position: sticky; top: 0; z-index: 40; height: var(--dz-top-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--dz-gut); background: var(--surface); border-bottom: 1px solid var(--line); box-sizing: border-box; }
body.landing .dz-top, body.onboarding .dz-top, body.landing .dz-btabs, body.onboarding .dz-btabs { display: none !important; }
.dz-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
/* v5.0.3: Quicksand (SIL OFL, vendored in brand/fonts) sets the Cyberblack Arena wordmark, matching the logo's rounded monoline letters */
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url(brand/fonts/quicksand-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url(brand/fonts/quicksand-latin-600-normal.woff2) format("woff2"); }
/* v5.0.3: the Cyberblack Arena mark (monoline Colosseum, web/brand/arena-mark.svg) drawn as a mask so it takes the theme ink */
.dz-mark { width: 34px; height: 31px; background: var(--ink); flex: none; -webkit-mask: url(brand/arena-mark.svg) center / contain no-repeat; mask: url(brand/arena-mark.svg) center / contain no-repeat; }
.dz-mark[hidden] { display: none; }
.dz-word { font-family: "Quicksand", var(--body); font-weight: 600; font-size: 8.5px; letter-spacing: .4em; line-height: 1.2; color: var(--ink); text-transform: uppercase; }
.dz-word b { display: block; font-family: "Quicksand", var(--body); font-size: 18px; letter-spacing: .14em; font-weight: 600; color: var(--ink); }
/* logo v2: the Cyberblack shield sits in front of the CYBERBLACK line (brand/cyberblack-shield-small.svg, drawn in the text color) */
.dz-word::before { content: ""; display: inline-block; width: 9px; height: 12px; margin-right: 3px; vertical-align: -3px; background: currentColor; -webkit-mask: url(brand/cyberblack-shield-small.svg) center / contain no-repeat; mask: url(brand/cyberblack-shield-small.svg) center / contain no-repeat; }
/* v5.6.2: the sidebar / top bar shows the Arena by Cyberblack lockup (styles.css .ar-lock) in the theme ink */
.dz-brand .dz-lock { height: 40px; color: var(--ink); }
.dz-brand .corner-logo { height: 32px; width: auto; max-width: 170px; object-fit: contain; margin: 0; filter: none; }
.dz-top .cobrand { display: inline-flex; align-items: center; gap: 10px; flex: none; margin-left: -8px; }
.dz-top .cobrand[hidden] { display: none; }
.dz-top .cobrand .cb-sep { font-size: 18px; color: var(--faint); line-height: 1; }
.dz-top .cobrand .cb-sep-text { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); max-width: 90px; line-height: 1.2; }
.dz-top .cobrand .cb-client { height: 26px; width: auto; max-width: 140px; object-fit: contain; filter: none; }
.dz-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; min-width: 0; }
.dz-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.dz-tab[hidden] { display: none; }
.dz-tab .ic { display: inline-flex; font-size: 18px; line-height: 0; color: inherit; }
.dz-tab:hover { color: var(--ink); background: var(--paper); }
.dz-tab.active { color: var(--ink); border-bottom-color: var(--red); font-weight: 600; }
.dz-tab .mini { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.dz-count { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: var(--red-tint); color: var(--red-ink); border: 1px solid var(--red); border-radius: 3px; padding: 1px 6px; font-weight: 500; }
.dz-count[hidden] { display: none; }
.dz-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.dz-days { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.dz-days .ic { display: inline-flex; font-size: 15px; line-height: 0; }
.dz-days b { color: var(--ink); font-weight: 600; }
.dz-days.pre b { color: var(--red-ink); }
.dz-me { position: relative; }
.dz-top .prof { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; min-height: 44px; box-sizing: border-box; }
.dz-top .prof[hidden] { display: none; }
.dz-top .prof:hover { border-color: var(--ink); }
.dz-top .avi { width: 32px; height: 32px; border-radius: 3px; background: var(--red); border: 0; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.dz-top .prof .pmeta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.dz-top .prof .pmeta b { font-size: 13px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-top .prof .pmeta small { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.dz-top .prof .pdept { display: none; }
.dz-top .prof .caret svg { color: var(--muted); transform: none; }
.dz-top .profmenu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; bottom: auto; width: 270px; background: var(--surface); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); z-index: 60; padding: 6px 0; color: var(--ink); }
.dz-top .profmenu[hidden] { display: none; }
.dz-top .pm-head { display: flex; gap: 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.dz-top .pm-head .avi { flex: none; }
.dz-top .pm-id { display: flex; flex-direction: column; min-width: 0; }
.dz-top .pm-id b { font-size: 14px; } .dz-top .pm-id small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dz-top .pm-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dz-top .pm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; min-height: 40px; }
.dz-top .pm-item:hover { background: var(--paper); color: var(--ink); }
.dz-top .pm-item .ic { color: var(--muted); width: 18px; }
.dz-top .pm-item.out, :root[data-theme="light"] .dz-top .pm-item.out { color: var(--red-ink); }
.dz-top .pm-item[hidden] { display: none; }
.dz-top .pm-sep { height: 1px; background: var(--line); margin: 6px 0; }
@media (min-width: 901px) { #pmGuide { display: none; } }

/* bottom tabs (phones and tablets) */
.dz-btabs { display: none; }
@media (max-width: 900px) {
  :root { --dz-top-h: 56px; }
  .dz-top { gap: 12px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); height: calc(var(--dz-top-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .dz-nav, .dz-days { display: none; }
  .dz-word { font-size: 7.5px; } .dz-word b { font-size: 15px; }
  .dz-mark { width: 28px; height: 26px; }
  .dz-brand .dz-lock { height: 32px; }
  .dz-top .cobrand .cb-client { height: 22px; max-width: 110px; } .dz-top .cobrand .cb-sep-text { display: none; }
  .dz-top .prof { padding: 3px 8px 3px 3px; min-height: 40px; }
  .dz-top .prof .pmeta b { display: none; }
  .dz-top .avi { width: 30px; height: 30px; }
  .dz-top .profmenu { position: fixed; top: calc(var(--dz-top-h) + env(safe-area-inset-top, 0px) + 4px); right: 8px; width: min(300px, calc(100vw - 16px)); }
  .dz-btabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .dz-btabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; }
  .dz-btabs button[hidden] { display: none; }
  .dz-btabs button .ic { display: inline-flex; font-size: 22px; line-height: 0; }
  .dz-btabs button.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 2px 0 var(--red); }
  body.dz main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dz #obReportBtn { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dz #footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) { .dz-top .cobrand { display: none; } }
/* v5.6.2: phones with a client logo beside the Arena lockup: a slightly smaller lockup and an avatar-only profile chip so the bar fits */
@media (min-width: 381px) and (max-width: 480px) { .dz-top:has(.cobrand:not([hidden])) .dz-lock { height: 26px; } .dz-top:has(.cobrand:not([hidden])) .prof .pmeta { display: none; } }

/* ---------- page frame ---------- */
body.dz { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-left: 0 !important; }
body.dz > main { width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 24px var(--dz-gut) 40px; flex: 1 0 auto; }
body.dz > #footer { margin-top: auto; padding: 16px var(--dz-gut) 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); text-align: center; }
body.dz[data-view="arcade"] { background: var(--console); }
body.dz[data-view="arcade"] > #footer { color: var(--console-dim); }
body.dz .stage > .banner { margin: 0 0 16px; border-radius: 4px; }
body.dz .banner { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; padding: 10px 14px; }
body.dz .banner.ember, :root[data-theme="light"] body.dz .banner.ember { background: var(--amber-tint); border-color: #E2C28F; color: #5A3604; }
.dz-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.dz-ph-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 760px; }
.dz-ph-l h1 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; margin: 0; }
.dz-ph-l p { margin: 0; }
.dz-ph-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { body.dz > main { padding: 16px 16px 40px; } .dz-pagehead { align-items: flex-start; gap: 14px; } .dz-ph-l h1 { font-size: 28px; } }

/* ---------- Home ---------- */
.dz-home { display: flex; flex-direction: column; gap: 20px; }
.dz-ann { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 4px; }
.dz-ann > svg { width: 18px; height: 18px; color: var(--red); flex: none; }
.dz-ann > span { flex: 1; min-width: 0; }
.dz-ann-when { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.dz-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; background: var(--console); color: var(--console-text); border-radius: 4px; overflow: hidden; }
.dz-hero-main { padding: 32px 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dz-hero-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dz-hero-eyebrow .eyebrow { color: var(--console-red); }
.dz-hero h1, .dz-final-hero h1 { color: #fff; font-size: clamp(34px, 4vw, 52px); font-weight: 800; margin: 0; }
.dz-hero-sub { color: var(--console-text); font-size: 17px; max-width: 660px; margin: 0; }
.dz-hero-sub b { color: #fff; }
.dz-hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dz-caseseg { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.dz-caseseg .c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dz-caseseg .bars { display: flex; gap: 2px; }
.dz-caseseg .bars i { flex: 1; height: 6px; background: var(--console-line); }
.dz-caseseg .bars i.on { background: #fff; } .dz-caseseg .bars i.cur { background: var(--red); }
.dz-caseseg .mono { font-size: 11px; color: var(--console-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-caseseg .c.cur .mono { color: #fff; }
.dz-hero-side { background: var(--console-2); border-left: 1px solid var(--console-line); padding: 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.dz-hero-side p { margin: 0; color: var(--console-text); }
.dz-hero-side .strong, .dz-hero-side .mono.strong { color: #fff; }
.dz-side-h { display: flex; align-items: center; gap: 8px; color: var(--console-text); }
.dz-side-h svg { width: 18px; height: 18px; }
.dz-vault { display: flex; gap: 8px; flex-wrap: wrap; }
.dz-digit { width: 52px; height: 64px; border: 1px solid var(--console-line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 32px; color: #fff; background: var(--console); }
.dz-digit.blank { color: #8B929C; font-size: 20px; }
.dz-digit.blank.next { border-color: var(--red); color: var(--console-red); }
.dz-vault.sm .dz-digit { width: 40px; height: 50px; font-size: 24px; }
.dz-vault.sm .dz-digit.blank { font-size: 16px; }
.dz-rule-dark { height: 1px; background: var(--console-line); }
.dz-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.dz-home-grid.two { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.dz-thisch { display: flex; flex-direction: column; }
.dz-hrows { display: flex; flex-direction: column; }
.dz-hrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 48px; gap: 14px; align-items: center; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer; min-height: 52px; }
.dz-hrow:hover:not(:disabled) { background: var(--paper); }
.dz-hrow:disabled { cursor: default; color: var(--muted); }
.dz-hrow .k, .dz-prow .k { width: 28px; height: 28px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; border-radius: 0; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.dz-hrow .k svg, .dz-prow .k svg { width: 14px; height: 14px; }
.dz-hrow.done .k, .dz-prow.done .k { background: var(--green); border-color: var(--green); color: #fff; }
.dz-hrow.cur { background: var(--red-tint); font-weight: 600; }
.dz-hrow.cur .k, .dz-prow.next .k { background: var(--red); border-color: var(--red); color: #fff; }
.dz-hrow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-hrow .mono { text-align: right; }
.dz-standcard { text-align: left; font: inherit; color: var(--ink); cursor: pointer; flex: 1; }
.dz-standcard:hover { border-color: var(--ink); }
.dz-standcard svg { width: 16px; height: 16px; }
.dz-standcard .small { margin: 0; }
.dz-badgecard { gap: 8px; }
.dz-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dz-badge { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; border-radius: 4px; cursor: pointer; font-size: 18px; }
.dz-badge:hover { border-color: var(--ink); }
.dz-questcard { display: flex; flex-direction: column; min-height: 100%; }
.dz-qrow { display: flex; gap: 14px; align-items: center; padding: 12px 20px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-height: 60px; }
.dz-qrow:hover { background: var(--paper); }
.dz-qic { width: 40px; height: 40px; border-radius: 4px; background: var(--ink); color: #fff; display: inline-grid; place-items: center; flex: none; font-size: 18px; }
.dz-qic.done { background: var(--green); }
.dz-qt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dz-qt b { font-weight: 600; font-size: 14.5px; }
.dz-qt small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-arcstrip { margin: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; border: 0; border-radius: 4px; background: var(--console); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.dz-arcstrip:hover { background: var(--console-2); }
.dz-arcstrip > span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.dz-arcstrip b { font-size: 14px; } .dz-arcstrip small { color: var(--console-dim); font-size: 12px; }
.dz-arcstrip svg { flex: none; }
@media (max-width: 1100px) {
  .dz-hero { grid-template-columns: minmax(0, 1fr); }
  .dz-hero-side { border-left: 0; border-top: 1px solid var(--console-line); padding: 20px 24px; }
  .dz-home-grid, .dz-home-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-home-grid .dz-thisch { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .dz-hero-main { padding: 22px 20px; gap: 14px; }
  .dz-hero h1 { font-size: 32px; }
  .dz-hero-sub { font-size: 15.5px; }
  .dz-hero-cta .btn { width: 100%; }
  .dz-caseseg { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
  .dz-caseseg .mono { display: none; }
  .dz-hero-side { padding: 18px 20px; }
  .dz-digit { width: 42px; height: 52px; font-size: 26px; }
  .dz-home-grid, .dz-home-grid.two { grid-template-columns: minmax(0, 1fr); }
  .dz-ann { align-items: flex-start; }
  .dz-ann-when { display: block; margin: 2px 0 0; }
}

/* ---------- Case board ---------- */
.dz-case { display: flex; flex-direction: column; gap: 24px; }
.dz-vaultchip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.dz-vaultchip svg { width: 18px; height: 18px; }
.dz-vaultchip .eyebrow { color: var(--ink); }
.dz-vaultchip .mono { font-size: 18px; font-weight: 600; letter-spacing: .3em; }
.dz-files { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; }
.dz-file { display: flex; flex-direction: column; position: relative; padding: 23px 0 0; border: 0; background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.dz-ftab { position: absolute; top: 0; left: 0; height: 24px; padding: 0 12px; display: flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; box-sizing: border-box; }
.dz-fbody { background: var(--surface); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 196px; flex: 1; box-sizing: border-box; }
.dz-file:hover:not(:disabled) .dz-fbody { border-color: var(--ink); }
.dz-file.on .dz-fbody { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.dz-file.on .dz-ftab { background: var(--ink); color: #fff; border-color: var(--ink); }
.dz-file.locked { cursor: default; }
.dz-file.locked .dz-fbody, .dz-file.locked .dz-ftab { background: var(--sunk); }
.dz-file.closed-case .dz-fbody { border-color: var(--green); }
.dz-file.closed-case .dz-ftab { background: var(--green); color: #fff; border-color: var(--green); }
.dz-ftop { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.dz-lockline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dz-dig { font-weight: 600; font-size: 13px; }
.dz-ftitle { font-family: var(--display); font-stretch: 112%; font-size: 19px; font-weight: 700; line-height: 1.15; }
.dz-file.locked .dz-ftitle { color: var(--ink-2); }
.dz-fsub { font-size: 13px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dz-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.dz-dots i { width: 14px; height: 14px; border: 1px solid var(--line-2); background: var(--surface); box-sizing: border-box; }
.dz-dots i.on { background: var(--green); border-color: var(--green); }
.dz-dots i.cur { background: var(--red); border-color: var(--red); }
.dz-fmeta { font-size: 12px; color: var(--muted); }
.dz-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.dz-file-card { display: flex; flex-direction: column; overflow: hidden; }
.dz-fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px; border-bottom: 1px solid var(--line); }
.dz-fc-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 700px; }
.dz-fc-l h2 { font-size: 24px; margin: 0; font-weight: 800; }
.dz-fc-l .tactic { color: var(--red-ink); }
.dz-brief, .dz-brief p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.dz-brief p + p { margin-top: 8px; }
.dz-fc-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; text-align: right; }
.dz-more summary { cursor: pointer; font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.dz-more .story { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.dz-plist { display: flex; flex-direction: column; margin: 0; gap: 0; }
body.dz .dz-prow { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 90px 130px; gap: 16px; align-items: center; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer; min-height: 56px; width: 100%; box-shadow: none; }
body.dz .dz-prow:last-child { border-bottom: 0; }
body.dz .dz-prow:hover { background: var(--paper); }
body.dz .dz-prow.next { background: var(--red-tint); padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line); }
body.dz .dz-prow.next b { font-weight: 700; }
.dz-prow .pr-t { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dz-prow .pr-t b { font-weight: 500; }
.dz-prow .pr-t small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.dz-prow .pr-topic { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-prow .chip { justify-self: start; }
.dz-prow .pr-pts { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--muted); }
.dz-prow .pr-pts.ok { color: var(--green); }
.dz-prow.finale .k { border-style: dashed; color: var(--amber); }
.dz-prow.finale.done .k { color: #fff; border-style: solid; }
.dz-reward { padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--green-tint); display: flex; flex-direction: column; gap: 10px; }
.dz-reward-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dz-reward h3 { font-size: 18px; margin: 0; }
.dz-reward .rt, .dz-reward .rt p { margin: 0; font-size: 14.5px; color: var(--ink); }
.dz-reward .dz-vault .dz-digit.blank { color: #8B929C; }
.dz-next { align-self: flex-start; }
.dz-next-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.dz-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dz-habit { padding: 12px 14px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.dz-habit .mono { font-weight: 500; }
.dz-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-term { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); color: var(--ink); cursor: pointer; min-height: 36px; }
.dz-term:hover { border-color: var(--ink); }
.dz-side .card b { font-size: 15px; }
.dz-side .card p { margin: 0; }
@media (max-width: 1100px) {
  .dz-case-grid { grid-template-columns: minmax(0, 1fr); }
  .dz-files { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .dz-file { flex: 0 0 220px; scroll-snap-align: start; }
  .dz-fbody { min-height: 170px; }
}
@media (max-width: 700px) {
  .dz-file { flex-basis: 180px; }
  .dz-fbody { min-height: 150px; padding: 12px; gap: 8px; }
  .dz-ftitle { font-size: 16px; }
  .dz-fsub { -webkit-line-clamp: 2; }
  .dz-fc-head { flex-direction: column; gap: 14px; padding: 16px; }
  .dz-fc-r { align-items: stretch; text-align: left; width: 100%; } .dz-fc-r .btn { width: 100%; }
  body.dz .dz-prow { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; }
  body.dz .dz-prow.next { padding: 12px 16px; }
  .dz-prow .pr-topic, .dz-prow .chip.diff { display: none; }
  .dz-vaultchip { width: 100%; }
}

/* ---------- Puzzle ---------- */
body.dz .card.puzzle.wb { background: transparent; border: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "left" "right"; border-radius: 0; }
body.dz .pz-rail.pz-bar { grid-area: rail; display: flex; flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; padding: 12px 20px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0; min-height: 64px; box-sizing: border-box; }
body.dz .pz-bar .crumb { display: flex; align-items: center; gap: 16px; margin: 0; flex-wrap: nowrap; min-width: 0; }
.dz-crumb-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dz-crumb-t .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-crumb-t .label { font-family: var(--body); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
body.dz .pz-bar .rrows { display: flex; gap: 6px; margin-left: auto; overflow-x: auto; flex: 0 1 auto; scrollbar-width: none; }
body.dz .pz-bar .rrow { width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 0; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 12px; cursor: pointer; box-shadow: none; }
body.dz .pz-bar .rrow .t { display: none !important; }
body.dz .pz-bar .rrow .k { color: inherit; }
body.dz .pz-bar .rrow .k svg { width: 14px; height: 14px; }
body.dz .pz-bar .rrow.done:not(.cur) { background: var(--green); border-color: var(--green); color: #fff; }
body.dz .pz-bar .rrow.cur { background: var(--ink); border-color: var(--ink); color: #fff; }
body.dz .pz-bar .rrow.fin:not(.cur):not(.done) { border-style: dashed; color: var(--amber); }
body.dz .pz-bar .rrow:hover:not(.cur) { border-color: var(--ink); }
body.dz .pz-bar .rnav { display: flex; gap: 4px; margin: 0; padding: 0; }
body.dz .pz-bar .rnav .btn { min-width: 40px; padding: 0 8px; }
body.dz .pz-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: visible; }
body.dz .pz-pane.left { background: var(--paper); }
body.dz .pz-pane.main { padding: 20px; background: var(--surface); border-radius: 0 0 4px 4px; }
body.dz .pz-h { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body.dz .pz-h.red { color: var(--red-ink); }
.dz-pz-tags { display: flex; gap: 8px; flex-wrap: wrap; }
body.dz .pz-pane h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; margin: 0; }
body.dz .pz-ctx { font-size: 14px; color: var(--muted); border-left: 3px solid var(--line-2); padding-left: 12px; margin: 0; }
body.dz .pz-pane .prompt, body.dz .pz-pane .prompt p { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink); margin: 0; }
body.dz .pz-pane .wrap-x { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; overflow-x: auto; }
body.dz .pz-pane .wrap-x pre { font-size: 13px; line-height: 1.6; }
body.dz .opts-help, body.dz .order-help { margin: 0; font-size: 13px; color: var(--muted); }
body.dz .opts { counter-reset: opt; display: flex; flex-direction: column; gap: 10px; margin: 0; }
body.dz .opts .opt { counter-increment: opt; position: relative; display: block; width: 100%; padding: 14px 16px 14px 56px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; font-size: 15px; line-height: 1.45; cursor: pointer; min-height: 52px; box-shadow: none; }
body.dz .opts .opt::before { content: counter(opt, upper-alpha); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); box-shadow: none; box-sizing: border-box; }
body.dz .opts .opt.multi::before { content: ""; border-radius: 3px; border: 1.5px solid var(--ink-2); width: 22px; height: 22px; top: 15px; left: 18px; }
body.dz .opts .opt.multi.sel::before { content: "\2713"; background: var(--ink); color: #fff; border-color: var(--ink); font-family: var(--body); font-size: 14px; }
body.dz .opts .opt:hover:not(:disabled) { border-color: var(--ink); }
body.dz .opts .opt.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
body.dz .opts .opt.sel::before { background: var(--ink); color: #fff; border-color: var(--ink); }
body.dz .opts .opt.ordered::before, body.dz .opts.review .opt::before { display: none; }
body.dz .opts .opt.ordered { padding-left: 56px; }
body.dz .opts .opt .ordn { left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 0; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; }
body.dz .opts .opt.locked { background: var(--green-tint); border-color: var(--green); }
body.dz .opts .opt.locked .ordn { background: var(--green); }
body.dz .opts .opt.has-mail, body.dz .opts .opt.email { padding: 12px 12px 12px 56px; }
body.dz .opts.review .opt { padding-left: 16px; cursor: default; }
body.dz .opts.review .opt.correct { border-color: var(--green); background: var(--green-tint); box-shadow: inset 3px 0 0 var(--green); padding-right: 44px; }
body.dz .opts.review .opt.dim { color: var(--muted); }
body.dz .opts.review .rv-mark { position: absolute; right: 14px; top: 14px; color: var(--green); }
body.dz .text-row .ans, body.dz .ans { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--surface); color: var(--ink); box-sizing: border-box; }
body.dz .ans:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(31,86,196,.18); }
body.dz .pz-pane.right .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--ink); }
body.dz .pz-pane.right .actions .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }
body.dz .card.puzzle #submit { min-height: 52px; padding: 0 26px; font-size: 15px; background: var(--red); border-color: var(--red); color: #fff; }
body.dz .card.puzzle #submit:hover:not(:disabled) { background: var(--red-ink); }
body.dz .card.puzzle #next { background: var(--red); border-color: var(--red); color: #fff; }
body.dz .fb { margin: 0; padding: 14px 16px; border-radius: 4px; border: 1px solid; font-size: 14.5px; }
body.dz .fb.bad, :root[data-theme="light"] body.dz .fb.bad { background: #FCEDEE; border-color: #E6A9B1; color: #7E1122; }
body.dz .fb.confirm, :root[data-theme="light"] body.dz .fb.confirm { background: var(--amber-tint); border-color: #E2C28F; color: #5A3604; }
body.dz .hintbox, :root[data-theme="light"] body.dz .hintbox { background: var(--amber-tint); border: 1px solid #E2C28F; border-left: 3px solid var(--amber); color: #3F2603; padding: 12px 16px; border-radius: 4px; }
/* solved: the receipt */
body.dz .card.puzzle .fb.ok.dz-earned, :root[data-theme="light"] body.dz .fb.ok.dz-earned { background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 0; border-radius: 4px; }
.dz-earned-h { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 20px 12px; }
.dz-earned-h .stamp { grid-row: 1 / span 2; align-self: center; }
.dz-earned-h .eyebrow { grid-column: 2; }
.dz-earn-n { grid-column: 2; font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 52px; line-height: 1; color: var(--green); letter-spacing: -0.02em; }
.dz-earn-rows { padding: 0 20px 12px; }
.dz-earn-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dz-earn-row:last-child { border-bottom: 0; }
.dz-earn-row.neg { color: var(--muted); }
.dz-earned > .chip { margin: 0 20px 14px; align-self: flex-start; }
.dz-earned > p { padding: 0 20px 14px; margin: 0; }
.dz-closed { background: var(--console); color: var(--console-text); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-radius: 4px; }
.dz-closed .small b { color: #fff; }
.dz-solved-actions { display: flex; flex-direction: column; align-items: stretch !important; gap: 10px !important; }
.dz-solved-actions .btn { width: 100%; }
.dz-upnext { display: flex; flex-direction: column; gap: 3px; }
.dz-upnext b { font-size: 18px; font-weight: 600; }
body.dz .pz-pane.right .actions.dz-solved-actions { border-top: 1px solid var(--line); }
/* the debrief */
body.dz .pz-tabs { display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); overflow: hidden; align-self: flex-start; }
body.dz .pz-tabs [role="tab"] { min-height: 38px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink-2); box-shadow: none; }
body.dz .pz-tabs [role="tab"]:last-child { border-right: 0; }
body.dz .pz-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; font-weight: 600; }
body.dz .pz-tabs [role="tab"][aria-selected="true"] .pz-tab-ok { color: #9FE0BE; }
body.dz .debrief { margin: 0; padding: 0; border: 0; background: transparent; }
body.dz .pz-debrief .debrief { display: flex; flex-direction: column; gap: 0; }
body.dz .debrief > .label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
body.dz .pz-debrief .debrief > .label { display: none; }
body.dz .debrief .db-part, body.dz .pz-debrief .debrief .db-part, body.dz .pz-debrief .debrief .db-part:first-of-type { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
body.dz .debrief .db-h { font-family: var(--mono); font-stretch: 100%; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 2px 0 0; display: flex; align-items: flex-start; gap: 6px; }
body.dz .debrief .db-h svg { display: none !important; }
body.dz .debrief .db-habit .db-h { color: var(--red-ink); }
body.dz .debrief .db-habit .rt, body.dz .debrief .db-habit .rt p { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); }
body.dz .debrief .rt, body.dz .debrief .rt p, body.dz .debrief p { color: var(--ink); font-size: 14.5px; margin: 0; }
body.dz .debrief .rt p + p { margin-top: 8px; }
body.dz .debrief .db-tips ul { margin: 0; padding-left: 18px; }
body.dz .debrief .db-tips li { margin: 4px 0; font-size: 14px; }
@media (min-width: 1101px) {
  body.dz .card.puzzle.wb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "rail rail" "left right"; }
  body.dz .card.puzzle.wb.mod { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "left"; }
  body.dz .pz-pane.left { border-right: 0; border-radius: 0 0 0 4px; }
  body.dz .pz-pane.right { border-radius: 0 0 4px 0; }
  body.dz .pz-pane.left.has-tabs { overflow: auto; }
}
@media (max-width: 1100px) {
  body.dz .card.puzzle.wb.solved { grid-template-areas: "rail" "right" "left"; }
  body.dz .card.puzzle.wb.solved .pz-pane.right { border-bottom: 0; border-radius: 0; }
  body.dz .card.puzzle.wb.solved .pz-pane.left { border-bottom: 1px solid var(--line); border-radius: 0 0 4px 4px; }
  body.dz .pz-pane.left { border-bottom: 0; }
  body.dz .pz-pane.right { border-radius: 0 0 4px 4px; }
}
@media (max-width: 700px) {
  body.dz .pz-rail.pz-bar { padding: 10px 12px; gap: 10px; }
  body.dz .pz-bar .crumb { gap: 10px; width: 100%; }
  body.dz .pz-bar .crumb .btn { padding: 0 10px; }
  body.dz .pz-bar .rrows { margin-left: 0; width: 100%; }
  body.dz .pz-bar .rnav { display: none; }
  body.dz .pz-pane { padding: 18px 16px; gap: 14px; }
  body.dz .pz-pane h2 { font-size: 24px; }
  body.dz .pz-pane .prompt, body.dz .pz-pane .prompt p { font-size: 16px; }
  body.dz .opts .opt { padding-left: 50px; font-size: 14.5px; }
  body.dz .opts .opt::before { left: 12px; }
  body.dz .pz-pane.right .actions { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); background: var(--surface); margin: 0 -16px -18px; padding: 12px 16px; z-index: 5; }
  body.dz .pz-pane.right .actions #submit { flex: 1 1 100%; order: -1; }
  body.dz .pz-pane.right .actions .meta { margin-left: 0; }
  body.dz .pz-pane.right .actions.dz-solved-actions { position: static; margin: 0; padding: 12px 0 0; }
  body.dz .debrief .db-part, body.dz .pz-debrief .debrief .db-part, body.dz .pz-debrief .debrief .db-part:first-of-type { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dz-earn-n { font-size: 44px; }
}

/* ---------- Standings ---------- */
.dz-standings { display: flex; flex-direction: column; gap: 20px; }
.dz-live { display: inline-flex; align-items: center; gap: 8px; }
.dz-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.dz-st-switch { display: none; align-self: flex-start; }
.dz-st-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dz-st-grid .card.standings { padding: 0; display: flex; flex-direction: column; }
.dz-st-grid .dz-cardh.sb { padding: 18px 20px 12px; flex-wrap: wrap; }
body.dz .dz-teams .tm { display: flex; flex-direction: column; padding: 0 20px; }
body.dz .dz-dr { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) 56px 24px; gap: 14px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; cursor: pointer; font-size: 14px; }
body.dz .dz-dr .rk { font-family: var(--mono); font-size: 13px; color: var(--muted); }
body.dz .dz-dr .who { display: flex; flex-direction: column; min-width: 0; }
body.dz .dz-dr .who b { font-weight: 600; color: var(--ink); }
body.dz .dz-dr .who small { font-size: 12px; color: var(--muted); }
body.dz .dz-dr .tm-badges { display: inline-flex; gap: 2px; }
body.dz .dz-dr .track { height: 14px; background: var(--sunk); position: relative; }
body.dz .dz-dr .track span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
body.dz .dz-dr.me .track span { background: var(--red); }
body.dz .dz-dr.me .rk { color: var(--red-ink); font-weight: 600; }
body.dz .dz-dr .avg { text-align: right; font-size: 14px; font-weight: 600; }
body.dz .dz-dr .chev { color: var(--muted); display: inline-flex; transition: transform .15s; }
body.dz .dz-dr.open .chev { transform: rotate(180deg); }
body.dz .tm-members { padding: 4px 0 10px 42px; border-bottom: 1px solid var(--line); background: transparent; }
body.dz .tm-member { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; border: 0; }
body.dz .tm-member.me { font-weight: 600; }
body.dz .tm-member .rk { font-family: var(--mono); font-size: 12px; color: var(--muted); }
body.dz .tm-member small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
body.dz .tm-member .sc { font-family: var(--mono); }
.dz-note { display: flex; gap: 12px; align-items: center; margin: 16px 20px 20px; padding: 14px 16px; background: var(--paper); }
.dz-note svg { flex: none; width: 18px; height: 18px; }
body.dz .dz-players .lb { display: flex; flex-direction: column; }
body.dz .dz-pr { display: grid; grid-template-columns: 40px 32px minmax(0, 1fr) 80px; gap: 12px; align-items: center; padding: 10px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 14px; margin: 0; }
body.dz .dz-pr.me { background: var(--red-tint); box-shadow: inset 3px 0 0 var(--red); font-weight: 600; }
body.dz .dz-pr .rk { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 400; min-width: 0; width: auto; height: auto; background: none; border: 0; }
body.dz .dz-pr.me .rk { color: var(--red-ink); }
body.dz .dz-pr .who { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
body.dz .dz-pr .who b { font-weight: inherit; color: var(--ink); }
body.dz .dz-pr .who small { flex-basis: 100%; font-size: 12px; color: var(--muted); font-weight: 400; }
body.dz .dz-pr .bd { display: inline-flex; gap: 2px; }
body.dz .dz-pr .sc { font-family: var(--mono); text-align: right; font-size: 14px; color: var(--ink); }
body.dz .lb-gap { text-align: center; padding: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dz-st-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); margin-top: auto; }
.youtag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; padding: 1px 5px; border-radius: 2px; font-weight: 500; }
@media (max-width: 1000px) {
  .dz-st-switch { display: inline-flex; }
  .dz-st-grid { grid-template-columns: minmax(0, 1fr); }
  .dz-standings.show-players .dz-st-teams, .dz-standings.show-teams .dz-st-players { display: none; }
  .dz-st-boards { display: none; }
}
@media (max-width: 600px) {
  body.dz .dz-dr { grid-template-columns: 24px minmax(0, 1fr) 70px 48px 18px; gap: 10px; }
  body.dz .dz-pr { grid-template-columns: 32px 32px minmax(0, 1fr) 64px; padding: 10px 14px; gap: 10px; }
}

/* ---------- Side quests ---------- */
.dz-quests { display: block; }
.sq-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.sq-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sq-progress { display: flex; flex-direction: column; gap: 6px; width: 240px; }
.sq-grp { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.sq-grp .ln { flex: 1; height: 1px; background: var(--line); }
.sq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sq-qcard { position: relative; }
.sq-qcard .sq-tile { display: grid; grid-template-columns: 64px minmax(0, 1fr); width: 100%; min-height: 104px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; font: inherit; color: var(--ink); text-align: left; cursor: pointer; box-shadow: none; }
.sq-qcard .sq-tile:hover:not(:disabled) { border-color: var(--ink); transform: none; }
.sq-page .sq-tile .sq-nm { font-family: var(--body); font-size: 15px; font-weight: 600; }
.sq-qcard.sel .sq-tile { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.sq-page .sq-cov { display: flex; align-items: center; justify-content: center; background-color: var(--console); color: #fff; background-image: linear-gradient(#1B2027 1px, transparent 1px), linear-gradient(90deg, #1B2027 1px, transparent 1px); background-size: 12px 12px; }
.sq-page .sq-tile.done .sq-cov { background: var(--green); }
.sq-page .sq-body { padding: 12px 44px 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sq-page .sq-nm { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sq-page .sq-bl { font-size: 12.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-page .sq-foot { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-top: 4px; margin-top: auto; }
.sq-page .sq-foot .ok { color: var(--green); }
.sq-boardbtn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); }
.sq-boardbtn:hover { border-color: var(--ink); }
.sq-qcard.sel .sq-boardbtn { background: var(--ink); color: #fff; border-color: var(--ink); }
.sq-locks { display: flex; flex-direction: column; gap: 8px; }
.sq-lockrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sunk); border-radius: 4px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.sq-lockrow svg { flex: none; }
.sq-note { margin: 4px 0 0; }
.sq-boardpanel { position: sticky; top: calc(var(--dz-top-h) + 16px); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; max-height: calc(100vh - var(--dz-top-h) - 40px); overflow: hidden; }
.sq-ph { padding: 20px 18px 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.sq-ph h2 { font-size: 24px; margin: 0; }
.sq-rows { overflow: auto; min-height: 0; flex: 1; }
.sq-pad { padding: 16px 18px; margin: 0; }
.sq-brow { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) 84px; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sq-brow .rk { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.sq-brow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-brow .nm small { font-size: 12px; color: var(--muted); }
.sq-brow .sc { text-align: right; }
.sq-brow.me { background: var(--red-tint); box-shadow: inset 3px 0 0 var(--red); font-weight: 600; }
.sq-gap { text-align: center; padding: 6px; border-bottom: 1px solid var(--line); }
.sq-pfoot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; }
.sq-pfoot .btn { width: 100%; }
@media (max-width: 1100px) { .sq-page { grid-template-columns: minmax(0, 1fr); } .sq-boardpanel { position: static; max-height: none; } }
@media (max-width: 700px) { .sq-grid { grid-template-columns: minmax(0, 1fr); } .sq-progress { width: 100%; } }
/* the shared play frame (side quests: light header) */
.dz-frame { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--surface); }
.dz-frame-h { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 60px; box-sizing: border-box; flex-wrap: wrap; }
.sq-title-lbl { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sq-title-lbl b { font-size: 16px; }
.dz-frame-b { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 0; }
.dz-frame-game { min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); }
.dz-frame-rail { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.dz-frame-rail p { margin: 0 0 6px; }
.sq-result { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sq-result p { margin: 0; }
.sq-res-h { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sq-res-score { display: flex; flex-direction: column; }
.sq-res-score b { font-family: var(--display); font-stretch: 100%; font-size: 32px; font-weight: 800; line-height: 1; }
.sq-result .actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1280px) { .dz-frame-b { grid-template-columns: minmax(0, 1fr); } .dz-frame-rail { display: none; } }
@media (max-width: 700px) { .dz-frame-game { padding: 8px; } .dz-frame-h { padding: 8px 10px; gap: 10px; } }

/* ---------- Arcade (dark, no page scroll on desktop) ---------- */
.arc-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; background: var(--console); color: var(--console-text); margin: -24px calc(-1 * var(--dz-gut)) -40px; min-height: calc(100vh - var(--dz-top-h)); }
.arc-main { padding: 24px 32px 20px var(--dz-gut); display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 0; }
.arc-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.arc-ph > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.arc-ph h1 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; color: #fff; margin: 0; }
.arc-ph p { margin: 0; max-width: 520px; color: var(--console-text); }
.arc-never { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--console-line-2); border-radius: 4px; font-size: 13px; max-width: 360px; }
.arc-never b { color: #fff; }
.arc-never svg { flex: none; }
.arc-gtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.arc-gtile { position: relative; min-width: 0; }
body.dz .arc-game { display: flex; flex-direction: column; width: 100%; padding: 0; background: var(--console-2); border: 1px solid var(--console-line); border-radius: 4px; overflow: hidden; color: var(--console-text); font: inherit; text-align: left; cursor: pointer; min-height: 0; box-shadow: none; }
body.dz .arc-game:hover { border-color: var(--console-line-2); }
.arc-gtile.sel .arc-game { border-color: #fff; box-shadow: 3px 3px 0 var(--red); }
.arc-cov { height: 80px; display: flex; align-items: center; justify-content: center; color: #fff; background-image: linear-gradient(#20252D 1px, transparent 1px), linear-gradient(90deg, #20252D 1px, transparent 1px); background-size: 12px 12px; }
.arc-gtile.sel .arc-cov { background: var(--red); }
.arc-tb { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.arc-tb .nm { font-weight: 600; color: #fff; font-size: 15px; }
.arc-tf { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--console-dim); padding-top: 6px; border-top: 1px solid var(--console-line); }
.arc-unit-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-bbtn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--console-line-2); background: rgba(15,18,22,.7); color: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.arc-bbtn:hover, .arc-gtile.sel .arc-bbtn { background: #fff; color: var(--console); border-color: #fff; }
.arc-foot { display: flex; gap: 10px; align-items: center; color: var(--console-dim); font-size: 13px; margin: auto 0 0; }
.arc-panel { background: var(--console-2); border-left: 1px solid var(--console-line); display: flex; flex-direction: column; min-height: 0; }
.arc-panel-h { padding: 24px 18px 14px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--console-line); }
.arc-panel-h h2 { color: #fff; font-size: 26px; margin: 0; }
.arc-row-sb { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.arc-row-sb .mono { color: var(--console-dim); }
.arc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--console-line-2); border-radius: 4px; overflow: hidden; }
.arc-seg button { min-height: 36px; border: 0; border-right: 1px solid var(--console-line-2); background: transparent; color: var(--console-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.arc-seg button:last-child { border-right: 0; }
.arc-seg button.on { background: #fff; color: var(--console); }
.arc-rows { flex: 1; min-height: 0; overflow: hidden; }
body.dz .arc-brow { display: grid; grid-template-columns: 34px 32px minmax(0, 1fr) 90px; gap: 10px; align-items: center; padding: 7px 18px; border-bottom: 1px solid var(--console-line); font-size: 14px; color: var(--console-text); min-height: 47px; box-sizing: border-box; background: transparent; border-radius: 0; margin: 0; }
body.dz .arc-brow .rk { font-family: var(--mono); font-size: 12.5px; color: var(--console-dim); background: none; width: auto; height: auto; }
body.dz .arc-brow.r1 .rk { color: var(--console-red); }
body.dz .arc-brow .av { width: 32px; height: 32px; background: var(--console-line); color: var(--console-text); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; border-radius: 3px; }
body.dz .arc-brow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dz .arc-brow .nm b { color: #fff; font-weight: 500; }
body.dz .arc-brow .nm small { font-size: 12px; color: var(--console-dim); }
body.dz .arc-brow .sc { font-family: var(--mono); text-align: right; color: #fff; }
body.dz .arc-brow.me { background: #2A1419; box-shadow: inset 3px 0 0 var(--red); }
body.dz .arc-brow.me .av { background: var(--red); color: #fff; }
body.dz .arc-brow.me .nm b { font-weight: 700; }
.arc-empty { padding: 16px 18px; margin: 0; color: var(--console-dim); font-size: 13.5px; }
.arc-panel-f { padding: 14px 18px; border-top: 1px solid var(--console-line); display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.arc-full { background: none; border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 8px 0; }
.arc-full:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1101px) and (min-height: 640px) {
  body.dz[data-view="arcade"] { height: 100vh; height: 100dvh; overflow: hidden; }
  body.dz[data-view="arcade"] > main { padding-bottom: 0; }
  body.dz[data-view="arcade"] > #footer { display: none; }
  .arc-page { height: calc(100vh - var(--dz-top-h)); height: calc(100dvh - var(--dz-top-h)); min-height: 0; margin-bottom: 0; overflow: hidden; }
  .arc-main { overflow: hidden; }
  .arc-gtiles { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, max-content); align-content: start; overflow: auto; scrollbar-width: thin; }
}
@media (min-width: 1101px) and (max-height: 820px) { .arc-cov { height: 56px; } .arc-tb { padding: 9px 12px; gap: 4px; } .arc-main { gap: 12px; padding-top: 18px; } .arc-ph h1 { font-size: 30px; } .arc-panel-h { padding-top: 16px; } }
@media (max-width: 1100px) {
  .arc-page { grid-template-columns: minmax(0, 1fr); margin: -16px -16px -40px; }
  .arc-main { padding: 20px 16px; }
  .arc-panel { border-left: 0; border-top: 1px solid var(--console-line); }
  .arc-gtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .arc-gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .arc-cov { height: 60px; } .arc-never { max-width: none; } }
/* arcade play frame (dark header) */
.arc-frame { background: var(--console); margin: -24px calc(-1 * var(--dz-gut)) -40px; min-height: calc(100vh - var(--dz-top-h)); display: flex; flex-direction: column; }
body.dz .arc-topbar { display: flex; align-items: center; gap: 14px; padding: 10px var(--dz-gut); min-height: 60px; box-sizing: border-box; background: var(--console); border-bottom: 1px solid var(--console-line); color: var(--console-text); margin: 0; }
body.dz .arc-topbar .arc-back { background: transparent; color: #fff; border-color: var(--console-line-2); }
body.dz .arc-topbar .arc-back:hover { border-color: #fff; background: var(--console-2); }
.arc-title { display: flex; align-items: baseline; gap: 8px; }
.arc-title b { color: #fff; font-size: 16px; }
.arc-title span { font-size: 13px; color: var(--console-dim); }
.arc-grow { flex: 1; }
.arc-never-chip { background: transparent; border-color: var(--console-line-2); color: var(--console-text); }
.arc-fb { display: grid; grid-template-columns: minmax(0, 1fr) 220px; flex: 1; min-height: 0; }
body.dz .arc-body { padding: 18px var(--dz-gut); background: var(--console); color: var(--console-text); min-width: 0; }
.arc-rail { background: var(--console-2); border-left: 1px solid var(--console-line); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; color: var(--console-text); }
.arc-rail b { color: #fff; }
.arc-rail p { margin: 0; color: var(--console-dim); }
.arc-rail .dz-bar > span { background: var(--red); }
body.dz .arc-body .hint, body.dz .arc-body .arc-help { color: var(--console-dim); }
body.dz .arc-over-card { background: var(--console-2); border: 1px solid var(--console-line-2); color: var(--console-text); border-radius: 4px; }
body.dz .arc-over-card .arc-score, body.dz .arc-result .arc-score { color: #fff; font-family: var(--display); font-stretch: 100%; font-weight: 800; }
body.dz .arc-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; text-align: left; background: transparent; border: 0; padding: 12px 0; color: var(--console-text); }
.arc-res-l { display: flex; flex-direction: column; gap: 8px; }
body.dz .arc-result .arc-score { font-size: clamp(56px, 7vw, 88px); line-height: 1; }
body.dz .arc-result .arc-unit { color: var(--console-dim); font-family: var(--mono); font-size: 13px; }
body.dz .arc-result .arc-best { color: var(--console-text); font-weight: 600; }
body.dz .arc-result .arc-best.new { color: var(--console-red); }
body.dz .arc-result .arc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; justify-content: flex-start; }
body.dz .arc-dark-btn { background: transparent; color: #fff; border-color: var(--console-line-2); }
body.dz .arc-dark-btn:hover { background: var(--console-2); border-color: #fff; }
body.dz .arc-result .tiny { color: var(--console-dim); margin: 0; }
body.dz .arc-board { background: var(--console-2); border: 1px solid var(--console-line); border-radius: 4px; padding: 0; margin: 0; }
body.dz .arc-board > .arc-row-sb { padding: 14px 18px 10px; border-bottom: 1px solid var(--console-line); }
body.dz .arc-board .hint { padding: 0 18px 14px; color: var(--console-dim); }
@media (max-width: 1100px) { .arc-fb { grid-template-columns: minmax(0, 1fr); } .arc-rail { display: none; } .arc-frame { margin: -16px -16px -40px; } body.dz .arc-body { padding: 14px 12px; } body.dz .arc-result { grid-template-columns: minmax(0, 1fr); } body.dz .arc-topbar { padding: 8px 12px; } }
/* full-board modal */
body.dz .arc-modal { background: rgba(15,18,22,.7); }
body.dz .arc-modal .arc-mbox { background: var(--console-2); border: 1px solid var(--console-line-2); border-radius: 4px; color: var(--console-text); box-shadow: none; }
body.dz .arc-mhead { border-bottom: 1px solid var(--console-line); color: #fff; }
body.dz .arc-mhead .un, body.dz .arc-mhead .mcount, body.dz .arc-mfoot { color: var(--console-dim); }
body.dz .arc-mhead .icon-btn { background: transparent; border: 1px solid var(--console-line-2); color: #fff; width: 36px; height: 36px; border-radius: 4px; display: inline-grid; place-items: center; cursor: pointer; }
body.dz .arc-mfoot { border-top: 1px solid var(--console-line); }
body.dz .arc-mfoot b { color: #fff; }

/* ---------- Finale ---------- */
.dz-finale { display: flex; flex-direction: column; gap: 20px; }
.dz-final-hero { background: var(--console); color: var(--console-text); border-radius: 4px; padding: 32px 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.dz-final-l { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dz-final-stats { display: grid; grid-template-columns: repeat(5, auto); gap: 10px 28px; }
.dz-final-stats div { display: flex; flex-direction: column; gap: 4px; }
.dz-final-stats b { font-family: var(--display); font-stretch: 100%; font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.dz-final-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dz-takeaway h2 { font-size: 28px; margin: 0 0 4px; }
.dz-sheet { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.dz-sheet li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; line-height: 1.45; }
.dz-sheet li .mono { font-weight: 500; }
.dz-timeline { display: flex; flex-direction: column; }
.dz-tl { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.dz-tl:first-child { border-top: 0; }
.dz-tl .mono { color: var(--red-ink); }
.dz-badgelist { display: grid; gap: 10px; }
.dz-badgeitem { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.dz-badgeitem > span:first-child { font-size: 22px; display: inline-flex; }
.dz-badgeitem small { display: block; color: var(--muted); font-size: 12.5px; }
@media (max-width: 1100px) { .dz-final-hero { grid-template-columns: minmax(0, 1fr); } .dz-final-stats { grid-template-columns: repeat(3, auto); } .dz-final-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .dz-final-hero { padding: 22px 20px; } .dz-final-stats { grid-template-columns: repeat(2, auto); } .dz-final-l .btn { width: 100%; } }

/* ---------- briefing, recap, how to play, locked ---------- */
body.dz .card.brief.prologue-card, body.dz .card.brief.recap-card, body.dz .card.instr-tab { max-width: 880px; margin: 0 auto; padding: clamp(22px, 3vw, 40px); border-radius: 4px; }
body.dz .prologue-card h2, body.dz .recap-card h2, body.dz .instr-tab .stand-h { font-size: clamp(28px, 3vw, 38px); font-weight: 800; margin: 6px 0 14px; }
body.dz .prologue-card .story p, body.dz .recap-card .story p { font-size: 16px; line-height: 1.65; color: var(--ink); }
body.dz .prologue-weeks, body.dz .recap-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
body.dz .pw-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 0; }
body.dz .pw-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
body.dz .pw-list .pw-wk { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
body.dz .recap-ev li.done .k { background: var(--green); color: #fff; border-color: var(--green); border-radius: 0; }
body.dz .instr-sec { border-top: 1px solid var(--line); padding: 14px 0; }
body.dz .instr-scoring { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin-top: 16px; }
body.dz .lockcard { max-width: 640px; margin: 20px auto; padding: 48px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
body.dz .lockcard h2 { font-size: 28px; margin: 0; }
body.dz .lockcard .lockmsg { font-family: var(--body); font-size: 15px; color: var(--muted); }
body.dz .empty { color: var(--muted); font-size: 14px; padding: 16px 20px; border: 1px dashed var(--line-2); border-radius: 4px; }

/* ---------- sign-in, join, welcome, overlays ---------- */
body.dz .overlay, :root[data-theme="light"] body.dz .overlay { background: rgba(17,20,24,.42); }
body.dz .modal { border: 1px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); background: var(--surface); padding: clamp(22px, 3vw, 32px); }
body.dz .modal h2 { font-size: 28px; font-weight: 800; margin: 6px 0 10px; }
body.dz .modal p { color: var(--muted); }
body.dz .modal .eyebrow { color: var(--red-ink); }
body.dz .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
body.dz .field .label, body.dz label.label { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
body.dz .field input, body.dz .field select, body.dz .code-row input { min-height: 48px; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 12px; font: inherit; font-size: 16px; background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
body.dz .field input:focus, body.dz .field select:focus, body.dz .code-row input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(31,86,196,.18); }
body.dz .err { color: #9A0E26; font-size: 13.5px; min-height: 0; }
body.dz .actions .btn.primary { min-height: 48px; }
/* landing: a dark co-branded panel on the left, the sign-in form on paper to the right */
body.landing.dz #loginOverlay { background: var(--paper); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0; place-items: stretch; }
body.landing.dz #loginOverlay::before { display: none; }
body.landing.dz .signin-panel { background: var(--console); color: var(--console-text); min-height: 100vh; min-height: 100dvh; padding: clamp(28px, 4vw, 56px); }
body.landing.dz .signin-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 24px 24px; }
body.landing.dz .signin-panel .sp-cb-word { font-family: "Quicksand", var(--body); font-weight: 600; letter-spacing: .3em; font-size: 18px; display: inline-flex; align-items: center; }
body.landing.dz .signin-panel .sp-cb-word::before { content: ""; width: 17px; height: 22px; margin-right: 8px; background: currentColor; flex: none; -webkit-mask: url(brand/cyberblack-shield.svg) center / contain no-repeat; mask: url(brand/cyberblack-shield.svg) center / contain no-repeat; }
body.landing.dz .signin-panel .sp-cb::before { content: ""; width: 40px; height: 36px; margin-right: 14px; background: #fff; flex: none; -webkit-mask: url(brand/arena-mark.svg) center / contain no-repeat; mask: url(brand/arena-mark.svg) center / contain no-repeat; }
body.landing.dz .signin-panel .sp-cb:has(.sp-cb-logo:not([hidden]))::before { display: none; }
body.landing.dz .signin-panel .sp-eyebrow { color: var(--console-red); }
body.landing.dz .signin-panel .sp-title { font-family: var(--display); font-stretch: 112%; font-weight: 800; text-transform: none; letter-spacing: -0.01em; font-size: clamp(40px, 4.6vw, 64px); }
body.landing.dz .signin-panel .sp-intro { color: var(--console-text); }
body.landing.dz .signin-panel .sp-foot { color: var(--console-dim); }
body.landing.dz .signin-panel .cobrand .cb-sep { color: var(--console-dim); }
body.landing.dz #loginForm { align-self: center; justify-self: center; width: min(460px, calc(100% - 48px)); margin: 32px 0; box-shadow: none; border: 0; background: transparent; padding: 0; }
body.landing.dz .login-brand { display: block; border-bottom: 1px solid var(--line); }
body.landing.dz .login-brand .lb-title { font-family: var(--display); font-stretch: 112%; text-transform: none; font-weight: 800; letter-spacing: -0.01em; }
body.landing.dz .login-brand .lb-tag { color: var(--red-ink); }
body.landing.dz #loginForm h2 { font-size: 32px; }
body.landing.dz .signin-help { font-size: 13px; color: var(--muted); }
body.landing.dz .codebox { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 14px; }
body.landing.dz .code-row { display: flex; gap: 8px; }
body.landing.dz .code-row input { font-family: var(--mono); font-size: 20px; letter-spacing: .3em; }
@media (max-width: 900px) {
  body.landing.dz #loginOverlay { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: auto; }
  body.landing.dz .signin-panel { min-height: 0; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 24px; }
  body.landing.dz .signin-panel .sp-title { font-size: 32px; }
  body.landing.dz #loginForm { width: calc(100% - 40px); margin: 24px auto 40px; align-self: start; }
}
/* join: department cards */
body.onboarding.dz #regOverlay, body.onboarding.dz #welcomeOverlay { background: var(--paper); }
body.dz #regForm { width: min(640px, 100%); }
body.dept-cards #regDept { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; border: 0; }
.dz-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dz-depts[hidden] { display: none; }
.dz-dept { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.dz-dept:hover:not(:disabled) { border-color: var(--ink); }
.dz-dept[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.dz-dept:disabled { opacity: .6; cursor: not-allowed; }
.dz-radio { width: 18px; height: 18px; border: 1.5px solid var(--ink-2); border-radius: 50%; flex: none; position: relative; box-sizing: border-box; }
.dz-dept[aria-checked="true"] .dz-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--red); }
body.dz .welcome-list li { border-top: 1px solid var(--line); padding-top: 12px; }
body.dz .welcome-list .wl-ic { color: var(--red-ink); }
/* badge popups, toasts */
body.dz .badge-pop-card, body.dz .badge-case { border: 1px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
body.dz .toast { background: var(--ink); color: #fff; border: 0; border-radius: 4px; box-shadow: 4px 4px 0 var(--red); font-size: 14px; }
body.dz .toast.bad { background: #7E1122; }
/* field guide drawer */
body.dz .guide-panel { border-radius: 0; border-left: 1px solid var(--ink); box-shadow: none; background: var(--surface); }
body.dz .guide-head { border-bottom: 1px solid var(--line); }
body.dz .guide-tabs .gt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.dz .guide-search { border-radius: 4px; }
/* floating "report a problem" */
body.dz #obReportBtn { border-radius: 4px !important; }
@media (min-width: 901px) { body.dz:has(#profChip:not([hidden])) #obReportBtn { display: none; } }
@media print { .dz-top, .dz-btabs { display: none !important; } }
body.dz .overlay { z-index: 70; }
body.dz .instr-sec { border-left: 3px solid var(--red); padding: 10px 0 10px 14px; margin-top: 12px; border-top: 0; }
body.dz .instr-sec h3 { margin: 0 0 4px; font-size: 16px; }
body.dz .instr-sec p { margin: 0; }
body.dz .youtag, body.dz .lb-row .youtag, body.dz .tm-member .youtag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; border: 0; padding: 1px 5px; border-radius: 2px; margin-left: 4px; font-weight: 500; }
/* the arcade games were drawn for light panels: they sit on a paper "screen" inside the dark frame; the result view stays dark */
body.dz .arc-body { background: var(--paper); color: var(--ink); margin: 16px var(--dz-gut) 20px; border-radius: 4px; padding: 18px; position: relative; }
body.dz .arc-body .hint, body.dz .arc-body .arc-help { color: var(--muted); }
body.dz #arcResult { background: transparent; color: var(--console-text); margin: 0; padding: 18px var(--dz-gut); }
body.dz #arcResult .hint { color: var(--console-dim); }
@media (max-width: 1100px) { body.dz .arc-body { margin: 10px; padding: 10px; } body.dz #arcResult { padding: 14px 12px; } }

/* =====================================================================================================================
   Coordinator console (admin.html): a dark sidebar grouped by job, a slim header with where you are and the campaign
   status, and paper views with flat white cards.
   ===================================================================================================================== */
body.dz-admin { background: var(--paper); background-image: none; color: var(--ink); margin: 0; min-height: 100vh; }
body.dz-admin h1, body.dz-admin h2, body.dz-admin h3 { font-family: var(--display); font-stretch: 112%; letter-spacing: -0.01em; text-transform: none; }
.ax-side { position: fixed; top: 0; bottom: 0; left: 0; width: 248px; background: var(--console); color: var(--console-text); display: flex; flex-direction: column; z-index: 30; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A404A transparent; }
.ax-brand { padding: 18px 20px 12px; }
.ax-brand .dz-brand { color: #fff; }
.dz-mark.inv { background: #fff; }
.ax-brand .dz-word { color: #fff; }
.ax-brand .dz-word b { color: #fff; }
.ax-brand .dz-brand { flex-direction: column; align-items: flex-start; gap: 8px; }
.ax-brand .dz-lock { height: 40px; color: #fff; }
.ax-console { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--console-dim); padding-left: 2px; }
.ax-brand .corner-logo { height: 28px; max-width: 170px; filter: brightness(0) invert(1); }
.ax-ws { margin: 4px 14px 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--console-2); border: 1px solid var(--console-line); border-radius: 4px; }
.ax-ws .dot { width: 8px; height: 8px; border-radius: 50%; background: #E3A33B; flex: none; }
.ax-ws .dot.live { background: #3FB37F; } .ax-ws .dot.over { background: #8B929C; } .ax-ws .dot.pre { background: #6FA8FF; }
.ax-ws-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ax-ws-t small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--console-dim); }
.ax-ws-t b { color: #fff; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ws .cobrand { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.ax-ws .cobrand[hidden] { display: none; }
.ax-ws .cobrand .cb-sep { color: var(--console-dim); }
.ax-ws .cobrand .cb-client { height: 20px; max-width: 150px; object-fit: contain; }
.ax-ws .cobrand .cb-to-white { filter: brightness(0) invert(1); }
body.dz-admin nav.side { position: static; display: flex; flex-direction: column; gap: 0; background: transparent; border: 0; border-radius: 0; padding: 0 0 12px; }
body.dz-admin nav.side .side-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--console-dim); padding: 16px 20px 6px; }
body.dz-admin nav.side button { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 20px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: transparent; color: var(--console-text); font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer; box-shadow: none; }
body.dz-admin nav.side button .ic { color: var(--console-dim); font-size: 16px; }
body.dz-admin nav.side button:hover { background: var(--console-2); color: #fff; }
body.dz-admin nav.side button.active { background: var(--console-2); color: #fff; border-left-color: var(--red); font-weight: 600; }
body.dz-admin nav.side button.active .ic { color: #fff; }
body.dz-admin .navbadge { margin-left: auto; font-family: var(--mono); font-size: 11px; padding: 1px 6px; background: var(--red); color: #fff; border-radius: 2px; border: 0; min-width: 0; }
body.dz-admin .navbadge[hidden] { display: none; }
.ax-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--console-line); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ax-who { color: var(--console-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-who b { font-weight: 500; }
.ax-game { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ax-game:hover { text-decoration: underline; }
.ax-main { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }
body.dz-admin header.ax-head { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); grid-template-columns: none; }
.ax-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.ax-crumb .ic { display: inline-flex; font-size: 14px; }
.ax-crumb b { color: var(--ink); font-weight: 600; }
.ax-head-r { display: flex; align-items: center; gap: 10px; }
.ax-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); }
.ax-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ax-status.live i { background: var(--green); } .ax-status.preview { border-color: #E2C28F; background: var(--amber-tint); color: var(--amber); } .ax-status.preview i { background: var(--amber); } .ax-status.pre i { background: var(--blue); }
body.dz-admin .ax-main > .stage { padding: 24px 28px 48px; max-width: 1280px; width: 100%; box-sizing: border-box; }
body.dz-admin .card { padding: 20px 22px; }
body.dz-admin .card + .card, body.dz-admin .view-host > * + * { margin-top: 16px; }
body.dz-admin .card h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
body.dz-admin .help { color: var(--muted); font-size: 13.5px; }
body.dz-admin .label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.dz-admin .form .field .label, body.dz-admin .field > .label { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
body.dz-admin .form .field input, body.dz-admin .form .field select, body.dz-admin .form .field textarea, body.dz-admin .field input, body.dz-admin .field select, body.dz-admin .field textarea { background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); min-height: 40px; }
body.dz-admin input:focus, body.dz-admin select:focus, body.dz-admin textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(31,86,196,.18); }
body.dz-admin .stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; }
body.dz-admin .stat-tile .v { font-family: var(--display); font-stretch: 100%; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
body.dz-admin .stat-tile .v.accent, body.dz-admin .stat-tile .v.ember { color: var(--ink); } body.dz-admin .stat-tile .v.ok { color: var(--green); }
body.dz-admin table.grid th { background: var(--surface); color: var(--muted); }
body.dz-admin table.grid tr:hover td { background: var(--paper); }
body.dz-admin .vtabs { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 16px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; position: sticky; top: 60px; z-index: 5; background: var(--paper); }
body.dz-admin .vtab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 14px; margin-bottom: -1px; background: transparent; font-size: 13.5px; color: var(--ink-2); box-shadow: none; }
body.dz-admin .vtab:hover { color: var(--ink); }
body.dz-admin .vtab.on { background: transparent; border-color: transparent; border-bottom-color: var(--red); color: var(--ink); font-weight: 600; box-shadow: none; }
body.dz-admin .vtab-n { border-radius: 2px; }
body.dz-admin .vtab.on .vtab-n { background: var(--ink); border-color: var(--ink); }
body.dz-admin .chart b { background: var(--ink); border-radius: 0; }
body.dz-admin .bar i { background: var(--ink); }
body.dz-admin .bar.bad i { background: var(--red); } body.dz-admin .bar.warn i { background: var(--amber); }
body.dz-admin .topic-pill { border-radius: 3px; }
body.dz-admin .savebar { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0; border-top: 1px solid var(--line); z-index: 4; }
body.dz-admin .btn.danger { color: var(--red-ink); border-color: #E6A9B1; background: transparent; }
body.dz-admin .btn.danger:hover { background: #FCEDEE; }
body.dz-admin .btn.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--red-ink); font-weight: 600; }
body.dz-admin .toast { background: var(--ink); color: #fff; border: 0; border-radius: 4px; box-shadow: 4px 4px 0 var(--red); }
body.dz-admin .overlay { background: rgba(17,20,24,.42); z-index: 70; }
body.dz-admin .modal { border: 1px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
/* launch readiness */
.ax-card { padding: 0 !important; overflow: hidden; }
.ax-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ax-card-h .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.ax-check { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ax-check:last-child { border-bottom: 0; }
.ax-ck { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--muted); }
.ax-check.st-ok .ax-ck { background: var(--green); border-color: var(--green); color: #fff; }
.ax-check.st-warn .ax-ck { background: var(--amber-tint); border-color: var(--amber); color: var(--amber); }
.ax-check.st-todo .ax-ck { border-color: var(--red); color: var(--red); }
.ax-ck-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ax-ck-t b { font-size: 14.5px; font-weight: 600; }
.ax-ck-t small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ax-attn .ax-check.st-todo { background: var(--red-tint); }
.ax-hero { background: var(--console); color: var(--console-text); border-radius: 4px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: end; margin-bottom: 16px; }
.ax-hero h2 { color: #fff; font-size: 30px; font-weight: 800; margin: 6px 0; }
.ax-hero p { margin: 0; }
.ax-hero.ready .dz-bar.dark > span { background: #3FB37F; }
/* scoring calculator */
.ax-calc { margin-top: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.ax-calc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ax-calc-in { display: flex; flex-wrap: wrap; gap: 14px 18px; padding: 14px 16px; align-items: flex-end; }
.ax-calc-in label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.ax-calc-in label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; min-height: 40px; }
.ax-calc-in input[type=number], .ax-calc-in select { width: 110px; min-height: 38px; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 10px; font: inherit; background: var(--surface); }
.ax-calc-out { padding: 4px 16px 12px; max-width: 420px; }
.ax-calc-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ax-calc-row.neg { color: var(--muted); }
.ax-calc-row.total { border-bottom: 0; font-weight: 700; font-size: 16px; }
@media (max-width: 900px) {
  .ax-side { position: static; width: auto; max-height: none; }
  body.dz-admin nav.side { flex-direction: row; flex-wrap: wrap; padding: 0 8px 10px; }
  body.dz-admin nav.side .side-group { display: none; }
  body.dz-admin nav.side button { border-left: 0; border-bottom: 2px solid transparent; padding: 0 10px; }
  body.dz-admin nav.side button.active { border-bottom-color: var(--red); }
  .ax-foot { display: none; }
  .ax-main { margin-left: 0; }
  body.dz-admin header.ax-head { position: static; padding: 0 16px; }
  body.dz-admin .ax-main > .stage { padding: 16px; }
  body.dz-admin .vtabs { top: 0; overflow-x: auto; flex-wrap: nowrap; }
  .ax-hero { grid-template-columns: minmax(0, 1fr); }
}
@media print { .ax-side, header.ax-head { display: none !important; } .ax-main { margin: 0; } }
body.dz a.btn, body.dz-admin a.btn { text-decoration: none; }
body.dz-admin .chart { gap: 6px; }
body.dz-admin .chart b { max-width: 56px; }

/* v5.0.1 audit fixes */
/* the field guide lives in the profile menu wherever the top-bar Guide tab is hidden (styles.css hid it from 721px up) */
@media (max-width: 900px) { #pmGuide { display: flex !important; } }
/* the top bar never lets its right side sit on top of the tabs: tabs shrink, then lose icons, days and the name move out */
.dz-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dz-nav::-webkit-scrollbar { display: none; }
.dz-brand, .dz-top .cobrand, .dz-right { flex-shrink: 0; }
@media (max-width: 1320px) and (min-width: 901px) { .dz-top { gap: 16px; } .dz-tab { padding: 0 10px; } .dz-days .chip-lbl { display: none; } }
@media (max-width: 1180px) and (min-width: 901px) { .dz-days { display: none; } .dz-top .prof .pmeta { display: none; } .dz-tab .mini { display: none; } }
@media (max-width: 1040px) and (min-width: 901px) { .dz-tab .ic { display: none; } .dz-word { display: none; } .dz-top .cobrand .cb-client { max-width: 90px; } }
/* dialogs taller than the screen (Join on a 360x640 phone) scroll instead of cutting off the button:
   margin:auto centers when there's room and falls back to the top when there isn't */
body.dz .overlay:not(#loginOverlay), body.dz-admin .overlay { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.dz .overlay:not(#loginOverlay)[hidden], body.dz-admin .overlay[hidden] { display: none; }
body.dz .overlay:not(#loginOverlay) > .modal, body.dz-admin .overlay > .modal { margin: auto; flex: none; max-width: 100%; }
@media (max-width: 480px) { body.dz .overlay:not(#loginOverlay) { padding: 12px; } body.dz .modal { padding: 20px 18px; box-shadow: 4px 4px 0 var(--ink); } body.dz .modal h2 { font-size: 24px; } .dz-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-dept { min-height: 44px; font-size: 13.5px; padding: 8px 10px; } }
/* arcade play header on small phones: the title truncates and the "Never counts" chip drops (the page already says so) */
body.dz .arc-topbar { min-width: 0; }
.arc-title { min-width: 0; overflow: hidden; } .arc-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .arc-never-chip, .arc-title span { display: none; } }
@media (max-width: 900px) {
  body.dz-admin header.ax-head { height: auto; min-height: 52px; flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; }
  .ax-crumb { flex: 1 1 100%; } .ax-crumb #axCampaign, .ax-crumb .ic { display: none; }
  .ax-head-r { flex-wrap: wrap; }
}
/* signed in, "Report a problem" lives in the profile menu on every screen size; the floating button would sit on content
   (Firewall Run's Sound toggle, card buttons) above the bottom tabs */
body.dz:has(#profChip:not([hidden])) #obReportBtn { display: none !important; }
.dz-questcard > .dz-cardh:not(.sb) { padding: 16px 20px 10px; }
.dz-questcard > p.dz-pad-x { margin-bottom: 8px; }
body.dz-admin .mono-key { opacity: 1; color: var(--muted); }
/* game modules own .chip (the log-query builder's draggable chips): keep their original look */
body.dz .chips .chip, body.dz-admin .chips .chip { font-family: var(--body); font-size: 12.5px; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 5px 11px; min-height: 0; cursor: grab; white-space: normal; background: var(--panel-2); color: var(--text); }