/* ==============================
   SPOOKS SIDE QUESTS
   Base Game Styling
   ============================== */

:root {
    color-scheme: dark;
    --cream: #19151f;
    --lavender: #30273a;
    --sage: #8fa784;
    --moss: #65745d;
    --brown: #eee7f1;
    --peach: #c99583;
    --white: #241d2b;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;

    font-family: Arial, sans-serif;
    color: var(--brown);

    background: linear-gradient(
        to bottom,
        var(--lavender),
        var(--cream)
    );
}



/* ==============================
   MAIN GAME LAYOUT
   ============================== */

.game-shell {
    display: grid;
    grid-template-rows: auto 1fr;

    height: 100vh;
}

.game-header {
    display: grid;
    grid-template-columns:
        minmax(180px, auto)
        minmax(220px, 1fr)
        minmax(180px, auto);
    align-items: center;

    min-height: 50px;

    gap: 12px;
    padding: 5px 12px;

    background: var(--cream);
    border-bottom: 1px solid var(--lavender);
}

.game-brand {
    display: flex;
    align-items: center;

    gap: 9px;
}

.game-logo {
    width: 40px;
    height: 40px;

    object-fit: contain;
}

.game-brand h1 {
    margin: 0;

    font-size: 1.2rem;
    line-height: 1;
}

.game-main {
    display: grid;
    grid-template-areas:
        "inventory map activity";
    grid-template-columns:
        245px
        minmax(0, 1fr)
        330px;

    min-height: 0;

    gap: 10px;
    padding: 10px;
}



/* ==============================
   INVENTORY SIDEBAR
   ============================== */

.inventory-sidebar {
    grid-area: inventory;

    min-width: 0;
    min-height: 0;

    padding: 9px;

    overflow-y: auto;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 18px;

    background: rgba(25, 21, 31, 0.96);
}

.sidebar-section + .sidebar-section {
    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid rgba(159, 139, 180, 0.18);
}

.sidebar-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 7px;
}

.sidebar-heading h2 {
    margin: 0;

    font-size: 0.92rem;
}

.panel-label {
    margin: 0 0 2px;

    font-size: 0.62rem;
    font-weight: bold;

    text-transform: uppercase;

    opacity: 0.55;
}

.inventory-capacity {
    margin: 2px 0 0;
    padding: 3px 6px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.16);

    font-size: 0.62rem;
    font-weight: bold;
}



/* ==============================
   INVENTORY GRID
   ============================== */

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

    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.inventory-slot {
    position: relative;

    min-width: 0;

    aspect-ratio: 1;

    overflow: hidden;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.1);
}

.inventory-slot.empty {
    opacity: 0.45;
}

.inventory-slot.equippable {
    cursor: pointer;
}

.inventory-slot.equippable:hover {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.14);
}

.inventory-item-image {
    display: block;

    width: 100%;
    height: 100%;

    padding: 3px;

    object-fit: contain;
}

.inventory-item-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    font-size: 1rem;

    opacity: 0.65;
}

.inventory-item-amount {
    position: absolute;
    right: 3px;
    bottom: 2px;

    padding: 1px 3px;

    border-radius: 5px;

    background: rgba(25, 21, 31, 0.9);

    font-size: 0.56rem;
    font-weight: bold;
}



/* ==============================
   COMBAT LOADOUT
   ============================== */

.loadout-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 4px;
}

.loadout-tab {
    padding: 5px 4px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 7px;

    background: rgba(159, 139, 180, 0.08);
    color: var(--brown);

    font: inherit;
    font-size: 0.6rem;
    font-weight: bold;

    text-align: center;

    cursor: pointer;
}

.loadout-tab:hover {
    border-color: rgba(201, 149, 131, 0.55);

    background: rgba(201, 149, 131, 0.1);
}

.loadout-tab.active {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.16);
}

.loadout-panels {
    grid-column: 1 / -1;

    margin-top: 4px;
}

.equipment-loadout {
    display: none;
    grid-template-areas:
        ". head ."
        "weapon chest ring"
        "amulet legs ."
        ". gloves ."
        ". boots .";
    grid-template-columns: repeat(3, 1fr);

    gap: 4px;
}

.equipment-loadout:not([hidden]) {
    display: grid;
}

.equipment-slot,
.tool-slot {
    display: grid;
    place-items: center;

    min-width: 0;

    padding: 3px;

    aspect-ratio: 1;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);
    color: var(--brown);

    cursor: pointer;
}

.equipment-slot:hover,
.tool-slot:hover {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.12);
}

.equipment-slot-label {
    overflow: hidden;

    font-size: 0.52rem;
    font-weight: bold;

    text-align: center;
    text-overflow: ellipsis;
}

.equipment-slot.filled,
.tool-slot.filled {
    border-color: rgba(201, 149, 131, 0.48);

    background: rgba(201, 149, 131, 0.1);
}

.equipment-item-image {
    display: block;

    width: 100%;
    height: 100%;

    padding: 3px;

    object-fit: contain;
}

.equipment-item-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    font-size: 1rem;

    opacity: 0.8;
}

.head-slot {
    grid-area: head;
}

.chest-slot {
    grid-area: chest;
}

.legs-slot {
    grid-area: legs;
}

.gloves-slot {
    grid-area: gloves;
}

.boots-slot {
    grid-area: boots;
}

.weapon-slot {
    grid-area: weapon;
}

.ring-slot {
    grid-area: ring;
}

.amulet-slot {
    grid-area: amulet;
}



/* ==============================
   TOOL GRID
   ============================== */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;
}



/* ==============================
   WORLD MAP
   ============================== */

.map-panel {
    position: relative;

    grid-area: map;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}

.map-viewport {
    position: relative;

    width: auto;
    max-width: 100%;
    height: 100%;

    overflow: hidden;

    aspect-ratio: 3 / 2;
    border-radius: 20px;

    background: var(--lavender);

    cursor: default;
    touch-action: none;
    overscroll-behavior: contain;

    user-select: none;
    -webkit-user-select: none;
}

.map-viewport.can-pan {
    cursor: grab;
}

.map-viewport.dragging {
    cursor: grabbing;
}

.map-canvas {
    position: absolute;
    top: 0;
    left: 0;

    width: 1400px;

    aspect-ratio: 3 / 2;
    transform-origin: top left;

    will-change: transform;
}

.world-map-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}

.map-markers {
    position: absolute;
    inset: 0;

    pointer-events: none;
}



/* ==============================
   MAP MARKERS
   ============================== */

.map-marker {
    position: absolute;

    min-width: 120px;

    padding: 9px 12px;

    border: 2px solid rgba(210, 194, 220, 0.28);
    border-radius: 14px;

    background: rgba(31, 25, 38, 0.9);
    color: var(--brown);

    font-weight: bold;

    cursor: pointer;
    pointer-events: auto;

    backdrop-filter: blur(4px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);

    transform: translate(-50%, -50%);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.map-marker:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.map-marker.selected {
    border-color: var(--peach);

    transform: translate(-50%, -50%) scale(1.08);
}

.map-marker.coming-soon {
    opacity: 0.72;
}

.map-marker-icon {
    display: block;

    margin-bottom: 3px;

    font-size: 1.25rem;
}

.map-marker.locked {
    opacity: 0.58;

    border-color: rgba(159, 139, 180, 0.45);
    background: rgba(37, 30, 45, 0.82);

    filter: saturate(0.6);
}

.map-marker.locked:hover {
    opacity: 0.78;
}



/* ==============================
   BUILDING HOTSPOTS
   ============================== */

.map-marker.building-hotspot {
    min-width: 0;

    padding: 0;

    border: 2px solid transparent;
    border-radius: 16px;

    background: transparent;
    color: transparent;

    opacity: 1;

    box-shadow: none;
    filter: none;

    /* Prevent the normal map-marker blur over building artwork. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.map-marker.building-hotspot span {
    position: absolute;
    bottom: -8px;
    left: 50%;

    width: max-content;
    max-width: 150px;

    padding: 5px 8px;

    border-radius: 8px;

    background: rgba(31, 25, 38, 0.96);
    color: var(--brown);

    font-size: 0.72rem;
    font-weight: bold;

    opacity: 0;

    pointer-events: none;

    transform: translate(-50%, 100%);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.map-marker.building-hotspot:focus-visible {
    outline: none;

    border-color: var(--peach);
    background: rgba(201, 149, 131, 0.12);
}

.map-marker.building-hotspot:focus-visible span {
    opacity: 1;
}



/* ==============================
   MAP NAVIGATION
   ============================== */

.map-back-button {
    position: absolute;
    top: 18px;
    left: 18px;

    z-index: 20;

    padding: 10px 16px;

    border: 2px solid rgba(210, 194, 220, 0.28);
    border-radius: 14px;

    background: rgba(31, 25, 38, 0.92);
    color: var(--brown);

    font-weight: bold;

    cursor: pointer;

    backdrop-filter: blur(5px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.map-back-button:hover {
    background: var(--peach);
}

.map-zoom-controls {
    position: absolute;
    right: 18px;
    bottom: 18px;

    z-index: 20;

    display: flex;

    gap: 5px;
}

.map-zoom-button {
    width: 38px;
    height: 38px;

    padding: 0;

    border: 2px solid rgba(210, 194, 220, 0.28);
    border-radius: 11px;

    background: rgba(31, 25, 38, 0.92);
    color: var(--brown);

    font-size: 1.15rem;
    font-weight: bold;

    cursor: pointer;

    backdrop-filter: blur(5px);

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

.map-zoom-button:hover:not(:disabled) {
    background: var(--peach);
}

.map-zoom-button:disabled {
    opacity: 0.45;

    cursor: default;
}



/* ==============================
   ACTIVITY PANEL
   ============================== */

.activity-panel {
    grid-area: activity;

    min-width: 0;
    min-height: 0;

    padding: 10px;

    overflow-y: auto;

    border-radius: 18px;

    background: rgba(25, 21, 31, 0.96);
}

.region-heading {
    margin-bottom: 8px;
    padding: 4px 4px 8px;
}

.region-label {
    margin: 3px 0 4px;

    font-size: 0.8rem;
    font-weight: bold;

    text-transform: uppercase;

    opacity: 0.65;
}

.region-heading h2 {
    margin: 0 0 8px;

    font-size: 1.2rem;
}

.region-heading p {
    margin-top: 3px;

    font-size: 0.78rem;
}

.future-region-content {
    padding: 25px;

    border: 2px dashed var(--lavender);
    border-radius: 18px;

    text-align: center;
}

.skill-panel,
.location-card,
.collection-panel {
    margin-bottom: 7px;

    border: 1px solid rgba(159, 139, 180, 0.3);
    border-radius: 11px;

    background: rgba(38, 31, 46, 0.9);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}



/* ==============================
   FISHING PANEL
   ============================== */

.skill-panel {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
    padding: 8px 10px;
}

.skill-panel h2 {
    margin: 0 auto 0 0;

    font-size: 0.9rem;
}

.skill-panel p {
    margin: 0;
    padding: 4px 7px;

    border-radius: 7px;

    background: rgba(159, 139, 180, 0.18);

    font-size: 0.68rem;
}

.location-card {
    padding: 12px;

    text-align: left;
}

.location-card h2 {
    margin: 0 0 3px;

    font-size: 1.08rem;
}

#selected-location-description {
    margin: 0 0 8px;

    font-size: 0.72rem;
    line-height: 1.4;

    opacity: 0.75;
}

.location-card p:not(#selected-location-description):not(#fishing-status) {
    display: inline-block;

    margin: 2px 4px 2px 0;
    padding: 4px 6px;

    border-radius: 7px;

    background: rgba(159, 139, 180, 0.18);

    font-size: 0.66rem;
}

.fishing-controls {
    display: flex;

    gap: 6px;

    margin-top: 9px;
}

.fishing-button {
    flex: 1;

    padding: 8px 10px;

    border: none;
    border-radius: 9px;

    background: var(--sage);
    color: var(--brown);

    font-size: 0.75rem;
    font-weight: bold;

    cursor: pointer;
}

#start-fishing-button {
    flex: 1.35;
}

#stop-fishing-button {
    background: rgba(72, 60, 84, 0.9);
}

.fishing-button:hover:not(:disabled) {
    background: var(--peach);
}

.fishing-button:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}

.fishing-progress-track {
    width: 100%;
    height: 7px;

    margin: 9px 0 5px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--lavender);
}

.fishing-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        to right,
        var(--sage),
        var(--peach)
    );
}

#fishing-status {
    min-height: 16px;

    margin: 4px 0 0;

    font-size: 0.68rem;
    font-style: italic;

    opacity: 0.7;
}



/* ==============================
   FISH COLLECTION
   ============================== */

.collection-panel {
    padding: 9px;
}

.collection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;
}

.collection-heading h2 {
    margin: 0;

    font-size: 0.9rem;
}

.collection-heading p {
    margin: 0;
    padding: 3px 6px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.2);

    font-size: 0.7rem;

    opacity: 0.7;
}

.fish-collection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px;
}

.collection-item {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 1px;
    padding: 6px 7px;

    border: 1px solid var(--sage);
    border-radius: 8px;

    background: rgba(42, 34, 50, 0.92);
}

.collection-name {
    display: block;

    overflow: hidden;

    font-size: 0.72rem;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-rarity {
    display: block;

    margin-top: 1px;

    font-size: 0.62rem;

    text-transform: capitalize;

    opacity: 0.7;
}

.collection-item.undiscovered {
    opacity: 0.55;

    border-color: var(--lavender);
}

.collection-item.rarity-common {
    border-color: var(--sage);
}

.collection-item.rarity-uncommon {
    border-color: var(--peach);
}



/* ==============================
   RECIPE DISCOVERY CARDS
   ============================== */

.recipe-discovery-panel {
    margin-top: 8px;
    padding: 9px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 12px;

    background: rgba(25, 21, 31, 0.52);
}

.recipe-discovery-hint {
    margin: -1px 0 7px;

    font-size: 0.62rem;
    font-style: italic;

    opacity: 0.58;
}

.recipe-discovery-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px;
}

.recipe-discovery-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 1px;
    padding: 6px 7px;

    border: 1px solid var(--lavender);
    border-radius: 8px;

    background: rgba(42, 34, 50, 0.92);
}

.recipe-card-name {
    overflow: hidden;

    font-size: 0.7rem;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-card-status {
    font-size: 0.6rem;

    opacity: 0.68;
}

.recipe-card-undiscovered {
    opacity: 0.58;
}

.recipe-card-discovered,
.recipe-card-waiting {
    border-color: var(--peach);
}

.recipe-card-unlocked {
    border-color: var(--sage);

    background: rgba(101, 116, 93, 0.16);
}

.recipe-card-locked {
    opacity: 0.38;
}



/* ==============================
   RECIPE DISCOVERY NOTIFICATION
   ============================== */

.recipe-discovery-notification {
    position: fixed;
    top: 82px;
    left: 50%;

    z-index: 20;

    max-width: min(420px, calc(100vw - 30px));

    padding: 12px 18px;

    border: 2px solid var(--lavender);
    border-radius: 16px;

    background: var(--cream);
    color: var(--brown);

    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;

    opacity: 0;
    pointer-events: none;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);

    transform: translate(-50%, -16px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.recipe-discovery-notification.show {
    opacity: 1;

    transform: translate(-50%, 0);
}



/* ==============================
   LEVEL UP NOTIFICATION
   ============================== */

.level-up-notification {
    position: fixed;
    top: 25px;
    left: 50%;

    padding: 16px 24px;

    border: 2px solid var(--peach);
    border-radius: 18px;

    background: var(--cream);
    color: var(--brown);

    font-size: 1.2rem;
    font-weight: bold;

    opacity: 0;
    pointer-events: none;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);

    transform: translate(-50%, -20px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.level-up-notification.show {
    opacity: 1;

    transform: translate(-50%, 0);
}



/* ==============================
   MOBILE
   ============================== */

@media (max-width: 600px) {
    body {
        overflow: auto;
    }

    .game-shell {
        height: auto;
        min-height: 100vh;
    }

    .game-header {
        min-height: 44px;

        padding: 4px 8px;
    }

    .game-brand {
        gap: 7px;
    }

    .game-logo {
        width: 34px;
        height: 34px;
    }

    .game-brand h1 {
        font-size: 1rem;
    }

    .game-main {
        grid-template-areas:
            "map"
            "activity"
            "inventory";
        grid-template-columns: 1fr;

        gap: 8px;
        padding: 8px;
    }

    .map-panel {
        width: 100%;
        height: auto;

        aspect-ratio: 3 / 2;
    }

    .map-viewport {
        width: 100%;
        height: 100%;

        aspect-ratio: 3 / 2;
    }

    .activity-panel,
    .inventory-sidebar {
        min-width: 0;
        min-height: 0;

        padding: 9px;
    }

    .collection-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .fish-collection,
    .recipe-discovery-list {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   POINTER HOVER STATES
   ============================== */

@media (hover: hover) and (pointer: fine) {
    .map-marker.building-hotspot:hover {
        border-color: rgba(239, 201, 183, 0.75);

        background: transparent;
    }

    .map-marker.building-hotspot:hover span {
        opacity: 1;

        transform: translate(-50%, 90%);
    }
}


/* ==============================
   HEADER ACTIONS
   ============================== */

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}

.header-action-button {
    display: flex;
    align-items: center;

    gap: 6px;
    padding: 6px 9px;

    border: 1px solid rgba(159, 139, 180, 0.3);
    border-radius: 9px;

    background: rgba(159, 139, 180, 0.12);
    color: var(--brown);

    font-size: 0.68rem;
    font-weight: bold;

    cursor: pointer;
}

.header-action-button:hover {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.14);
}

.header-badge {
    min-width: 18px;

    padding: 2px 5px;

    border-radius: 999px;

    background: var(--peach);
    color: var(--cream);

    font-size: 0.56rem;
    text-align: center;
}



/* ==============================
   QUEST TRACKER
   ============================== */

.quest-tracker-list {
    display: grid;

    gap: 7px;
}

.quest-tracker-empty {
    margin: 0;
    padding: 8px;

    border: 1px dashed rgba(159, 139, 180, 0.24);
    border-radius: 9px;

    font-size: 0.64rem;
    text-align: center;

    opacity: 0.58;
}

.quest-tracker-card {
    padding: 8px;

    border: 1px solid rgba(201, 149, 131, 0.38);
    border-radius: 10px;

    background: rgba(42, 34, 50, 0.86);
}

.quest-tracker-title {
    margin: 0;

    font-size: 0.72rem;
    line-height: 1.25;
}

.quest-tracker-reward {
    margin: 3px 0 0;

    font-size: 0.59rem;
    font-weight: bold;

    color: var(--sage);
}

.quest-bound-source {
    margin: 5px 0 0;
    padding: 4px 5px;

    border-radius: 6px;

    background: rgba(159, 139, 180, 0.12);

    font-size: 0.58rem;
}

.quest-objectives {
    display: grid;

    gap: 6px;
    margin-top: 7px;
}

.quest-objective-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 6px;
}

.quest-objective-label {
    min-width: 0;

    font-size: 0.58rem;
}

.quest-objective-progress {
    flex: 0 0 auto;

    font-size: 0.56rem;
    font-weight: bold;

    opacity: 0.78;
}

.quest-progress-track {
    height: 5px;
    margin-top: 3px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.16);
}

.quest-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--sage);

    transition: width 0.25s ease;
}

.quest-skill-gate {
    margin-top: 7px;
    padding: 4px 5px;

    border-radius: 6px;

    font-size: 0.58rem;
    font-weight: bold;
}

.quest-skill-gate.complete {
    background: rgba(101, 116, 93, 0.18);
    color: var(--sage);
}

.quest-skill-gate.blocked {
    background: rgba(201, 149, 131, 0.13);
    color: var(--peach);
}

.quest-waiting-message {
    margin: 5px 0 0;

    font-size: 0.56rem;
    font-style: italic;

    opacity: 0.72;
}



/* ==============================
   RECIPE BOOK
   ============================== */

.recipe-book-modal {
    position: fixed;
    inset: 0;

    z-index: 40;

    display: grid;
    place-items: center;

    padding: 18px;
}

.recipe-book-modal[hidden] {
    display: none;
}

.recipe-book-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: rgba(8, 6, 10, 0.78);

    cursor: default;
}

.recipe-book-window {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);

    width: min(980px, 96vw);
    max-height: min(820px, 92vh);

    overflow: hidden;

    border: 1px solid rgba(159, 139, 180, 0.46);
    border-radius: 20px;

    background: #17121c;

    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
}

.recipe-book-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding: 15px 16px 11px;

    border-bottom: 1px solid rgba(159, 139, 180, 0.2);
}

.recipe-book-header h2 {
    margin: 0;

    font-size: 1.15rem;
}

.recipe-book-summary {
    margin: 4px 0 0;

    font-size: 0.66rem;

    opacity: 0.64;
}

.recipe-book-close {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    padding: 0;

    border: 1px solid rgba(159, 139, 180, 0.3);
    border-radius: 9px;

    background: rgba(159, 139, 180, 0.1);
    color: var(--brown);

    font-size: 1.1rem;

    cursor: pointer;
}

.recipe-book-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    gap: 8px;
    padding: 9px 12px;
}

.recipe-book-search input,
.recipe-book-filter select {
    width: 100%;

    padding: 7px 8px;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 8px;

    background: rgba(42, 34, 50, 0.9);
    color: var(--brown);

    font: inherit;
    font-size: 0.66rem;
}

.recipe-book-filter {
    display: grid;
    grid-template-columns: auto 130px;
    align-items: center;

    gap: 6px;

    font-size: 0.62rem;
}

.recipe-book-sections {
    display: flex;

    gap: 5px;
    padding: 0 12px 9px;

    overflow-x: auto;
}

.recipe-book-section-button {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 5px;
    padding: 6px 7px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);
    color: var(--brown);

    font-size: 0.59rem;

    cursor: pointer;
}

.recipe-book-section-button.active {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.14);
}

.recipe-book-section-name {
    font-weight: bold;
}

.recipe-book-section-count {
    opacity: 0.58;
}

.recipe-book-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;

    gap: 8px;
    padding: 0 12px 14px;

    overflow-y: auto;
}

.recipe-book-card {
    min-width: 0;

    padding: 10px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 11px;

    background: rgba(42, 34, 50, 0.82);
}

.recipe-book-card-top {
    display: grid;

    gap: 3px;
}

.recipe-book-card-name {
    margin: 0;

    font-size: 0.75rem;
    line-height: 1.2;
}

.recipe-book-card-status {
    width: fit-content;

    padding: 2px 5px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.13);

    font-size: 0.54rem;
}

.recipe-book-card-undiscovered {
    min-height: 92px;

    opacity: 0.5;

    border-style: dashed;
}

.recipe-book-card-discovered {
    border-color: rgba(201, 149, 131, 0.48);
}

.recipe-book-card-unlocked {
    border-color: rgba(143, 167, 132, 0.52);

    background: rgba(101, 116, 93, 0.12);
}

.recipe-book-meta-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);

    gap: 6px;
    margin-top: 6px;
}

.recipe-book-meta-label {
    font-size: 0.55rem;
    font-weight: bold;

    opacity: 0.52;
}

.recipe-book-meta-value {
    min-width: 0;

    font-size: 0.57rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.recipe-book-card-hint {
    margin: 7px 0 0;

    font-size: 0.57rem;
    font-style: italic;

    opacity: 0.55;
}

.recipe-book-empty {
    grid-column: 1 / -1;

    margin: 24px 0;

    text-align: center;

    opacity: 0.58;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}



@media (max-width: 800px) {
    .recipe-book-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



@media (max-width: 600px) {
    .header-action-text {
        display: none;
    }

    .header-action-icon {
        font-size: 0.9rem;
    }

    .recipe-book-modal {
        padding: 8px;
    }

    .recipe-book-window {
        width: 100%;
        max-height: 94vh;
    }

    .recipe-book-controls {
        grid-template-columns: 1fr;
    }

    .recipe-book-filter {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .recipe-book-grid {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   ACTION RESULT NOTIFICATIONS
   ============================== */

.action-notification-container {
    position: absolute;
    top: 12px;
    left: 50%;

    z-index: 60;

    display: grid;

    width: min(270px, calc(100% - 24px));

    gap: 7px;

    pointer-events: none;

    transform: translateX(-50%);
}

.action-notification {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;

    gap: 9px;
    padding: 9px 11px;

    border: 1px solid rgba(159, 139, 180, 0.38);
    border-radius: 11px;

    background: rgba(25, 19, 30, 0.96);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);

    opacity: 0;

    transform: translateX(18px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.action-notification.show {
    opacity: 1;

    transform: translateX(0);
}

.action-notification-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: rgba(159, 139, 180, 0.13);

    font-size: 1.05rem;
}

.action-notification-text {
    display: grid;

    gap: 2px;
}

.action-notification-text strong {
    font-size: 0.68rem;
}

.action-notification-text span {
    font-size: 0.61rem;

    color: var(--sage);
}

.action-notification-text small {
    font-size: 0.55rem;

    color: var(--peach);
}

.action-rarity-uncommon {
    border-color: rgba(143, 167, 132, 0.58);
}

.action-rarity-rare {
    border-color: rgba(159, 139, 180, 0.72);
}



/* ==============================
   COOKING
   ============================== */

.cooking-recipe-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
    margin-top: 9px;
}

.cooking-recipe-card {
    display: grid;

    gap: 3px;
    padding: 8px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 9px;

    background: rgba(42, 34, 50, 0.76);
    color: var(--brown);

    text-align: left;

    cursor: pointer;
}

.cooking-recipe-card:hover,
.cooking-recipe-card.selected {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.12);
}

.cooking-recipe-card:disabled {
    cursor: default;

    opacity: 0.7;
}

.cooking-recipe-card strong {
    font-size: 0.65rem;
}

.cooking-recipe-card span,
.cooking-recipe-card small {
    font-size: 0.56rem;

    opacity: 0.7;
}

.cooking-detail-card {
    margin-top: 9px;
}

.cooking-detail-label {
    margin-bottom: 5px;

    font-size: 0.6rem;
    font-weight: bold;

    opacity: 0.72;
}

.cooking-ingredients {
    display: grid;

    gap: 4px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.cooking-ingredient {
    display: flex;
    justify-content: space-between;

    gap: 8px;
    padding: 5px 6px;

    border-radius: 7px;

    background: rgba(159, 139, 180, 0.08);

    font-size: 0.59rem;
}

.cooking-ingredient.missing {
    color: var(--peach);
}

.cooking-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 6px;
    margin-top: 8px;
}

.cooking-meta-grid p {
    margin: 0;
    padding: 6px;

    border-radius: 7px;

    background: rgba(159, 139, 180, 0.08);

    font-size: 0.56rem;
}

.cooking-empty-message {
    grid-column: 1 / -1;

    margin: 0;
    padding: 10px;

    border: 1px dashed rgba(159, 139, 180, 0.24);
    border-radius: 9px;

    font-size: 0.62rem;
    text-align: center;

    opacity: 0.62;
}



@media (max-width: 600px) {
    .action-notification-container {
        top: 8px;

        width: calc(100% - 16px);
    }

    .cooking-recipe-list {
        grid-template-columns: 1fr;
    }

    .cooking-meta-grid {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   GATHERING
   ============================== */

.gathering-resource {
    display: flex;
    align-items: center;

    gap: 9px;
    margin-top: 9px;
    padding: 8px;

    border: 1px solid rgba(159, 139, 180, 0.2);
    border-radius: 9px;

    background: rgba(159, 139, 180, 0.07);
}

.gathering-resource img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}

.gathering-resource strong {
    font-size: 0.68rem;
}



/* ==============================
   SETTINGS / SAVE MANAGER
   ============================== */

.settings-modal {
    position: fixed;
    inset: 0;

    z-index: 45;

    display: grid;
    place-items: center;

    padding: 18px;
}

.settings-modal[hidden] {
    display: none;
}

.settings-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: rgba(8, 6, 10, 0.78);

    cursor: default;
}

.settings-window {
    position: relative;

    z-index: 1;

    width: min(520px, 96vw);
    max-height: 90vh;

    overflow-y: auto;

    border: 1px solid rgba(159, 139, 180, 0.46);
    border-radius: 18px;

    background: #17121c;

    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
}

.settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding: 14px 15px 10px;

    border-bottom: 1px solid rgba(159, 139, 180, 0.2);
}

.settings-header h2 {
    margin: 0;

    font-size: 1rem;
}

.settings-content {
    display: grid;

    gap: 9px;
    padding: 11px;
}

.settings-card {
    padding: 11px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 11px;

    background: rgba(42, 34, 50, 0.72);
}

.settings-card h3 {
    margin: 2px 0 6px;

    font-size: 0.76rem;
}

.settings-card p {
    margin: 4px 0;

    font-size: 0.62rem;
    line-height: 1.45;
}

.settings-save-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
    margin-top: 9px;
}

.settings-status {
    margin-top: 8px !important;

    color: var(--sage);
}



@media (max-width: 600px) {
    .settings-modal {
        padding: 8px;
    }

    .settings-window {
        width: 100%;
    }

    .settings-save-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}



/* ==============================
   FIRST-TIME ONBOARDING
   ============================== */

.onboarding-modal {
    position: fixed;
    inset: 0;

    z-index: 70;

    display: grid;
    place-items: center;

    padding: 18px;
}

.onboarding-modal[hidden] {
    display: none;
}

.onboarding-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 6, 10, 0.86);
}

.onboarding-window {
    position: relative;

    z-index: 1;

    width: min(520px, 96vw);

    padding: 16px;

    border: 1px solid rgba(159, 139, 180, 0.48);
    border-radius: 18px;

    background: #17121c;

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.5);
}

.onboarding-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.onboarding-step-label {
    font-size: 0.58rem;
    font-weight: bold;

    opacity: 0.58;
}

.onboarding-dots {
    display: flex;

    gap: 5px;
}

.onboarding-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.18);
}

.onboarding-dot.complete {
    background: rgba(143, 167, 132, 0.42);
}

.onboarding-dot.active {
    background: var(--peach);
}

.onboarding-icon {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    margin: 15px auto 10px;

    border: 1px solid rgba(159, 139, 180, 0.26);
    border-radius: 16px;

    background: rgba(159, 139, 180, 0.1);

    font-size: 1.65rem;
}

.onboarding-eyebrow {
    text-align: center;
}

.onboarding-window h2 {
    margin: 3px 0 8px;

    font-size: 1rem;
    text-align: center;
}

.onboarding-body {
    margin: 0;

    font-size: 0.68rem;
    line-height: 1.55;
    text-align: center;
}

.onboarding-tip {
    margin: 11px 0 0;
    padding: 8px 9px;

    border: 1px solid rgba(201, 149, 131, 0.22);
    border-radius: 9px;

    background: rgba(201, 149, 131, 0.08);

    font-size: 0.6rem;
    line-height: 1.45;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 9px;
    margin-top: 14px;
}

.onboarding-nav-actions {
    display: flex;

    gap: 7px;
}

.onboarding-skip {
    padding: 6px 3px;

    border: 0;

    background: transparent;
    color: var(--brown);

    font: inherit;
    font-size: 0.58rem;

    cursor: pointer;

    opacity: 0.56;
}

.onboarding-skip:hover {
    opacity: 1;
}

.settings-guide-button {
    margin-top: 8px;
    padding: 6px 8px;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);
    color: var(--brown);

    font: inherit;
    font-size: 0.61rem;
    font-weight: bold;

    cursor: pointer;
}

.settings-guide-button:hover {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.1);
}



@media (max-width: 600px) {
    .onboarding-modal {
        padding: 8px;
    }

    .onboarding-window {
        width: 100%;
    }

    .onboarding-actions {
        display: grid;

        gap: 7px;
    }

    .onboarding-nav-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .onboarding-skip {
        order: 2;
    }
}



/* ==============================
   HEADER ACTIVITY BAR
   ============================== */

.header-action-bar {
    display: grid;
    grid-template-columns:
        30px minmax(0, 1fr) auto;
    align-items: center;

    width: min(360px, 100%);
    min-width: 0;

    justify-self: center;

    gap: 7px;
    padding: 5px 8px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 9px;

    background: rgba(159, 139, 180, 0.07);
}

.header-action-bar.active {
    border-color: rgba(201, 149, 131, 0.42);

    background: rgba(201, 149, 131, 0.09);
}

.header-action-status-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: rgba(159, 139, 180, 0.1);

    font-size: 0.9rem;
}

.header-action-status {
    min-width: 0;
}

.header-action-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    min-width: 0;

    gap: 8px;
}

.header-action-copy strong {
    min-width: 0;

    overflow: hidden;

    font-size: 0.63rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-action-copy span {
    flex: 0 0 auto;

    font-size: 0.52rem;

    opacity: 0.56;
}

.header-action-progress-track {
    height: 4px;
    margin-top: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.16);
}

.header-action-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--peach);
}



/* ==============================
   SKILLS MODAL
   ============================== */

.skills-modal {
    position: fixed;
    inset: 0;

    z-index: 46;

    display: grid;
    place-items: center;

    padding: 18px;
}

.skills-modal[hidden] {
    display: none;
}

.skills-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: rgba(8, 6, 10, 0.78);

    cursor: default;
}

.skills-window {
    position: relative;

    z-index: 1;

    width: min(760px, 96vw);
    max-height: 90vh;

    overflow-y: auto;

    border: 1px solid rgba(159, 139, 180, 0.46);
    border-radius: 18px;

    background: #17121c;

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.48);
}

.skills-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
    padding: 14px 15px 10px;

    border-bottom:
        1px solid rgba(159, 139, 180, 0.2);
}

.skills-header h2 {
    margin: 0;

    font-size: 1rem;
}

.skills-total {
    margin: 4px 0 0;

    font-size: 0.61rem;

    opacity: 0.66;
}

.skills-content {
    display: grid;

    gap: 12px;
    padding: 12px;
}

.skills-group-title {
    margin: 0 0 6px;

    font-size: 0.68rem;

    color: var(--peach);
}

.skills-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;
}

.skills-card {
    min-width: 0;

    padding: 8px;

    border: 1px solid rgba(159, 139, 180, 0.2);
    border-radius: 9px;

    background: rgba(42, 34, 50, 0.72);
}

.skills-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
}

.skills-card-identity {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 5px;
}

.skills-card-icon {
    flex: 0 0 auto;

    font-size: 0.78rem;
}

.skills-card-name {
    overflow: hidden;

    font-size: 0.59rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-card-level {
    flex: 0 0 auto;

    padding: 2px 5px;

    border-radius: 999px;

    background: rgba(201, 149, 131, 0.11);

    font-size: 0.52rem;
    font-weight: bold;
}

.skills-card-xp-row {
    margin-top: 6px;
}

.skills-card-xp {
    font-size: 0.51rem;

    opacity: 0.58;
}

.skills-progress-track {
    height: 4px;
    margin-top: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.14);
}

.skills-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--sage);
}



@media (max-width: 900px) {
    .game-header {
        grid-template-columns:
            minmax(150px, auto)
            minmax(170px, 1fr)
            auto;

        gap: 7px;
    }

    .header-action-copy span {
        display: none;
    }

    .header-action-button {
        padding: 6px 7px;
    }

    .header-action-text {
        display: none;
    }

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



@media (max-width: 600px) {
    .game-header {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        grid-template-areas:
            "brand actions"
            "activity activity";

        gap: 5px 7px;
    }

    .game-brand {
        grid-area: brand;
    }

    .header-actions {
        grid-area: actions;
    }

    .header-action-bar {
        grid-area: activity;
    }

    .skills-modal {
        padding: 8px;
    }

    .skills-window {
        width: 100%;
    }

    .skills-grid {
        grid-template-columns: 1fr 1fr;
    }
}



/* ==============================
   MINING
   ============================== */

.mining-source-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
    margin-top: 9px;
}

.mining-source-card {
    display: flex;
    align-items: center;

    gap: 8px;
    padding: 8px;

    border: 1px solid rgba(159, 139, 180, 0.2);
    border-radius: 9px;

    background: rgba(42, 34, 50, 0.72);
    color: var(--brown);

    text-align: left;

    cursor: pointer;
}

.mining-source-card:hover,
.mining-source-card.selected {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.1);
}

.mining-source-card.locked {
    opacity: 0.38;

    cursor: not-allowed;
}

.mining-source-card img {
    width: 38px;
    height: 38px;

    object-fit: contain;
}

.mining-source-copy {
    display: grid;

    min-width: 0;

    gap: 2px;
}

.mining-source-copy strong {
    font-size: 0.62rem;
}

.mining-source-copy span {
    font-size: 0.54rem;

    opacity: 0.62;
}

.mining-selected-heading {
    display: flex;
    align-items: center;

    gap: 10px;
}

.mining-selected-heading img {
    width: 52px;
    height: 52px;

    object-fit: contain;
}

.mining-selected-heading h2 {
    margin: 0;
}



@media (max-width: 600px) {
    .mining-source-list {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   MASTERY
   ============================== */

.collection-mastery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
    margin-top: 5px;

    font-size: 0.52rem;

    opacity: 0.72;
}

.collection-lock {
    margin-top: 4px;

    font-size: 0.5rem;

    opacity: 0.54;
}

.collection-item.locked {
    opacity: 0.42;

    border-color: var(--lavender);
}

.mastery-progress-track {
    width: 100%;
    height: 4px;

    margin-top: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(159, 139, 180, 0.15);
}

.mastery-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--peach);
}



/* ==============================
   SKILLS / MASTERY TABS
   ============================== */

.skills-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;
    padding: 10px 12px 0;
}

.skills-view-tab {
    padding: 7px 10px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.07);
    color: var(--brown);

    font: inherit;
    font-size: 0.62rem;
    font-weight: bold;

    cursor: pointer;
}

.skills-view-tab.active {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.12);
}



/* ==============================
   MASTERY TRACKER
   ============================== */

.mastery-view {
    padding: 12px;
}

.mastery-road-section {
    padding: 10px;

    border: 1px solid rgba(159, 139, 180, 0.2);
    border-radius: 10px;

    background: rgba(42, 34, 50, 0.62);
}

.mastery-road-section h3 {
    margin: 2px 0 8px;

    font-size: 0.72rem;
}

.mastery-milestones {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 5px;
}

.mastery-milestone-card {
    display: grid;

    gap: 2px;
    padding: 6px 4px;

    border: 1px solid rgba(159, 139, 180, 0.16);
    border-radius: 7px;

    text-align: center;
}

.mastery-milestone-card strong {
    font-size: 0.53rem;
}

.mastery-milestone-card span {
    font-size: 0.47rem;

    opacity: 0.65;
}

.mastery-toolbar {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr) auto auto;

    gap: 6px;
    margin-top: 9px;
}

.mastery-toolbar input,
.mastery-toolbar select {
    min-width: 0;
    padding: 7px 8px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 7px;

    background: rgba(42, 34, 50, 0.78);
    color: var(--brown);

    font: inherit;
    font-size: 0.57rem;
}

.mastery-summary {
    margin: 7px 0;

    font-size: 0.54rem;

    opacity: 0.62;
}

.mastery-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.mastery-entry-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);

    gap: 8px;
    padding: 7px;

    border: 1px solid rgba(159, 139, 180, 0.18);
    border-radius: 9px;

    background: rgba(42, 34, 50, 0.62);
}

.mastery-entry-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    overflow: hidden;

    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);

    font-size: 1rem;
}

.mastery-entry-icon img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}

.mastery-entry-body {
    min-width: 0;
}

.mastery-entry-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
}

.mastery-entry-heading strong {
    overflow: hidden;

    font-size: 0.59rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mastery-entry-heading span {
    flex: 0 0 auto;

    font-size: 0.49rem;
    font-weight: bold;
}

.mastery-entry-meta {
    margin-top: 3px;

    font-size: 0.48rem;

    opacity: 0.6;
}

.mastery-tracker-progress {
    height: 5px;
    margin-top: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.15);
}

.mastery-tracker-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--peach);
}

.mastery-next-reward {
    display: block;

    margin-top: 4px;

    font-size: 0.46rem;

    opacity: 0.68;
}



@media (max-width: 720px) {
    .mastery-milestones {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mastery-toolbar {
        grid-template-columns: 1fr;
    }

    .mastery-list {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   GLOBAL ACTION STOP
   ============================== */

.header-stop-action {
    padding: 5px 7px;

    border: 1px solid rgba(201, 149, 131, 0.32);
    border-radius: 7px;

    background: rgba(201, 149, 131, 0.08);
    color: var(--brown);

    font: inherit;
    font-size: 0.52rem;
    font-weight: bold;

    cursor: pointer;
}

.header-stop-action:hover:not(:disabled) {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.15);
}

.header-stop-action:disabled {
    cursor: default;

    opacity: 0.28;
}



/* ==============================
   MASTERY XP TEXT
   ============================== */

.mastery-xp-progress {
    display: block;

    margin-top: 3px;

    font-size: 0.45rem;

    opacity: 0.58;
}



/* ==============================
   ENCHANTING
   ============================== */

.enchanting-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;

    margin-bottom: 8px;
}

.enchanting-tab {
    padding: 7px 5px;

    border: 1px solid rgba(221, 212, 234, 0.18);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.03);
    color: var(--cream);

    font: inherit;
    font-size: 0.54rem;

    cursor: pointer;
}

.enchanting-tab.active {
    border-color: rgba(239, 201, 183, 0.55);

    background: rgba(239, 201, 183, 0.10);
}

.enchant-filter {
    display: grid;

    gap: 4px;

    margin-top: 8px;

    font-size: 0.52rem;
}

.enchant-filter select,
.enchant-filter input {
    width: 100%;

    padding: 7px 8px;

    border: 1px solid rgba(221, 212, 234, 0.18);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.04);
    color: var(--cream);

    font: inherit;
}

.personal-ritual-list,
.personal-enchant-list,
.disenchant-list {
    display: grid;

    gap: 7px;

    margin-top: 8px;
}

.ritual-card,
.personal-enchant-card,
.disenchant-card {
    padding: 8px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 10px;

    background: rgba(255, 250, 242, 0.025);
}

.ritual-card {
    display: grid;

    gap: 5px;
}

.ritual-card span {
    font-size: 0.48rem;

    opacity: 0.68;
}

.ritual-progress-track {
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 250, 242, 0.08);
}

.ritual-progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        var(--sage),
        var(--lavender)
    );
}

.personal-enchant-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;
}

.personal-enchant-heading span {
    flex: 0 0 auto;

    font-size: 0.48rem;

    opacity: 0.66;
}

.personal-enchant-effect,
.personal-enchant-next {
    margin: 5px 0;

    font-size: 0.52rem;
}

.personal-enchant-card > small {
    display: block;

    opacity: 0.58;
}

.personal-enchant-costs {
    display: grid;

    gap: 2px;

    margin: 7px 0;
    padding: 0;

    list-style: none;

    font-size: 0.47rem;
}

.personal-enchant-costs .missing {
    opacity: 0.48;
}

.personal-enchant-duration {
    margin-bottom: 6px;
}

.personal-enchant-button {
    width: 100%;
}

.enchant-future {
    margin: 7px 0 0;

    font-size: 0.47rem;

    opacity: 0.58;
}

.enchant-maxed {
    margin: 7px 0 0;

    font-size: 0.5rem;
}

.enchant-empty,
.enchant-status {
    font-size: 0.5rem;

    opacity: 0.68;
}

.disenchant-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    gap: 8px;

    align-items: center;
}

.disenchant-card img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.disenchant-card > div {
    display: grid;

    gap: 5px;
}

.disenchant-card small {
    font-size: 0.46rem;

    opacity: 0.65;
}


/* ==============================
   HEADER CURRENCIES
   ============================== */

.header-currencies {
    display: flex;
    align-items: center;

    gap: 5px;
}

.header-currencies span {
    display: inline-flex;
    align-items: center;

    gap: 3px;
    padding: 4px 6px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.08);

    font-size: 0.56rem;
}

.header-currencies strong {
    font-size: 0.56rem;
}



/* ==============================
   HEADER QUEUE SLOT
   ============================== */

.header-queue-row {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 5px;
    margin-top: 4px;
}

.header-queue-row span {
    min-width: 0;

    overflow: hidden;

    font-size: 0.45rem;

    opacity: 0.58;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#header-queue-time {
    flex: 0 0 auto;
}

#header-queue-next {
    flex: 1 1 auto;
}

#header-clear-queue {
    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(159, 139, 180, 0.12);
    color: var(--brown);

    font: inherit;
    font-size: 0.48rem;

    cursor: pointer;
}



/* ==============================
   ACTIVITY PLAN CONTROLS
   ============================== */

.activity-plan-controls {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1fr);

    gap: 6px;
    margin-top: 7px;
    padding: 7px;

    border: 1px solid rgba(159, 139, 180, 0.14);
    border-radius: 9px;

    background: rgba(159, 139, 180, 0.04);
}

.activity-plan-controls label {
    display: grid;

    gap: 3px;

    font-size: 0.48rem;
}

.activity-plan-controls select,
.activity-plan-controls input {
    width: 100%;

    min-width: 0;

    padding: 5px 6px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 7px;

    background: rgba(255, 250, 242, 0.04);
    color: var(--cream);

    font: inherit;
    font-size: 0.52rem;
}

.activity-plan-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 4px;
}

.activity-plan-value small {
    font-size: 0.44rem;

    opacity: 0.55;
}

.activity-plan-controls > button {
    grid-column: 1 / -1;
}



/* ==============================
   PANTRY
   ============================== */

.pantry-counts {
    display: grid;

    gap: 3px;

    font-size: 0.46rem;

    text-align: right;
}

.pantry-counts span {
    display: flex;
    justify-content: space-between;

    gap: 7px;
}

.pantry-deposit-all {
    width: 100%;
}

.pantry-section-heading {
    margin-top: 12px;
    padding-bottom: 4px;

    border-bottom: 1px solid rgba(159, 139, 180, 0.12);
}

.pantry-section-heading h3 {
    margin: 0;

    font-size: 0.62rem;
}

.pantry-item-list {
    display: grid;

    gap: 6px;
    margin-top: 7px;
}

.pantry-item-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;

    gap: 8px;
    padding: 7px;

    border: 1px solid rgba(159, 139, 180, 0.14);
    border-radius: 9px;

    background: rgba(255, 250, 242, 0.025);
}

.pantry-item-card img {
    width: 44px;
    height: 44px;

    object-fit: contain;
}

.pantry-item-copy {
    display: grid;

    gap: 3px;
}

.pantry-item-copy strong {
    font-size: 0.56rem;
}

.pantry-item-copy > span {
    font-size: 0.48rem;

    opacity: 0.62;
}

.pantry-item-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;
    margin-top: 3px;
}

.pantry-item-actions .fishing-button {
    padding: 4px 6px;

    font-size: 0.45rem;
}

.personal-slot-note {
    padding: 7px;

    border: 1px solid rgba(239, 201, 183, 0.18);
    border-radius: 8px;

    background: rgba(239, 201, 183, 0.05);

    font-size: 0.48rem;
}



@media (max-width: 1100px) {
    .header-currencies span {
        padding: 4px;
    }

    .header-currencies strong {
        font-size: 0.5rem;
    }
}



@media (max-width: 900px) {
    .header-currencies {
        gap: 3px;
    }

    .header-currencies span {
        font-size: 0.5rem;
    }
}



/* ==============================
   PANTRY ACCESS
   ============================== */

.pantry-access-note {
    padding: 7px 8px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.025);

    font-size: 0.48rem;

    opacity: 0.72;
}

.pantry-access-note.active {
    border-color: rgba(185, 200, 174, 0.38);

    background: rgba(185, 200, 174, 0.08);

    opacity: 0.92;
}



/* ==============================
   PANTRY VISUAL POLISH
   ============================== */

.pantry-item-card {
    grid-template-columns:
        48px minmax(0, 1fr);

    overflow: hidden;
}

.pantry-item-image-shell {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;

    overflow: hidden;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 8px;

    background:
        radial-gradient(
            circle at center,
            rgba(221, 212, 234, 0.08),
            rgba(255, 250, 242, 0.018)
        );
}

.pantry-item-image-shell .pantry-item-image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    margin: 0;
    padding: 3px;

    object-fit: contain;
    object-position: center;

    box-sizing: border-box;
}

.pantry-item-copy {
    min-width: 0;
}

.pantry-item-copy strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ==============================
   RUN PLAN VISUAL POLISH
   ============================== */

.activity-plan-controls {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.78fr);

    gap: 8px;
    padding: 9px;

    border-color: rgba(221, 212, 234, 0.18);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(159, 139, 180, 0.08),
            rgba(201, 149, 131, 0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 250, 242, 0.025);
}

.activity-plan-heading {
    grid-column: 1 / -1;

    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 8px;
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(221, 212, 234, 0.10);
}

.activity-plan-heading strong {
    font-size: 0.56rem;
}

.activity-plan-heading small {
    font-size: 0.42rem;

    opacity: 0.48;
}

.activity-plan-controls label {
    gap: 5px;

    color: rgba(255, 250, 242, 0.72);

    font-size: 0.45rem;
    font-weight: bold;
}

.activity-plan-native-mode {
    position: absolute;

    width: 1px !important;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.activity-plan-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 3px;
    padding: 3px;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 9px;

    background: rgba(20, 16, 25, 0.28);
}

.activity-plan-mode-button {
    min-width: 0;

    padding: 6px 5px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: rgba(255, 250, 242, 0.60);

    font: inherit;
    font-size: 0.48rem;
    font-weight: bold;

    cursor: pointer;
}

.activity-plan-mode-button:hover {
    color: var(--cream);
}

.activity-plan-mode-button.active {
    border-color: rgba(239, 201, 183, 0.30);

    background: rgba(239, 201, 183, 0.12);
    color: var(--cream);

    box-shadow:
        0 0 12px rgba(239, 201, 183, 0.04);
}

.activity-plan-value {
    height: 100%;

    padding: 3px 6px 3px 3px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 9px;

    background: rgba(20, 16, 25, 0.28);
}

.activity-plan-value input {
    padding: 4px 5px !important;

    border: 0 !important;

    background: transparent !important;

    text-align: center;

    outline: none;
}

.activity-plan-value small {
    padding-left: 5px;

    border-left: 1px solid rgba(221, 212, 234, 0.10);

    white-space: nowrap;

    opacity: 0.58;
}

.activity-plan-queue-button {
    grid-column: 1 / -1;

    margin-top: 1px;

    border-color: rgba(185, 200, 174, 0.26);

    background: rgba(185, 200, 174, 0.07);
}

.activity-plan-queue-button:hover:not(:disabled) {
    border-color: rgba(185, 200, 174, 0.52);

    background: rgba(185, 200, 174, 0.12);
}



/* ==============================
   HEADER QUEUE VISUAL POLISH
   ============================== */

.header-queue-row {
    gap: 4px;
    margin-top: 5px;
}

.header-queue-row span {
    padding: 3px 5px;

    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 999px;

    background: rgba(20, 16, 25, 0.18);

    font-size: 0.42rem;

    opacity: 0.76;
}

.header-queue-time-chip {
    color: rgba(255, 250, 242, 0.76);
}

.header-queue-next-chip {
    border-color: rgba(185, 200, 174, 0.12) !important;

    color: rgba(185, 200, 174, 0.78);
}

.header-queue-next-chip.has-task {
    border-color: rgba(185, 200, 174, 0.30) !important;

    background: rgba(185, 200, 174, 0.08);

    color: var(--cream);
}

#header-clear-queue {
    flex: 0 0 auto;

    border: 1px solid rgba(239, 201, 183, 0.16);

    background: rgba(239, 201, 183, 0.07);
}

.header-queue-budget-track {
    height: 3px;
    margin-top: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(221, 212, 234, 0.08);
}

.header-queue-budget-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--sage),
            var(--lavender)
        );

    transition: width 250ms ease;
}



@media (max-width: 600px) {
    .activity-plan-controls {
        grid-template-columns: 1fr;
    }

    .activity-plan-heading,
    .activity-plan-queue-button {
        grid-column: 1;
    }

    .activity-plan-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }
}



/* ==============================
   QUEUE + PANTRY CLARITY
   ============================== */

.activity-plan-heading strong,
.activity-plan-controls label,
.activity-plan-mode-button,
.activity-plan-value input,
.activity-plan-value small,
.activity-plan-queue-button,
.header-queue-row span,
.pantry-counts,
.pantry-section-heading,
.pantry-item-copy,
.pantry-access-note {
    color: var(--brown);
}

.activity-plan-heading small {
    color: rgba(238, 231, 241, 0.76);

    opacity: 1;
}

.activity-plan-controls label {
    color: rgba(238, 231, 241, 0.92);
}

.activity-plan-mode-button {
    color: rgba(238, 231, 241, 0.76);
}

.activity-plan-mode-button:hover,
.activity-plan-mode-button.active {
    color: var(--brown);
}

.activity-plan-value input {
    color: var(--brown);
}

.activity-plan-value small {
    color: rgba(238, 231, 241, 0.78);

    opacity: 1;
}

.header-queue-row span {
    color: rgba(238, 231, 241, 0.90);

    opacity: 1;
}

.header-queue-time-chip {
    border-color: rgba(239, 201, 183, 0.22) !important;

    background: rgba(239, 201, 183, 0.06);
}

.header-queue-cap-chip {
    border-color: rgba(221, 212, 234, 0.18) !important;

    color: rgba(238, 231, 241, 0.72) !important;
}

.header-queue-next-chip {
    color: rgba(205, 222, 196, 0.88) !important;
}

.header-queue-next-chip.has-task {
    color: var(--brown) !important;
}

.pantry-counts,
.pantry-item-copy > span,
.pantry-access-note {
    opacity: 1;
}

.pantry-item-copy > span {
    color: rgba(238, 231, 241, 0.76);
}

.pantry-access-note {
    color: rgba(238, 231, 241, 0.82);
}



/* ==============================
   PANTRY VIEW TABS
   ============================== */

.pantry-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 5px;
    margin-top: 10px;
}

.pantry-view-tab {
    padding: 7px 8px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 9px;

    background: rgba(255, 250, 242, 0.025);
    color: rgba(238, 231, 241, 0.76);

    font: inherit;
    font-size: 0.5rem;
    font-weight: bold;

    cursor: pointer;
}

.pantry-view-tab:hover {
    border-color: rgba(239, 201, 183, 0.30);

    color: var(--brown);
}

.pantry-view-tab.active {
    border-color: rgba(185, 200, 174, 0.42);

    background: rgba(185, 200, 174, 0.10);
    color: var(--brown);

    box-shadow:
        inset 0 1px 0 rgba(255, 250, 242, 0.03);
}

.pantry-view-panel[hidden] {
    display: none;
}

.pantry-view-panel {
    min-height: 80px;
}



/* ==============================
   PANTRY VISIBILITY HOTFIX
   ============================== */

.pantry-view-panel {
    width: 100%;
}

.pantry-view-panel:not([hidden]) {
    display: block;
}

.pantry-item-list {
    width: 100%;
}

.pantry-item-card {
    width: 100%;
}

.pantry-item-note {
    color: rgba(238, 231, 241, 0.64);

    font-size: 0.43rem;
}

.pantry-item-card-unknown {
    border-style: dashed;

    opacity: 0.82;
}

.pantry-item-card-unknown
.pantry-item-image-shell {
    color: rgba(238, 231, 241, 0.72);

    font-size: 1rem;
    font-weight: bold;
}



/* ==============================
   ITEM DETAILS POPUP
   ============================== */

body.item-detail-open {
    overflow: hidden;
}

.pantry-item-card-clickable {
    cursor: pointer;

    transition:
        border-color 140ms ease,
        background 140ms ease,
        transform 140ms ease;
}

.pantry-item-card-clickable:hover,
.pantry-item-card-clickable:focus-visible {
    border-color: rgba(239, 201, 183, 0.38);

    background: rgba(239, 201, 183, 0.055);

    outline: none;

    transform: translateY(-1px);
}

.item-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: rgba(10, 8, 12, 0.76);

    backdrop-filter: blur(6px);
}

.item-detail-modal[hidden] {
    display: none;
}

.item-detail-dialog {
    position: relative;

    width: min(520px, 100%);
    max-height: min(760px, calc(100vh - 36px));

    overflow-y: auto;

    padding: 16px;

    border: 1px solid rgba(221, 212, 234, 0.24);
    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            rgba(47, 39, 52, 0.98),
            rgba(32, 28, 35, 0.98)
        );

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 250, 242, 0.03);

    color: rgba(245, 239, 247, 0.94);
}

.item-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(221, 212, 234, 0.18);
    border-radius: 999px;

    background: rgba(255, 250, 242, 0.04);
    color: rgba(245, 239, 247, 0.88);

    font: inherit;
    font-size: 0.8rem;

    cursor: pointer;
}

.item-detail-close:hover {
    border-color: rgba(239, 201, 183, 0.40);

    background: rgba(239, 201, 183, 0.08);
}

.item-detail-hero {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);

    gap: 14px;

    align-items: center;

    padding-right: 26px;
}

.item-detail-image-shell {
    display: grid;
    place-items: center;

    width: 104px;
    height: 104px;

    overflow: hidden;

    border: 1px solid rgba(221, 212, 234, 0.16);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at center,
            rgba(221, 212, 234, 0.10),
            rgba(255, 250, 242, 0.02)
        );
}

.item-detail-image-shell img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 7px;

    object-fit: contain;

    box-sizing: border-box;
}

.item-detail-heading {
    min-width: 0;
}

.item-detail-heading h2 {
    margin: 2px 0 4px;

    color: rgba(250, 245, 251, 0.98);

    font-size: 0.92rem;
}

.item-detail-heading > p {
    margin: 0;
}

.item-detail-heading
#item-detail-subtitle {
    color: rgba(222, 211, 231, 0.82);

    font-size: 0.52rem;
}

.item-detail-location {
    margin-top: 7px !important;

    color: rgba(205, 222, 196, 0.88);

    font-size: 0.48rem;
}

.item-detail-description {
    margin: 12px 0 0;

    color: rgba(238, 231, 241, 0.78);

    font-size: 0.52rem;
    line-height: 1.55;
}

.item-detail-section {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid rgba(221, 212, 234, 0.10);
}

.item-detail-section h3 {
    margin: 0 0 7px;

    color: rgba(250, 245, 251, 0.94);

    font-size: 0.58rem;
}

.item-detail-info,
.item-detail-buffs {
    display: grid;

    gap: 5px;
}

.item-detail-info-row,
.item-detail-buff-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 12px;

    padding: 5px 7px;

    border-radius: 7px;

    background: rgba(255, 250, 242, 0.025);

    font-size: 0.48rem;
}

.item-detail-info-row span,
.item-detail-buff-row span {
    color: rgba(222, 211, 231, 0.72);
}

.item-detail-info-row strong,
.item-detail-buff-row strong {
    color: rgba(250, 245, 251, 0.94);

    text-align: right;
}

.item-detail-quantity-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;

    gap: 5px;
}

.item-detail-quantity-row button,
.item-detail-presets button {
    border: 1px solid rgba(221, 212, 234, 0.16);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.035);
    color: rgba(245, 239, 247, 0.92);

    font: inherit;

    cursor: pointer;
}

.item-detail-quantity-row button {
    min-height: 34px;

    font-size: 0.68rem;
}

.item-detail-quantity-row input {
    min-width: 0;

    padding: 7px;

    border: 1px solid rgba(221, 212, 234, 0.18);
    border-radius: 8px;

    background: rgba(17, 14, 20, 0.40);
    color: rgba(250, 245, 251, 0.96);

    font: inherit;
    font-size: 0.58rem;

    text-align: center;
}

.item-detail-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;

    margin-top: 6px;
}

.item-detail-presets button {
    padding: 6px;

    font-size: 0.46rem;
}

.item-detail-quantity-row button:hover,
.item-detail-presets button:hover {
    border-color: rgba(239, 201, 183, 0.36);

    background: rgba(239, 201, 183, 0.07);
}

.item-detail-status {
    min-height: 1em;
    margin: 10px 0 0;

    color: rgba(239, 201, 183, 0.92);

    font-size: 0.48rem;
}

.item-detail-actions {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(120px, 1fr)
    );

    gap: 7px;

    margin-top: 8px;
}

.item-detail-actions button {
    width: 100%;
}

@media (max-width: 520px) {
    .item-detail-modal {
        padding: 10px;
    }

    .item-detail-dialog {
        max-height: calc(100vh - 20px);

        padding: 13px;
    }

    .item-detail-hero {
        grid-template-columns: 78px minmax(0, 1fr);

        gap: 10px;
    }

    .item-detail-image-shell {
        width: 78px;
        height: 78px;
    }
}



/* ==============================
   UNIVERSAL ITEM INSPECTION
   ============================== */

.inventory-slot.inspectable,
.equipment-slot.inspectable,
.tool-slot.inspectable {
    cursor: pointer;
}

.inventory-slot.inspectable:hover,
.inventory-slot.inspectable:focus-visible,
.equipment-slot.inspectable:hover,
.equipment-slot.inspectable:focus-visible,
.tool-slot.inspectable:hover,
.tool-slot.inspectable:focus-visible {
    border-color: rgba(239, 201, 183, 0.42);

    outline: none;

    box-shadow:
        0 0 0 1px rgba(239, 201, 183, 0.07),
        0 0 14px rgba(239, 201, 183, 0.045);
}



/* ==============================
   ORDERED QUEUE DROPDOWN
   ============================== */

.header-queue-menu {
    position: relative;

    flex: 0 0 auto;
}

.header-queue-toggle {
    display: flex;
    align-items: center;

    gap: 4px;

    min-height: 24px;
    padding: 3px 7px;

    border: 1px solid rgba(185, 200, 174, 0.18);
    border-radius: 999px;

    background: rgba(185, 200, 174, 0.055);
    color: rgba(238, 231, 241, 0.90);

    font: inherit;
    font-size: 0.42rem;

    cursor: pointer;
}

.header-queue-toggle:hover,
.header-queue-toggle.open {
    border-color: rgba(185, 200, 174, 0.38);

    background: rgba(185, 200, 174, 0.10);
}

.header-queue-caret {
    transition: transform 140ms ease;
}

.header-queue-toggle.open
.header-queue-caret {
    transform: rotate(180deg);
}

.header-queue-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 500;

    width: min(330px, 82vw);
    max-height: 390px;

    overflow-y: auto;

    padding: 9px;

    border: 1px solid rgba(221, 212, 234, 0.22);
    border-radius: 12px;

    background: rgba(35, 29, 40, 0.985);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 250, 242, 0.025);
}

.header-queue-dropdown[hidden] {
    display: none;
}

.header-queue-dropdown-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 10px;
    padding: 2px 2px 7px;

    border-bottom: 1px solid rgba(221, 212, 234, 0.10);
}

.header-queue-dropdown-heading strong {
    color: rgba(250, 245, 251, 0.96);

    font-size: 0.5rem;
}

.header-queue-dropdown-heading small {
    color: rgba(205, 222, 196, 0.78);

    font-size: 0.4rem;
}

.header-queue-list {
    display: grid;

    gap: 5px;

    margin-top: 7px;
}

.header-queued-task {
    display: grid;
    grid-template-columns:
        20px
        22px
        minmax(0, 1fr)
        24px;

    gap: 5px;

    align-items: center;

    padding: 6px;

    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.025);
}

.header-queued-position {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    border-radius: 999px;

    background: rgba(185, 200, 174, 0.09);
    color: rgba(205, 222, 196, 0.92);

    font-size: 0.4rem;
    font-weight: bold;
}

.header-queued-icon {
    font-size: 0.7rem;

    text-align: center;
}

.header-queued-copy {
    display: grid;

    min-width: 0;
}

.header-queued-copy strong {
    overflow: hidden;

    color: rgba(250, 245, 251, 0.92);

    font-size: 0.45rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-queued-copy small {
    color: rgba(222, 211, 231, 0.65);

    font-size: 0.38rem;
}

.header-queued-remove {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border: 1px solid rgba(239, 201, 183, 0.14);
    border-radius: 999px;

    background: rgba(239, 201, 183, 0.04);
    color: rgba(245, 239, 247, 0.80);

    font: inherit;

    cursor: pointer;
}

.header-queued-remove:hover {
    border-color: rgba(239, 201, 183, 0.34);

    background: rgba(239, 201, 183, 0.08);
}

.header-queue-empty {
    margin: 9px 2px 2px;

    color: rgba(222, 211, 231, 0.62);

    font-size: 0.42rem;
}



/* ==============================
   OFFLINE SUMMARY
   ============================== */

body.offline-summary-open {
    overflow: hidden;
}

.offline-summary-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;

    display: grid;
    place-items: center;

    padding: 18px;

    background: rgba(9, 8, 13, 0.78);

    backdrop-filter: blur(7px);
}

.offline-summary-modal[hidden] {
    display: none;
}

.offline-summary-dialog {
    position: relative;

    width: min(560px, 100%);
    max-height: min(780px, calc(100vh - 36px));

    overflow-y: auto;

    padding: 17px;

    border: 1px solid rgba(221, 212, 234, 0.26);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(159, 139, 180, 0.15),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            rgba(47, 39, 52, 0.99),
            rgba(31, 27, 35, 0.99)
        );

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 250, 242, 0.035);

    color: rgba(245, 239, 247, 0.94);
}

.offline-summary-close {
    position: absolute;
    top: 11px;
    right: 11px;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(221, 212, 234, 0.18);
    border-radius: 999px;

    background: rgba(255, 250, 242, 0.04);
    color: rgba(245, 239, 247, 0.90);

    font: inherit;
    font-size: 0.8rem;

    cursor: pointer;
}

.offline-summary-heading {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    padding-right: 28px;
}

.offline-summary-moon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    border: 1px solid rgba(221, 212, 234, 0.16);
    border-radius: 16px;

    background: rgba(159, 139, 180, 0.09);

    font-size: 1.5rem;

    box-shadow:
        0 0 24px rgba(159, 139, 180, 0.08);
}

.offline-summary-heading h2 {
    margin: 2px 0 4px;

    color: rgba(250, 245, 251, 0.98);

    font-size: 0.94rem;
}

.offline-summary-heading p {
    margin: 0;
}

#offline-summary-time {
    color: rgba(205, 222, 196, 0.84);

    font-size: 0.49rem;
}

.offline-summary-section {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid rgba(221, 212, 234, 0.10);
}

.offline-summary-section h3 {
    margin: 0 0 7px;

    color: rgba(250, 245, 251, 0.94);

    font-size: 0.56rem;
}

.offline-summary-tasks,
.offline-summary-items,
.offline-summary-stats {
    display: grid;

    gap: 5px;
}

.offline-summary-task {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);

    gap: 7px;

    align-items: center;

    padding: 7px;

    border-radius: 9px;

    background: rgba(255, 250, 242, 0.025);
}

.offline-summary-task-icon {
    font-size: 0.82rem;

    text-align: center;
}

.offline-summary-task div {
    display: grid;

    min-width: 0;
}

.offline-summary-task strong {
    color: rgba(250, 245, 251, 0.94);

    font-size: 0.48rem;
}

.offline-summary-task small {
    color: rgba(222, 211, 231, 0.68);

    font-size: 0.4rem;
}

.offline-summary-items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );
}

.offline-summary-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;

    gap: 7px;

    align-items: center;

    padding: 6px 7px;

    border: 1px solid rgba(221, 212, 234, 0.08);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.02);
}

.offline-summary-item img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}

.offline-summary-item span {
    overflow: hidden;

    color: rgba(238, 231, 241, 0.82);

    font-size: 0.43rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.offline-summary-item strong {
    color: rgba(205, 222, 196, 0.94);

    font-size: 0.44rem;
}

.offline-summary-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 10px;

    padding: 5px 7px;

    border-radius: 7px;

    background: rgba(255, 250, 242, 0.022);

    font-size: 0.45rem;
}

.offline-summary-stat span {
    color: rgba(222, 211, 231, 0.72);
}

.offline-summary-stat strong {
    color: rgba(205, 222, 196, 0.94);
}

.offline-summary-recipes {
    display: grid;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.offline-summary-recipes li {
    padding: 5px 7px;

    border-radius: 7px;

    background: rgba(239, 201, 183, 0.04);
    color: rgba(245, 239, 247, 0.86);

    font-size: 0.44rem;
}

.offline-summary-note {
    margin: 11px 0 0;
    padding: 7px 8px;

    border: 1px solid rgba(239, 201, 183, 0.16);
    border-radius: 8px;

    background: rgba(239, 201, 183, 0.055);
    color: rgba(239, 214, 201, 0.94);

    font-size: 0.44rem;
}

.offline-summary-done {
    width: 100%;
    margin-top: 12px;
}

@media (max-width: 520px) {
    .offline-summary-modal {
        padding: 9px;
    }

    .offline-summary-dialog {
        max-height: calc(100vh - 18px);

        padding: 13px;
    }

    .offline-summary-heading {
        grid-template-columns: 44px minmax(0, 1fr);

        gap: 9px;
    }

    .offline-summary-moon {
        width: 44px;
        height: 44px;

        font-size: 1.15rem;
    }

    .offline-summary-items {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   PAUSED ACTIVITY QUEUE
   ============================== */

.header-queue-paused {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    gap: 7px;

    align-items: center;

    margin-top: 7px;
    padding: 7px;

    border: 1px solid rgba(239, 201, 183, 0.20);
    border-radius: 8px;

    background: rgba(239, 201, 183, 0.055);
}

.header-queue-paused[hidden] {
    display: none;
}

.header-queue-paused span {
    color: rgba(245, 224, 214, 0.92);

    font-size: 0.41rem;
}

.header-queue-paused button {
    padding: 5px 7px;

    border: 1px solid rgba(185, 200, 174, 0.28);
    border-radius: 7px;

    background: rgba(185, 200, 174, 0.08);
    color: rgba(238, 244, 234, 0.94);

    font: inherit;
    font-size: 0.4rem;
    font-weight: bold;

    cursor: pointer;
}

.header-queue-paused button:hover {
    border-color: rgba(185, 200, 174, 0.48);

    background: rgba(185, 200, 174, 0.13);
}



/* ==============================
   BACKGROUND GATHERING
   ============================== */

.gathering-background-note {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);

    gap: 7px;

    align-items: center;

    margin-top: 12px;
    padding: 8px;

    border: 1px solid rgba(185, 200, 174, 0.14);
    border-radius: 9px;

    background: rgba(185, 200, 174, 0.045);
}

.gathering-background-note span {
    font-size: 0.85rem;

    text-align: center;
}

.gathering-background-note p {
    margin: 0;

    color: rgba(222, 231, 216, 0.76);

    font-size: 0.45rem;
    line-height: 1.5;
}

.gathering-plot-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    gap: 9px;

    margin-top: 10px;
}

.gathering-plot-card {
    position: relative;

    display: grid;

    gap: 8px;

    min-height: 180px;
    padding: 10px;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 12px;

    background:
        linear-gradient(
            155deg,
            rgba(255, 250, 242, 0.025),
            rgba(255, 250, 242, 0.012)
        );
}

.gathering-plot-card.empty {
    place-items: center;

    text-align: center;
}

.gathering-plot-card.growing {
    border-color: rgba(185, 200, 174, 0.18);

    background:
        linear-gradient(
            155deg,
            rgba(185, 200, 174, 0.055),
            rgba(255, 250, 242, 0.012)
        );
}

.gathering-plot-card.ready {
    border-color: rgba(239, 201, 183, 0.30);

    background:
        radial-gradient(
            circle at top right,
            rgba(239, 201, 183, 0.10),
            transparent 46%
        ),
        rgba(255, 250, 242, 0.018);

    box-shadow:
        0 0 18px rgba(239, 201, 183, 0.04);
}

.gathering-plot-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}

.gathering-plot-number {
    color: rgba(205, 222, 196, 0.82);

    font-size: 0.42rem;
    font-weight: bold;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.gathering-empty-plot-icon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    border: 1px dashed rgba(185, 200, 174, 0.20);
    border-radius: 999px;

    background: rgba(185, 200, 174, 0.04);

    font-size: 1.25rem;
}

.gathering-plot-card.empty > strong {
    color: rgba(245, 239, 247, 0.90);

    font-size: 0.53rem;
}

.gathering-plot-card.empty > p,
.gathering-plot-card.invalid > p {
    margin: 0;

    color: rgba(222, 211, 231, 0.64);

    font-size: 0.42rem;
    line-height: 1.45;
}

.gathering-plot-resource {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);

    gap: 9px;

    align-items: center;
}

.gathering-plot-resource img {
    width: 58px;
    height: 58px;

    padding: 4px;

    object-fit: contain;

    box-sizing: border-box;

    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 10px;

    background: rgba(255, 250, 242, 0.025);
}

.gathering-plot-resource div {
    display: grid;

    gap: 3px;

    min-width: 0;
}

.gathering-plot-resource strong {
    color: rgba(250, 245, 251, 0.94);

    font-size: 0.52rem;
}

.gathering-plot-resource span {
    color: rgba(205, 222, 196, 0.78);

    font-size: 0.41rem;
}

.gathering-plot-timer {
    margin: 1px 0 0;

    color: rgba(238, 231, 241, 0.82);

    font-size: 0.47rem;
    font-weight: bold;
}

.gathering-grow-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 250, 242, 0.05);
}

.gathering-grow-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(143, 167, 132, 0.60),
            rgba(185, 200, 174, 0.88)
        );

    transition: width 900ms linear;
}

.gathering-plot-card.growing > small {
    color: rgba(222, 211, 231, 0.58);

    font-size: 0.38rem;
    line-height: 1.45;
}

.gathering-plot-button {
    align-self: end;

    width: 100%;
}

.gathering-plot-card.ready
.gathering-plot-button {
    border-color: rgba(239, 201, 183, 0.28);

    background: rgba(239, 201, 183, 0.075);
}

@media (max-width: 620px) {
    .gathering-plot-grid {
        grid-template-columns: 1fr;
    }

    .gathering-plot-card {
        min-height: 0;
    }
}



/* ==============================
   SALEM SEED SHOP
   ============================== */

.shop-npc-card {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        auto;

    gap: 12px;

    align-items: center;

    padding: 13px;

    border: 1px solid rgba(185, 200, 174, 0.18);
    border-radius: 15px;

    background:
        radial-gradient(
            circle at top left,
            rgba(185, 200, 174, 0.10),
            transparent 42%
        ),
        rgba(255, 250, 242, 0.02);
}

.shop-npc-avatar {
    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;

    border: 1px solid rgba(185, 200, 174, 0.18);
    border-radius: 18px;

    background: rgba(185, 200, 174, 0.06);

    font-size: 1.7rem;
}

.shop-npc-copy {
    min-width: 0;
}

.shop-npc-copy h2 {
    margin: 2px 0 4px;

    color: rgba(250, 245, 251, 0.96);

    font-size: 0.76rem;
}

.shop-npc-copy > p:last-child {
    margin: 0;

    color: rgba(222, 231, 216, 0.72);

    font-size: 0.44rem;
    line-height: 1.5;
}

.shop-wallet {
    display: grid;

    gap: 3px;

    min-width: 82px;

    padding: 8px 9px;

    border: 1px solid rgba(239, 201, 183, 0.13);
    border-radius: 10px;

    background: rgba(239, 201, 183, 0.04);

    text-align: right;
}

.shop-wallet span {
    color: rgba(222, 211, 231, 0.62);

    font-size: 0.39rem;
}

.shop-wallet strong {
    color: rgba(250, 235, 194, 0.94);

    font-size: 0.53rem;
}

.seed-shop-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 9px;

    margin-top: 10px;
}

.seed-shop-card {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 9px;

    padding: 9px;

    border: 1px solid rgba(221, 212, 234, 0.11);
    border-radius: 11px;

    background: rgba(255, 250, 242, 0.022);
}

.seed-shop-card.locked {
    opacity: 0.62;
}

.seed-shop-card.sold-out {
    border-style: dashed;

    opacity: 0.70;
}

.seed-shop-image-shell {
    grid-row: 1 / span 2;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(185, 200, 174, 0.12);
    border-radius: 10px;

    background: rgba(185, 200, 174, 0.04);
}

.seed-shop-image-shell img {
    display: block;

    width: 52px;
    height: 52px;

    padding: 4px;

    object-fit: contain;

    box-sizing: border-box;
}

.seed-shop-copy {
    min-width: 0;
}

.seed-shop-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 7px;
}

.seed-shop-heading strong {
    overflow: hidden;

    color: rgba(250, 245, 251, 0.94);

    font-size: 0.49rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.seed-shop-heading span {
    flex: 0 0 auto;

    color: rgba(250, 235, 194, 0.90);

    font-size: 0.43rem;
}

.seed-shop-copy small {
    display: block;

    margin-top: 2px;

    color: rgba(205, 222, 196, 0.72);

    font-size: 0.39rem;
}

.seed-shop-copy p {
    margin: 5px 0 0;

    color: rgba(222, 211, 231, 0.62);

    font-size: 0.4rem;
}

.seed-shop-actions {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;
}

.seed-shop-actions button {
    width: 100%;
}

.seed-shop-secondary-button {
    padding: 6px 8px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.025);
    color: rgba(238, 231, 241, 0.86);

    font: inherit;
    font-size: 0.43rem;

    cursor: pointer;
}

.seed-shop-secondary-button:hover:not(:disabled) {
    border-color: rgba(185, 200, 174, 0.28);

    background: rgba(185, 200, 174, 0.06);
}

.seed-shop-secondary-button:disabled {
    cursor: default;

    opacity: 0.48;
}

.seed-shop-status {
    min-height: 1.2em;
    margin: 10px 0 0;

    color: rgba(239, 214, 201, 0.88);

    font-size: 0.44rem;
}

.shop-info-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    margin-top: 10px;
    padding: 9px;

    border: 1px solid rgba(185, 200, 174, 0.12);
    border-radius: 10px;

    background: rgba(185, 200, 174, 0.035);
}

.shop-info-card > span {
    font-size: 0.85rem;

    text-align: center;
}

.shop-info-card strong {
    color: rgba(238, 244, 234, 0.90);

    font-size: 0.46rem;
}

.shop-info-card p {
    margin: 3px 0 0;

    color: rgba(222, 231, 216, 0.65);

    font-size: 0.4rem;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .shop-npc-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .shop-npc-avatar {
        width: 58px;
        height: 58px;
    }

    .shop-wallet {
        grid-column: 1 / -1;

        text-align: left;
    }

    .seed-shop-grid {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   GATHERING PLOT UNLOCKS
   ============================== */

.gathering-plot-card.locked {
    border-style: dashed;
    border-color: rgba(221, 212, 234, 0.15);

    background:
        radial-gradient(
            circle at top,
            rgba(159, 139, 180, 0.07),
            transparent 45%
        ),
        rgba(255, 250, 242, 0.012);
}

.gathering-locked-plot-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 3px auto 0;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.055);

    font-size: 1.15rem;
}

.gathering-plot-card.locked > strong {
    color: rgba(245, 239, 247, 0.90);

    font-size: 0.52rem;

    text-align: center;
}

.gathering-plot-card.locked > p {
    margin: 0;

    color: rgba(222, 211, 231, 0.62);

    font-size: 0.4rem;
    line-height: 1.45;

    text-align: center;
}

.gathering-unlock-requirements {
    display: grid;

    gap: 4px;

    padding: 7px;

    border: 1px solid rgba(221, 212, 234, 0.08);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.018);
}

.gathering-unlock-requirement {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 7px;

    color: rgba(239, 201, 183, 0.78);

    font-size: 0.39rem;
}

.gathering-unlock-requirement.met {
    color: rgba(205, 222, 196, 0.82);
}

.gathering-unlock-requirement strong {
    flex: 0 0 auto;

    font-size: 0.39rem;
}



/* ==============================
   FULL SEED SHOP PROGRESSION
   ============================== */

#seed-shop-stock {
    display: grid;

    gap: 14px;
}

.seed-shop-band {
    display: grid;

    gap: 8px;
}

.seed-shop-band + .seed-shop-band {
    padding-top: 12px;

    border-top: 1px solid rgba(221, 212, 234, 0.08);
}

.seed-shop-band-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 10px;
}

.seed-shop-band-heading > div {
    display: grid;

    gap: 2px;
}

.seed-shop-band-heading strong {
    color: rgba(245, 239, 247, 0.94);

    font-size: 0.53rem;
}

.seed-shop-band-heading small {
    color: rgba(222, 211, 231, 0.62);

    font-size: 0.39rem;
}

.seed-shop-band-heading > span {
    flex: 0 0 auto;

    padding: 4px 6px;

    border: 1px solid rgba(185, 200, 174, 0.12);
    border-radius: 999px;

    background: rgba(185, 200, 174, 0.04);
    color: rgba(205, 222, 196, 0.80);

    font-size: 0.38rem;
}



/* ==============================
   NEW RECIPE CARDS
   ============================== */

.recipe-book-section-new {
    padding: 2px 4px;

    border: 1px solid rgba(239, 201, 183, 0.22);
    border-radius: 999px;

    background: rgba(239, 201, 183, 0.10);
    color: var(--peach);

    font-size: 0.47rem;
    font-weight: bold;
}

.recipe-book-card-name-row {
    display: flex;
    align-items: center;

    gap: 6px;
}

.recipe-book-card-name-row
.recipe-book-card-name {
    min-width: 0;
}

.recipe-book-card-new {
    border-color: rgba(239, 201, 183, 0.76);

    box-shadow:
        0 0 0 1px rgba(239, 201, 183, 0.08),
        0 0 18px rgba(239, 201, 183, 0.08);

    cursor: pointer;
}

.recipe-book-card-new:hover,
.recipe-book-card-new:focus-visible {
    border-color: rgba(239, 201, 183, 0.96);

    outline: none;

    transform: translateY(-1px);
}

.recipe-book-card-new-badge {
    flex: 0 0 auto;

    padding: 2px 5px;

    border: 1px solid rgba(239, 201, 183, 0.28);
    border-radius: 999px;

    background: rgba(239, 201, 183, 0.12);
    color: var(--peach);

    font-size: 0.48rem;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.recipe-book-card-focused {
    animation:
        recipe-card-focus-pulse 0.8s ease
        3;
}

@keyframes recipe-card-focus-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(239, 201, 183, 0);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(239, 201, 183, 0.20),
            0 0 24px rgba(239, 201, 183, 0.16);
    }
}


/* ==============================
   CLICKABLE RECIPE UNLOCK TOAST
   ============================== */

.action-notification-clickable {
    pointer-events: auto;

    cursor: pointer;
}

.action-notification-clickable:hover,
.action-notification-clickable:focus-visible {
    border-color: rgba(239, 201, 183, 0.70);

    outline: none;

    transform: translateX(0) translateY(-1px);
}

.recipe-unlocked-notification {
    border-color: rgba(239, 201, 183, 0.48);

    background:
        radial-gradient(
            circle at top left,
            rgba(239, 201, 183, 0.10),
            transparent 48%
        ),
        rgba(25, 19, 30, 0.97);
}

.recipe-unlocked-notification
.action-notification-icon {
    background: rgba(239, 201, 183, 0.10);
}



/* ==============================
   SESSION LOOT TRACKERS
   ============================== */

.session-loot-panel {
    display: grid;

    gap: 9px;
}

.session-loot-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.session-loot-heading-copy {
    display: grid;

    gap: 2px;

    min-width: 0;
}

.session-loot-heading h2 {
    margin: 0;

    color: rgba(250, 245, 251, 0.96);
}

.session-loot-started {
    color: rgba(222, 211, 231, 0.56);

    font-size: 0.39rem;
}

.session-loot-reset {
    flex: 0 0 auto;

    padding: 5px 7px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.025);
    color: rgba(238, 231, 241, 0.82);

    font: inherit;
    font-size: 0.40rem;

    cursor: pointer;
}

.session-loot-reset:hover:not(:disabled) {
    border-color: rgba(239, 201, 183, 0.28);

    background: rgba(239, 201, 183, 0.06);
}

.session-loot-reset:disabled {
    cursor: default;

    opacity: 0.42;
}

.session-loot-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 8px;

    padding: 6px 8px;

    border: 1px solid rgba(185, 200, 174, 0.10);
    border-radius: 8px;

    background: rgba(185, 200, 174, 0.03);
}

.session-loot-summary span {
    color: rgba(222, 231, 216, 0.64);

    font-size: 0.39rem;
}

.session-loot-summary strong {
    color: rgba(205, 222, 196, 0.92);

    font-size: 0.46rem;
}

.session-loot-list {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );

    gap: 6px;
}

.session-loot-row {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    gap: 7px;

    align-items: center;

    padding: 6px;

    border: 1px solid rgba(221, 212, 234, 0.09);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.018);
}

.session-loot-image-shell {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(221, 212, 234, 0.08);
    border-radius: 7px;

    background: rgba(255, 250, 242, 0.02);
}

.session-loot-image-shell img {
    width: 34px;
    height: 34px;

    padding: 2px;

    box-sizing: border-box;

    object-fit: contain;
}

.session-loot-name {
    min-width: 0;

    overflow: hidden;

    color: rgba(241, 235, 244, 0.88);

    font-size: 0.42rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-loot-quantity {
    color: rgba(239, 201, 183, 0.92);

    font-size: 0.45rem;
}

.session-loot-empty {
    grid-column: 1 / -1;

    margin: 0;
    padding: 8px;

    border: 1px dashed rgba(221, 212, 234, 0.09);
    border-radius: 8px;

    color: rgba(222, 211, 231, 0.54);

    font-size: 0.41rem;
    line-height: 1.45;

    text-align: center;
}

.session-loot-note {
    margin: 0;

    color: rgba(222, 211, 231, 0.48);

    font-size: 0.37rem;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .session-loot-list {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   BLACKSMITHING
   ============================== */

.blacksmithing-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin: 10px 0;
}

.blacksmithing-tab {
    padding: 6px 8px;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 9px;

    background: rgba(255, 250, 242, 0.025);
    color: rgba(238, 231, 241, 0.76);

    font: inherit;
    font-size: 0.42rem;

    cursor: pointer;
}

.blacksmithing-tab:hover,
.blacksmithing-tab.selected {
    border-color: rgba(239, 201, 183, 0.30);

    background: rgba(239, 201, 183, 0.07);
    color: rgba(255, 244, 238, 0.96);
}

.blacksmithing-selected-heading {
    display: flex;
    align-items: center;

    gap: 10px;
}

.blacksmithing-selected-heading img {
    width: 58px;
    height: 58px;

    padding: 4px;

    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 10px;

    background: rgba(255, 250, 242, 0.02);

    object-fit: contain;
}

.blacksmithing-recipe-copy {
    display: grid;

    gap: 2px;

    min-width: 0;

    text-align: left;
}

.blacksmithing-list-image {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    object-fit: contain;
}

#blacksmithing-recipe-list
.cooking-recipe-card {
    display: flex;
    align-items: center;

    gap: 8px;
}



/* ==============================
   EMBER FORGE STATIONS
   ============================== */

.metalworking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.metalworking-tab {
    padding: 6px 8px;
    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 9px;
    background: rgba(255, 250, 242, 0.025);
    color: rgba(238, 231, 241, 0.76);
    font: inherit;
    font-size: 0.42rem;
    cursor: pointer;
}

.metalworking-tab:hover,
.metalworking-tab.selected {
    border-color: rgba(239, 201, 183, 0.30);
    background: rgba(239, 201, 183, 0.07);
    color: rgba(255, 244, 238, 0.96);
}

.metalworking-selected-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metalworking-selected-heading img {
    width: 58px;
    height: 58px;
    padding: 4px;
    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 10px;
    background: rgba(255, 250, 242, 0.02);
    object-fit: contain;
}

.metalworking-recipe-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.metalworking-list-image {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.metalworking-recipe-card {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==============================
   COMBAT
   ============================== */

.combat-selected-card {
    display: grid;
    gap: 14px;
}

.combat-selected-card[hidden] {
    display: none;
}

.combat-selected-heading,
.combat-vital-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.combat-level-badge {
    padding: 5px 8px;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.1);

    font-size: 0.72rem;
    font-weight: bold;
}

.combat-vitals {
    display: grid;
    gap: 10px;
}

.combat-vital {
    display: grid;
    gap: 5px;
}

.combat-vital-heading {
    font-size: 0.72rem;
}

.combat-bar-track {
    overflow: hidden;

    height: 10px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.1);
}

.combat-bar-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background: rgba(201, 149, 131, 0.72);

    transition: width 160ms ease;
}

.combat-style-requirement {
    margin: 0;

    font-size: 0.72rem;
}

.combat-style-requirement.blocked {
    font-weight: bold;
}

.combat-monster-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));

    gap: 8px;

    margin-top: 12px;
}

.combat-monster-card {
    display: grid;
    gap: 5px;

    padding: 10px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 10px;

    background: rgba(159, 139, 180, 0.07);
    color: var(--brown);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.combat-monster-card:hover:not(:disabled),
.combat-monster-card.selected {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.12);
}

.combat-monster-card.locked {
    opacity: 0.62;

    cursor: not-allowed;
}

.combat-monster-name {
    font-size: 0.78rem;
    font-weight: bold;
}

.combat-monster-meta,
.combat-monster-card small {
    font-size: 0.65rem;
}


/* ==============================
   COMBAT PROGRESSION
   ============================== */

.combat-skill-panel {
    display: grid;
    gap: 10px;
}

.combat-skill-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.combat-overall-level {
    padding: 6px 10px;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.1);

    font-size: 0.78rem;
}

.combat-level-help {
    margin: 0;

    font-size: 0.7rem;
    line-height: 1.5;
}

.combat-style-level-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(120px, 1fr));

    gap: 8px;
}

.combat-style-level-card {
    display: grid;
    gap: 4px;

    padding: 9px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 10px;

    background: rgba(159, 139, 180, 0.05);

    font-size: 0.7rem;
}

.combat-style-level-card.active {
    border-color: var(--peach);

    background: rgba(201, 149, 131, 0.1);
}

.combat-style-level-card small {
    font-size: 0.62rem;
}

.combat-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(90px, 1fr));

    gap: 7px;
}

.combat-stat-grid p {
    display: grid;
    gap: 2px;

    margin: 0;
    padding: 7px 8px;

    border: 1px solid rgba(159, 139, 180, 0.2);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.05);

    font-size: 0.64rem;
}

.combat-stat-grid strong {
    font-size: 0.74rem;
}

.combat-potion-controls {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

#combat-spell-text {
    font-size: 0.63rem;
}


/* ==============================
   COMBAT BOARD
   Replaces the central map only
   while the player chooses to
   watch an active fight.
   ============================== */

.combat-viewport {
    position: absolute;
    inset: 0;

    overflow: hidden;

    border-radius: inherit;

    background: #241f2a;

    z-index: 30;
}

.combat-viewport[hidden] {
    display: none;
}

.combat-background-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.combat-view-toggle,
.combat-return-button {
    position: absolute;
    top: 14px;
    right: 14px;

    padding: 8px 12px;

    border: 1px solid rgba(255, 250, 242, 0.46);
    border-radius: 999px;

    background: rgba(31, 25, 38, 0.84);
    color: var(--cream);

    font: inherit;
    font-size: 0.72rem;
    font-weight: bold;

    cursor: pointer;

    backdrop-filter: blur(7px);

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

.combat-view-toggle {
    z-index: 8;
}

.combat-return-button {
    z-index: 25;
}

.combat-return-button[hidden] {
    display: none;
}

.combat-board-player,
.combat-board-enemy {
    position: absolute;
    top: 8%;

    display: grid;
    gap: 10px;

    width: min(27%, 330px);
    min-width: 235px;

    padding: 14px;

    border: 1px solid rgba(255, 250, 242, 0.40);
    border-radius: 18px;

    background: rgba(255, 250, 242, 0.88);
    color: var(--brown);

    backdrop-filter: blur(8px);

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.26);

    z-index: 4;
}

.combat-board-player {
    left: 3%;
}

.combat-board-enemy {
    right: 3%;
}

.combat-board-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.combat-board-heading div {
    display: grid;
    gap: 2px;
}

.combat-board-heading small {
    font-size: 0.62rem;
    opacity: 0.74;
}

.combat-board-heading strong {
    font-size: 0.92rem;
}

.combat-board-heading > span {
    padding: 4px 7px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.14);

    font-size: 0.64rem;
    font-weight: bold;
}

.combat-board-vital {
    display: grid;
    gap: 5px;
}

.combat-board-vital-heading {
    display: flex;
    justify-content: space-between;

    gap: 8px;

    font-size: 0.66rem;
}

.combat-board-bar-track {
    overflow: hidden;

    height: 10px;

    border: 1px solid rgba(75, 64, 59, 0.18);
    border-radius: 999px;

    background: rgba(75, 64, 59, 0.12);
}

.combat-board-bar-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    transition: width 180ms ease;
}

.combat-hp-fill {
    background: rgba(188, 90, 88, 0.84);
}

.combat-mana-fill {
    background: rgba(117, 107, 183, 0.84);
}

.combat-enemy-hp-fill {
    background: rgba(173, 76, 90, 0.86);
}

.combat-board-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px;
}

.combat-board-stat-grid span {
    display: flex;
    justify-content: space-between;

    gap: 6px;

    padding: 5px 7px;

    border-radius: 8px;

    background: rgba(159, 139, 180, 0.10);

    font-size: 0.61rem;
}

.combat-supply-table {
    display: grid;
    gap: 5px;
}

.combat-supply-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;

    gap: 5px;

    font-size: 0.62rem;
}

.combat-supply-row[hidden] {
    display: none;
}

.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select {
    min-width: 0;

    padding: 5px 6px;

    border: 1px solid rgba(75, 64, 59, 0.20);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.82);
    color: var(--brown);

    font: inherit;
    font-size: 0.61rem;
}

.combat-supply-row button {
    cursor: pointer;
}

.combat-supply-row button:disabled,
.combat-supply-row select:disabled {
    opacity: 0.55;
    cursor: default;
}

.combat-auto-panel {
    display: grid;
    gap: 5px;

    padding-top: 7px;

    border-top: 1px solid rgba(75, 64, 59, 0.14);
}

.combat-auto-toggle {
    display: flex;
    align-items: center;

    gap: 6px;

    font-size: 0.64rem;
    font-weight: bold;
}

.combat-auto-thresholds {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.combat-auto-thresholds[hidden] {
    display: none;
}

.combat-auto-thresholds label {
    display: flex;
    align-items: center;

    gap: 4px;

    font-size: 0.6rem;
}

#combat-auto-description {
    font-size: 0.58rem;
    line-height: 1.35;
    opacity: 0.78;
}

.combat-enemy-stage {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 145px;
}

.combat-enemy-stage img {
    width: min(78%, 190px);
    max-height: 155px;

    object-fit: contain;

    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.24));
}

.combat-enemy-stage img.sprite-missing {
    display: none;
}

.combat-loot-codex {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 5px;
}

.combat-loot-slot {
    display: grid;
    place-items: center;

    min-height: 45px;

    padding: 4px;

    border: 1px solid rgba(75, 64, 59, 0.16);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.58);

    text-align: center;
}

.combat-loot-slot img {
    width: 24px;
    height: 24px;

    object-fit: contain;
}

.combat-loot-slot strong {
    font-size: 0.51rem;
    line-height: 1.15;
}

.combat-loot-slot.unknown {
    font-size: 0.66rem;
    font-weight: bold;
}

.combat-board-casts {
    position: absolute;
    left: 50%;
    bottom: 4%;

    display: grid;
    gap: 7px;

    width: min(44%, 540px);

    padding: 10px 12px;

    border: 1px solid rgba(255, 250, 242, 0.40);
    border-radius: 15px;

    background: rgba(31, 25, 38, 0.84);
    color: var(--cream);

    backdrop-filter: blur(8px);

    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.24);

    transform: translateX(-50%);

    z-index: 5;
}

.combat-cast-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;

    gap: 8px;

    font-size: 0.62rem;
}

.combat-cast-track {
    overflow: hidden;

    height: 8px;

    border: 1px solid rgba(255, 250, 242, 0.20);
    border-radius: 999px;

    background: rgba(255, 250, 242, 0.09);
}

.combat-cast-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: rgba(184, 167, 219, 0.92);
}

.combat-cast-fill.enemy {
    background: rgba(230, 160, 151, 0.92);
}

.combat-board-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 9px;
}

.combat-board-actions button {
    padding: 6px 9px;

    border: 1px solid rgba(255, 250, 242, 0.22);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.10);
    color: var(--cream);

    font: inherit;
    font-size: 0.61rem;
    font-weight: bold;

    cursor: pointer;
}

#board-combat-status {
    overflow: hidden;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.61rem;
}

.combat-effects-layer {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 7;
}

.combat-float-result {
    position: absolute;

    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(31, 25, 38, 0.80);
    color: var(--cream);

    font-size: 0.76rem;
    font-weight: bold;

    animation: combat-float-result 900ms ease-out forwards;
}

.combat-float-result.player {
    left: 61%;
    top: 37%;
}

.combat-float-result.enemy {
    left: 29%;
    top: 37%;
}

.combat-float-result.critical {
    font-size: 0.88rem;
}

@keyframes combat-float-result {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.94);
    }

    18% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-24px) scale(1.04);
    }
}



@media (max-width: 1100px) {
    .combat-board-player,
    .combat-board-enemy {
        top: 6%;

        width: 30%;
        min-width: 205px;

        padding: 10px;
    }

    .combat-board-casts {
        width: 50%;
    }

    .combat-enemy-stage {
        min-height: 105px;
    }

    .combat-enemy-stage img {
        max-height: 115px;
    }
}

#combat-viewport:not([hidden]) ~ .map-zoom-controls,
#combat-viewport:not([hidden]) ~ .map-back-button {
    display: none;
}



/* ==============================
   COMBAT UI V4
   Compact side navigation,
   readable battle cards and
   inventory-style session loot.
   ============================== */

.combat-side-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 5px;

    position: sticky;
    top: 0;

    padding: 0 0 8px;

    background: rgba(25, 21, 31, 0.96);

    z-index: 3;
}

.combat-side-tab {
    min-width: 0;

    padding: 7px 5px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);
    color: rgba(238, 231, 241, 0.82);

    font: inherit;
    font-size: 0.58rem;
    font-weight: bold;

    cursor: pointer;
}

.combat-side-tab:hover,
.combat-side-tab.selected {
    border-color: rgba(201, 149, 131, 0.58);

    background: rgba(201, 149, 131, 0.14);
    color: rgba(255, 244, 238, 0.98);
}

[data-combat-side-panel][hidden] {
    display: none;
}

.combat-overall-xp {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin: 0;

    font-size: 0.66rem;
}

.combat-selected-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.combat-selected-meta span {
    display: grid;

    gap: 2px;

    padding: 6px 7px;

    border: 1px solid rgba(159, 139, 180, 0.18);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.05);

    font-size: 0.59rem;
}

.combat-selected-meta strong {
    font-size: 0.68rem;
}

.combat-selected-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    gap: 6px;
}

.combat-status-line {
    margin: 0;

    font-size: 0.62rem;
    line-height: 1.4;
}

.combat-empty-selection {
    display: grid;

    gap: 5px;
}

.combat-empty-selection[hidden] {
    display: none;
}

.combat-empty-selection h2,
.combat-empty-selection p {
    margin: 0;
}

.combat-creature-help {
    margin-bottom: 8px;

    font-size: 0.62rem;
    line-height: 1.45;
}

.combat-monster-list {
    grid-template-columns: 1fr;

    gap: 6px;

    margin-top: 8px;
}

.combat-monster-card {
    cursor: default;
}

.combat-monster-card:hover,
.combat-monster-card.selected {
    border-color: rgba(201, 149, 131, 0.44);
}

.combat-monster-card.locked {
    opacity: 0.72;

    cursor: default;
}

.combat-monster-copy {
    display: grid;

    gap: 2px;
}

.combat-monster-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 5px;

    margin-top: 3px;
}

.combat-monster-action {
    padding: 5px 7px;

    border: 1px solid rgba(159, 139, 180, 0.20);
    border-radius: 7px;

    background: rgba(159, 139, 180, 0.06);
    color: rgba(238, 231, 241, 0.84);

    font: inherit;
    font-size: 0.56rem;
    font-weight: bold;

    cursor: pointer;
}

.combat-monster-action:hover:not(:disabled),
.combat-monster-action.primary {
    border-color: rgba(201, 149, 131, 0.44);

    background: rgba(201, 149, 131, 0.10);
}

.combat-monster-action:disabled {
    opacity: 0.42;
    cursor: default;
}

.combat-monster-loot-preview {
    grid-column: 1 / -1;

    margin-top: 3px;
    padding-top: 7px;

    border-top: 1px solid rgba(159, 139, 180, 0.15);
}

.combat-monster-loot-preview[hidden] {
    display: none;
}

.combat-monster-loot-preview .combat-loot-slot small {
    font-size: 0.45rem;
    opacity: 0.64;
}


/* Combat artwork is the actual map replacement layer.
   The inline custom property keeps the URL relative to
   index.html instead of relative to this CSS file. */
.combat-viewport {
    background-color: #28202f;
    background-image:
        linear-gradient(
            rgba(24, 19, 29, 0.04),
            rgba(24, 19, 29, 0.04)
        ),
        var(--combat-panel-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.combat-background-image {
    display: none;
}


/* The battle cards sit over a light illustrated background,
   so they use their own dark text palette instead of the
   game's inverted global --brown variable. */
.combat-board-player,
.combat-board-enemy {
    border-color: rgba(75, 64, 59, 0.30);

    background: rgba(255, 250, 242, 0.95);
    color: #403630;
}

.combat-board-player *,
.combat-board-enemy * {
    color: inherit;
}

.combat-board-heading small {
    color: rgba(64, 54, 48, 0.72);
    opacity: 1;
}

.combat-board-heading > span {
    background: rgba(102, 116, 93, 0.13);
    color: #403630;
}

.combat-board-stat-grid span {
    background: rgba(102, 116, 93, 0.10);
    color: #403630;
}

.combat-board-vital-heading,
.combat-auto-toggle,
.combat-auto-thresholds label,
#combat-auto-description {
    color: #403630;
}

.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select {
    border-color: rgba(75, 64, 59, 0.28);

    background: rgba(255, 255, 255, 0.94);
    color: #403630;
}

.combat-supply-row select option,
.combat-auto-thresholds select option {
    background: #fffaf2;
    color: #403630;
}

.combat-loot-slot {
    border-color: rgba(75, 64, 59, 0.22);

    background: rgba(255, 255, 255, 0.76);
    color: #403630;
}

.combat-loot-slot.unknown {
    color: rgba(64, 54, 48, 0.70);
}


/* ==============================
   COMPACT SESSION TRACKERS
   ============================== */

.session-loot-panel {
    gap: 7px;
}

.session-loot-heading {
    align-items: center;
}

.session-loot-heading-actions {
    display: flex;
    align-items: center;

    gap: 5px;

    flex: 0 0 auto;
}

.session-loot-total {
    padding: 4px 6px;

    border-radius: 999px;

    background: rgba(185, 200, 174, 0.07);
    color: rgba(205, 222, 196, 0.90);

    font-size: 0.39rem;
}

.session-loot-summary,
.session-loot-note {
    display: none;
}

.session-loot-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 5px;
}

.session-loot-slot {
    position: relative;

    min-width: 0;

    aspect-ratio: 1;

    overflow: hidden;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.08);
}

.session-loot-slot-image {
    display: block;

    width: 100%;
    height: 100%;

    padding: 3px;

    object-fit: contain;
}

.session-loot-slot-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    font-size: 0.88rem;

    opacity: 0.68;
}

.session-loot-slot-quantity {
    position: absolute;
    right: 2px;
    bottom: 2px;

    padding: 1px 3px;

    border-radius: 5px;

    background: rgba(25, 21, 31, 0.92);
    color: rgba(255, 250, 242, 0.96);

    font-size: 0.48rem;
    line-height: 1.2;
}

.session-loot-empty {
    min-height: 54px;

    padding: 10px 7px;
}

@media (max-width: 620px) {
    .session-loot-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}



/* ==============================
   COMBAT UI V5
   Reliable battle artwork,
   clearer board cards and a
   shorter three-tab side panel.
   ============================== */

.combat-viewport {
    background: #28202f;
}

.combat-background-image {
    display: block !important;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    z-index: 0;
}


/* Combat cards sit on top of a bright illustrated scene.
   Give them their own high-contrast palette instead of
   inheriting any of the normal sidebar text colours. */
.combat-board-player,
.combat-board-enemy {
    border: 1px solid rgba(255, 250, 242, 0.26);

    background: rgba(35, 29, 39, 0.94);
    color: #fffaf2;

    box-shadow:
        0 9px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.04);
}

.combat-board-player strong,
.combat-board-player b,
.combat-board-player span,
.combat-board-player small,
.combat-board-player label,
.combat-board-enemy strong,
.combat-board-enemy b,
.combat-board-enemy span,
.combat-board-enemy small,
.combat-board-enemy label {
    color: #fffaf2;
}

.combat-board-heading small,
#combat-auto-description {
    color: rgba(255, 250, 242, 0.74);
}

.combat-board-heading > span,
.combat-board-stat-grid span {
    background: rgba(255, 250, 242, 0.09);
    color: #fffaf2;
}

.combat-board-bar-track {
    border-color: rgba(255, 250, 242, 0.18);
    background: rgba(0, 0, 0, 0.26);
}

.combat-auto-panel {
    border-top-color: rgba(255, 250, 242, 0.14);
}

.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select {
    border-color: rgba(255, 250, 242, 0.28);

    background: rgba(255, 250, 242, 0.96);
    color: #352d32 !important;
}

.combat-supply-row select option,
.combat-auto-thresholds select option {
    background: #fffaf2;
    color: #352d32;
}

.combat-board-enemy .combat-loot-slot {
    border-color: rgba(255, 250, 242, 0.16);

    background: rgba(255, 250, 242, 0.08);
    color: #fffaf2;
}

.combat-board-enemy .combat-loot-slot strong,
.combat-board-enemy .combat-loot-slot small,
.combat-board-enemy .combat-loot-slot.unknown {
    color: #fffaf2;
}

.combat-board-enemy .combat-loot-slot.unknown {
    opacity: 0.72;
}


/* ==============================
   COMBAT SIDE PANEL
   Fight = current target/session.
   Creatures = browse + inspect loot.
   Progress = combat/style XP.
   ============================== */

.combat-side-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.combat-selected-card,
.combat-empty-selection,
.combat-skill-panel,
.combat-creatures-panel,
.combat-loot-inspector {
    margin-bottom: 8px;
}

.combat-loot-inspector-heading,
.combat-creatures-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;
}

.combat-loot-inspector-heading h2,
.combat-loot-inspector-heading p,
.combat-creatures-heading h2,
.combat-creatures-heading p {
    margin: 0;
}

.combat-loot-close {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    padding: 0;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 7px;

    background: rgba(159, 139, 180, 0.08);
    color: rgba(255, 250, 242, 0.9);

    font: inherit;
    font-size: 0.82rem;
    line-height: 1;

    cursor: pointer;
}

.combat-loot-close:hover {
    border-color: rgba(201, 149, 131, 0.5);
    background: rgba(201, 149, 131, 0.12);
}

.combat-loot-inspector-meta {
    margin: 5px 0 8px;

    font-size: 0.58rem;
    line-height: 1.4;

    opacity: 0.74;
}

.combat-loot-inspector .combat-loot-codex {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.combat-loot-inspector .combat-loot-slot {
    min-height: 54px;
}

.combat-loot-inspector .combat-loot-slot small {
    display: block;

    margin-top: 2px;

    font-size: 0.44rem;
    line-height: 1.15;

    opacity: 0.68;
}

.combat-monster-list {
    display: grid;
    grid-template-columns: 1fr;

    gap: 6px;
}

.combat-monster-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;

    gap: 7px;

    padding: 8px;
}

.combat-monster-actions {
    grid-template-columns: 1fr;

    margin-top: 0;
}

.combat-monster-action {
    width: 100%;
}


/* ==============================
   SESSION TRACKERS V5
   Compact inventory-like slots
   for every skill tracker.
   ============================== */

.session-loot-panel {
    padding: 9px;
}

.session-loot-heading {
    gap: 7px;
}

.session-loot-heading-copy {
    min-width: 0;
}

.session-loot-heading-copy .panel-label,
.session-loot-started {
    display: none;
}

.session-loot-heading h2 {
    margin: 0;

    font-size: 0.72rem;
}

.session-loot-total {
    white-space: nowrap;
}

.session-loot-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, 48px);

    justify-content: start;

    gap: 5px;
}

.session-loot-slot {
    width: 48px;
    height: 48px;

    aspect-ratio: auto;
}

.session-loot-slot-image {
    padding: 4px;
}

.session-loot-slot-quantity {
    right: 3px;
    bottom: 3px;

    font-size: 0.45rem;
}

.session-loot-empty {
    grid-column: 1 / -1;

    width: 100%;
    min-height: 0;

    margin: 0;
    padding: 7px;
}

@media (max-width: 520px) {
    .combat-monster-card {
        grid-template-columns: 1fr;
    }

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

    .session-loot-list {
        grid-template-columns:
            repeat(auto-fill, 44px);
    }

    .session-loot-slot {
        width: 44px;
        height: 44px;
    }
}



/* ==============================
   COMBAT UI V6
   Compact player-card tabs.
   ============================== */

.combat-player-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 5px;
}

.combat-player-tab {
    min-width: 0;

    padding: 6px 4px;

    border: 1px solid rgba(255, 250, 242, 0.18);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.07);
    color: rgba(255, 250, 242, 0.78) !important;

    font: inherit;
    font-size: 0.56rem;
    font-weight: bold;

    cursor: pointer;
}

.combat-player-tab:hover,
.combat-player-tab.selected {
    border-color: rgba(239, 201, 183, 0.52);

    background: rgba(239, 201, 183, 0.15);
    color: #fffaf2 !important;
}

.combat-player-panel {
    min-width: 0;
}

.combat-player-panel[hidden] {
    display: none;
}

.combat-player-panel .combat-auto-panel {
    padding-top: 0;

    border-top: 0;
}

.combat-board-player {
    max-height: min(78%, 560px);
    overflow: hidden;
}



/* ==============================
   PLAYER SIDEBAR TABS
   Bag / Quests / Gear / Tools
   share the fixed left column so
   the whole sidebar does not need
   one giant page-long scroll.
   ============================== */

.inventory-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    gap: 8px;

    overflow: hidden;
}

.sidebar-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 4px;

    flex: 0 0 auto;
}

.sidebar-tab {
    min-width: 0;

    padding: 6px 3px;

    border: 1px solid rgba(159, 139, 180, 0.20);
    border-radius: 8px;

    background: rgba(159, 139, 180, 0.07);
    color: rgba(238, 231, 241, 0.76);

    font: inherit;
    font-size: 0.53rem;
    font-weight: bold;

    cursor: pointer;
}

.sidebar-tab:hover,
.sidebar-tab.selected {
    border-color: rgba(239, 201, 183, 0.50);

    background: rgba(239, 201, 183, 0.14);
    color: #fffaf2;
}

.sidebar-tab-content {
    min-width: 0;
    min-height: 0;

    overflow: hidden;
}

.sidebar-tab-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding-right: 2px;

    scrollbar-width: thin;
}

.sidebar-tab-panel[hidden] {
    display: none;
}

.sidebar-tab-panel > .sidebar-section {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
}

/* The quest tab has a maximum of five active quests, but
   it can still scroll independently if objective text is long. */
.quest-tracker-section,
.equipment-section,
.tools-section,
.inventory-section {
    min-width: 0;
}



/* ==============================
   COMBAT CAST READABILITY
   The global theme uses inverted
   colour variables, so keep every
   cast/status label explicitly light.
   ============================== */

.combat-board-casts,
.combat-board-casts span,
.combat-board-casts strong,
.combat-board-casts b,
.combat-board-casts small,
#player-cast-label,
#enemy-cast-label,
#board-combat-status {
    color: #fffaf2 !important;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.combat-cast-row > span {
    font-weight: bold;
}

/* ==============================
   COMBAT CREATURE QUEST INSPECTOR
   Mirrors the shared recipe discovery
   cards used by gathering/mining/etc.
   ============================== */

.combat-inspector-section +
.combat-inspector-section {
    margin-top: 10px;
    padding-top: 9px;

    border-top: 1px solid rgba(159, 139, 180, 0.18);
}

.combat-inspector-section-title {
    margin: 0 0 6px;

    color: rgba(255, 250, 242, 0.94);

    font-size: 0.64rem;
    font-weight: 800;
}

.combat-inspector-quest-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.combat-inspector-quest-heading
.combat-inspector-section-title {
    margin-bottom: 0;
}

.combat-inspected-quest-count {
    flex-shrink: 0;

    padding: 2px 6px;

    border: 1px solid rgba(159, 139, 180, 0.24);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.09);
    color: rgba(255, 250, 242, 0.7);

    font-size: 0.48rem;
    font-weight: 700;
}

.combat-inspector-quest-hint {
    margin: 4px 0 7px;

    font-size: 0.52rem;
    line-height: 1.35;

    opacity: 0.6;
}

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

.combat-inspected-quests
.recipe-discovery-card {
    min-height: 44px;
}

.combat-inspected-quests
.recipe-card-name {
    color: rgba(255, 250, 242, 0.94);
}

.combat-inspected-quests
.recipe-card-status {
    color: rgba(255, 250, 242, 0.72);
}



/* ==============================
   MAGIC SPELL SUPPLY DETAIL
   ============================== */

.combat-spell-detail {
    display: block;

    padding: 5px 7px;

    border-radius: 7px;

    background: rgba(255, 250, 242, 0.08);
    color: rgba(255, 250, 242, 0.78) !important;

    font-size: 0.58rem;
    line-height: 1.35;
}

.combat-spell-detail[hidden] {
    display: none;
}



/* ==============================
   ALCHEMY / ACTIVE POTION EFFECTS
   ============================== */

.alchemy-effect-summary {
    margin: 6px 0 12px;
    padding: 8px 10px;

    border: 1px solid rgba(159, 139, 180, 0.28);
    border-radius: 10px;

    background: rgba(221, 212, 234, 0.16);

    line-height: 1.45;
}

.active-buffs-section {
    margin-top: 10px;
}

.active-buffs-list {
    display: grid;
    gap: 6px;
}

.active-buffs-empty {
    margin: 0;
    opacity: 0.68;
    font-size: 0.72rem;
}

.active-buff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 7px 8px;

    border: 1px solid rgba(159, 139, 180, 0.22);
    border-radius: 9px;

    background: rgba(221, 212, 234, 0.11);
}

.active-buff-row > div {
    min-width: 0;

    display: grid;
    gap: 1px;
}

.active-buff-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.7rem;
}

.active-buff-row small {
    opacity: 0.65;
    text-transform: capitalize;
    font-size: 0.58rem;
}

.active-buff-time {
    flex: 0 0 auto;

    padding: 3px 6px;

    border-radius: 999px;

    background: rgba(159, 139, 180, 0.16);

    font-size: 0.62rem;
    font-weight: 800;
}

.active-buff-effect {
    opacity: 0.82 !important;
    text-transform: none !important;
}



/* ==============================
   EQUIPPED COMBAT SUPPLIES
   ============================== */

.equipment-loadout {
    grid-template-areas:
        ". head ."
        "weapon chest ring"
        "amulet legs supply"
        ". gloves ."
        ". boots .";
}

.supply-slot {
    grid-area: supply;
    position: relative;
}

.equipment-stack-quantity {
    position: absolute;
    right: 3px;
    bottom: 2px;

    max-width: calc(100% - 6px);
    padding: 1px 3px;

    overflow: hidden;

    border-radius: 5px;

    background: rgba(25, 21, 31, 0.92);
    color: var(--cream);

    font-size: 0.47rem;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ==============================
   PANTRY ORGANISER
   ============================== */

.pantry-organiser {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.pantry-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pantry-category-tab {
    padding: 5px 7px;

    border: 1px solid rgba(221, 212, 234, 0.14);
    border-radius: 999px;

    background: rgba(159, 139, 180, 0.06);
    color: var(--cream);

    font: inherit;
    font-size: 0.46rem;
    font-weight: bold;

    cursor: pointer;
}

.pantry-category-tab:hover,
.pantry-category-tab.active {
    border-color: rgba(239, 201, 183, 0.42);
    background: rgba(239, 201, 183, 0.11);
}

.pantry-tab-manager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;

    padding: 7px;

    border: 1px solid rgba(221, 212, 234, 0.10);
    border-radius: 9px;

    background: rgba(20, 16, 25, 0.18);
}

.pantry-tab-manager select,
.pantry-tab-manager input {
    min-width: 0;
    padding: 5px 6px;

    border: 1px solid rgba(221, 212, 234, 0.16);
    border-radius: 7px;

    background: rgba(31, 25, 38, 0.9);
    color: var(--cream);

    font: inherit;
    font-size: 0.48rem;
}

.pantry-tab-manager .fishing-button {
    padding: 5px 6px;
    font-size: 0.44rem;
}

.pantry-item-tab-select {
    width: 100%;
    min-width: 0;
    margin-top: 3px;
    padding: 3px 5px;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 6px;

    background: rgba(31, 25, 38, 0.82);
    color: var(--cream);

    font: inherit;
    font-size: 0.43rem;
}

.cooking-recipe-card.level-locked {
    border-color: rgba(221, 212, 234, 0.12);
    opacity: 0.48;
}

.cooking-recipe-card.level-locked small {
    color: var(--peach);
    opacity: 1;
}


/* ==============================
   DEATH RECOVERY
   ============================== */

.death-recovery-chip {
    display: inline-flex;
    align-items: center;

    gap: 5px;
    padding: 5px 8px;

    border: 1px solid rgba(239, 201, 183, 0.38);
    border-radius: 999px;

    background: rgba(84, 48, 61, 0.9);
    color: #fffaf2;

    font-size: 0.56rem;
    white-space: nowrap;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.death-recovery-chip[hidden] {
    display: none;
}

.death-recovery-chip strong {
    color: #fffaf2;
    font-size: 0.58rem;
}

.collection-catch-chance {
    display: block;

    margin-top: 2px;

    font-size: 0.58rem;
    opacity: 0.75;
}

.collection-item.rarity-rare {
    border-color: var(--lavender);
}

.collection-item.rarity-epic {
    border-color: rgba(198, 174, 236, 0.72);
}

.collection-item.rarity-legendary {
    border-color: rgba(239, 201, 183, 0.88);
}

.collection-item.rarity-mythic {
    border-color: rgba(255, 250, 242, 0.92);
    box-shadow: 0 0 10px rgba(221, 212, 234, 0.12);
}



/* ==============================
   ENHANCED COOKED FISH
   Uses the base fish artwork with
   a warm orange quality outline.
   ============================== */

.inventory-slot.item-quality-enhanced {
    border: 2px solid #e89a45;

    box-shadow:
        inset 0 0 0 1px rgba(255, 223, 176, 0.32),
        0 0 10px rgba(232, 154, 69, 0.22);
}

.inventory-slot.item-quality-enhanced:hover,
.inventory-slot.item-quality-enhanced:focus-visible {
    border-color: #ffb85f;

    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 201, 0.42),
        0 0 14px rgba(232, 154, 69, 0.34);
}

.pantry-item-card.item-quality-enhanced
.pantry-item-image-shell {
    border: 2px solid #e89a45;

    box-shadow:
        inset 0 0 0 1px rgba(255, 223, 176, 0.28),
        0 0 10px rgba(232, 154, 69, 0.18);
}


/* ==============================
   ALPHA 0.1.1 QUICK HOPS
   ============================== */

.map-favorites {
    position: absolute;
    right: 18px;
    bottom: 64px;

    z-index: 24;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 6px;
}

.map-favorites[hidden],
.map-favorites-popover[hidden],
.map-favorite-jump[hidden] {
    display: none;
}

.map-favorites-quick {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;
}

.map-favorite-jump,
.map-favorites-toggle {
    min-height: 34px;

    padding: 7px 10px;

    border: 1px solid rgba(221, 212, 234, 0.28);
    border-radius: 10px;

    background: rgba(31, 25, 38, 0.92);
    color: var(--brown);

    font-size: 0.62rem;
    font-weight: bold;

    cursor: pointer;

    backdrop-filter: blur(6px);

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

.map-favorite-jump:hover,
.map-favorites-toggle:hover {
    border-color: rgba(239, 201, 183, 0.52);
    background: rgba(201, 149, 131, 0.92);
}

.map-favorites-toggle {
    width: 36px;
    padding: 0;

    font-size: 0.9rem;
}

.map-favorites-popover {
    width: min(260px, calc(100vw - 36px));

    padding: 10px;

    border: 1px solid rgba(221, 212, 234, 0.24);
    border-radius: 12px;

    background: rgba(31, 25, 38, 0.97);
    color: var(--brown);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(8px);
}

.map-favorites-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 8px;
    margin-bottom: 8px;
}

.map-favorites-heading strong {
    font-size: 0.65rem;
}

.map-favorites-heading small {
    font-size: 0.48rem;
    opacity: 0.58;
}

.map-favorites-popover label {
    display: grid;

    gap: 4px;
    margin-top: 7px;

    font-size: 0.52rem;
    font-weight: bold;
}

.map-favorites-popover select {
    width: 100%;

    padding: 7px 8px;

    border: 1px solid rgba(221, 212, 234, 0.20);
    border-radius: 8px;

    background: rgba(255, 250, 242, 0.96);
    color: #4b403b;
}

#combat-viewport:not([hidden]) ~ .map-favorites {
    display: none;
}


/* ==============================
   ALPHA 0.1.1 RUN PLAN
   ============================== */

.activity-plan-controls {
    grid-template-columns: 1fr;
}

.activity-plan-controls .activity-plan-mode-field,
.activity-plan-controls [data-plan-mode] {
    display: none !important;
}

.activity-plan-amount-field {
    grid-column: 1 / -1;
}

.activity-plan-estimate-row {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 7px 8px;

    border: 1px solid rgba(221, 212, 234, 0.12);
    border-radius: 9px;

    background: rgba(20, 16, 25, 0.22);
}

.activity-plan-estimate {
    min-width: 0;

    font-size: 0.48rem;
    opacity: 0.72;
}

.activity-plan-max-button {
    flex: 0 0 auto;

    padding: 6px 8px;

    border: 1px solid rgba(239, 201, 183, 0.28);
    border-radius: 8px;

    background: rgba(239, 201, 183, 0.08);
    color: var(--cream);

    font-size: 0.48rem;
    font-weight: bold;

    cursor: pointer;
}

.activity-plan-max-button:hover {
    border-color: rgba(239, 201, 183, 0.52);
    background: rgba(239, 201, 183, 0.14);
}


/* ==============================
   CLICKABLE CURRENT CAST
   ============================== */

.header-action-status.can-navigate .header-action-copy,
.header-action-status.can-navigate .header-action-progress-track {
    cursor: pointer;
}

.header-action-status.can-navigate .header-action-copy strong {
    text-decoration-color: rgba(239, 201, 183, 0.42);
    text-underline-offset: 2px;
}

.header-action-status.can-navigate:hover .header-action-copy strong {
    text-decoration-line: underline;
}


@media (max-width: 760px) {
    .map-favorites {
        right: 10px;
        bottom: 58px;
    }

    .map-favorite-jump {
        max-width: 105px;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .activity-plan-estimate-row {
        align-items: stretch;
        flex-direction: column;
    }
}