@font-face {
    font-family: "GNU Unifont";
    src: url("./assets/fonts/subset/UnifontExMono.ansi-glyphs.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Cascadia Mono";
    src: url("./assets/fonts/subset/CascadiaMono-Regular.ansi-glyphs.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --ui-font-stack: "Cascadia Mono", "GNU Unifont", monospace;

    --page-bg: #030102;
    --page-bg-radial-a: #220812;
    --page-bg-radial-b: #090205;
    --text: #f4d6d8;
    --text-strong: #ffffff;
    --text-muted: #b8868c;
    --text-good: #7cff9e;
    --text-warn: #ffd166;
    --text-bad: #ff6868;
    --text-gold: #ffd761;

    --surface-0: #030102;
    --surface-1: #090205;
    --surface-2: #120309;
    --surface-3: #19060c;
    --surface-4: #210712;
    --surface-active: #3a0a16;
    --surface-warn: #3b1705;

    --border: #6b1020;
    --border-subtle: #3a0a13;
    --border-control: #5e1220;
    --border-active: #ff4050;
    --border-warn: #ff9d3d;

    --shadow-page: 0 0 30px #0009;
    --shadow-inset: inset 0 0 30px #000;
    --shadow-board: 0 0 0 2px #0008, inset 0 0 24px #000;
    --shadow-topbar: 0 2px 20px #000a;

    --radius-panel: .45rem;
    --radius-control: .35rem;
    --radius-board: .25rem;
    --gap: .45rem;
    --panel-width-min: 320px;
    --panel-width-max: 390px;
    --topbar-padding: .38rem .55rem;
    --panel-padding: .5rem;
    --button-min-height: 2.2rem;
    --button-padding: .38rem .34rem;
    --button-font-size: 1rem;
    --tab-font-size: .78rem;
    --small-font-size: .75rem;
    --cursor-font-size: .78rem;
    --stat-font-size: .86rem;
    --progress: 0%;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: radial-gradient(circle at 50% 20%, var(--page-bg-radial-a) 0, var(--page-bg-radial-b) 55%, var(--page-bg) 100%);
    color: var(--text);
    font-family: var(--ui-font-stack);
    overflow: hidden;
}

[v-cloak] {
    visibility: hidden;
}

button,
canvas,
input {
    font: inherit;
}

input[type=radio] {
    min-height: auto;
    width: auto;
    margin-right: 1rem;
}

button {
    border: 1px solid var(--border-control);
    border-radius: var(--radius-control);
    background: var(--surface-4);
    color: var(--text);
    min-height: var(--button-min-height);
    padding: var(--button-padding);
    cursor: pointer;
    text-align: left;
    font-size: var(--button-font-size);
}

button:hover {
    filter: brightness(1.18);
}

button.active {
    border-color: var(--border-active);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-active), transparent 46%) inset;
    background: var(--surface-active);
    color: var(--text-strong);
}

button.locked,
button:disabled {
    opacity: .45;
    filter: grayscale(.55);
    cursor: not-allowed;
}

button>* {
    pointer-events: none;
}

input {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-control);
    background: var(--surface-1);
    color: var(--text-strong);
    padding: .28rem .35rem;
    accent-color: var(--border-active);
}

input:focus {
    outline: 1px solid var(--border-active);
    outline-offset: 1px;
}

input[type="checkbox"] {
    width: 1.15rem;
    min-height: 1.15rem;
    padding: 0;
}

#app {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
}

#topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding: var(--topbar-padding);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #2a0712, var(--surface-2));
    box-shadow: var(--shadow-topbar);
    user-select: none;
}

.stat,
.version,
.bugButton,
.reportButton,
.wikiLink {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .42rem;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 35%);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-1), transparent 25%);
    color: var(--text);
    white-space: nowrap;
    font-size: var(--stat-font-size);
}

.stat b,
.version,
.bugButton,
.reportButton,
.wikiLink {
    color: var(--text-strong);
}

.reportButton {
    cursor: pointer;
    text-align: center;
}

.reportButton:hover {
    filter: brightness(1.18);
}

.wikiLink {
    margin-left: auto;
    cursor: pointer;
    text-decoration: none;
}

.wikiLink:hover {
    filter: brightness(1.18);
}

#topbar .saveId {
    cursor: pointer;
    color: var(--text-strong);
    display: inline-block;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.version {
    margin-left: auto;
    cursor: pointer;
    text-align: center;
}

.version:hover {
    filter: brightness(1.18);
}

.bugButton {
    cursor: pointer;
    text-align: center;
}

.bugButton:hover:not(:disabled) {
    filter: brightness(1.18);
}

.bugButton:disabled {
    opacity: .55;
    cursor: default;
}

#main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(var(--panel-width-min), var(--panel-width-max));
    gap: var(--gap);
    padding: var(--gap);
}

#viewportWrap {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--surface-0);
    box-shadow: inset 0 0 40px #000, var(--shadow-page);
    overflow: hidden;
}

#board {
    position: relative;
    overflow: hidden;
    background: var(--surface-0);
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 42%);
    border-radius: var(--radius-board);
    box-shadow: var(--shadow-board);
    touch-action: none;
    user-select: none;
    cursor: crosshair, auto;
}

#tiles,
#sprites,
#effects,
#cursor {
    position: absolute;
    pointer-events: none;
}

#tiles {
    left: 0;
    top: 0;
    display: block;
}

#sprites,
#effects,
#cursor {
    inset: 0;
}

#cursorInfo {
    position: absolute;
    left: .4rem;
    bottom: .35rem;
    max-width: 90%;
    padding: .18rem .35rem;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 35%);
    border-radius: .3rem;
    background: color-mix(in srgb, var(--surface-1), transparent 15%);
    color: var(--text);
    font-size: var(--cursor-font-size);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile-only controls are hidden on desktop and revealed in the narrow-width
   media query below; desktop-only controls are the inverse. */
.mobileOnly {
    display: none;
}

/* Floating query readout. Its top-left (left/top) is resolved in JS from the
   target's on-screen position and the rendered box size, so it sits beside the
   cell/creature, stays fully inside the board, and never covers the cursor.
   Absolutely positioned inside the overflow:hidden #board with pointer-events
   off, so it never adds a scrollbar, shifts layout, or blocks interaction. */
#queryTooltip {
    position: absolute;
    z-index: 5;
    min-width: 9.5rem;
    max-width: 14rem;
    display: grid;
    gap: .12rem;
    padding: .3rem .45rem;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 30%);
    border-radius: .35rem;
    background: color-mix(in srgb, var(--surface-1), transparent 8%);
    box-shadow: var(--shadow-page);
    color: var(--text);
    font-size: var(--cursor-font-size);
    pointer-events: none;
}

#queryTooltip > b:first-child {
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: .12rem;
    margin-bottom: .04rem;
}

#queryTooltip .row {
    border-bottom: none;
    padding: .04rem 0;
    gap: .6rem;
}

#panel {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--gap);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
    box-shadow: var(--shadow-inset), var(--shadow-page);
    padding: var(--panel-padding);
    overflow: hidden;
}

#minimapWrap {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: var(--gap);
    align-items: stretch;
    min-height: 250px;
}

#minimap {
    width: 112px;
    height: 94px;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 22%);
    border-radius: var(--radius-board);
    background: var(--surface-0);
    image-rendering: pixelated;
    touch-action: none;
}

#mentor {
    height: 250px;
    min-height: 0;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 35%);
    border-radius: .3rem;
    background: color-mix(in srgb, var(--surface-1), transparent 25%);
    padding: .35rem;
    color: var(--text);
    font-size: .78rem;
}

#mentor div {
    margin-bottom: .18rem;
}

#tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .25rem;
}

#tabs button {
    min-height: 2rem;
    padding: .25rem .15rem;
    text-align: center;
    font-size: var(--tab-font-size);
}

#panelContent {
    display: block;
    min-height: 0;
    overflow: auto;
    padding-right: .2rem;
}

.panelView {
    display: grid;
    gap: .5rem;
}

#gameSetupOverlay,
#changelogOverlay,
#saveNameOverlay,
#loadOverlay,
#bugReportOverlay,
#reportViewOverlay,
#reportsOverlay,
#summaryOverlay {
    position: fixed;
    inset: 0;
    z-index: 18;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--surface-0), transparent 18%);
}

#gameSetupDialog,
#changelogDialog,
#saveNameDialog,
#loadDialog,
#bugReportDialog,
#reportViewDialog,
#reportsDialog,
#summaryDialog {
    width: min(560px, 100%);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    display: grid;
    gap: .55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
    box-shadow: var(--shadow-inset), var(--shadow-page);
    padding: .7rem;
}

#changelogDialog {
    width: min(760px, 100%);
}

#gameSetupDialog {
    width: min(820px, 100%);
}

#saveNameDialog,
#loadDialog,
#bugReportDialog,
#reportViewDialog,
#summaryDialog {
    width: min(460px, 100%);
}

#reportsDialog {
    width: min(640px, 100%);
}

.loadField {
    display: grid;
    gap: .3rem;
}

.loadField span {
    color: var(--text-muted);
    font-size: var(--small-font-size);
}

.loadField input,
.loadField textarea {
    font: inherit;
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-1), transparent 20%);
    color: var(--text);
}

.loadField textarea {
    resize: vertical;
    min-height: 6rem;
}

.saveEntryList {
    display: grid;
    gap: .3rem;
    max-height: 14rem;
    overflow: auto;
}

.saveEntry {
    display: grid;
    gap: .12rem;
    text-align: left;
    padding: .35rem .5rem;
}

.saveEntry b {
    color: var(--text-strong);
}

.saveEntry span {
    color: var(--text-muted);
    font-size: var(--small-font-size);
    word-break: break-all;
}

.saveEntry.selected {
    border-color: var(--border-control);
    background: color-mix(in srgb, var(--surface-3), transparent 10%);
}

.bugReportArea {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bugReportArea .small {
    flex: 1;
}

.reportText {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: min(50vh, 420px);
    overflow: auto;
    color: var(--text);
}

.reportList {
    display: grid;
    gap: .3rem;
    max-height: min(54vh, 460px);
    overflow: auto;
}

.reportRow {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-1), transparent 25%);
}

.reportRow .reportInfo {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: .1rem;
    cursor: pointer;
}

.reportRow .reportInfo b {
    color: var(--text-strong);
}

.reportRow .reportInfo span {
    color: var(--text-muted);
    font-size: var(--small-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#bugReportSelectHint {
    position: fixed;
    top: 3.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 18;
    padding: .4rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-2), transparent 8%);
    color: var(--text-strong);
    font-size: var(--small-font-size);
    pointer-events: none;
}

.changelogBody {
    min-height: 9rem;
    max-height: min(62vh, 620px);
    overflow: auto;
    border-top: 1px solid var(--border-subtle);
    padding-top: .5rem;
    color: var(--text);
    line-height: 1.45;
}

.changelogEntry {
    display: grid;
    gap: .35rem;
    padding: .2rem 0 .7rem;
    border-bottom: 1px solid var(--border-subtle);
}

.changelogEntry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.changelogEntry h3 {
    margin: .6rem 0 .35rem;
    color: var(--text-strong);
    font-size: 1.1rem;
}

.changelogDate {
    color: var(--text-muted);
    font-size: var(--small-font-size);
}

.changelogBody ul {
    margin: .35rem 0;
    padding-left: 1.25rem;
}

.changelogBody li {
    margin: .18rem 0;
}

.setupHeader {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: start;
}

.setupHeader b {
    display: block;
    color: var(--text-strong);
    font-size: 1.05rem;
}

.setupHeader .small {
    display: block;
    margin-top: .15rem;
}

.compactButton {
    min-height: 1.8rem;
    padding: .22rem .35rem;
    font-size: var(--small-font-size);
    text-align: center;
}

.setupBox {
    display: grid;
    gap: .45rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: .45rem 0;
}

.setupWithPreview {
    grid-template-columns: minmax(12rem, .72fr) minmax(0, 1fr);
    align-items: start;
    gap: .6rem;
}

.setupPreviewPanel {
    display: grid;
    gap: .28rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--small-font-size);
}

.setupPreviewPanel canvas {
    display: block;
    width: 100%;
    aspect-ratio: 226 / 136;
    min-height: 8.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-control);
    background: #030102;
    image-rendering: pixelated;
}

.setupPreviewPanel small {
    color: var(--text-muted);
    min-height: 1rem;
}

.fieldGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}

.fieldGrid label {
    display: grid;
    gap: .18rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--small-font-size);
}

.fieldGroup {
    display: grid;
    gap: .28rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--small-font-size);
}

.mapSizeGroup {
    grid-column: 1 / -1;
}

.radioGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
}

.radioField {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: .35rem;
    min-height: 2.4rem;
    padding: .3rem .4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-control);
    background: var(--surface-2);
}

.radioField span {
    display: grid;
    gap: .08rem;
}

.radioField small {
    color: var(--text-muted);
    font-size: .72rem;
}

.fieldGrid label b {
    color: var(--text-strong);
}

/* Per-keeper NPC AI pickers flow in a responsive grid instead of a tall column. */
.npcAiGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .3rem .4rem;
}

.npcAiRow {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.npcAiRow select {
    width: 100%;
    min-width: 0;
}

.fieldGrid input[type="range"] {
    padding: 0;
    min-height: 1.35rem;
}

.checkField {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
}

.gridBtns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
}

.gridBtns.wide {
    grid-template-columns: 1fr;
}

.twoCols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

@media (max-width: 720px) {
    .setupWithPreview {
        grid-template-columns: 1fr;
    }

    .radioGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.queryBox {
    display: grid;
    gap: .18rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: .35rem 0;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    border-bottom: 1px solid var(--border-subtle);
    padding: .12rem 0;
}

.small {
    font-size: var(--small-font-size);
    color: var(--text-muted);
}

.cost {
    color: var(--text-gold);
}

.ok,
.msgGood {
    color: var(--text-good);
}

.bad,
.msgBad {
    color: var(--text-bad);
}

.msgWarn {
    color: var(--text-warn);
}

.bar {
    height: .45rem;
    margin: .25rem 0 .45rem;
    border: 1px solid color-mix(in srgb, var(--border), var(--surface-0) 35%);
    border-radius: .3rem;
    background: var(--surface-1);
    overflow: hidden;
}

.fill {
    width: var(--progress);
    height: 100%;
    background: linear-gradient(90deg, var(--border-active), var(--text-warn));
}

#controlButtons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
}

#controlButtons button {
    min-height: 2rem;
    padding: .25rem;
    text-align: center;
}

#topbar .middle,
.defeatBadge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .42rem;
}

.defeatBadge {
    border: 1px solid var(--danger, #ff3148);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-1), transparent 25%);
    color: var(--danger, #ff3148);
    white-space: nowrap;
    font-size: var(--stat-font-size);
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}

.defeatBadge:hover {
    filter: brightness(1.18);
}

.defeatBadge.victory {
    border-color: var(--text-gold);
    color: var(--text-gold);
}

/* ===================== End-game screen (victory / defeat) ===================== */
/* High-fidelity match of the design handoff. Colours are scoped custom
   properties so the victory/defeat mood is a single class swap on the panel.
   Uses the game's bundled monospace rather than importing a web font. */
#endScreenOverlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    overflow: auto;
    background: radial-gradient(120% 90% at 50% 38%, #241019 0%, #150b10 55%, #0b0507 100%);
    font-family: var(--ui-font-stack);
}

#endScreenOverlay .esTexture,
#endScreenOverlay .esScanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#endScreenOverlay .esTexture {
    opacity: .10;
    background-image:
        repeating-linear-gradient(0deg, rgba(90, 150, 180, .5) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(90, 150, 180, .5) 0 1px, transparent 1px 26px);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 80%);
    mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 80%);
}

#endScreenOverlay .esScanlines {
    opacity: .5;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}

.endScreen {
    --es-accent: #ea3b5e;
    --es-title: #eab63f;
    --es-heart: #e7b23f;
    --es-subtitle: #c99aa2;
    --es-label: #ecd3d7;
    --es-value: #f0dab0;
    --es-gold: #e7b23f;
    --es-footnote: #b0838c;
    --es-row-border: rgba(234, 59, 94, .14);
    --es-btn-bg: #26121b;
    --es-btn-hover: #361a26;
    --es-view: #f0dfe2;
    --es-newgame: #61c76f;
    position: relative;
    width: min(760px, 95vw);
    border: 1.5px solid var(--es-accent);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #241019, #180b12);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .65), 0 0 60px rgba(233, 178, 63, .13), inset 0 0 70px rgba(233, 178, 63, .03);
}

.endScreen.defeat {
    --es-title: #ead3d7;
    --es-heart: #7a5560;
    --es-subtitle: #a78289;
    --es-label: #d3bec2;
    --es-value: #c1adb1;
    --es-gold: #c6a765;
    --es-footnote: #9a747c;
    --es-row-border: rgba(234, 59, 94, .12);
    --es-btn-bg: #22111a;
    --es-btn-hover: #311824;
    --es-view: #e6d3d6;
    background: linear-gradient(180deg, #1b0f14, #120a0e);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .72), inset 0 0 70px rgba(0, 0, 0, .45);
}

.endScreen .esHeader {
    position: relative;
    padding: 24px 28px 16px;
}

.endScreen .esEyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--es-accent);
    margin-bottom: 9px;
}

.endScreen .esTitleRow {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.endScreen .esHeart {
    color: var(--es-heart);
    font-size: 24px;
    line-height: 1;
}

.endScreen.victory .esHeart {
    animation: heartPulse 2.2s ease-in-out infinite;
}

@keyframes heartPulse {
    0%, 100% { opacity: .85; }
    50% { opacity: 1; }
}

.endScreen .esTitle {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--es-title);
}

.endScreen .esSubtitle {
    margin-top: 9px;
    font-size: 13.5px;
    color: var(--es-subtitle);
    line-height: 1.5;
    max-width: 78%;
}

.endScreen .esClose {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #33141d;
    border: 1px solid var(--es-accent);
    border-radius: 5px;
    color: #f0c6cd;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.endScreen .esDivider {
    height: 1.5px;
    background: var(--es-accent);
    opacity: .55;
}

.endScreen.defeat .esDivider {
    opacity: .5;
}

.endScreen .esStats {
    padding: 16px 28px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
}

.endScreen .esStat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--es-row-border);
}

/* The final row of each column carries no divider (last two grid cells). */
.endScreen .esStat:nth-last-child(-n+2) {
    border-bottom: none;
}

.endScreen .esStat .esLabel {
    font-size: 14px;
    font-weight: 700;
    color: var(--es-label);
}

/* Rows whose count excludes imps carry a hover tooltip; hint it with a dotted rule. */
.endScreen .esStat .esLabel.hasTip {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.endScreen .esStat .esValue {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    text-align: right;
    color: var(--es-value);
}

.endScreen .esStat .esValue.gold {
    color: var(--es-gold);
}

.endScreen .esFootnote {
    padding: 12px 28px 0;
    font-size: 12.5px;
    color: var(--es-footnote);
    line-height: 1.55;
}

.endScreen .esButtons {
    padding: 18px 28px 24px;
    display: flex;
    gap: 12px;
}

.endScreen .esButtons button {
    flex: 1;
    background: var(--es-btn-bg);
    border: 1px solid var(--es-accent);
    border-radius: 7px;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    color: var(--es-view);
    cursor: pointer;
    transition: background .15s;
}

.endScreen .esButtons button:hover {
    background: var(--es-btn-hover);
}

.endScreen .esButtons button.esNewGame {
    color: var(--es-newgame);
}

#toast {
    position: fixed;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    max-width: min(90vw, 640px);
    padding: .7rem 1.1rem;
    border: 1px solid var(--border-active);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--surface-4), var(--surface-0) 8%);
    color: var(--text-strong);
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: var(--shadow-page), 0 0 0 1px #0007;
    pointer-events: none;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

#toast.visible {
    opacity: 0.8;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

@media (max-width: 850px) {
    :root {
        --gap: .25rem;
        --panel-padding: .35rem;
        --stat-font-size: .74rem;
        --tab-font-size: .68rem;
    }

    #main {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(230px, 42vh);
    }

    #minimapWrap {
        grid-template-columns: 86px 1fr;
        min-height: 110px;
    }

    #minimap {
        width: 86px;
        height: 78px;
    }

    #mentor {
        height: 110px;
        max-height: 110px;
    }

    #topbar {
        gap: .22rem;
        padding: .25rem;
    }

    .stat,
    .version {
        padding: .14rem .28rem;
    }

    .mobileOnly {
        display: block;
    }

    .desktopOnly {
        display: none;
    }

    /* Hand · Dig · Query fit on one row once the mobile Dig toggle appears. */
    .toolBtns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}