/* =====================================================================
   Discovery — frontier interface (docs/discovery/style-sheet.md)
   Burnt-umber slate with paper grain, a brass welded seam on the left,
   3 px corners. Big Shoulders Stencil Display for names and place titles,
   Sora for reading, IBM Plex Mono for keys and counts. Sentence case.
   Everything sits over the canvas inside #dgStage; the stage is a size
   container, so panels respond to the frame, not the window.
   ===================================================================== */
.dg-stage { container-type: size; container-name: stage; }

.dq {
    --ink: #120d0a; --deep: #1b1510; --raised: #2a2019; --selected: #3a2b18;
    --line: #3a2e24; --line2: #4a3b2e; --bone: #efe6d2; --soft: #d3c8b1; --dust: #937f6b;
    --brass: #d9a441; --rust: #b4462a; --cyan: #5fa8c9; --good: #9cc48a; --bad: #e3735a; --warn: #e0a044;
    --dq-text: 1;
    --seam: inset 3px 0 0 var(--brass), inset 4px 0 0 rgba(18, 13, 10, .6);
    --slate: var(--deep) url(/assets/discovery/ui/ui-slate.webp) 0 0 / 384px 384px;
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    font-family: 'Sora', system-ui, sans-serif; color: var(--bone);
    font-size: calc(15px * var(--dq-text)); line-height: 1.5;
}
.dq * { box-sizing: border-box; }
.dq [hidden] { display: none !important; }
.dq button, .dq a { font: inherit; color: inherit; }
.dq :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.dq-display { font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.dq-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
.dq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Chrome: place card, top bar, prompt ── */
.dq-hud {
    position: absolute; left: 14px; top: 14px; max-width: min(46%, 340px); pointer-events: auto;
    padding: 9px 14px 10px 17px; border: 1px solid var(--line); border-radius: 3px;
    background: rgba(27, 21, 16, .84); box-shadow: var(--seam);
}
.dq-hud-place { margin: 0; font-size: calc(19px * var(--dq-text)); color: var(--bone); }
.dq-hud-goal { margin: 3px 0 0; font-size: calc(13px * var(--dq-text)); color: var(--soft); }
.dq-hud-goal b { color: var(--brass); font-weight: 600; }
.dq-hud-count { display: none; margin: 3px 0 0; font-size: calc(12px * var(--dq-text)); color: var(--dust); }
.dq-hud-meta { display: none; }   /* phones only: the count and the VXT chip, which the bar has no room for */

.dq-bar { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 58%; pointer-events: auto; }
.dq-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px;
    background: var(--raised); border: 1px solid var(--line); border-radius: 3px; color: var(--soft);
    font-size: calc(13.5px * var(--dq-text)); font-weight: 600; cursor: pointer; text-decoration: none;
}
.dq-btn:hover, .dq-btn:focus-visible { background: var(--selected); color: var(--bone); box-shadow: inset 3px 0 0 var(--rust); }
.dq-btn .dq-mono { font-size: calc(11.5px * var(--dq-text)); color: var(--dust); }
.dq-btn-primary { background: var(--selected); color: var(--bone); box-shadow: inset 3px 0 0 var(--rust); }
.dq-count { padding: 6px 10px; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; background: rgba(27, 21, 16, .84); color: var(--soft); font-size: calc(12.5px * var(--dq-text)); }

.dq-prompt {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: auto;
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 19px;
    background: var(--slate); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--seam), 0 8px 22px rgba(18, 13, 10, .5);
    color: var(--bone); font-size: calc(14.5px * var(--dq-text)); cursor: pointer; white-space: nowrap;
}
.dq-prompt .dq-key { padding: 1px 7px; border: 1px solid var(--line2); border-radius: 3px; background: var(--raised); color: var(--brass); font-size: calc(12px * var(--dq-text)); }

/* ── Toasts ── */
.dq-toasts { position: absolute; z-index: 3; left: 50%; bottom: 76px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; width: min(92%, 520px); pointer-events: none; }
/* Above panels, which come later in the DOM; with one open, at the top of the stage, over the bar the scrim has made inert. */
.dq.has-panel .dq-toasts { top: 14px; bottom: auto; }
/* A toast never swallows a tap meant for the world or the pad; only its own button takes pointers. */
.dq-toast button { pointer-events: auto; }
.dq-toast {
    pointer-events: none; display: flex; gap: 12px; align-items: center; padding: 9px 12px 9px 16px;
    background: var(--slate); border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 3px 0 0 var(--good), 0 8px 22px rgba(18, 13, 10, .5);
    font-size: calc(13.5px * var(--dq-text)); color: var(--bone);
}
.dq-toast.is-warn { box-shadow: inset 3px 0 0 var(--warn), 0 8px 22px rgba(18, 13, 10, .5); }
.dq-toast.is-coin { box-shadow: inset 3px 0 0 var(--brass), 0 8px 22px rgba(18, 13, 10, .5); }

/* ── VXT for learned quests (docs/DISCOVERY.md, Rewards). A struck brass coin: the frontier's own metal,
   not a new colour, and not Aurelian gold, which only ever means Aurelian. ── */
.dq-coin {
    flex: none; display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.16em;
    background: radial-gradient(circle at 34% 30%, #f6dc98 0 16%, var(--brass) 46%, #8a6424 100%);
    box-shadow: inset 0 0 0 1.5px rgba(18, 13, 10, .5), inset 0 0 0 3px rgba(246, 220, 152, .38);
}
.dq-vxt {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 11px; cursor: pointer;
    border: 1px solid rgba(217, 164, 65, .55); border-radius: 3px; background: rgba(42, 32, 25, .92);
    color: var(--brass); font-size: calc(12.5px * var(--dq-text)); font-weight: 600; white-space: nowrap;
}
.dq-vxt:hover, .dq-vxt:focus-visible { background: var(--selected); color: var(--bone); }
.dq-hud-vxt {
    display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 1px 8px; cursor: pointer;
    border: 1px solid rgba(217, 164, 65, .5); border-radius: 3px; background: rgba(42, 32, 25, .9);
    color: var(--brass); font-size: calc(12px * var(--dq-text)); font-weight: 600; white-space: nowrap;
}
.dq-pill.is-vxt { margin-left: 6px; color: var(--brass); border-color: rgba(217, 164, 65, .5); }
.dq-pill.is-vxt.is-earned { background: rgba(217, 164, 65, .14); }
.dq-reward-note { display: flex; gap: 8px; align-items: baseline; margin: -4px 0 14px; }
.dq-reward-note a { color: var(--brass); font-weight: 600; }

/* ── Touch controls (shown for coarse pointers, or after the first touch) ── */
.dq-pad { position: absolute; left: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; pointer-events: auto; }
.dq-pad button {
    width: 52px; height: 52px; border-radius: 3px; border: 1px solid var(--line2); background: rgba(42, 32, 25, .82);
    color: var(--soft); display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none;
}
.dq-pad button.is-held { background: var(--selected); box-shadow: inset 0 0 0 2px var(--rust); color: var(--bone); }
.dq-pad svg { width: 20px; height: 20px; }
.dq-pad [data-dir="up"] { grid-area: 1 / 2; } .dq-pad [data-dir="left"] { grid-area: 2 / 1; }
.dq-pad [data-dir="right"] { grid-area: 2 / 3; } .dq-pad [data-dir="down"] { grid-area: 3 / 2; }
.dq.is-touch .dq-prompt { left: auto; right: 16px; transform: none; bottom: 16px; min-height: 52px; }

/* ── Panels ── */
.dq-scrim { position: absolute; inset: 0; background: rgba(18, 13, 10, .46); pointer-events: auto; }
.dq-panel {
    position: absolute; pointer-events: auto; color: var(--bone);
    background: var(--slate); border: 1px solid var(--line); border-radius: 3px;
    box-shadow: var(--seam), 0 14px 34px rgba(18, 13, 10, .6);
    display: flex; flex-direction: column; max-height: calc(100% - 28px);
}
.dq-panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 21px; border-bottom: 1px solid var(--line); }
.dq-panel-title { margin: 0; font-size: calc(24px * var(--dq-text)); color: var(--brass); flex: 1; }
.dq-panel-body { padding: 14px 18px 16px 21px; overflow: auto; overscroll-behavior: contain; }
.dq-close { min-height: 36px; }

/* Dialogue: a bottom sheet with the portrait, like the calibration panel. */
.dq-dialogue { left: 50%; bottom: 14px; transform: translateX(-50%); width: min(820px, calc(100% - 28px)); }
.dq-dialogue .dq-panel-body { display: flex; gap: 18px; padding: 16px 18px 16px 21px; }
.dq-portrait { flex: none; width: 132px; height: 165px; border-radius: 3px; border: 1px solid var(--line2); object-fit: cover; background: var(--raised); }
.dq-portrait-standin { display: grid; place-items: center; font-size: calc(40px * var(--dq-text)); color: var(--dust); }
.dq-who { margin: 0; font-size: calc(30px * var(--dq-text)); color: var(--brass); }
.dq-job { margin: 4px 0 10px; font-size: calc(13px * var(--dq-text)); color: var(--dust); }
.dq-say { margin: 0 0 12px; max-width: 58ch; font-size: calc(16px * var(--dq-text)); line-height: 1.55; }
.dq-choices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dq-choice {
    display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; min-height: 38px; padding: 7px 10px;
    background: var(--raised); border: 1px solid var(--line); border-radius: 3px; color: var(--soft); cursor: pointer;
    font-size: calc(14.5px * var(--dq-text));
}
.dq-choice:hover, .dq-choice:focus-visible { background: var(--selected); box-shadow: inset 3px 0 0 var(--rust); color: var(--bone); outline: none; }
.dq-choice .dq-k { min-width: 1.2em; color: var(--dust); font-size: calc(12px * var(--dq-text)); }
.dq-choice.is-link { color: var(--brass); }
.dq-choice.is-quiet { color: var(--dust); }

/* Large sheets: journal, map, quests, settings, activities. */
.dq-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, calc(100% - 28px)); height: min(640px, calc(100% - 28px)); }
.dq-activity { width: min(760px, calc(100% - 28px)); height: auto; max-height: calc(100% - 28px); }

.dq-lede { margin: 0 0 12px; color: var(--soft); max-width: 62ch; }
.dq-feedback { min-height: 1.5em; margin: 10px 0 0; font-size: calc(14px * var(--dq-text)); color: var(--soft); }
.dq-feedback.is-good { color: var(--good); } .dq-feedback.is-bad { color: var(--bad); }
.dq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* sort / choose rows */
.dq-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dq-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: rgba(42, 32, 25, .6); }
.dq-row-label { margin: 0 0 8px; }
.dq-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.dq-seg button {
    min-height: 36px; padding: 5px 11px; border-radius: 3px; border: 1px solid var(--line2); background: var(--deep);
    color: var(--soft); cursor: pointer; font-size: calc(13.5px * var(--dq-text)); text-align: left;
}
.dq-seg button small { display: block; color: var(--dust); font-size: calc(11.5px * var(--dq-text)); }
.dq-seg button[aria-pressed="true"] { background: var(--selected); color: var(--bone); box-shadow: inset 0 0 0 1px var(--brass); }
.dq-row.is-right { border-color: rgba(156, 196, 138, .6); } .dq-row.is-wrong { border-color: rgba(227, 115, 90, .7); }
.dq-why { margin: 8px 0 0; font-size: calc(13px * var(--dq-text)); color: var(--soft); }

/* order */
.dq-order { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: dqo; }
.dq-order li { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(42, 32, 25, .6); counter-increment: dqo; }
.dq-order li::before { content: counter(dqo); font-family: 'IBM Plex Mono', monospace; color: var(--dust); min-width: 1.2em; }
.dq-tag { font-size: calc(11.5px * var(--dq-text)); color: var(--dust); border: 1px solid var(--line2); border-radius: 3px; padding: 0 6px; }
.dq-order .dq-order-label { flex: 1; }
.dq-order .dq-move { min-height: 34px; min-width: 34px; padding: 0 8px; border-radius: 3px; border: 1px solid var(--line2); background: var(--deep); color: var(--soft); cursor: pointer; }
.dq-order .dq-move:disabled { opacity: .35; cursor: default; }

/* inspect */
.dq-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dq-spot { text-align: left; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--line); background: rgba(42, 32, 25, .6); color: var(--soft); cursor: pointer; }
.dq-spot[aria-expanded="true"] { border-color: var(--line2); color: var(--bone); box-shadow: inset 3px 0 0 var(--brass); }
.dq-spot p { margin: 6px 0 0; font-size: calc(13.5px * var(--dq-text)); color: var(--soft); }

/* demo */
.dq-demo-log { margin: 12px 0 0; padding: 10px 12px; min-height: 64px; border: 1px dashed var(--line2); border-radius: 3px; background: rgba(18, 13, 10, .45); font-size: calc(13.5px * var(--dq-text)); color: var(--soft); }
.dq-demo-log p { margin: 0 0 4px; }
.dq-sim { color: var(--dust); font-size: calc(12px * var(--dq-text)); }

/* journal / quests / map lists */
.dq-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dq-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(42, 32, 25, .55); }
.dq-card h3 { margin: 0; font-size: calc(19px * var(--dq-text)); color: var(--bone); }
.dq-card .dq-meta { margin: 4px 0 8px; color: var(--dust); font-size: calc(13px * var(--dq-text)); }
.dq-card dl { margin: 8px 0 0; display: grid; gap: 6px; }
.dq-card dt { color: var(--dust); font-size: calc(12.5px * var(--dq-text)); }
.dq-card dd { margin: 0; color: var(--bone); }
.dq-card .dq-actions { margin-top: 10px; }
.dq-pill { display: inline-block; padding: 0 7px; border-radius: 3px; border: 1px solid var(--line2); font-size: calc(12px * var(--dq-text)); color: var(--soft); }
.dq-pill.is-done { color: var(--good); border-color: rgba(156, 196, 138, .45); }
.dq-pill.is-active { color: var(--brass); border-color: rgba(217, 164, 65, .5); }
.dq-group { margin: 16px 0 8px; font-size: calc(17px * var(--dq-text)); color: var(--brass); }
.dq-group:first-child { margin-top: 0; }
.dq-empty { color: var(--soft); max-width: 60ch; }
.dq-learn { margin: 8px 0 0; padding-left: 1.1em; color: var(--soft); }
.dq-note { color: var(--dust); font-size: calc(13px * var(--dq-text)); }

.dq-map-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); gap: 16px; }
.dq-map { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; background: #2a2019; }
.dq-map text { font-family: 'Sora', sans-serif; font-size: 64px; font-weight: 600; fill: #efe6d2; paint-order: stroke; stroke: #1b1510; stroke-width: 10px; }

/* ── The chart: a painted miniature of the town with pins, a route line and "you" ── */
.dq-map-sheet { width: min(1180px, calc(100% - 28px)); height: min(760px, calc(100% - 28px)); }
.dq-map-sheet .dq-map-wrap { grid-template-columns: minmax(0, 1.9fr) minmax(230px, 1fr); align-items: start; }
.dq-chart {
    position: relative; width: 100%; aspect-ratio: 2304 / 1536; overflow: hidden;
    border-radius: 3px; border: 1px solid var(--line2);
    box-shadow: inset 0 0 0 3px var(--deep), inset 0 0 0 4px rgba(217, 164, 65, .55), 0 8px 22px rgba(18, 13, 10, .45);
    background: var(--deep);
}
.dq-chart-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.dq-chart-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dq-chart-route polyline { stroke: var(--brass); stroke-width: 12; stroke-dasharray: 26 18; stroke-linecap: round; stroke-linejoin: round; opacity: .95; filter: drop-shadow(0 0 6px rgba(217, 164, 65, .55)); }
.dq-chart-label {
    position: absolute; transform: translate(-50%, 0); padding: 1px 7px; border-radius: 3px; white-space: nowrap; pointer-events: none;
    background: rgba(18, 13, 10, .72); border: 1px solid var(--line); color: var(--bone);
    font-size: calc(11.5px * var(--dq-text)); line-height: 1.5;
}
.dq-chart-label { transform: translate(-50%, -100%); }
.dq-chart-label.is-unvisited { color: var(--dust); border-style: dashed; background: rgba(18, 13, 10, .5); }
.dq-chart-label.is-static { position: relative; display: inline-block; transform: none; margin-right: 8px; }
.dq-pin {
    position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer; border-radius: 50%;
}
.dq-pin:focus-visible { outline: 2px solid var(--bone); outline-offset: 0; }
.dq-pin-shape { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--dust); box-shadow: 0 0 0 2px var(--ink); }
.dq-pin.is-new .dq-pin-shape { width: 13px; height: 13px; border-radius: 1px; transform: rotate(45deg); background: var(--brass); box-shadow: 0 0 0 2px var(--ink), 0 0 10px rgba(217, 164, 65, .7); }
.dq-pin.is-step .dq-pin-shape { width: 15px; height: 15px; background: var(--bone); box-shadow: 0 0 0 3px var(--rust), 0 0 0 5px var(--ink); transform: scale(.7); }
.dq-pin.is-done .dq-pin-shape { background: var(--good); }
.dq-pin:hover .dq-pin-shape, .dq-pin:focus-visible .dq-pin-shape { filter: brightness(1.2); }
.dq-you {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
    background: var(--bone); box-shadow: 0 0 0 3px var(--rust), 0 0 0 5px rgba(18, 13, 10, .6);
}
.dq-you::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(239, 230, 210, .7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .dq-you:not(.is-static)::after { animation: dqYou 1.8s ease-out infinite; }
    @keyframes dqYou { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.35); } }
}
.dq.is-still .dq-you::after { animation: none; }
.dq-you.is-static { position: relative; display: inline-block; margin: 0 8px 0 3px; vertical-align: -2px; }
.dq-chart-tip {
    position: absolute; z-index: 2; width: 250px; margin: 16px 0 0 16px; padding: 10px 12px 11px 15px;
    background: var(--slate); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--seam), 0 10px 26px rgba(18, 13, 10, .6);
}
.dq-chart-tip.is-left { transform: translateX(calc(-100% - 32px)); }
.dq-chart-tip.is-up { margin-top: 0; transform: translateY(calc(-100% - 16px)); }
.dq-chart-tip.is-left.is-up { transform: translate(calc(-100% - 32px), calc(-100% - 16px)); }
.dq-tip-name { margin: 0 0 3px; font-size: calc(19px * var(--dq-text)); color: var(--brass); }
.dq-tip-meta { margin: 0 0 4px; font-size: calc(12.5px * var(--dq-text)); color: var(--soft); }
.dq-tip-walk { margin: 6px 0 0; font-size: calc(12px * var(--dq-text)); color: var(--bone); }
.dq-chart-tip .dq-btn { margin-top: 8px; }
.dq-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: calc(12.5px * var(--dq-text)); color: var(--soft); }
.dq-legend li { display: inline-flex; align-items: center; }
.dq-legend .dq-pin { position: relative; margin: 0; width: 22px; height: 22px; cursor: default; }

/* The minimap: bottom right, desktop only, out of the way of panels. */
.dq-mini {
    position: absolute; right: 14px; bottom: 14px; width: 216px; padding: 0; border: 0; background: none; cursor: pointer;
    pointer-events: auto; border-radius: 3px; opacity: .92;
}
.dq-mini:hover, .dq-mini:focus-visible { opacity: 1; }
.dq-chart.is-mini { box-shadow: inset 0 0 0 2px var(--deep), inset 0 0 0 3px rgba(217, 164, 65, .5), 0 8px 20px rgba(18, 13, 10, .55); }
.dq-chart.is-mini .dq-pin { width: 12px; height: 12px; margin: -6px 0 0 -6px; cursor: inherit; }
.dq-chart.is-mini .dq-pin-shape { width: 6px; height: 6px; box-shadow: 0 0 0 1px var(--ink); }
.dq-chart.is-mini .dq-pin.is-new .dq-pin-shape { width: 7px; height: 7px; box-shadow: 0 0 0 1px var(--ink), 0 0 6px rgba(217, 164, 65, .8); }
.dq-chart.is-mini .dq-pin.is-step .dq-pin-shape { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--rust); }
.dq-chart.is-mini .dq-you { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px var(--rust); }
.dq-chart.is-mini .dq-you::after { inset: -6px; }
.dq-view { position: absolute; border: 1px solid rgba(239, 230, 210, .75); border-radius: 2px; box-shadow: 0 0 0 999px rgba(18, 13, 10, .18); pointer-events: none; }
.dq.has-panel .dq-mini, .dq.is-touch .dq-mini { display: none; }
@container stage (max-width: 900px) { .dq-mini { display: none; } }
@container stage (max-height: 520px) { .dq-mini { display: none; } }

/* The seal on a finished quest: one small moment, stamped once. */
.dq-seal {
    float: right; margin: -4px 0 8px 14px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 38% 34%, #e7b55a, #b8862f 60%, #8a6322); color: var(--ink);
    box-shadow: 0 0 0 3px var(--deep), 0 0 0 5px rgba(217, 164, 65, .6), 0 6px 16px rgba(18, 13, 10, .55);
    transform: rotate(-8deg);
}
.dq-seal span { font-size: calc(17px * var(--dq-text)); letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
    .dq-seal { animation: dqSeal .42s cubic-bezier(.2, 1.4, .4, 1) both .12s; }
    @keyframes dqSeal { from { opacity: 0; transform: rotate(-24deg) scale(1.9); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
    .dq-dialogue { animation: dqRise .22s ease-out; }
    @keyframes dqRise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
.dq.is-still .dq-seal, .dq.is-still .dq-dialogue { animation: none; }

.dq-text-play .dq-say { max-width: none; }
.dq-text-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.dq-text-head .dq-portrait { width: 88px; height: 110px; }

.dq-radio { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.dq-field { margin: 0 0 16px; }
.dq-field legend { color: var(--bone); margin-bottom: 4px; }
.dq-field fieldset { border: 0; padding: 0; margin: 0; }

/* ── The finale (discovery-finale.js): the question over the grid run, the celebration over the Crossing ──
   Lattice cyan and signal orange belong to the web; the celebration returns to the town's bone and brass.
   The one shared thing is the orange "Enter COSMOS" key. */
.dq.is-cinematic .dq-hud, .dq.is-cinematic .dq-bar, .dq.is-cinematic .dq-prompt,
.dq.is-cinematic .dq-pad, .dq.is-cinematic .dq-mini, .dq.is-cinematic .dq-toasts { display: none; }
.dq-panel.dq-finale {
    left: 50%; transform: translateX(-50%); width: min(660px, calc(100% - 32px));
    background: none; border: 0; box-shadow: none; text-align: center;
}
.dq-panel.dq-finale-ask { bottom: 6%; }                     /* low over the empty floor: the COSMOS gateway and the cube stay in view */
.dq-panel.dq-finale-done { top: 50%; transform: translate(-50%, -50%); }
.dq-finale .dq-panel-body { padding: 0; overflow: visible; }
.dq-finale-title {
    margin: 0; font-size: calc(clamp(30px, min(9cqh, 12.5cqw), 76px) * var(--dq-text)); line-height: 1; letter-spacing: .03em;   /* one line, even on a portrait phone */
    color: #fff3dc; text-shadow: 0 0 22px rgba(255, 122, 26, .6), 0 2px 0 rgba(3, 6, 12, .85);
}
.dq-finale-body { margin: 12px auto 22px; max-width: 46ch; color: #d6f3f9; font-size: calc(15px * var(--dq-text)); text-shadow: 0 1px 10px rgba(3, 6, 12, .95); }
.dq-finale-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dq-finale .dq-btn { min-height: 44px; padding: 8px 18px; font-size: calc(15px * var(--dq-text)); background: rgba(3, 6, 12, .74); border-color: rgba(55, 230, 255, .45); color: #e3f8fc; }
.dq-finale .dq-btn:hover, .dq-finale .dq-btn:focus-visible { background: rgba(55, 230, 255, .14); color: #fff; box-shadow: inset 3px 0 0 #37e6ff; }
.dq-finale .dq-btn.dq-btn-primary { background: #ff7a1a; border-color: #ffc38a; color: #1b0d03; box-shadow: 0 0 24px rgba(255, 122, 26, .55); }
.dq-finale .dq-btn.dq-btn-primary:hover, .dq-finale .dq-btn.dq-btn-primary:focus-visible { background: #ff9a4d; color: #1b0d03; box-shadow: 0 0 32px rgba(255, 122, 26, .85); }
.dq-finale .dq-btn:focus-visible { outline: 2px solid #fff3dc; outline-offset: 3px; }
.dq-finale-done .dq-finale-title { color: #ffe6b8; text-shadow: 0 0 26px rgba(217, 164, 65, .75), 0 2px 0 rgba(18, 13, 10, .85); }
.dq-finale-done .dq-finale-body { color: var(--bone); text-shadow: 0 1px 10px rgba(7, 10, 24, .95); }
.dq-finale-done .dq-btn { background: rgba(27, 21, 16, .82); border-color: var(--line2); color: var(--bone); }
.dq-finale-done .dq-btn:hover, .dq-finale-done .dq-btn:focus-visible { background: var(--selected); box-shadow: inset 3px 0 0 var(--brass); }
@media (prefers-reduced-motion: no-preference) {
    .dq-finale-title { animation: dqFinaleIn .9s cubic-bezier(.2, .8, .2, 1) both; }
    .dq-finale-body, .dq-finale-actions { animation: dqToast .5s ease-out .45s both; }
    @keyframes dqFinaleIn { from { opacity: 0; letter-spacing: .22em; filter: blur(6px); } to { opacity: 1; letter-spacing: .03em; filter: none; } }
}
.dq.is-still .dq-finale-title, .dq.is-still .dq-finale-body, .dq.is-still .dq-finale-actions { animation: none; }
/* Leaving for COSMOS (ui.glitchOut): signal bars and scanlines over a jittering, colour-shifting picture,
   then the screen switches off like an old monitor. Reduced motion: a plain fade to black. */
.dq-glitch-out { position: absolute; inset: 0; z-index: 30; pointer-events: auto; overflow: hidden; }
.dq-glitch-out::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(3, 6, 12, 0) 0 2px, rgba(3, 6, 12, .38) 2px 3px); }
.dq-glitch-bar { position: absolute; left: -5%; width: 110%; opacity: 0; mix-blend-mode: screen; }
.dq-glitch-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff3dc; opacity: 0; box-shadow: 0 0 18px #ff7a1a, 0 0 4px #fff; }
.dq-glitch-out.is-off { animation: dqOff .33s ease-in forwards; }
.dq-glitch-out.is-off .dq-glitch-line { animation: dqOffLine .33s ease-in forwards; }
.dq-glitch-out.is-still { background: #000; opacity: 0; animation: dqFadeBlack .38s ease-in forwards; }
.dq-glitch-out.is-still .dq-glitch-line, .dq-glitch-out.is-still::before { display: none; }
@keyframes dqOff { from { background: rgba(3, 6, 12, 0); } 35% { background: rgba(3, 6, 12, .9); } to { background: #000; } }
@keyframes dqOffLine { from { opacity: 1; transform: scaleX(1); } 70% { opacity: 1; transform: scaleX(.12); } to { opacity: 0; transform: scaleX(0); } }
@keyframes dqFadeBlack { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .dg-stage.is-glitching canvas { animation: dqSignal .14s steps(2, jump-none) infinite; }
    @keyframes dqSignal {
        0% { filter: contrast(1.25); transform: translateX(0); }
        50% { filter: hue-rotate(160deg) saturate(2.2) contrast(1.5); transform: translateX(6px); }
        100% { filter: invert(.1) contrast(1.35); transform: translateX(-4px); }
    }
}

/* Settings › Skip to the finale: the warning reads before the choice, across the whole row. */
.dq-skip-confirm { flex-wrap: wrap; margin-top: 8px; }
.dq-note.dq-warn { flex-basis: 100%; margin: 0 0 4px; padding: 8px 10px; border-radius: 3px; color: #f4d39a; background: rgba(224, 160, 68, .1); box-shadow: inset 3px 0 0 var(--warn); }
/* A system's name: _P.A.D_v0.5 in the dialogue and the text visit. */
.dq-who.dq-mono { font-size: calc(17px * var(--dq-text)); color: #ffb366; letter-spacing: .02em; }

/* ── Touch (phones and tablets; set on the first touch, or for a coarse pointer) ──
   Thumb-sized targets (44 px), no keyboard hints (the keys mean nothing here), no text under 12.5 px. */
.dq.is-touch .dq-btn, .dq.is-touch .dq-choice, .dq.is-touch .dq-seg button, .dq.is-touch .dq-move,
.dq.is-touch .dq-spot, .dq.is-touch .dq-vxt { min-height: 44px; }
.dq.is-touch .dq-hud-vxt { min-height: 34px; }
.dq.is-touch .dq-chart:not(.is-mini) .dq-pin { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.dq.is-touch .dq-btn .dq-mono, .dq.is-touch .dq-choice .dq-k { display: none; }
.dq.is-touch .dq-seg button small, .dq.is-touch .dq-chart-label, .dq.is-touch .dq-legend { font-size: calc(12.5px * var(--dq-text)); }

/* ── Short frames (phones held sideways): a compact HUD and bar, toasts clear of the pad ── */
@container stage (max-height: 460px) {
    .dq-hud { top: 8px; left: 8px; padding: 6px 10px 7px 13px; max-width: min(40%, 300px); }
    .dq-hud-place { font-size: calc(16px * var(--dq-text)); }
    .dq-hud-goal { font-size: calc(12.5px * var(--dq-text)); margin-top: 2px; }
    .dq-bar { top: 8px; right: 8px; max-width: 60%; gap: 4px; }
    .dq-bar .dq-btn { padding: 6px 10px; }
    .dq-toasts { top: 58px; bottom: auto; left: auto; right: 10px; transform: none; width: min(52%, 440px); justify-items: end; }
    .dq-pad { left: 10px; bottom: 10px; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
    .dq-dialogue .dq-panel-body { padding: 10px 12px 10px 16px; gap: 12px; }
    .dq-dialogue .dq-portrait { width: 60px; height: 75px; }
    .dq-panel-head { padding: 8px 12px 6px 16px; }
    .dq-panel-title { font-size: calc(20px * var(--dq-text)); }
}

/* ── Narrow frames (phones) ── */
@container stage (max-width: 640px) {
    .dq-hud { max-width: calc(100% - 28px); }
    /* Bar first (one row, fixed height), the place card under it so it can grow without covering the buttons. */
    .dq-bar { top: 10px; right: 10px; left: 10px; max-width: none; justify-content: flex-start; }
    .dq-hud { top: 54px; left: 10px; }
    .dq-btn { padding: 6px 10px; }
    .dq-bar .dq-mono, .dq-bar .dq-count { display: none; }   /* no keyboard on a phone; the count moves into the place card */
    .dq-bar .dq-vxt { display: none; }   /* the bar keeps its one row; the chip is in the place card */
    .dq-hud-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 3px 0 0; }
    .dq-hud-meta .dq-hud-count { margin: 0; }
    .dq-hud-count { display: block; }
    .dq-dialogue { bottom: 0; width: 100%; border-radius: 3px 3px 0 0; max-height: 78%; }
    .dq-dialogue .dq-panel-body { flex-direction: column; gap: 10px; }
    .dq-dialogue .dq-portrait { width: 72px; height: 90px; }
    .dq-sheet { width: 100%; height: 100%; top: 0; left: 0; transform: none; max-height: 100%; }
    .dq-activity { width: 100%; height: 100%; }
    .dq-map-wrap { grid-template-columns: 1fr; }
    .dq-toasts { top: calc(var(--dq-hud-bottom, 142px) + 8px); bottom: auto; }   /* under the place card (its bottom, set by discovery-ui.js), clear of the touch pad and the Talk button */
    .dq.has-panel .dq-toasts { top: 62px; }   /* sheets fill the frame here: just under the sheet's title row */
}
@container stage (max-height: 460px) {
    .dq-dialogue { max-height: calc(100% - 12px); bottom: 6px; }
    .dq-dialogue .dq-portrait { width: 72px; height: 90px; }
    .dq-sheet { height: calc(100% - 12px); }
}
@media (prefers-reduced-motion: no-preference) {
    .dq-toast { animation: dqToast .28s ease-out; }
    @keyframes dqToast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.dq.is-still .dq-toast { animation: none; }