@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700;800&family=Grenze+Gotisch&family=MedievalSharp&family=Pirata+One&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
    /* Backgrounds — dark steel */
    --bg-dark: #121214;
    --bg-surface: #1e1e22;
    --bg-panel: #1e1e22;
    --bg-panel-hover: #2a2a2e;
    --bg-hover: #2a2a2e;

    /* Borders — cool grey */
    --border: #2e2e32;
    --border-light: #3a3a3e;

    /* Text — silver */
    --text: #c0c0c8;
    --text-dim: #808088;
    --text-bright: #e0e0e8;

    /* Accent — gold (pops against steel) */
    --accent: #c4a35a;
    --accent-light: #d4b36a;
    --accent-dark: #8a7030;

    /* Combat */
    --danger: #a83a32;
    --success: #4a8a4a;
    --hp-green: #4a8a4a;
    --hp-red: #a83a32;
    --monster-hp: #8a2d4a;

    /* Item rarity colors */
    --rarity-grey: #666;
    --rarity-white: #ccc;
    --rarity-bronze: #cd7f32;
    --rarity-silver: #c0c0c0;
    --rarity-gold: #daa520;
    --rarity-demonic: #a83a32;
    --rarity-demonic-dark: #6e0c0a;
    --rarity-celestial: #c4ad12;
    --rarity-celestial-light: #f5e187;
    --rarity-epic: #5e2e8c;
    --rarity-green: #4a8b4a;

    /* Typography — 5-font system */
    --font-statement: 'Grenze Gotisch', serif;   /* item names, location headers, monster names, combat callouts */
    --font-celestial: 'MedievalSharp', serif;     /* celestial rarity items only (Deva cosmic) */
    --font-demonic: 'Pirata One', serif;          /* demonic rarity items only (Asura cosmic) */
    --font-body: 'Eczar', serif;                  /* body text, chat, UI labels, descriptions */
    --font-data: 'IBM Plex Mono', monospace;      /* stat numbers, damage, HP, gold, combat log data */
    --font-display: 'Grenze Gotisch', serif;      /* headings */
    --font-weapon: 'Grenze Gotisch', serif;       /* legacy alias */

    /* Design tokens — shadows, radii, timing */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --dur-fast: 0.15s;
    --dur-normal: 0.25s;
    --bg-tooltip: #111114;
    --bg-combat-lock: #200a0a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    height: 100%;
    overflow: hidden;
}
body {
    background: radial-gradient(ellipse at 50% 20%, #18181c 0%, var(--bg-dark) 50%, #0c0c0e 100%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    height: 100%;
    height: 100dvh; /* dynamic viewport height — shrinks when keyboard opens */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text-bright);
    font-weight: 700;
}

.amp { color: var(--rarity-demonic); }

a { color: var(--accent-light); text-decoration: none; }
a:hover { color: var(--rarity-gold); }

.panel {
    background: linear-gradient(180deg, #212125 0%, #1c1c20 100%);
    border: 1px solid var(--border);
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.panel h3 {
    font-size: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.panel h4 {
    font-size: 12px;
    color: var(--text-dim);
    margin: 6px 0 4px;
}

/* Buttons — beveled metal plate feel */
button {
    font-family: var(--font-body);
    cursor: pointer;
    border: 1px solid var(--border-light);
    transition: all 0.15s;
}

.btn-primary {
    background: linear-gradient(180deg, #d4b36a 0%, #a88940 100%);
    color: #1a1410;
    border: 1px solid var(--accent-light);
    border-bottom-color: #7a6020;
    padding: 10px 20px;
    font-size: 14px;
    font-family: var(--font-statement);
    letter-spacing: 0.5px;
    width: 100%;
    min-height: 44px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}
.btn-primary:hover { background: linear-gradient(180deg, #e0c07a 0%, #b89a50 100%); }
.btn-primary:active { background: linear-gradient(180deg, #a88940 0%, #d4b36a 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }

.btn-secondary {
    background: linear-gradient(180deg, #2a2a2e 0%, #1e1e22 100%);
    color: var(--text);
    border: 1px solid var(--border-light);
    border-top-color: #3a3a3e;
    border-bottom-color: #161618;
    padding: 8px 16px;
    font-size: 13px;
    min-height: 44px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.2);
}
.btn-secondary:hover { background: linear-gradient(180deg, #333338 0%, #252528 100%); border-color: var(--accent-dark); }

.btn-small {
    background: var(--bg-panel);
    color: var(--text-dim);
    padding: 8px 10px;
    font-size: 12px;
    min-height: 44px;
    transition: all var(--dur-fast);
}
.btn-small:hover { background: var(--bg-hover); border-color: var(--accent-dark); color: var(--text); }

.btn-action {
    background: var(--bg-panel);
    color: var(--text);
    padding: 10px 14px;
    font-size: 12px;
    margin: 2px;
    min-height: 44px;
}
.btn-action:hover { background: var(--bg-panel-hover); border-color: var(--accent); }

.btn-combat {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    margin: 4px;
    min-height: 44px;
}
.btn-attack { background: #4a1a1a; border-color: var(--rarity-demonic); color: var(--text-bright); }
.btn-attack:hover { background: #5a2a2a; }
.btn-flee { background: #1a1a3a; border-color: #4a4a8a; color: var(--text); }
.btn-flee:hover { background: #2a2a4a; }

/* HP Bars */
.hp-bar {
    position: relative;
    height: 22px;
    background: #08080c;
    border: 1px solid #1a1a1e;
    margin: 4px 0;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    transition: width 0.4s ease-out, background-color 0.4s;
}

.player-hp { background: linear-gradient(180deg, #5a9a5a 0%, #3a7a3a 50%, #2a6a2a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.monster-hp { background: linear-gradient(180deg, #b0405a 0%, #8a2d4a 50%, #6a1d3a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }

.hp-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-family: var(--font-data);
    color: var(--text-bright);
    text-shadow: 1px 1px 2px #000;
}

.hp-bar-mini {
    display: inline-block;
    width: 120px;
    height: 14px;
    background: #0e0e12;
    border: 1px solid var(--border);
    position: relative;
    vertical-align: middle;
}

.hp-bar-mini span {
    font-size: 11px;
    font-family: var(--font-data);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-bright);
}

/* Item rarity classes — color + font per tier */
.item-grey { color: var(--rarity-grey); font-family: var(--font-statement); }
.item-white { color: var(--rarity-white); font-family: var(--font-statement); }
.item-bronze { color: var(--rarity-bronze); font-family: var(--font-statement); }
.item-gold { color: var(--rarity-gold); font-family: var(--font-statement); text-shadow: 0 0 8px rgba(218,165,32,0.35); }
.item-demonic { color: var(--rarity-demonic); text-shadow: 0 0 10px rgba(168,58,50,0.5), 0 0 24px rgba(110,12,10,0.25); font-family: var(--font-demonic); }
.item-celestial { color: var(--rarity-celestial); text-shadow: 0 0 10px rgba(196,173,18,0.5), 0 0 24px rgba(245,225,135,0.2); font-family: var(--font-celestial); }
.item-epic { color: var(--rarity-epic); text-shadow: 0 0 8px var(--rarity-epic); font-family: var(--font-statement); }
.item-green { color: var(--rarity-green); font-family: var(--font-statement); }

/* Error messages */
.error-msg {
    background: #2a0a0a;
    border: 1px solid var(--rarity-demonic-dark);
    border-radius: var(--radius-sm);
    color: var(--rarity-demonic);
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: linear-gradient(180deg, #222226 0%, #1a1a1e 100%);
    border: 1px solid var(--border-light);
    border-top-color: rgba(196,163,90,0.15);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 1px rgba(196,163,90,0.1);
}

.modal-content h2 {
    margin-bottom: 8px;
}

.modal-content p {
    color: var(--text-dim);
    margin-bottom: 12px;
    font-size: 12px;
}

.modal-content input {
    width: 100%;
    margin-bottom: 10px;
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"] {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
}
input:focus { border-color: var(--accent); }
.inline-icon { width: 16px; height: 16px; vertical-align: middle; image-rendering: pixelated; }
.slot-icon { width: 18px; height: 18px; vertical-align: middle; image-rendering: pixelated; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-light); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Stat display */
.stat-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    font-family: var(--font-data);
}
.stat-label {
    color: var(--text-dim);
    width: 36px;
    font-weight: 500;
    font-family: var(--font-body);
}
.stat-val { color: var(--text-bright); margin-right: 4px; font-variant-numeric: tabular-nums; }
.stat-cap { color: var(--text-dim); font-size: 11px; }

/* Touch & iOS fixes */
@media (hover: none) and (pointer: coarse) {
    body {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        user-select: none;
    }
    input, textarea { user-select: text; }
    button:active, .btn-action:active, .btn-weapon:active, .btn-combat:active,
    .btn-swap:active, .ability-btn:active, .inv-tab:active, .item-slot:active,
    .band-member:active, #paths-ul li:active, .btn-small:active,
    .feature-tag:active, .turnin-recipe:active, .lore-entry:active,
    .bestiary-entry:active, .armory-entry:active, .cv-slot.clickable:active {
        opacity: 0.7;
    }
}

/* Focus states — keyboard only */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; }