/* ── Shandalar (/quest): the game screen ──────────────────────────────────────────────────────────────────────────
   A full-window game: the isometric map (QuestMap), the HUD bar at the bottom (QuestHud: itsmars' CC0 stone panels and
   orb border from scene/art/hud/, our own orb liquid and gold trim), the minimap, and framed dialogs over the map for
   encounters, towns and the deck editor. Frames (qf-frame) are CSS: dark stone, a double gold line, gold corner
   studs. Cinzel (OFL, wwwroot/fonts/cinzel) for headings and numbers. */

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url('../fonts/cinzel/cinzel-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url('../fonts/cinzel/cinzel-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.quest-game {
    --qf-gold: #c9a45c;
    --qf-gold-hi: #f1d58e;
    --qf-gold-lo: #6d5226;
    --qf-stone: #2a2622;
    --qf-stone-hi: #4a433b;
    --qf-stone-lo: #13110f;
    --qf-text: #e8dcc0;
    --qf-muted: #a8987a;
    --qf-red: #ff8a6a;
    --qf-purple: #d7a6ff;
    --qf-title: 'Cinzel', Georgia, 'Times New Roman', serif;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: #07060a;
    color: var(--qf-text);
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    user-select: none;
}
/* The app's bar and menu stay out of the way while the game is on screen (like the Play page). */
.admin-layout:has(.quest-game) .admin-appbar,
.admin-layout:has(.quest-game) .admin-drawer,
.admin-layout:has(.quest-game) .mud-overlay-drawer { display: none !important; }
.admin-layout:has(.quest-game) .admin-main { margin-left: 0; width: 100%; }
.admin-content:has(.quest-game) { max-width: none; padding: 0; }
.admin-content:has(.quest-game) .deck-offline-note { display: none; }

.quest-stage { position: relative; flex: 1; min-height: 0; }
.quest-stage .quest-map { border-radius: 0; }

/* ── Frames and buttons ─────────────────────────────────────────────────────────── */
.qf-frame {
    position: relative;
    padding: 14px 18px;
    border: 2px solid var(--qf-gold-lo);
    border-radius: 4px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, var(--qf-stone-hi), var(--qf-stone) 30%, var(--qf-stone-lo));
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px var(--qf-gold), inset 0 0 0 4px #000, inset 0 0 24px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.7);
    color: var(--qf-text);
}
/* Gold studs on the four corners. */
.qf-frame::before, .qf-frame::after, .qf-frame > .qf-studs::before, .qf-frame > .qf-studs::after {
    content: ""; position: absolute; width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg); pointer-events: none;
    background: radial-gradient(circle at 35% 35%, var(--qf-gold-hi), var(--qf-gold) 40%, var(--qf-gold-lo) 75%, #000 80%);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
.qf-frame::before { left: -7px; top: -7px; }
.qf-frame::after { right: -7px; top: -7px; }
.qf-frame > .qf-studs::before { left: -7px; bottom: -7px; }
.qf-frame > .qf-studs::after { right: -7px; bottom: -7px; }

.qf-title { margin: 0 0 6px; font-family: var(--qf-title); font-weight: 700; letter-spacing: 0.08em; color: var(--qf-gold-hi); text-shadow: 0 2px 0 #000; }
.qf-sub { color: var(--qf-muted); font-size: 0.9rem; }
.qf-heading { margin: 12px 0 6px; font-family: var(--qf-title); font-size: 0.85rem; letter-spacing: 0.14em; color: var(--qf-gold); text-transform: uppercase; }

.qf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px; border: 1px solid #000; border-radius: 3px; cursor: pointer;
    font-family: var(--qf-title); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--qf-gold-hi);
    background: linear-gradient(180deg, #5a4a33, #2d241a 55%, #1a140e);
    box-shadow: inset 0 0 0 1px var(--qf-gold), inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 0 #000;
}
.qf-btn:hover:not(:disabled) { filter: brightness(1.2); }
.qf-btn:focus-visible { outline: 2px solid var(--qf-gold-hi); outline-offset: 2px; }
.qf-btn:disabled { opacity: 0.45; cursor: default; }
.qf-btn--red { background: linear-gradient(180deg, #8a1b1b, #4d0b0b 55%, #260404); color: #ffe0c0; }
.qf-btn--quiet { background: linear-gradient(180deg, #2b2620, #15120e); }
.qf-btn--small { padding: 4px 10px; font-size: 0.75rem; }
.qf-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }

/* ── Over the map: banner, notices, minimap, pause ─────────────────────────────── */
.quest-banner {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
    padding: 6px 22px; white-space: nowrap; font-family: var(--qf-title); letter-spacing: 0.12em; color: var(--qf-gold-hi); font-size: 0.95rem;
}
.quest-banner--paused { color: #ffcf6e; }
.quest-banner--late { color: var(--qf-red); }
.quest-toast {
    position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 3;
    width: min(560px, calc(100% - 300px)); padding: 10px 18px; text-align: center; font-size: 0.95rem;
    animation: quest-toast-in 200ms ease-out;
}
@keyframes quest-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.quest-alert { color: var(--qf-red); }

.quest-minimap { position: absolute; top: 12px; right: 12px; z-index: 3; width: clamp(150px, 18vw, 240px); padding: 8px 10px 10px; }
.quest-minimap header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-family: var(--qf-title); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--qf-gold-hi); }
.quest-minimap header small { color: var(--qf-muted); font-family: inherit; }
.quest-minimap svg { display: block; width: 100%; height: auto; }

.quest-stage .quest-paused { z-index: 4; padding: 16px; text-align: center; gap: 12px; cursor: default; background: rgba(4, 3, 8, 0.55); font-family: var(--qf-title); color: var(--qf-gold-hi); text-shadow: 0 2px 0 #000; }
.quest-stage .quest-paused strong { letter-spacing: 0.3em; font-size: 2rem; }
.quest-stage .quest-paused .qf-sub { font-family: Georgia, 'Times New Roman', serif; max-width: 520px; text-shadow: 0 1px 2px #000; color: var(--qf-text); }

/* The hold-down pad: on touch screens only, over the map's bottom left above the life orb. */
.quest-stage .quest-pad { display: none; }
@media (pointer: coarse) {
    .quest-stage .quest-pad {
        display: grid; position: absolute; left: 12px; bottom: 12px; z-index: 3; width: 150px;
        padding: 6px; background: rgba(10, 8, 6, 0.55); border: 1px solid var(--qf-gold-lo); border-radius: 8px;
    }
    .quest-stage .quest-pad button { color: var(--qf-gold-hi); background: rgba(40, 32, 22, 0.8); border: 1px solid var(--qf-gold-lo); }
}

/* ── The HUD bar: one slim framed strip under the map ─────────────────────────── */
.quest-hud {
    flex: none; z-index: 5; margin: 0; border-radius: 0; padding: 8px 16px;
    display: flex; align-items: center; gap: clamp(10px, 2vw, 28px);
    background: rgba(0, 0, 0, 0.25) url('../scene/art/hud/stone-mid.webp') 0 0 / auto 160px; background-blend-mode: multiply;
}
.quest-hud-stats { display: flex; gap: 6px; flex: none; }
.quest-plaque {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; white-space: nowrap;
    background: rgba(0, 0, 0, 0.45); border: 1px solid var(--qf-gold-lo); border-radius: 3px;
    font-family: var(--qf-title); font-size: 0.8rem; color: var(--qf-muted);
}
.quest-plaque b { font-size: 1.05rem; color: var(--qf-gold-hi); text-shadow: 0 1px 0 #000; }
.quest-plaque--life { color: #ff6a50; }
.quest-plaque--life b { color: #ffd0c0; }
.quest-hud-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.quest-bar-label { display: flex; justify-content: space-between; gap: 8px; font-family: var(--qf-title); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--qf-muted); white-space: nowrap; }
.quest-bar-label span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.quest-bar-label b { color: var(--qf-purple); font-weight: 700; }
.quest-bar-label.quest-alert, .quest-bar-label.quest-alert span { color: var(--qf-red); }
.quest-bar { height: 7px; border: 1px solid #000; background: #120d08; box-shadow: inset 0 0 0 1px var(--qf-gold-lo); border-radius: 2px; overflow: hidden; }
.quest-bar i { display: block; height: 100%; background: linear-gradient(180deg, #d1a14b, #7a4f15); transition: width 300ms; }
.quest-bar--spell i { background: linear-gradient(180deg, #a65ad6, #4a1670); }
.quest-bar--alert i { background: linear-gradient(180deg, #ff6a40, #8a1a0a); }
.quest-hud-actions { display: flex; gap: 6px; flex: none; }
.qf-btn--on { box-shadow: inset 0 0 0 2px var(--qf-gold-hi), 0 0 10px rgba(241, 213, 142, 0.45); }

/* ── Dialogs over the map ───────────────────────────────────────────────────────── */
.qf-overlay {
    position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px;
    background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.82));
    animation: qf-fade 150ms ease-out;
}
@keyframes qf-fade { from { opacity: 0; } }
.qf-dialog { width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 22px 26px 20px; }
.qf-dialog--wide { width: min(1100px, 100%); }

/* Encounter */
.quest-foe { display: flex; gap: 18px; align-items: center; }
.quest-portrait {
    flex: none; width: 110px; height: 110px; border-radius: 50%; background: #120c08 center / cover;
    box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--qf-gold), 0 0 0 6px #000, 0 6px 14px rgba(0, 0, 0, 0.9);
    display: grid; place-items: center; font-family: var(--qf-title); font-size: 2.6rem; color: var(--qf-gold-hi);
}
.quest-foe h2 { margin: 0; font-family: var(--qf-title); font-size: 1.8rem; color: var(--qf-red); letter-spacing: 0.05em; text-shadow: 0 2px 0 #000; }
.quest-foe .qf-sub b { color: var(--qf-gold-hi); font-weight: 600; }
.quest-chainline { font-family: var(--qf-title); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--qf-purple); margin-bottom: 4px; }
.quest-saying { margin: 14px 0 4px; font-style: italic; font-size: 1.15rem; }
.quest-stakes { display: flex; gap: 16px; align-items: center; margin: 14px 0; padding: 12px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--qf-gold-lo); }
.quest-stake { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quest-stake img, .quest-stake .quest-cardname { width: 96px; aspect-ratio: 63 / 88; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 4px 10px #000; }
.quest-cardname { display: grid; place-items: center; padding: 6px; text-align: center; font-size: 0.8rem; background: #1a1410; }
.quest-stake span { font-family: var(--qf-title); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--qf-muted); }
.quest-vs { font-family: var(--qf-title); color: var(--qf-gold); font-size: 0.8rem; letter-spacing: 0.12em; }
.quest-stakes p { flex: 1; margin: 0; color: var(--qf-muted); font-size: 0.9rem; line-height: 1.35; }
.quest-offer { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--qf-gold); background: rgba(0, 0, 0, 0.25); }

/* Town */
.quest-townbody { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.quest-wares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.quest-ware { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.quest-ware img, .quest-ware .quest-cardname { width: 100%; aspect-ratio: 63 / 88; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 4px 10px #000; }
.quest-ware .qf-btn { width: 100%; }
.quest-selllist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quest-selllist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Deck editor */
.quest-editorhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.quest-editorhead .qf-sub b { color: var(--qf-gold-hi); }
.quest-editorbody {
    columns: 3 280px; column-gap: 18px; padding: 12px;
    background: rgba(0, 0, 0, 0.3) url('../scene/art/hud/stone-mid.webp') 0 0 / auto 160px; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px var(--qf-gold-lo), inset 0 0 30px rgba(0, 0, 0, 0.8);
}
.quest-editorgroup { break-inside: avoid; margin-bottom: 14px; }
.quest-editorgroup ul { list-style: none; margin: 0; padding: 0; }
.quest-editorgroup li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 2px; }
.quest-editorgroup li.in { background: rgba(201, 164, 92, 0.12); }
.quest-editorgroup .count { width: 1.6em; text-align: center; font-family: var(--qf-title); font-weight: 700; color: var(--qf-gold-hi); }
.quest-editorgroup .name { flex: 1; min-width: 0; }
.quest-editorgroup .note { color: var(--qf-muted); font-size: 0.8rem; white-space: nowrap; }
.quest-editorgroup button {
    width: 24px; height: 24px; padding: 0; border: 1px solid #000; border-radius: 3px; cursor: pointer; color: var(--qf-gold-hi);
    background: linear-gradient(180deg, #4a3c2a, #1e1810); box-shadow: inset 0 0 0 1px var(--qf-gold-lo); font-weight: 700;
}
.quest-editorgroup button:disabled { opacity: 0.3; cursor: default; }

/* The start and end screens: one framed panel on the dark. */
.quest-start { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 30%, #241c14, #07060a 70%); }
.quest-start .qf-dialog { width: min(820px, 100%); }
.quest-starters2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.quest-starter2 {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer; color: var(--qf-text);
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--qf-gold-lo); border-left: 6px solid var(--quest-land); border-radius: 3px; font: inherit;
}
.quest-starter2:hover { border-color: var(--qf-gold); background: rgba(201, 164, 92, 0.1); }
.quest-starter2 strong { font-family: var(--qf-title); color: var(--qf-gold-hi); letter-spacing: 0.05em; }
.quest-starter2 span { color: var(--qf-muted); font-size: 0.9rem; }

/* Phones: the bar wraps: plaques and buttons on top, the two bars below. */
@media (max-width: 760px) {
    .quest-hud { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
    .quest-hud-stats { gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
    .quest-plaque { padding: 3px 6px; font-size: 0.7rem; gap: 3px; }
    .quest-plaque b { font-size: 0.85rem; }
    .quest-hud-stats .quest-plaque:nth-child(n+4) { display: none; }
    .quest-hud-actions .qf-btn { padding: 4px 9px; }
    .quest-hud-word { display: none; }
    .quest-hud-bars { flex-basis: 100%; order: 3; }
    .quest-bar-label { font-size: 0.62rem; }
    .quest-banner { left: 8px; transform: none; max-width: calc(100% - 130px); overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; padding: 5px 12px; }
    .quest-toast { width: calc(100% - 16px); top: 52px; font-size: 0.85rem; }
    .quest-minimap { width: 108px; padding: 6px; }
    .quest-minimap header { display: none; }

    .qf-overlay { padding: 8px; }
    .qf-dialog { padding: 16px 14px 14px; }
    .quest-foe { gap: 12px; }
    .quest-portrait { width: 64px; height: 64px; font-size: 1.6rem; }
    .quest-foe h2 { font-size: 1.25rem; }
    .quest-saying { font-size: 1rem; margin-top: 10px; }
    .quest-stakes { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .quest-stake img, .quest-stake .quest-cardname { width: 76px; }
    .quest-stakes p { flex-basis: 100%; font-size: 0.82rem; }
    .quest-townbody { grid-template-columns: minmax(0, 1fr); }
    .quest-wares { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .quest-editorhead { flex-wrap: wrap; }
    .quest-editorbody { columns: 1; padding: 8px; }
}