/* DayZGuessr, "Expedition" redesign (2026-10-21): the map picker (/dayzguessr, templates/dayzguessr_maps.html) and the
 * solo game (/dayzguessr/<map>, templates/dayzguessr_game.html, static/js/dayzguessr-game.js).
 *
 * Tokens (--dz-*) come from site-nav.css, which base.html loads on every page; the look is the homepage's and the travel
 * map's (navy ground, dark glass panels, white-alpha lines, one yellow accent, Oswald headings, Roboto Mono numbers).
 * Everything is scoped under .dzg. The guess map's own look (labels, pins) is the interactive map's: dayz-map.css,
 * interactive-map-gl.css, and on the Leaflet fallback interactive-map.css.
 */
.dzg {
    --dzg-display: 'Oswald', 'Roboto', system-ui, sans-serif;
    --dzg-mono: 'Roboto Mono', ui-monospace, monospace;
    --dzg-glass: rgba(10, 14, 28, .78);
    --dzg-spot: #4ade80;
    color: var(--dz-text);
    font-size: 15px;
    line-height: 1.5;
}
.dzg *, .dzg *::before, .dzg *::after { box-sizing: border-box; }
.dzg a { color: var(--dz-accent); text-decoration: none; }
.dzg a:hover { color: var(--dz-accent-hover); }
.dzg button { font: inherit; }
.dzg :focus-visible { outline: 2px solid var(--dz-accent); outline-offset: 2px; }
.dzg-display { font-family: var(--dzg-display); text-transform: uppercase; letter-spacing: .01em; }
.dzg-mono { font-family: var(--dzg-mono); font-variant-numeric: tabular-nums; }
.dzg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-accent); }
.dzg [hidden] { display: none !important; }

/* ---- buttons ---- */
.dzg .dzg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 18px; border-radius: 10px;
    font: 700 14px/1 Roboto, system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap;
    border: 1px solid var(--dz-line-strong);
    background: var(--dz-field); color: var(--dz-text);
    cursor: pointer;
    transition: background-color .15s var(--dz-ease), color .15s var(--dz-ease), border-color .15s var(--dz-ease), opacity .15s;
}
.dzg .dzg-btn:hover { background: #161d33; color: #fff; border-color: rgba(255, 255, 255, .24); }
.dzg .dzg-btn--acc { background: var(--dz-accent); border-color: var(--dz-accent); color: var(--dz-accent-ink); }
.dzg .dzg-btn--acc:hover { background: var(--dz-accent-press); border-color: var(--dz-accent-press); color: var(--dz-accent-ink); }
.dzg .dzg-btn--glass { background: var(--dz-accent-glass); border-color: var(--dz-accent-glass-line); color: var(--dz-accent-glass-ink); }
.dzg .dzg-btn--glass:hover { background: var(--dz-accent-glass-hover); border-color: var(--dz-accent); color: var(--dz-accent-glass-ink); }
.dzg .dzg-btn:disabled { cursor: default; opacity: 1; background: var(--dz-raised); border-color: var(--dz-line); color: var(--dz-muted); }
.dzg-kbd {
    display: inline-block; padding: 2px 6px; border-radius: 5px;
    font: 600 10px/1.3 var(--dzg-mono); letter-spacing: .04em; text-transform: uppercase;
    background: rgba(10, 14, 28, .16); color: inherit; opacity: .75;
}
.dzg-btn:disabled .dzg-kbd { display: none; }
.dzg-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
    border-radius: 9px; border: 1px solid var(--dz-line-strong); background: rgba(15, 20, 36, .7);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: background-color .15s var(--dz-ease), border-color .15s var(--dz-ease);
}
.dzg a.dzg-chip { color: var(--dz-text-2); }
.dzg a.dzg-chip:hover { color: #fff; background: #161d33; border-color: rgba(255, 255, 255, .24); }
.dzg-chip i { color: var(--dz-accent); font-size: 12px; }

/* round icon buttons over the map and the screenshot */
.dzg-tools { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.dzg-tool {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid var(--dz-line-strong);
    background: var(--dzg-glass); color: var(--dz-text-2);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer; transition: background-color .15s var(--dz-ease), color .15s var(--dz-ease);
}
.dzg-tool:hover { background: rgba(22, 29, 51, .95); color: #fff; }
.dzg-tool--sm { width: 32px; height: 32px; border-radius: 8px; font-size: 13px; }
.dzg-tool[aria-pressed="true"] { background: var(--dz-accent); border-color: var(--dz-accent); color: var(--dz-accent-ink); }

/* =================================================================== the game: one screen */

/* The game is one screen: the footer and base.html's blurred logo backdrop would only push it off. */
body:has(.dzg--game) > footer { display: none; }
body:has(.dzg--game) main > div.fixed.pointer-events-none { display: none; }

.dzg--game {
    position: relative; overflow: hidden;
    height: calc(100vh - 65px);           /* base.html's navbar: h-16 + its 1px bottom border */
    height: calc(100dvh - 65px);
    min-height: 420px;
    background: #04060d;
    font-size: 14px;
}

/* ---- the screenshot ---- */
.dzg-stage { position: absolute; inset: 0; }
.dzg-photo {
    position: absolute; inset: 0; overflow: hidden;
    display: grid; place-items: center;
    touch-action: none; user-select: none; -webkit-user-select: none;
    cursor: zoom-in;
}
.dzg-photo.is-zoomed { cursor: grab; }
.dzg-photo.is-dragging { cursor: grabbing; }
/* the same picture, blurred and dark, in the letterbox around it */
.dzg-photo__bg {
    position: absolute; inset: -48px;
    background: #04060d center / cover no-repeat;
    filter: blur(32px) brightness(.4) saturate(1.15);
}
.dzg-photo img {
    position: relative; display: block; max-width: none;
    transform-origin: 0 0; will-change: transform;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 64px rgba(0, 0, 0, .5);
    -webkit-user-drag: none;
}
.dzg-photo__wait {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(4, 6, 13, .45); color: var(--dz-accent); font-size: 28px;
}
.dzg-tools--photo { left: 16px; bottom: 16px; }

/* ---- HUD: title, round, score, links ---- */
.dzg-hud {
    position: absolute; z-index: 6; top: 16px; left: 16px; right: 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    pointer-events: none;
}
.dzg-hud > * { pointer-events: auto; }
.dzg-hud__back, .dzg-hud__title, .dzg-hud__stats {
    background: var(--dzg-glass); border: 1px solid var(--dz-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--dz-shadow-2);
}
.dzg a.dzg-hud__back {
    width: 44px; height: 58px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; color: var(--dz-text-2);
}
.dzg a.dzg-hud__back:hover { color: #fff; background: rgba(22, 29, 51, .95); }
.dzg-hud__title { height: 58px; padding: 9px 16px 0; border-radius: 12px; }
.dzg-h1 {
    margin: 1px 0 0; font-family: var(--dzg-display); font-size: 24px; font-weight: 700; line-height: 1;
    text-transform: uppercase; letter-spacing: .01em; color: #fff; white-space: nowrap;
}
.dzg-hud__stats { display: flex; height: 58px; margin: 0; border-radius: 12px; overflow: hidden; }
.dzg-hud__stats > div { padding: 9px 16px 0; min-width: 84px; }
.dzg-hud__stats > div + div { border-left: 1px solid var(--dz-line); }
.dzg-hud__stats dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-muted); }
.dzg-hud__stats dd { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; color: #fff; }
.dzg-hud__links { margin-left: auto; display: flex; gap: 8px; }
.dzg-hud__links .dzg-chip { background: var(--dzg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- the guess map: a box in the bottom-right corner, larger while open, the whole screen for the result ---- */
.dzg-mapbox {
    position: absolute; z-index: 4; right: 16px; bottom: 16px;
    width: 400px; height: 316px;
    display: flex; flex-direction: column;
    background: var(--dz-surface); border: 1px solid var(--dz-line-strong); border-radius: 14px;
    overflow: hidden; box-shadow: var(--dz-shadow-3);
    transition: width .22s var(--dz-ease), height .22s var(--dz-ease);
}
.dzg--game[data-open] .dzg-mapbox { width: min(56vw, 1000px); height: min(70vh, 760px); }
.dzg--game[data-phase="result"] .dzg-mapbox { width: calc(100% - 32px); height: calc(100% - 106px); }
@media (prefers-reduced-motion: reduce) { .dzg-mapbox { transition: none; } }
/* its own stacking context: Leaflet's panes (z-index 200-700) stay under the box's bar, tools and result card */
.dzg-map { position: relative; z-index: 0; isolation: isolate; flex: 1; min-height: 0; background: #0b1020; }
.dzg-map.maplibregl-map { font: 12px/1.5 Roboto, system-ui, sans-serif; }
.dzg-map .maplibregl-canvas-container.maplibregl-interactive { cursor: crosshair; }
.dzg--game[data-phase="result"] .dzg-map .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.dzg-map.leaflet-container { cursor: crosshair; background: #0b1020; }

.dzg-mapbar {
    position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    pointer-events: none;
}
.dzg-mapbar > * { pointer-events: auto; }
.dzg-mapbar__right { display: flex; gap: 6px; margin-left: auto; }
.dzg-seg {
    display: flex; gap: 2px; padding: 3px; border-radius: 9px;
    background: var(--dzg-glass); border: 1px solid var(--dz-line-strong);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dzg-seg__btn {
    height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--dz-text-2); font-size: 12px; font-weight: 700; cursor: pointer;
}
.dzg-seg__btn:hover { color: #fff; background: var(--dz-hover); }
.dzg-seg__btn[aria-pressed="true"] { background: var(--dz-raised); color: #fff; box-shadow: inset 0 0 0 1px var(--dz-line-strong); }
.dzg-tools--map { right: 8px; bottom: 68px; }
.dzg-mapfoot { flex: none; padding: 8px; border-top: 1px solid var(--dz-line); background: var(--dz-surface); }
.dzg .dzg-guess { width: 100%; }
/* small box: only what is needed to guess (the map controls come with the larger box) */
.dzg--game:not([data-open]):not([data-phase="result"]) .dzg-seg,
.dzg--game:not([data-open]):not([data-phase="result"]) .dzg-tools--map { display: none; }
.dzg--game[data-phase="result"] .dzg-mapfoot { display: none; }
.dzg--game[data-phase="result"] .dzg-tools--map { top: 50px; bottom: auto; }
.dzg--game[data-phase="result"] .dzg-map-pin, .dzg--game[data-phase="result"] #dzg-map-pin { display: none; }

/* the pins' hover names and the result line's labels (the GL view's DOM tooltips in Leaflet's markup) */
.dzg-map .leaflet-tooltip {
    position: relative; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
    background: rgba(10, 14, 28, .95); color: var(--dz-text); border: 1px solid var(--dz-line-strong);
    box-shadow: var(--dz-shadow-2); font: 500 12px Roboto, system-ui, sans-serif;
}
.dzg-map .leaflet-tooltip::before { display: none; }

/* ---- the result ---- */
.dzg-result {
    position: absolute; z-index: 5; left: 50%; bottom: 20px; transform: translateX(-50%);
    width: min(600px, calc(100% - 32px));
    padding: 18px 20px 16px;
    background: var(--dz-panel); border: 1px solid var(--dz-line-strong); border-radius: 14px;
    box-shadow: var(--dz-shadow-3);
    animation: dzg-rise .28s var(--dz-ease) both;
}
@keyframes dzg-rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dzg-result { animation: none; } }
.dzg-result__verdict { font-size: 30px; font-weight: 700; line-height: 1; color: #fff; }
.dzg-result__nums { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.dzg-result__pts { text-align: right; }
.dzg-result__big { font-family: var(--dzg-display); font-size: 34px; font-weight: 600; line-height: 1.1; color: #fff; }
.dzg-result__big small { font-family: Roboto, system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--dz-muted); }
.dzg-meter { height: 6px; margin-top: 10px; border-radius: 999px; background: #1d2438; overflow: hidden; }
.dzg-meter > i {
    display: block; width: 0; height: 100%; border-radius: 999px; background: var(--dz-accent);
    transition: width .9s var(--dz-ease);
}
.dzg-result__near { margin: 10px 0 0; font-size: 13px; color: var(--dz-text-2); }
.dzg-result__near b { color: var(--dzg-spot); font-weight: 600; }
.dzg-result__actions { display: flex; gap: 10px; margin-top: 14px; }
.dzg-result__actions .dzg-btn--acc { flex: 1; }
.dzg-result__note { margin: 10px 0 0; font-size: 12px; color: var(--dz-muted); }

.dzg-toast {
    position: absolute; z-index: 20; left: 50%; top: 88px; transform: translateX(-50%);
    max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 10px;
    background: #e5e7eb; color: #0a0e1c; font-weight: 500; box-shadow: var(--dz-shadow-3);
}

/* ---- tablets and small laptops: a smaller corner box ---- */
@media (max-width: 1100px) and (min-width: 768px) {
    .dzg-mapbox { width: 340px; height: 280px; }
    .dzg--game[data-open] .dzg-mapbox { width: min(64vw, 720px); height: min(64vh, 620px); }
    .dzg-hud__links .dzg-chip span { display: none; }
}

/* ---- phones: HUD bar, screenshot, map under it ---- */
@media (max-width: 767px) {
    .dzg--game { display: flex; flex-direction: column; min-height: 0; }
    .dzg-hud {
        position: relative; inset: auto; flex: none; gap: 8px; flex-wrap: nowrap;
        padding: 8px 10px; background: var(--dz-surface); border-bottom: 1px solid var(--dz-line);
    }
    .dzg-hud__back, .dzg-hud__title, .dzg-hud__stats { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .dzg a.dzg-hud__back { width: 32px; height: 40px; }
    .dzg-hud__title { height: auto; padding: 0; min-width: 0; }
    .dzg-hud__title .dzg-eyebrow { font-size: 10px; }
    .dzg-h1 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
    .dzg-hud__stats { height: auto; margin-left: auto; }
    .dzg-hud__stats > div { padding: 0 10px; min-width: 0; }
    .dzg-hud__stats dt { font-size: 10px; }
    .dzg-hud__stats dd { font-size: 16px; }
    .dzg-hud__links { margin-left: 0; gap: 6px; }
    .dzg-hud__links .dzg-chip { width: 36px; padding: 0; justify-content: center; }
    .dzg-hud__links .dzg-chip span { display: none; }

    .dzg-stage {
        position: relative; inset: auto; flex: none;
        aspect-ratio: 16 / 9; max-height: 40%;
        transition: max-height .25s var(--dz-ease);
    }
    .dzg--game[data-phase="result"] .dzg-stage { max-height: 0; }
    .dzg-tools--photo { left: auto; right: 8px; bottom: 8px; flex-direction: row; }
    .dzg-tools--photo .dzg-tool { width: 34px; height: 34px; }

    .dzg-mapbox,
    .dzg--game[data-open] .dzg-mapbox,
    .dzg--game[data-phase="result"] .dzg-mapbox {
        position: relative; inset: auto; flex: 1; width: auto; height: auto; min-height: 0;
        border-radius: 0; border-width: 1px 0 0; box-shadow: none; transition: none;
    }
    /* a phone shows the whole map box all the time: its controls too */
    .dzg--game:not([data-open]):not([data-phase="result"]) .dzg-seg,
    .dzg--game:not([data-open]):not([data-phase="result"]) .dzg-tools--map { display: flex; }
    #dzg-map-pin { display: none; }
    .dzg-kbd { display: none; }
    .dzg-result { bottom: 10px; padding: 14px 14px 12px; }
    .dzg-result__verdict { font-size: 24px; }
    .dzg-result__big { font-size: 28px; }
}

/* =================================================================== the map picker */

body:has(.dzg--maps) main > div.fixed.pointer-events-none { display: none; }
.dzg--maps { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 56px; }
.dzg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; }

/* ---- head: title, how it scores, the ways to play ---- */
.dzg-intro {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end;
    /* an opaque border (--dz-line over the navy ground): a see-through one is drawn twice where the corner arcs meet
       the straight sides and showed as a light arc */
    padding: 40px 40px 36px; border-radius: 18px; border: 1px solid #141438;
    background: var(--dz-bg);
    box-shadow: var(--dz-shadow-2);
}
/* The picture (dayzguessr.py INTROS: 1920 px, centred on its subject's height), faded into the navy ground towards the
 * text side by a mask: one picture layer, no dark layer over it. Painted on the box itself with a dark layer on top,
 * the two were cut to the round corners one after the other and the bright picture showed through at the corners'
 * soft edge, and under the see-through border along the top (owner 2026-10-21: "I still see pixels shining
 * through"). */
.dzg-intro::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: 17px;
    background: var(--dzg-intro-img, none) 50% var(--dzg-intro-y, 50%) / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .26) 36%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .94) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .26) 36%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .94) 100%);
}
.dzg-intro__h1 {
    margin: 8px 0 12px; font-family: var(--dzg-display); font-size: 64px; font-weight: 700; line-height: .95;
    text-transform: uppercase; color: #fff;
}
.dzg-intro__h1 span { color: var(--dz-accent); }
.dzg-intro__p { margin: 0; max-width: 560px; font-size: 16px; color: var(--dz-text-2); }
.dzg-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dzg-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--dzg-glass); border: 1px solid var(--dz-line); border-radius: 14px; overflow: hidden;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dzg-stat { padding: 14px 16px; }
.dzg-stat:nth-child(2n) { border-left: 1px solid var(--dz-line); }
.dzg-stat:nth-child(n + 3) { border-top: 1px solid var(--dz-line); }
.dzg-stat__value { font-family: var(--dzg-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; color: #fff; }
.dzg-stat__label { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-muted); }

.dzg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dzg-h2 { margin: 6px 0 0; font-family: var(--dzg-display); font-size: 40px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #fff; }
.dzg-sub { margin: 0; color: var(--dz-muted); font-size: 14px; }

/* ---- map cards ---- */
.dzg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dzg-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: 14px;
    overflow: hidden; box-shadow: var(--dz-shadow-2);
    transition: transform .2s var(--dz-ease), box-shadow .2s var(--dz-ease), border-color .2s var(--dz-ease);
}
.dzg-card:hover { transform: translateY(-3px); box-shadow: var(--dz-shadow-3); border-color: var(--dz-line-strong); }
.dzg-card__img { position: relative; height: 210px; background: var(--dz-raised); }
.dzg-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dzg-card__shade {
    position: absolute; inset: auto 0 0 0; padding: 56px 18px 14px;
    background: linear-gradient(0deg, rgba(10, 14, 28, 1) 0%, rgba(10, 14, 28, .75) 45%, rgba(10, 14, 28, 0) 100%);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.dzg-card__name { font-family: var(--dzg-display); font-size: 36px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; }
.dzg-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
    background: rgba(10, 14, 28, .85); font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; white-space: nowrap; color: var(--dz-text-2);
}
.dzg-pill i { color: var(--dz-accent); }
.dzg-pill--soon { color: var(--dz-muted); }
.dzg-card__body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.dzg-card__facts { display: flex; gap: 22px; }
.dzg-card__facts div { display: flex; flex-direction: column; }
.dzg-card__facts b { font-family: var(--dzg-mono); font-size: 20px; font-weight: 500; color: #fff; }
.dzg-card__facts span { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-muted); }
.dzg-card__actions { display: flex; gap: 8px; margin-top: auto; }
.dzg-card__actions > .dzg-btn, .dzg-card__actions > form { flex: 1; }
.dzg-card__actions form .dzg-btn { width: 100%; }
.dzg .dzg-card__lb { color: var(--dz-text-2); background: rgba(10, 14, 28, .78); }
/* the whole card starts the solo game (the Play button's ::after over the card); the other controls stay above it */
.dzg .dzg-play::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 14px; }
.dzg-card__actions > form, .dzg-card__actions > a:not(.dzg-play) { position: relative; z-index: 1; }
.dzg-card__lb { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dzg-card--soon .dzg-card__img img { filter: grayscale(.6) brightness(.7); }

/* ---- how it works ---- */
.dzg-how {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 40px; align-items: start;
    padding: 28px 32px; background: var(--dz-panel); border: 1px solid var(--dz-line); border-radius: 14px;
}
.dzg-how h2 { margin: 6px 0 8px; font-family: var(--dzg-display); font-size: 32px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #fff; }
.dzg-how p { margin: 0; font-size: 14px; color: var(--dz-text-2); }
.dzg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dzg-steps li { display: flex; gap: 12px; }
.dzg-steps b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.dzg-steps span { font-size: 13px; color: var(--dz-text-2); }
.dzg-step__n {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dz-accent-soft); color: var(--dz-accent); font: 600 13px var(--dzg-mono);
}

/* ---- a map's leaderboard ---- */
/* tall enough that the picture is not cut down to a thin strip (owner 2026-10-21: "the background image is clipping") */
.dzg-intro--board { min-height: 320px; padding-top: 32px; padding-bottom: 32px; }
.dzg-intro--board .dzg-eyebrow a { color: inherit; }
.dzg-note { margin: 12px 4px 0; font-size: 14px; color: var(--dz-text-2); }
.dzg-table-wrap { overflow-x: auto; background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: 14px; box-shadow: var(--dz-shadow-2); }
.dzg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dzg-table th {
    padding: 12px 18px; text-align: left; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-muted);
    background: var(--dz-field); border-bottom: 1px solid var(--dz-line);
}
.dzg-table td { padding: 11px 18px; border-bottom: 1px solid var(--dz-line); color: var(--dz-text); white-space: nowrap; }
.dzg-table tbody tr:last-child td { border-bottom: 0; }
.dzg-table tbody tr:hover td { background: var(--dz-hover); }
.dzg-table tr.is-me td { background: var(--dz-accent-soft); }
.dzg-table .dzg-num { text-align: right; }
.dzg-player { font-weight: 500; color: #fff; }
.dzg-rank {
    display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: 8px; background: var(--dz-raised); font: 600 13px var(--dzg-mono); color: var(--dz-text-2);
}
.dzg-rank--1 { background: var(--dz-accent); color: var(--dz-accent-ink); }
.dzg-rank--2 { background: #cbd5e1; color: var(--dz-accent-ink); }
.dzg-rank--3 { background: #d6a36a; color: var(--dz-accent-ink); }

@media (max-width: 1100px) {
    .dzg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dzg-intro { grid-template-columns: 1fr; }
    .dzg-how { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .dzg--maps { padding-top: 12px; gap: 40px; }
    .dzg-table th, .dzg-table td { padding: 10px 12px; }
    .dzg-wrap { padding: 0 16px; }
    .dzg-intro { padding: 24px 18px; border-radius: 14px; }
    .dzg-intro__h1 { font-size: 44px; }
    .dzg-intro__p { font-size: 15px; }
    .dzg-cards { grid-template-columns: 1fr; }
    .dzg-card__img { height: 180px; }
    .dzg-h2 { font-size: 32px; }
    .dzg-how { padding: 20px 18px; }
    .dzg-steps { grid-template-columns: 1fr; }
}