:root {
    color-scheme: dark;
    --background: #071117;
    --panel: #0c1c25;
    --panel-deep: #08171f;
    --border: #26404b;
    --gold: #e1b84b;
    --text: #edf3ef;
    --muted: #9eb0b3;
    --good: #72d68d;
    --bad: #ef7777;
    --copper: #cb7e43;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(39, 77, 83, 0.24), transparent 42rem),
        var(--background);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
}

button,
input {
    font: inherit;
}

.page-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.panel,
.location-panel,
.event-panel,
.game-card,
.game-header {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: linear-gradient(145deg, rgba(16, 39, 50, 0.96), rgba(8, 23, 31, 0.98));
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.18);
}

.panel {
    width: min(100%, 48rem);
    padding: clamp(1.5rem, 5vw, 3rem);
}

.panel-narrow {
    width: min(100%, 34rem);
}

.game-shell {
    width: min(100%, 78rem);
    margin: 0 auto;
    padding: 1.25rem;
}

.game-header,
.location-panel,
.event-panel,
.game-card {
    padding: 1.25rem;
}

.game-header,
.location-panel,
.event-panel,
.card-heading,
.player-summary,
.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.game-header {
    margin-bottom: 1rem;
}

.game-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

.player-summary {
    text-align: right;
}

.location-panel {
    min-height: 12rem;
    margin-bottom: 1rem;
    background:
        linear-gradient(90deg, rgba(8, 23, 31, 0.98), rgba(8, 23, 31, 0.72)),
        radial-gradient(circle at right, rgba(203, 126, 67, 0.24), transparent 28rem),
        var(--panel);
}

.location-panel h2,
.event-panel h2,
.game-card h2 {
    margin: 0;
    color: var(--text);
}

.action-group {
    display: grid;
    min-width: min(100%, 19rem);
    gap: 0.65rem;
}

.game-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 0.8fr);
    gap: 1rem;
}

.side-column {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.event-panel {
    margin-bottom: 1rem;
    border-color: rgba(225, 184, 75, 0.8);
    background:
        radial-gradient(circle at 75%, rgba(73, 177, 217, 0.18), transparent 18rem),
        linear-gradient(145deg, #173044, #0c1c25);
    animation: event-arrival 500ms ease-out;
}

.event-action {
    display: grid;
    min-width: min(100%, 31rem);
    gap: 0.5rem;
    text-align: center;
}

.event-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.event-choices button {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
}

.event-choices small {
    font-size: 0.7rem;
    font-weight: 400;
}

.coin-display {
    color: var(--gold);
    white-space: nowrap;
}

.order-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--muted);
}

.order-tier-progress {
    margin-top: 0.85rem;
}

.smithy-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1rem 0;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.18);
}

.smithy-item p {
    margin-top: 0.2rem;
}

.pickaxe-mark {
    color: var(--gold);
    font-size: 2rem;
}

#buy-iron-pickaxe {
    margin-top: 1rem;
}

#fulfill-order {
    margin-top: 1rem;
}

.progress-gold {
    background: linear-gradient(90deg, #bd8d24, var(--gold));
}

.skill-progress-fill {
    background: linear-gradient(90deg, #3b9d6c, #72d68d);
}

.next-unlock {
    display: grid;
    gap: 0.2rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.next-unlock strong {
    color: var(--text);
}

.event-action strong {
    color: var(--gold);
    font-size: 1.35rem;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(3.2rem, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.inventory-slot {
    display: grid;
    min-height: 5.25rem;
    place-items: center;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.22);
    color: #526871;
    text-align: center;
}

.inventory-slot.occupied {
    background: radial-gradient(circle, rgba(203, 126, 67, 0.14), rgba(0, 0, 0, 0.28));
    color: var(--text);
}

.inventory-slot small {
    display: block;
    font-size: 0.7rem;
}

.item-icon {
    display: block;
    color: var(--copper);
    font-size: 1.8rem;
    line-height: 1;
}

.item-rough_sapphire {
    color: #65c9ff;
    text-shadow: 0 0 0.7rem rgba(77, 188, 255, 0.7);
}

.progress-track {
    height: 0.55rem;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
}

.progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #a86534, var(--gold));
    transition: width 100ms linear;
}

.bank-items {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.notice {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(114, 214, 141, 0.45);
    border-radius: 0.3rem;
    background: rgba(36, 116, 62, 0.2);
    color: #baf3c9;
}

.notice-error,
.form-error {
    border-color: rgba(239, 119, 119, 0.5);
    background: rgba(135, 39, 39, 0.22);
    color: #ffb5b5;
}

.level-up-banner {
    position: fixed;
    z-index: 20;
    top: 1.25rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: min(24rem, calc(100vw - 2rem));
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--gold);
    border-radius: 0.35rem;
    background: linear-gradient(135deg, rgba(26, 63, 79, 0.98), rgba(7, 25, 32, 0.98));
    box-shadow: 0 0 2rem rgba(232, 179, 52, 0.28);
    color: var(--gold);
    text-align: center;
    transform: translateX(-50%);
}

.level-up-banner.is-celebrating {
    animation: level-up-arrive 600ms ease-out both;
}

.level-up-banner p {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.level-up-banner strong {
    display: block;
    color: var(--text);
    font-size: 1.45rem;
}

.level-up-flare {
    font-size: 1.35rem;
}

@keyframes level-up-arrive {
    from {
        opacity: 0;
        transform: translate(-50%, -1rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .level-up-banner.is-celebrating {
        animation: none;
    }
}

.eyebrow {
    margin: 0 0 0.4rem;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--gold);
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1;
}

.lead,
.muted {
    color: var(--muted);
    line-height: 1.55;
}

.lead {
    margin: 1rem 0 2rem;
    font-size: 1.08rem;
}

.muted {
    margin-bottom: 0;
    font-size: 0.92rem;
}

.login-form {
    display: grid;
    gap: 0.65rem;
}

.login-form label {
    margin-top: 0.6rem;
    color: var(--muted);
    font-weight: 700;
}

.login-form input {
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    outline: none;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
}

.login-form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(225, 184, 75, 0.12);
}

.form-error {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.25rem;
}

button {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #84681e;
    border-radius: 0.25rem;
    background: #c79828;
    color: #11150f;
    cursor: pointer;
    font-weight: 700;
}

button:hover {
    background: var(--gold);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.button-secondary {
    width: auto;
    border-color: var(--border);
    background: transparent;
    color: var(--muted);
    white-space: nowrap;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

pre {
    min-height: 4.5rem;
    margin: 1rem 0 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--muted);
    white-space: pre-wrap;
}

a {
    color: var(--gold);
}

@keyframes event-arrival {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

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

    .inventory-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .event-choices {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .game-header,
    .location-panel,
    .event-panel,
    .card-heading,
    .player-summary {
        align-items: stretch;
        display: grid;
    }

    .player-summary {
        text-align: left;
    }

    .button-secondary {
        width: 100%;
    }

    .game-shell {
        padding: 0.65rem;
    }

    .inventory-slot {
        min-height: 4.5rem;
    }
}

.card-divider { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 1rem 0; }

.smelt-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:1rem; }
.smelt-x { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.5rem; margin-top:.5rem; }
.smelt-x input, .smelt-x select { min-width:0; padding:.65rem; border:1px solid var(--border); border-radius:.25rem; background:var(--panel-deep); color:var(--text); }
#stop-smelting { margin-top:.5rem; width:100%; }
@media (max-width: 600px) { .smelt-actions { grid-template-columns:repeat(2,1fr); } .smelt-x { grid-template-columns:1fr; } }


/* Slice 8.3: persistent top activity HUD */
.activity-hud { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.25rem; align-items:center; padding:1rem 1.5rem; border:1px solid var(--border); border-radius:.5rem; background:var(--panel); }
.activity-hud-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.activity-hud-title-row h2 { margin:.15rem 0 .65rem; }
.activity-hud-track { height:.7rem; }
.activity-timer { color:var(--gold); font-size:1.15rem; font-variant-numeric:tabular-nums; min-width:4.5rem; text-align:right; }
.activity-hud .muted { margin:.55rem 0 0; }
.activity-effect { margin:.55rem 0 0; color:var(--gold); font-weight:700; letter-spacing:.02em; }
.activity-stop { min-width:10rem; }
@media (max-width:600px) { .activity-hud { grid-template-columns:1fr; padding:1rem; } .activity-stop { width:100%; } }


/* Early progression prototype */
.progression-block { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.progression-heading { display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; margin-bottom:.55rem; }
.progression-heading span { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.progression-heading strong { color:var(--gold); font-size:.82rem; text-align:right; }
.progression-list { display:grid; gap:.35rem; max-height:15rem; overflow:auto; padding-right:.2rem; }
.progression-row { display:grid; grid-template-columns:3.2rem 1fr auto; gap:.55rem; align-items:center; padding:.45rem .55rem; border:1px solid var(--border); border-radius:.45rem; background:rgba(255,255,255,.02); }
.progression-row strong { color:var(--gold); }
.progression-row span { color:var(--text); }
.progression-row small { color:var(--muted); text-align:right; }
.progression-row.is-unlocked { opacity:.72; }
.progression-row.is-planned span::after { content:' ◇'; color:var(--muted); }

#forge-recipe { width:100%; margin:.55rem 0; padding:.65rem; border:1px solid var(--border); border-radius:.25rem; background:var(--panel-deep); color:var(--text); }
#forge-recipe-detail { margin:.5rem 0 .75rem; }


/* Slice 10.3: temporary development reset control */
.button-danger { width:100%; border-color:rgba(220,90,80,.65); background:rgba(120,35,30,.55); }
.button-danger:hover { background:rgba(145,42,35,.7); }
.dev-reset-card .muted { margin-bottom:.85rem; }