:root {
    --bg: #0f1117;
    --panel: #1a1e28;
    --line: #2a2f3c;
    --text: #e6e8ee;
    --muted: #8a91a3;
    --accent: #c9a24b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.hidden { display: none !important; }

/* Top bar */
#topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
#topbar .brand { font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
#topbar-resources { display: flex; gap: 1.25rem; }
.res b { color: var(--muted); font-weight: 600; margin-right: 0.35rem; }
.spacer { flex: 1; }

/* Screens & cards */
.screen {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.card {
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem;
}
h1, h2 { margin-top: 0; }
.muted { color: var(--muted); }

/* Auth */
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth-tab {
    flex: 1; padding: 0.6rem; cursor: pointer;
    background: transparent; color: var(--muted);
    border: 1px solid var(--line); border-radius: 8px;
}
.auth-tab.active { color: var(--text); border-color: var(--accent); }
.auth-form { display: none; flex-direction: column; gap: 0.75rem; }
.auth-form.active { display: flex; }

input {
    padding: 0.65rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); }

.btn {
    padding: 0.7rem;
    background: var(--accent); color: #17130a;
    border: none; border-radius: 8px;
    font-weight: 600; cursor: pointer;
}
.btn-ghost {
    background: transparent; color: var(--muted);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 0.4rem 0.8rem; cursor: pointer;
}
.error { color: #e06c6c; min-height: 1.2em; margin-bottom: 0; }

/* Game */
.res-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.res-table th, .res-table td {
    text-align: left; padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--line);
}
.res-table th { color: var(--muted); font-weight: 600; }
.res-table td:nth-child(2) { font-variant-numeric: tabular-nums; }

/* Game layout: tabbed panels */
.game { width: 100%; max-width: 640px; }
.game-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.game-tab {
    flex: 1;
    min-width: 6rem;
    padding: 0.6rem 0.5rem;
    background: var(--panel);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.game-tab:hover { color: var(--text); }
.game-tab.active { color: var(--text); border-color: var(--accent); background: var(--bg); }
/* Shut for the duration of a lesson: visibly out of reach, not merely inert. */
.game-tab.locked { opacity: 0.35; cursor: not-allowed; }
.game-tab.locked:hover { color: var(--muted); }
.game-panel { display: none; }
.game-panel.active { display: block; }
#screen-game .card { max-width: none; }
.vitals-card { padding: 1rem 1.25rem; margin-bottom: 1rem; }
#screen-game h3 { margin: 1.25rem 0 0.5rem; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Vitals bars */
.vitals { display: flex; flex-direction: column; gap: 0.5rem; }
.vital { display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: 0.6rem; }
.vital-label { color: var(--muted); font-size: 0.9rem; }
.vital-track { height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.vital-fill { display: block; height: 100%; }
.vital-hp { background: #c0554e; }
.vital-mana { background: #4e77c0; }
.vital-courage { background: var(--accent); }
.vital-num { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); }

/* Stats grid */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.stat { display: flex; justify-content: space-between; padding: 0.45rem 0.6rem; background: var(--bg); border-radius: 6px; }
.stat span { color: var(--muted); }

/* Skills & equipment */
.skill-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.skill { display: flex; justify-content: space-between; padding: 0.4rem 0.6rem; background: var(--bg); border-radius: 6px; text-transform: capitalize; }
.skill span { color: var(--muted); }

.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.slot { display: flex; justify-content: space-between; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px dashed var(--line); }
.slot span { color: var(--muted); font-size: 0.85rem; }
.slot.filled { border-style: solid; border-color: var(--accent); cursor: pointer; }
.slot.filled:hover { background: var(--bg); }
.stat b em { color: var(--muted); font-style: normal; font-size: 0.85em; }

/* Loot */
.loot-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.loot-bar .btn { padding: 0.5rem 0.9rem; }
#btn-loot:disabled { opacity: 0.5; cursor: default; }

/* Hover info icon + tooltip (monster & item descriptions). */
.info { position: relative; cursor: help; color: var(--muted); font-style: normal; }
.info:hover { color: var(--accent); }
.info:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: 1.5em;
    width: 240px;
    max-width: 60vw;
    padding: 0.5rem 0.65rem;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
    white-space: normal;
    z-index: 30;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Backpack */
.inv-list { display: flex; flex-direction: column; gap: 0.4rem; }
.inv-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: 6px; }
.inv-main { flex: 1; min-width: 0; }
.inv-head { display: block; }
.inv-bonus { color: var(--accent); font-size: 0.8rem; }
.inv-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.btn-sell { background: var(--line); color: var(--text); }
.inv-bonus { color: var(--accent); font-size: 0.8rem; }
.btn-mini { padding: 0.25rem 0.7rem; background: var(--accent); color: #17130a; border: none; border-radius: 5px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }

/* Adventure / combat */
.monster-list { display: flex; flex-direction: column; gap: 0.4rem; }
.monster { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: 6px; }
.monster-info { display: flex; flex-direction: column; min-width: 0; }
.monster [data-fight] { flex-shrink: 0; }
.monster-name em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.monster-stats { color: var(--muted); font-size: 0.78rem; }
/* Monster classification badges */
.badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.badge {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem; border-radius: 4px;
    background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.badge-race { border-color: var(--accent); color: var(--accent); }
.badge-evil { background: rgba(200,90,80,0.18); border-color: transparent; color: #e0857c; }
.badge-good { background: rgba(120,180,90,0.18); border-color: transparent; color: #a7d488; }
.badge-neutral { background: rgba(140,145,160,0.16); border-color: transparent; color: var(--muted); }

.combat-log { margin-top: 0.5rem; max-height: 260px; overflow-y: auto; font-size: 0.82rem; }
.combat-head { padding: 0.4rem 0.6rem; border-radius: 6px; margin-bottom: 0.4rem; font-weight: 600; }
.combat-head.win { background: rgba(120,180,90,0.18); color: #a7d488; }
.combat-head.loss { background: rgba(200,90,80,0.18); color: #e0857c; }
.combat-line { padding: 0.15rem 0.4rem; border-radius: 4px; }
.combat-line.hero { color: var(--text); }
.combat-line.monster { color: var(--muted); }

/* Mercy: the stance toggle, and the window while an enemy is still breathing */
#btn-mercy.active { color: var(--text); border-color: var(--accent); }
.combat-mercy { padding: 0.3rem 0.6rem; margin-bottom: 0.4rem; color: var(--accent); font-style: italic; }
.mercy-bar:not(:empty) {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 0.6rem; padding: 0.4rem 0.6rem;
    background: var(--bg); border-radius: 6px;
    border-left: 3px solid var(--accent);
    font-size: 0.85rem;
}
.mercy-open { color: var(--accent); font-variant-numeric: tabular-nums; }
.mercy-closed { color: var(--muted); }
/* Perceived facts: what the player can currently make out about a subject. */
.facts { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.15rem; }
.fact { font-size: 0.8rem; color: var(--muted); }
.fact-label {
    display: inline-block; margin-right: 0.4rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent); opacity: 0.75;
}
.fact-group .fact-label { display: block; margin-bottom: 0.1rem; }
#journal-list .fact { color: var(--text); padding: 0.2rem 0; }

/* What a prisoner actually said, gaps and all. */
.said { color: var(--text); }
/* Tuition in progress: same bar, study blue instead of mercy gold. */
.training-bar:not(:empty) { border-left-color: #4e77c0; }
.training-open { color: #8fb0e8; font-variant-numeric: tabular-nums; }

/* Exploration */
.location-list { display: flex; flex-direction: column; gap: 0.4rem; }
.location { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: 6px; border-left: 3px solid var(--line); }
.location.loc-dungeon { border-left-color: #8a5bd6; }
.location.loc-site { border-left-color: #5b9bd6; }
.location.cleared { opacity: 0.6; }
.loc-info { display: flex; flex-direction: column; gap: 0.1rem; }
.loc-name em { color: var(--muted); font-style: normal; font-size: 0.78rem; text-transform: capitalize; }
.loc-progress, .loc-next { color: var(--muted); font-size: 0.78rem; }
.loc-reward { color: var(--accent); font-size: 0.75rem; }
.loc-cleared { color: #a7d488; font-size: 0.85rem; font-weight: 600; }
.loc-action { display: flex; align-items: center; gap: 0.5rem; }
.location.current { border-left-color: var(--accent); }
.location.in-progress { border-left-color: var(--accent); background: rgba(201, 162, 75, 0.10); }

/* Exploration sweep progress bar */
.explore-progress { height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0.5rem 0 0.75rem; }
.explore-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
/* Transient search-action bar (distinct blue, thinner). */
.search-progress { height: 6px; margin: 0.25rem 0 0.75rem; }
.search-progress .explore-fill { background: #4e77c0; }
/* Same transient bar for a fight, in blood red rather than search blue. */
.fight-progress .explore-fill { background: #c05a4e; }
/* "Fighting Goblin Scout… Victory!" — sits above the bar while it fills. */
.fight-status { font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.fight-status:empty { min-height: 0; }
.fight-status .verdict { font-weight: 600; }
.fight-status .verdict.win { color: #a7d488; }
.fight-status .verdict.loss { color: #e0857c; }
#explore-result { display: block; }
.find-line { font-size: 0.82rem; color: var(--text); }
.find-line:first-child { margin-top: 0.25rem; }

/* Modal / dialogue window */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.65); padding: 1rem;
}
.modal-card {
    width: 100%; max-width: 480px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; padding: 1.5rem;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.modal-card h2 { margin-top: 0; }
/* The NPC's speech shown as a clearly-set-off note. */
.dialog-text {
    background: var(--bg);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    margin: 0.9rem 0 1rem;
    line-height: 1.6;
    font-size: 1.02rem;
    font-style: italic;
    color: var(--text);
}
.dialog-text p { margin: 0 0 0.7rem; }
.dialog-text p:last-child { margin-bottom: 0; }
.modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.25rem; }