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

:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    min-height: 100dvh;
}

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

    font-family: Arial, sans-serif;
    color: #F6E7DD;

    background: linear-gradient(
        to bottom,
        #343558,
        #24263F
    );
}



/* ==============================
   TOP SCENE BANNER
   ============================== */

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

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

    height: 100vh;
    height: 100dvh;
}

.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: #24263F;
    border-bottom: 1px solid #343558;
}

.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 #9E629538;
    border-radius: 18px;

    background: #24263FF5;
}

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

    border-top: 1px solid #9E62952E;
}

.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-heading-actions {
    display: flex;
    align-items: center;

    gap: 4px;
}

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

    border-radius: 999px;

    background: #9E629529;

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

.inventory-sort-button {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    padding: 0;

    border: 1px solid #9E629552;
    border-radius: 8px;

    background: #9E62951F;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;
}

.inventory-sort-button:hover,
.inventory-sort-button:focus-visible {
    border-color: #E7968E;

    background: #B48B9530;
}

.inventory-sort-button.active {
    border-color: #F7CDA98A;

    background: #D59A5C2B;
    color: #F7CDA9;
}



/* ==============================
   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 #9E629547;
    border-radius: 8px;

    background: #9E62951A;
}

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

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

.inventory-slot.equippable:hover {
    border-color: #E7968E;

    background: #B48B9524;
}

.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: #24263FE6;

    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 #9E629538;
    border-radius: 7px;

    background: #9E629514;
    color: #F6E7DD;

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

    text-align: center;

    cursor: pointer;
}

.loadout-tab:hover {
    border-color: #B48B958C;

    background: #B48B951A;
}

.loadout-tab.active {
    border-color: #E7968E;

    background: #B48B9529;
}

.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 #9E62953D;
    border-radius: 8px;

    background: #9E629514;
    color: #F6E7DD;

    cursor: pointer;
}

.equipment-slot:hover,
.tool-slot:hover {
    border-color: #E7968E;

    background: #B48B951F;
}

.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: #B48B957A;

    background: #B48B951A;
}

.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: #343558;

    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
   ============================== */

html.cloud-startup-running .map-marker,
html.offline-catchup-running .map-marker {
    pointer-events: none;
}



.map-marker {
    position: absolute;

    min-width: 120px;

    padding: 9px 12px;

    border: 2px solid #CC779047;
    border-radius: 14px;

    background: #343558E6;
    color: #F6E7DD;

    font-weight: bold;

    cursor: pointer;
    pointer-events: auto;

    backdrop-filter: blur(4px);

    box-shadow: 0 4px 12px #24263F47;

    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: #E7968E;

    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-label {
    display: inline-flex;

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

    text-align: center;

    line-height: 1.15;
}

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

    padding: 0;

    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.map-marker.named-hotspot:not([data-marker-type="building"]) {
    width: 196px;
    min-height: 50px;
}

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

.map-marker-title-banner {
    position: absolute;
    left: 50%;

    display: flex;

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

    width: 196px;
    min-height: 50px;

    padding: 8px 34px;

    color: #634A33;

    font-size: 0.82rem;
    font-weight: 700;

    white-space: nowrap;

    text-shadow: 0 1px 0 #F6E7DDB8;

    background:
        url("../assets/images/ui/location-title-banner.png") center / 100% 100% no-repeat;

    background-color: transparent;

    filter: drop-shadow(0 6px 10px #24263F38);

    pointer-events: none;
}

.map-marker[data-marker-type="building"] .map-marker-title-banner {
    top: -10px;

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

.map-marker:not([data-marker-type="building"]) .map-marker-title-banner {
    top: 50%;

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

.map-marker-title-banner.long-label {
    font-size: 0.74rem;
}

.map-marker-title-banner.very-long-label {
    font-size: 0.66rem;
}

.map-marker[data-marker-type="combat"] {
    width: 132px;
    min-height: 38px;
}

.map-marker[data-marker-type="combat"] .map-marker-title-banner {
    width: 132px;
    min-height: 38px;

    padding: 6px 23px;

    font-size: 0.68rem;
}

.map-marker[data-marker-type="combat"] .map-marker-title-banner.long-label {
    font-size: 0.61rem;
}

.map-marker[data-marker-type="combat"] .map-marker-title-banner.very-long-label {
    font-size: 0.56rem;
}

.map-marker.locked {
    opacity: 0.58;

    border-color: #9E629573;
    background: #343558D1;

    filter: saturate(0.6);
}

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

.map-marker.named-hotspot.locked {
    border-color: transparent;
    background: transparent;

    opacity: 0.72;
    filter: none;
}

.map-marker.named-hotspot.locked .map-marker-title-banner {
    filter:
        grayscale(0.18)
        saturate(0.72)
        drop-shadow(0 6px 10px #24263F2E);
}

.map-marker.named-hotspot.locked:hover {
    opacity: 0.9;
}



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

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

    padding: 0;

    pointer-events: none;

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

    background: transparent;
    color: transparent;

    opacity: 1;

    box-shadow: none;
    filter: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.map-marker.building-hotspot .map-marker-title-banner {
    width: 204px;

    cursor: pointer;
    pointer-events: auto;
}

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

    border-color: transparent;
    background: transparent;
}

.map-marker.building-hotspot:focus-visible
.map-marker-title-banner {
    outline: 2px solid #F7CDA9B8;
    outline-offset: 2px;
}

.map-marker.building-hotspot.locked .map-marker-title-banner {
    filter: grayscale(0.18) saturate(0.75) drop-shadow(0 6px 10px #24263F2E);
}

.map-marker.building-hotspot.has-available-quest .map-marker-title-banner {
    filter:
        saturate(1.22)
        brightness(1.08)
        drop-shadow(0 0 8px #F7CDA9C2)
        drop-shadow(0 0 14px #F7CDA975)
        drop-shadow(0 7px 12px #24263F47);

    animation: quest-board-banner-glow 2s ease-in-out infinite;
}

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

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

    z-index: 20;

    padding: 10px 18px;

    border: 2px solid #D59A5C73;
    border-radius: 999px;

    background:
        radial-gradient(circle at top, #F6E7DD52, transparent 52%),
        linear-gradient(180deg, #D59A5CF2, #D59A5CF5);
    color: #F6E7DD;

    font-weight: 700;
    letter-spacing: 0.02em;

    cursor: pointer;

    backdrop-filter: blur(5px);

    box-shadow:
        0 6px 16px #24263F42,
        inset 0 1px 0 #F6E7DD33;
}

.map-back-button::before {
    content: "✦";

    margin-right: 7px;

    color: #F7CDA9;
}

.map-back-button:hover {
    transform: translateY(-1px);

    background:
        radial-gradient(circle at top, #F6E7DD66, transparent 52%),
        linear-gradient(180deg, #D59A5CF5, #D59A5CFA);
}

.map-back-button:focus-visible {
    outline: 3px solid #F7CDA9B8;
    outline-offset: 2px;
}

.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 #CC779047;
    border-radius: 11px;

    background: #343558EB;
    color: #F6E7DD;

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

    cursor: pointer;

    backdrop-filter: blur(5px);

    box-shadow: 0 3px 10px #24263F3D;
}

.map-zoom-button:hover:not(:disabled) {
    background: #E7968E;
}

.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: #24263FF5;
}

.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 #343558;
    border-radius: 18px;

    text-align: center;
}

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

    border: 1px solid #9E62954C;
    border-radius: 11px;

    background: #343558E6;

    box-shadow: 0 2px 6px #24263F2E;
}



/* ==============================
   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: #9E62952E;

    font-size: 0.68rem;
}


/* Production skills keep progression visible
   above their recipe/content panels. */
.production-skill-panel {
    display: block;
}

.production-skill-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 7px 10px;

    width: 100%;
}

.production-skill-heading h2 {
    margin: 0;
}

.production-skill-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.production-skill-meta > span {
    display: inline-flex;
    align-items: baseline;

    gap: 4px;
    padding: 4px 7px;

    border-radius: 7px;

    background: #9E62952E;

    font-size: 0.68rem;
}

.production-skill-meta strong {
    color: #F6E7DD;
}

.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: #9E62952E;

    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: #D59A5C;
    color: #F6E7DD;

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

    cursor: pointer;
}

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

#stop-fishing-button {
    background: #3B3983E6;
}

.fishing-button:hover:not(:disabled) {
    background: #E7968E;
}

.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: #343558;
}

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

    border-radius: inherit;

    background: linear-gradient(
        to right,
        #D59A5C,
        #E7968E
    );
}

#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: #9E629533;

    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 #D59A5C;
    border-radius: 8px;

    background: #343558EB;
}

.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: #343558;
}

.collection-item.rarity-common {
    border-color: #D59A5C;
}

.collection-item.rarity-uncommon {
    border-color: #E7968E;
}



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

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

    border: 1px solid #9E629538;
    border-radius: 12px;

    background: #24263F85;
}

.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 #343558;
    border-radius: 8px;

    background: #343558EB;
}

.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: #E7968E;
}

.recipe-card-unlocked {
    border-color: #D59A5C;

    background: #D59A5C29;
}

.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 #343558;
    border-radius: 16px;

    background: #24263F;
    color: #F6E7DD;

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

    opacity: 0;
    pointer-events: none;

    box-shadow: 0 5px 20px #24263F47;

    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%;

    z-index: 50;

    padding: 16px 24px;

    border: 2px solid #E7968E;
    border-radius: 18px;

    background: #24263F;
    color: #F6E7DD;

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

    opacity: 0;
    pointer-events: none;

    box-shadow: 0 5px 20px #24263F47;

    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;
        min-height: 100dvh;
    }

    .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: transparent;

        background: transparent;
    }

    .map-marker.building-hotspot:hover .map-marker-title-banner,
    .map-marker:not([data-marker-type="building"]):hover .map-marker-title-banner {
        filter: brightness(1.02) drop-shadow(0 8px 12px #24263F3D);
    }

    .map-marker.building-hotspot.has-available-quest:hover .map-marker-title-banner {
        filter:
            saturate(1.28)
            brightness(1.12)
            drop-shadow(0 0 10px #F6E7DDD6)
            drop-shadow(0 0 17px #F7CDA98A)
            drop-shadow(0 8px 14px #24263F4C);
    }
}

@keyframes quest-board-banner-glow {
    0%,
    100% {
        transform: translate(-50%, -100%) scale(1);
    }

    50% {
        transform: translate(-50%, -100%) scale(1.025);
    }
}


/* ==============================
   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 #9E62954C;
    border-radius: 9px;

    background: #9E62951F;
    color: #F6E7DD;

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

    cursor: pointer;
}

.header-action-button:hover {
    border-color: #E7968E;

    background: #B48B9524;
}

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

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    line-height: 1;
}

.header-action-button .header-action-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}

.panel-title-with-icon {
    display: flex;
    align-items: center;

    gap: 8px;
}

.panel-title-icon {
    display: block;

    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    object-fit: contain;
}

.panel-tab-icon {
    display: block;

    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    object-fit: contain;
}

.skills-view-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


/* Secondary header actions stay inline on desktop/tablet, but can collapse
   into the dedicated mobile menu without duplicating any real action button. */
.header-secondary-actions {
    display: contents;
}

.mobile-header-menu-toggle,
.mobile-player-text {
    display: none;
}

/* Account originally sat immediately before Settings. Keep that desktop order
   even though its DOM position is now outside the collapsible mobile group. */
#account-button {
    order: 90;
}

.header-secondary-actions #settings-button {
    order: 100;
}


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

    padding: 2px 5px;

    border-radius: 999px;

    background: #E7968E;
    color: #24263F;

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



/* ==============================
   GARDENING READY INDICATOR
   ============================== */

.gardening-ready-button {
    border-color: #D59A5C7A;

    background: #D59A5C29;
}

.gardening-ready-button:hover {
    border-color: #D59A5C;

    background: #D59A5C3D;
}

.gardening-ready-button[hidden] {
    display: none;
}

.gardening-ready-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;

    padding: 2px 6px;

    border: 1px solid #D59A5C6B;
    border-radius: 999px;

    background: #634A33;
    color: #F6E7DD;

    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}



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

.quest-tracker-list {
    display: grid;

    gap: 7px;
}

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

    border: 1px dashed #9E62953D;
    border-radius: 9px;

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

    opacity: 0.58;
}

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

    border: 1px solid #B48B9561;
    border-radius: 10px;

    background: #343558DB;
}

.quest-tracker-title {
    min-width: 0;
    margin: 0;

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

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

    gap: 7px;
}

.quest-card-header .quest-tracker-title {
    flex: 1 1 auto;
}

.quest-pin-button {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 27px;
    height: 27px;
    padding: 0;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #9E629524,
            #3B39831A
        );
    color: #F6E7DDC7;

    box-shadow:
        inset 0 1px 0 #F6E7DD0D,
        0 2px 7px #24263F1F;

    font: inherit;
    font-size: 0.70rem;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

.quest-pin-button:hover {
    transform: translateY(-1px);

    border-color: #F7CDA99E;

    background:
        linear-gradient(
            180deg,
            #F7CDA933,
            #B48B9517
        );

    box-shadow:
        inset 0 1px 0 #F6E7DD14,
        0 3px 9px #24263F2E;
}

.quest-pin-button:active {
    transform: translateY(0);
}

.quest-pin-button.is-pinned {
    border-color: #F7CDA9B8;

    background:
        linear-gradient(
            180deg,
            #F7CDA945,
            #B48B9521
        );

    box-shadow:
        inset 0 0 0 1px #F7CDA914,
        0 0 10px #F7CDA91A;
}

.quest-regular-description {
    margin: 4px 0 0;

    color: #F6E7DD9E;

    font-size: 0.53rem;
    font-style: italic;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

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

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

    color: #D59A5C;
}

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

    border-radius: 6px;

    background: #9E62951F;

    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: #9E629529;
}

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

    border-radius: inherit;

    background: #D59A5C;

    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: #D59A5C2E;
    color: #D59A5C;
}

.quest-skill-gate.blocked {
    background: #B48B9521;
    color: #E7968E;
}

.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: #343558C7;

    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 #9E629575;
    border-radius: 20px;

    background: #24263F;

    box-shadow: 0 18px 60px #24263F7A;
}

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

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

    border-bottom: 1px solid #9E629533;
}

.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 #9E62954C;
    border-radius: 9px;

    background: #9E62951A;
    color: #F6E7DD;

    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 #9E629547;
    border-radius: 8px;

    background: #343558E6;
    color: #F6E7DD;

    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 #9E62953D;
    border-radius: 8px;

    background: #9E629514;
    color: #F6E7DD;

    font-size: 0.59rem;

    cursor: pointer;
}

.recipe-book-section-button.active {
    border-color: #E7968E;

    background: #B48B9524;
}

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

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

.quest-book-section-reward {
    padding: 2px 5px;

    border: 1px solid rgba(185, 154, 216, 0.28);
    border-radius: 999px;

    background: rgba(59, 57, 131, 0.16);
    color: rgba(246, 231, 221, 0.66);

    font-size: 0.49rem;
    font-weight: 800;
    white-space: nowrap;
}

.quest-book-section-reward.ready {
    border-color: rgba(243, 182, 210, 0.58);

    background: rgba(158, 98, 149, 0.24);
    color: #F3B6D2;
}

.quest-book-section-reward.claimed {
    border-color: rgba(127, 139, 201, 0.54);

    background: rgba(127, 139, 201, 0.18);
    color: #D7C9F0;
}

.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 #9E62953D;
    border-radius: 11px;

    background: #343558D1;
}

.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: #9E629521;

    font-size: 0.54rem;
}

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

    opacity: 0.5;

    border-style: dashed;
}

.recipe-book-card-discovered {
    border-color: #B48B957A;
}

.recipe-book-card-unlocked {
    border-color: #D59A5C85;

    background: #D59A5C1F;
}

.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;
    }
}




/* ==============================
   QUEST BOOK
   ============================== */

.quest-book-window {
    width: min(1040px, 96vw);
}

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

.quest-book-card {
    min-width: 0;
    overflow: visible;

    border: 1px solid #9E62953D;
    border-radius: 11px;

    background: #343558D1;
}

.quest-book-card-locked {
    padding: 10px;

    border-style: dashed;

    background: #3435588F;
}

.quest-book-card-available {
    border-color: #E7968E8A;
}

.quest-book-card-active {
    border-color: #F7CDA9A1;

    background: #B48B951B;
}

.quest-book-card-completed {
    border-color: #D59A5C85;

    background: #D59A5C14;
}

.quest-book-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 9px;
    padding: 10px;
}

.quest-book-card-locked .quest-book-card-heading {
    padding: 0;
}

.quest-book-card-identity {
    display: grid;

    min-width: 0;

    gap: 3px;
}

.quest-book-id {
    color: #D59A5C;

    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.quest-book-title {
    margin: 0;

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

.quest-book-status {
    flex: 0 0 auto;

    padding: 3px 6px;

    border: 1px solid #9E629547;
    border-radius: 999px;

    background: #9E62951A;

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

.quest-book-status-locked {
    opacity: 0.62;
}

.quest-book-status-available {
    border-color: #E7968E8A;
    color: #F7CDA9;
}

.quest-book-status-active {
    border-color: #F7CDA9A1;

    background: #F7CDA91C;
    color: #F7CDA9;
}

.quest-book-status-completed {
    border-color: #D59A5C85;

    background: #D59A5C1C;
    color: #D59A5C;
}

.quest-book-body {
    padding: 0 10px 11px;

    border-top: 1px solid #9E629529;
}

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

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

.quest-book-meta-label {
    font-size: 0.55rem;
    font-weight: 800;

    opacity: 0.55;
}

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

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

    overflow-wrap: anywhere;
}

.quest-book-subheading {
    margin: 10px 0 4px;

    color: #E7968E;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.quest-book-story,
.quest-book-locked-hint,
.quest-book-stage-description,
.quest-book-hidden-stage-hint {
    margin: 4px 0 0;

    font-size: 0.59rem;
    line-height: 1.5;
}

.quest-book-story {
    color: #F6E7DDD1;
}

.quest-book-locked-hint,
.quest-book-hidden-stage-hint {
    font-style: italic;

    opacity: 0.6;
}

.quest-book-requirements {
    margin-top: 8px;
    padding: 7px 8px;

    border: 1px solid #9E62952E;
    border-radius: 9px;

    background: #24263F52;
}

.quest-book-card-locked .quest-book-requirements {
    margin-top: 9px;
}

.quest-book-requirement-list,
.quest-book-stage-list,
.quest-book-stage-objectives {
    margin: 0;
    padding-left: 18px;
}

.quest-book-requirement-list,
.quest-book-stage-list {
    display: grid;

    gap: 5px;
}

.quest-book-requirement {
    font-size: 0.57rem;
    line-height: 1.35;
}

.quest-book-requirement.complete {
    color: #D59A5C;
}

.quest-book-requirement.incomplete {
    color: #F6E7DDC7;
}

.quest-book-stage {
    padding-left: 2px;
}

.quest-book-stage-title {
    font-size: 0.6rem;
}

.quest-book-stage-objectives {
    display: grid;

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

.quest-book-stage-objectives li {
    font-size: 0.56rem;
    line-height: 1.35;

    opacity: 0.78;
}

@media (max-width: 700px) {
    .quest-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 #9E629561;
    border-radius: 11px;

    background: #343558F5;

    box-shadow: 0 8px 24px #24263F57;

    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: #9E629521;

    font-size: 1.05rem;
}

.action-notification-icon img {
    display: block;

    width: 28px;
    height: 28px;

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

    object-fit: contain;
}

.action-notification-text {
    display: grid;

    gap: 2px;
}

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

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

    color: #D59A5C;
}

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

    color: #E7968E;
}

.action-rarity-uncommon {
    border-color: #D59A5C94;
}

.action-rarity-rare {
    border-color: #9E6295B8;
}



/* ==============================
   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 #9E62953D;
    border-radius: 9px;

    background: #343558C2;
    color: #F6E7DD;

    text-align: left;

    cursor: pointer;
}

.cooking-recipe-card:hover,
.cooking-recipe-card.selected {
    border-color: #E7968E;

    background: #B48B951F;
}

.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: #9E629514;

    font-size: 0.59rem;
}

.cooking-ingredient.missing {
    color: #E7968E;
}

.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: #9E629514;

    font-size: 0.56rem;
}

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

    margin: 0;
    padding: 10px;

    border: 1px dashed #9E62953D;
    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;
    }
}



/* ==============================
   GARDENING
   ============================== */

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

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

    border: 1px solid #9E629533;
    border-radius: 9px;

    background: #9E629512;
}

.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: #343558C7;

    cursor: default;
}

.settings-window {
    position: relative;

    z-index: 1;

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

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow: 0 18px 60px #24263F7A;
}

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

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

    border-bottom: 1px solid #9E629533;
}

.settings-header h2 {
    margin: 0;

    font-size: 1rem;
}

.settings-content {
    display: grid;

    gap: 9px;
    padding: 11px;
}

.settings-card {
    padding: 11px;

    border: 1px solid #9E629538;
    border-radius: 11px;

    background: #343558B8;
}

.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: #D59A5C;
}

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

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

.settings-legal-link {
    display: grid;
    place-items: center;

    min-height: 34px;
    padding: 8px 10px;

    border: 1px solid #9E629547;
    border-radius: 8px;

    background: #9E629514;
    color: #F6E7DD;

    font-size: 0.61rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.settings-legal-link:hover,
.settings-legal-link:focus-visible {
    border-color: #E7968E;
    background: #B48B951A;
}

.settings-legal-link-danger {
    border-color: #F7CDA957;
    background: #CC779026;
}


.settings-danger-card {
    border-color: #F7CDA957;

    background:
        linear-gradient(
            135deg,
            #CC779057,
            #343558C7
        );
}

.settings-reset-button {
    width: 100%;

    margin-top: 7px;
    padding: 9px 12px;

    border: 1px solid #F7CDA980;
    border-radius: 9px;

    background: #CC7790B8;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;

    cursor: pointer;

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

.settings-reset-button:hover {
    transform: translateY(-1px);

    border-color: #F7CDA9C7;

    background: #CC7790DB;
}

.settings-reset-button:focus-visible {
    outline: 2px solid #E7968E;
    outline-offset: 2px;
}

.settings-reset-button:disabled {
    opacity: 0.55;

    cursor: wait;
}

.settings-reset-note {
    margin-top: 7px !important;

    color: #F7CDA9C7;
}

.settings-delete-account-button {
    width: 100%;

    margin-top: 9px;
    padding: 9px 12px;

    border: 1px solid #F7CDA980;
    border-radius: 9px;

    background: #9A4059C7;
    color: #FFF4ED;

    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;

    cursor: pointer;

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

.settings-delete-account-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #F7CDA9D9;
    background: #B34B68E0;
}

.settings-delete-account-button:focus-visible {
    outline: 2px solid #F7CDA9;
    outline-offset: 2px;
}

.settings-delete-account-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.account-delete-window {
    width: min(500px, 96vw);
}

.account-delete-content {
    display: grid;

    gap: 12px;
    padding: 14px;
}

.account-delete-warning {
    padding: 11px;

    border: 1px solid #F7CDA966;
    border-radius: 10px;

    background: #9A405926;
}

.account-delete-warning strong {
    display: block;

    color: #FFF4ED;

    font-size: 0.75rem;
}

.account-delete-warning p {
    margin: 7px 0 0;

    color: #F6E7DD;

    font-size: 0.64rem;
    line-height: 1.5;
}

.account-delete-countdown {
    margin: 0;
    padding: 9px 10px;

    border: 1px solid #D59A5C52;
    border-radius: 9px;

    background: #D59A5C14;
    color: #F7CDA9;

    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

.account-delete-confirmation {
    display: grid;

    gap: 6px;

    color: #F6E7DD;

    font-size: 0.64rem;
}

.account-delete-confirmation input {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;

    border: 1px solid #9E629566;
    border-radius: 9px;

    background: #1E2038;
    color: #FFF4ED;

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

.account-delete-confirmation input:focus {
    border-color: #F7CDA9;
    outline: 2px solid #F7CDA940;
    outline-offset: 1px;
}

.account-delete-confirmation input:disabled {
    opacity: 0.55;
}

.account-delete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
}

.account-delete-actions .settings-delete-account-button {
    margin-top: 0;
}



@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: #343558DB;
}

.onboarding-window {
    position: relative;

    z-index: 1;

    width: min(520px, 96vw);

    padding: 16px;

    border: 1px solid #9E62957A;
    border-radius: 18px;

    background: #24263F;

    box-shadow:
        0 18px 60px #24263F80;
}

.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: #9E62952E;
}

.onboarding-dot.complete {
    background: #D59A5C6B;
}

.onboarding-dot.active {
    background: #E7968E;
}

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

    width: 54px;
    height: 54px;

    margin: 15px auto 10px;

    border: 1px solid #9E629542;
    border-radius: 16px;

    background: #9E62951A;

    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 #B48B9538;
    border-radius: 9px;

    background: #B48B9514;

    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: #F6E7DD;

    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 #9E629547;
    border-radius: 8px;

    background: #9E629514;
    color: #F6E7DD;

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

    cursor: pointer;
}

.settings-guide-button:hover,
.settings-guide-button:focus-visible {
    border-color: #E7968E;

    background: #B48B951A;
}

/* Settings → Build: help guide and Spook Builds community side by side;
   naturally wrap on smaller Android screens. */
.settings-build-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.settings-discord-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    text-align: center;
    text-decoration: none;
}

.settings-community-note {
    margin-top: 8px !important;
    opacity: 0.78;
}



@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 #9E629538;
    border-radius: 9px;

    background: #9E629512;
}

.header-action-bar.active {
    border-color: #B48B956B;

    background: #B48B9517;
}

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

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: #9E62951A;

    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.82rem;

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

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

    font-size: 0.68rem;

    opacity: 0.82;
}

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

    overflow: hidden;

    border-radius: 999px;

    background: #9E629529;
}

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

    border-radius: inherit;

    background: #E7968E;
}



/* ==============================
   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: #343558C7;

    cursor: default;
}

.skills-window {
    position: relative;

    z-index: 1;

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

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow:
        0 18px 60px #24263F7A;
}

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

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

    border-bottom:
        1px solid #9E629533;
}

.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: #E7968E;
}

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

    gap: 7px;
}

.skills-card {
    min-width: 0;

    padding: 8px;

    border: 1px solid #9E629533;
    border-radius: 9px;

    background: #343558B8;
}

.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: #B48B951C;

    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: #9E629524;
}

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

    border-radius: inherit;

    background: #D59A5C;
}



@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) {
    .death-recovery-chip {
        gap: 4px;
        padding: 4px 6px;
    }

    .death-recovery-repair-button {
        min-height: 20px;
        padding: 2px 5px;

        font-size: 0.48rem;
    }

    .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 #9E629533;
    border-radius: 9px;

    background: #343558B8;
    color: #F6E7DD;

    text-align: left;

    cursor: pointer;
}

.mining-source-card:hover,
.mining-source-card.selected {
    border-color: #E7968E;

    background: #B48B951A;
}

.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: #343558;
}

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

    margin-top: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #9E629526;
}

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

    border-radius: inherit;

    background: #E7968E;
}



/* ==============================
   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 #9E629538;
    border-radius: 8px;

    background: #9E629512;
    color: #F6E7DD;

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

    cursor: pointer;
}

.skills-view-tab.active {
    border-color: #E7968E;

    background: #B48B951F;
}



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

.mastery-view {
    padding: 12px;
}

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

    border: 1px solid #9E629533;
    border-radius: 10px;

    background: #3435589E;
}

.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 #9E629529;
    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 auto;

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

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

    border: 1px solid #9E62953D;
    border-radius: 7px;

    background: #343558C7;
    color: #F6E7DD;

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

.mastery-summary {
    margin: 7px 0;

    font-size: 0.54rem;

    opacity: 0.62;
}

.mastery-pool-toggle {
    min-width: 104px;
    padding: 7px 9px;

    border: 1px solid #D59A5C66;
    border-radius: 7px;

    background: #D59A5C17;
    color: #F7CDA9;

    font: inherit;
    font-size: 0.57rem;
    font-weight: 800;

    cursor: pointer;
}

.mastery-pool-toggle:hover,
.mastery-pool-toggle.open {
    border-color: #D59A5C;

    background: #D59A5C2B;
}

.mastery-pool-drawer {
    position: fixed;
    top: 7vh;
    right: 14px;
    z-index: 80;

    width: min(340px, calc(100vw - 28px));
    max-height: 86vh;

    padding: 10px;

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.96),
            rgba(36, 38, 63, 0.97)
        ),
        url("../assets/images/login-screen.png")
        center / cover no-repeat;

    box-shadow:
        0 18px 54px rgba(23, 25, 46, 0.62),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

.mastery-pool-drawer[hidden] {
    display: none;
}

.mastery-pool-drawer-header {
    position: sticky;
    top: -10px;
    z-index: 2;

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

    gap: 10px;
    margin: -10px -10px 8px;
    padding: 10px 11px 9px;

    border-bottom: 1px solid #9E629547;

    background:
        linear-gradient(
            90deg,
            rgba(23, 25, 46, 0.96),
            rgba(52, 53, 88, 0.94)
        );
}

.mastery-pool-drawer-header strong {
    font-size: 0.72rem;
}

.mastery-pool-close {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 1px solid #9E62955C;
    border-radius: 8px;

    background: #9E62951F;
    color: #F6E7DD;

    font: inherit;
    font-size: 1rem;
    line-height: 1;

    cursor: pointer;
}

.mastery-pool-close:hover {
    border-color: #E7968E;

    background: #B48B9530;
}

.mastery-pool-drawer-copy {
    margin: 0 0 9px;

    color: #F6E7DDA8;

    font-size: 0.53rem;
    line-height: 1.4;
}

.mastery-pool-summary {
    display: grid;
    grid-template-columns: 1fr;

    gap: 8px;
    margin: 0;
}

.mastery-pool-card {
    display: grid;

    min-width: 0;

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

    border: 1px solid #9E629547;
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #343558EB,
            #343558F0
        );

    box-shadow:
        inset 0 1px 0 #F6E7DD08,
        0 4px 12px #24263F29;
}

.mastery-pool-card.active {
    border-color: #D59A5C94;

    background:
        linear-gradient(
            180deg,
            #D59A5C33,
            #343558F5
        );
}

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

    min-width: 0;

    gap: 10px;
}

.mastery-pool-heading strong {
    min-width: 0;

    color: #F6E7DD;

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

.mastery-pool-heading span {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    min-width: 60px;

    padding: 4px 8px;

    border: 1px solid #B48B955C;
    border-radius: 999px;

    background: #B48B951A;
    color: #E7968E;

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

    justify-content: center;
    white-space: nowrap;
}

.mastery-pool-card.active .mastery-pool-heading span {
    border-color: #D59A5C80;

    background: #D59A5C1F;
    color: #D59A5C;
}

.mastery-pool-card > small {
    display: block;

    color: #F6E7DD9E;

    font-size: 0.56rem;
    line-height: 1.3;
}

.mastery-pool-token-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

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

    border: 1px solid #9E629529;
    border-radius: 8px;

    background: #9E629512;

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

.mastery-pool-token-row span {
    min-width: 0;
}

.mastery-pool-token-row.unlocked {
    border-color: #D59A5C57;

    background: #D59A5C1F;
}

.mastery-pool-token-row strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 58px;

    padding: 3px 7px;

    border-radius: 999px;

    background: #24263FBD;

    color: #F6E7DD;

    font-size: 0.66rem;
    white-space: nowrap;
}

.mastery-pool-token-row.unlocked strong {
    color: #D59A5C;
}

.mastery-pool-drawer
.mastery-pool-heading {
    align-items: flex-start;

    gap: 6px;
}

.mastery-pool-drawer
.mastery-pool-heading strong {
    font-size: 0.62rem;
}

.mastery-pool-drawer
.mastery-pool-heading span {
    min-width: 50px;

    padding: 3px 5px;

    font-size: 0.55rem;
}

.mastery-pool-drawer
.mastery-pool-token-row {
    font-size: 0.56rem;
}

.mastery-pool-drawer
.mastery-pool-token-row strong {
    min-width: 46px;

    padding: 2px 5px;

    font-size: 0.55rem;
}

.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 #9E62952E;
    border-radius: 9px;

    background: #3435589E;
}

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

    width: 46px;
    height: 46px;

    overflow: hidden;

    border-radius: 8px;

    background: #9E629514;

    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: #9E629526;
}

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

    border-radius: inherit;

    background: #E7968E;
}

.mastery-reward-status,
.mastery-next-reward {
    display: block;

    margin-top: 4px;

    font-size: 0.46rem;

    opacity: 0.68;
}

.mastery-reward-status {
    color: #F6E7DDC7;
}



@media (min-width: 1700px) {
    .mastery-pool-drawer {
        right:
            calc(
                (100vw - 760px) / 2 -
                440px
            );

        width: 420px;
    }

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


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

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

    .mastery-pool-toggle {
        width: 100%;
    }

    .mastery-pool-drawer {
        top: 6vh;
        right: 8px;
        left: 8px;

        width: auto;
        max-height: 88vh;
    }

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

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



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

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

    border: 1px solid #B48B9552;
    border-radius: 7px;

    background: #B48B9514;
    color: #F6E7DD;

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

    cursor: pointer;
}

.header-stop-action:hover:not(:disabled) {
    border-color: #E7968E;

    background: #B48B9526;
}

.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 #F6E7DD2E;
    border-radius: 8px;

    background: #F6E7DD08;
    color: #24263F;

    font: inherit;
    font-size: 0.54rem;

    cursor: pointer;
}

.enchanting-tab.active {
    border-color: #F7CDA98C;

    background: #F7CDA91A;
}

.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 #F6E7DD2E;
    border-radius: 8px;

    background: #F6E7DD0A;
    color: #24263F;

    font: inherit;
}

.enchant-filter select {
    color-scheme: dark;
}

.enchant-filter select option,
.enchant-filter select optgroup {
    background: #F6E7DD;
    color: #24263F;
}

.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 #F6E7DD24;
    border-radius: 10px;

    background: #F6E7DD06;
}

.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: #F6E7DD14;
}

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

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #D59A5C,
        #343558
    );
}

.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 {
    margin: 5px 0 4px;

    font-size: 0.54rem;
    font-weight: 700;
}

.personal-enchant-next {
    margin: 7px 0 4px;

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

.personal-enchant-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 4px 6px;

    margin-bottom: 4px;
}

.personal-enchant-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding: 3px 6px;

    border: 1px solid #F6E7DD20;
    border-radius: 999px;

    background: #F6E7DD08;

    font-size: 0.46rem;
}

.personal-enchant-current {
    font-weight: 700;

    opacity: 0.9;
}

.personal-enchant-scope {
    opacity: 0.7;
}

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

    opacity: 0.62;
}

.personal-enchant-investment {
    margin-top: 2px;
}

.personal-enchant-cost-heading {
    margin-top: 7px;

    font-weight: 700;
}

.personal-enchant-costs {
    display: grid;

    gap: 2px;

    margin: 3px 0 7px;
    padding: 6px 7px;

    border: 1px solid #F6E7DD18;
    border-radius: 8px;

    background: #F6E7DD05;

    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 #9E629538;
    border-radius: 999px;

    background: #9E629514;

    font-size: 0.56rem;
}

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

.header-currency-icon {
    display: block;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    object-fit: contain;
}

.header-boost-menu {
    position: relative;

    display: flex;
    align-items: center;

    flex: 0 0 auto;
}

.header-boost-toggle {
    position: relative;

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    padding: 3px;

    border:
        1px solid
        rgba(180, 139, 149, 0.42);

    border-radius: 9px;

    background:
        rgba(36, 38, 63, 0.28);

    color: #F6E7DD;

    box-shadow:
        inset 0 1px 0
        rgba(246, 231, 221, 0.06);

    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);

    cursor: pointer;
}

.header-boost-toggle:hover,
.header-boost-toggle[aria-expanded="true"],
.header-boost-toggle.active {
    border-color:
        rgba(247, 205, 169, 0.66);

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

.header-boost-icon {
    display: block;

    width: 20px;
    height: 20px;

    object-fit: contain;
}

.header-boost-active-count {
    position: absolute;
    top: -5px;
    right: -5px;

    display: grid !important;
    place-items: center;

    min-width: 15px !important;
    height: 15px;

    padding: 0 3px !important;

    border: 1px solid #F7CDA9 !important;
    border-radius: 999px !important;

    background: #9E6295 !important;
    color: #FFF7EE;

    font-size: 0.43rem !important;
    font-weight: 900;
    line-height: 1;
}

.header-boost-active-count[hidden] {
    display: none !important;
}

.header-boost-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 900;

    width:
        min(
            320px,
            calc(100vw - 20px)
        );

    padding: 9px;

    border:
        1px solid
        rgba(180, 139, 149, 0.58);

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(52, 53, 88, 0.96),
            rgba(36, 38, 63, 0.98)
        );

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.42);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-boost-dropdown[hidden] {
    display: none;
}

.header-boost-dropdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 2px 2px 8px;
}

.header-boost-dropdown-heading > div {
    display: grid;

    gap: 1px;
}

.header-boost-dropdown-heading strong {
    font-size: 0.68rem;
}

.header-boost-dropdown-heading small {
    color:
        rgba(246, 231, 221, 0.58);

    font-size: 0.49rem;
}

.header-boost-close {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    padding: 0;

    border:
        1px solid
        rgba(180, 139, 149, 0.42);

    border-radius: 8px;

    background:
        rgba(36, 38, 63, 0.42);

    color: #F6E7DD;

    font: inherit;
    font-size: 0.9rem;
    line-height: 1;

    cursor: pointer;
}

.header-boost-list {
    display: grid;

    gap: 5px;
}

.header-boost-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;

    gap: 8px;

    padding: 7px 8px;

    border:
        1px solid
        rgba(158, 98, 149, 0.26);

    border-radius: 9px;

    background:
        rgba(20, 18, 35, 0.26);
}

.header-boost-row.active {
    border-color:
        rgba(247, 205, 169, 0.48);

    background:
        linear-gradient(
            110deg,
            rgba(158, 98, 149, 0.21),
            rgba(247, 205, 169, 0.08)
        );
}

.header-boost-copy {
    display: grid;

    min-width: 0;

    gap: 2px;
}

.header-boost-copy strong {
    overflow: hidden;

    font-size: 0.59rem;

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

.header-boost-effect {
    color:
        rgba(246, 231, 221, 0.65);

    font-size: 0.48rem;
}

.header-boost-state {
    padding: 3px 6px !important;

    border: 1px solid
        rgba(158, 98, 149, 0.30) !important;
    border-radius: 999px !important;

    background:
        rgba(36, 38, 63, 0.48) !important;

    color:
        rgba(246, 231, 221, 0.56);

    font-size: 0.48rem !important;
    font-weight: 800;

    white-space: nowrap;
}

.header-boost-state[data-active="true"] {
    border-color:
        rgba(247, 205, 169, 0.48) !important;

    color: #F7CDA9;
}

.header-boost-empty {
    margin: 0;
    padding: 10px;

    color:
        rgba(246, 231, 221, 0.58);

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

@media (max-width: 600px) {
    .header-boost-toggle {
        width: 24px;
        height: 24px;

        flex-basis: 24px;

        border-radius: 8px;
    }

    .header-boost-icon {
        width: 17px;
        height: 17px;
    }

    .header-boost-dropdown {
        position: fixed;
        top: 52px;
        right: 8px;
        left: 8px;

        width: auto;
    }
}



/* ==============================
   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: #9E62951F;
    color: #F6E7DD;

    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 #9E629524;
    border-radius: 9px;

    background: #9E62950A;
}

.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 #9E629538;
    border-radius: 7px;

    background: #F6E7DD0A;
    color: #24263F;

    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 #9E62951F;
}

.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 #9E629524;
    border-radius: 9px;

    background: #F6E7DD06;
}

.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 #F7CDA92E;
    border-radius: 8px;

    background: #F7CDA90D;

    font-size: 0.48rem;
}



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

    .header-currencies > span > 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 #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;

    font-size: 0.48rem;

    opacity: 0.72;
}

.pantry-access-note.active {
    border-color: #F7CDA961;

    background: #F7CDA914;

    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 #F6E7DD1F;
    border-radius: 8px;

    background:
        radial-gradient(
            circle at center,
            #F6E7DD14,
            #F6E7DD05
        );
}

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

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

    margin: 0;
    padding: 0;

    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: #F6E7DD2E;
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #9E629514,
            #B48B9509
        );

    box-shadow:
        inset 0 1px 0 #F6E7DD06;
}

.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 #F6E7DD1A;
}

.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: #F6E7DDB8;

    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 #F6E7DD1F;
    border-radius: 9px;

    background: #34355847;
}

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

    padding: 6px 5px;

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

    background: transparent;
    color: #F6E7DD99;

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

    cursor: pointer;
}

.activity-plan-mode-button:hover {
    color: #24263F;
}

.activity-plan-mode-button.active {
    border-color: #F7CDA94C;

    background: #F7CDA91F;
    color: #24263F;

    box-shadow:
        0 0 12px #F7CDA90A;
}

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

    padding: 3px 6px 3px 3px;

    border: 1px solid #F6E7DD24;
    border-radius: 9px;

    background: #34355847;
}

.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 #F6E7DD1A;

    white-space: nowrap;

    opacity: 0.58;
}

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

    margin-top: 1px;

    border-color: #F7CDA942;

    background: #F7CDA912;
}

.activity-plan-queue-button:hover:not(:disabled) {
    border-color: #F7CDA985;

    background: #F7CDA91F;
}



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

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

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

    border: 1px solid #F6E7DD1A;
    border-radius: 999px;

    background: #3435582E;

    font-size: 0.42rem;

    opacity: 0.76;
}

.header-queue-time-chip {
    color: #F6E7DDC2;
}

.header-queue-next-chip {
    border-color: #F7CDA91F !important;

    color: #F7CDA9C7;
}

.header-queue-next-chip.has-task {
    border-color: #F7CDA94C !important;

    background: #F7CDA914;

    color: #24263F;
}

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

    border: 1px solid #F7CDA929;

    background: #F7CDA912;
}

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

    overflow: hidden;

    border-radius: 999px;

    background: #F6E7DD14;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #D59A5C,
            #343558
        );

    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: #F6E7DD;
}

.activity-plan-heading small {
    color: #F6E7DDC2;

    opacity: 1;
}

.activity-plan-controls label {
    color: #F6E7DDEB;
}

.activity-plan-mode-button {
    color: #F6E7DDC2;
}

.activity-plan-mode-button:hover,
.activity-plan-mode-button.active {
    color: #F6E7DD;
}

.activity-plan-value input {
    color: #F6E7DD;
}

.activity-plan-value small {
    color: #F6E7DDC7;

    opacity: 1;
}

.header-queue-row span {
    color: #F6E7DDE6;

    opacity: 1;
}

.header-queue-time-chip {
    border-color: #F7CDA938 !important;

    background: #F7CDA90F;
}

.header-queue-cap-chip {
    border-color: #F6E7DD2E !important;

    color: #F6E7DDB8 !important;
}

.header-queue-next-chip {
    color: #F7CDA9E0 !important;
}

.header-queue-next-chip.has-task {
    color: #F6E7DD !important;
}

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

.pantry-item-copy > span {
    color: #F6E7DDC2;
}

.pantry-access-note {
    color: #F6E7DDD1;
}



/* ==============================
   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 #F6E7DD24;
    border-radius: 9px;

    background: #F6E7DD06;
    color: #F6E7DDC2;

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

    cursor: pointer;
}

.pantry-view-tab:hover {
    border-color: #F7CDA94C;

    color: #F6E7DD;
}

.pantry-view-tab.active {
    border-color: #F7CDA96B;

    background: #F7CDA91A;
    color: #F6E7DD;

    box-shadow:
        inset 0 1px 0 #F6E7DD08;
}

.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: #F6E7DDA3;

    font-size: 0.43rem;
}

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

    opacity: 0.82;
}

.pantry-item-card-unknown
.pantry-item-image-shell {
    color: #F6E7DDB8;

    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: #F7CDA961;

    background: #F7CDA90E;

    outline: none;

    transform: translateY(-1px);
}

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

    display: grid;
    place-items: center;

    padding: 18px;

    background: #343558C2;

    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 #F6E7DD3D;
    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            #343558FA,
            #343558FA
        );

    box-shadow:
        0 24px 70px #24263F6B,
        inset 0 1px 0 #F6E7DD08;

    color: #F6E7DDF0;
}

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

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid #F6E7DD2E;
    border-radius: 999px;

    background: #F6E7DD0A;
    color: #F6E7DDE0;

    font: inherit;
    font-size: 0.8rem;

    cursor: pointer;
}

.item-detail-close:hover {
    border-color: #F7CDA966;

    background: #F7CDA914;
}

.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 #F6E7DD29;
    border-radius: 14px;

    background:
        radial-gradient(
            circle at center,
            #F6E7DD1A,
            #F6E7DD05
        );
}

.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: #F6E7DDFA;

    font-size: 0.92rem;
}

.item-detail-heading > p {
    margin: 0;
}

.item-detail-heading
#item-detail-subtitle {
    color: #F6E7DDD1;

    font-size: 0.52rem;
}

.item-detail-location {
    margin-top: 7px !important;

    color: #F7CDA9E0;

    font-size: 0.48rem;
}

.item-detail-description {
    margin: 12px 0 0;

    color: #F6E7DDC7;

    font-size: 0.52rem;
    line-height: 1.55;
}

.item-detail-section {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #F6E7DD1A;
}

.item-detail-section h3 {
    margin: 0 0 7px;

    color: #F6E7DDF0;

    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: #F6E7DD06;

    font-size: 0.48rem;
}

.item-detail-info-row span,
.item-detail-buff-row span {
    color: #F6E7DDB8;
}

.item-detail-info-row strong,
.item-detail-buff-row strong {
    color: #F6E7DDF0;

    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 #F6E7DD29;
    border-radius: 8px;

    background: #F6E7DD09;
    color: #F6E7DDEB;

    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 #F6E7DD2E;
    border-radius: 8px;

    background: #34355866;
    color: #F6E7DDF5;

    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: #F7CDA95C;

    background: #F7CDA912;
}

.item-detail-status {
    min-height: 1em;
    margin: 10px 0 0;

    color: #F7CDA9EB;

    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: #F7CDA96B;

    outline: none;

    box-shadow:
        0 0 0 1px #F7CDA912,
        0 0 14px #F7CDA90B;
}



/* ==============================
   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 #F7CDA92E;
    border-radius: 999px;

    background: #F7CDA90E;
    color: #F6E7DDE6;

    font: inherit;
    font-size: 0.42rem;

    cursor: pointer;
}

.header-queue-toggle:hover,
.header-queue-toggle.open {
    border-color: #F7CDA961;

    background: #F7CDA91A;
}

.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 #F6E7DD38;
    border-radius: 12px;

    background: #343558FB;

    box-shadow:
        0 16px 40px #24263F57,
        inset 0 1px 0 #F6E7DD06;
}

.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 #F6E7DD1A;
}

.header-queue-dropdown-heading strong {
    color: #F6E7DDF5;

    font-size: 0.5rem;
}

.header-queue-dropdown-heading small {
    color: #F7CDA9C7;

    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 #F6E7DD1A;
    border-radius: 8px;

    background: #F6E7DD06;
}

.header-queued-position {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    border-radius: 999px;

    background: #F7CDA917;
    color: #F7CDA9EB;

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

.header-queued-icon {
    font-size: 0.88rem;

    text-align: center;
}

.header-queued-copy {
    display: grid;

    min-width: 0;
}

.header-queued-copy strong {
    overflow: hidden;

    color: #F6E7DDEB;

    font-size: 0.66rem;

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

.header-queued-copy small {
    color: #F6E7DDC7;

    font-size: 0.55rem;
}

.header-queued-remove {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border: 1px solid #F7CDA924;
    border-radius: 999px;

    background: #F7CDA90A;
    color: #F6E7DDCC;

    font: inherit;

    cursor: pointer;
}

.header-queued-remove:hover {
    border-color: #F7CDA957;

    background: #F7CDA914;
}

.header-queue-empty {
    margin: 9px 2px 2px;

    color: #F6E7DD9E;

    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: #343558C7;

    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 #F6E7DD42;
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            #9E629526,
            transparent 38%
        ),
        linear-gradient(
            155deg,
            #343558FC,
            #343558FC
        );

    box-shadow:
        0 28px 80px #24263F75,
        inset 0 1px 0 #F6E7DD09;

    color: #F6E7DDF0;
}

.offline-summary-close {
    position: absolute;
    top: 11px;
    right: 11px;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid #F6E7DD2E;
    border-radius: 999px;

    background: #F6E7DD0A;
    color: #F6E7DDE6;

    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 #F6E7DD29;
    border-radius: 16px;

    background: #9E629517;

    font-size: 1.5rem;

    box-shadow:
        0 0 24px #9E629514;
}

.offline-summary-heading h2 {
    margin: 2px 0 4px;

    color: #F6E7DDFA;

    font-size: 0.94rem;
}

.offline-summary-heading p {
    margin: 0;
}

#offline-summary-time {
    color: #F7CDA9D6;

    font-size: 0.49rem;
}

.offline-summary-section {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #F6E7DD1A;
}

.offline-summary-section h3 {
    margin: 0 0 7px;

    color: #F6E7DDF0;

    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: #F6E7DD06;
}

.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: #F6E7DDF0;

    font-size: 0.48rem;
}

.offline-summary-task small {
    color: #F6E7DDAD;

    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 #F6E7DD14;
    border-radius: 8px;

    background: #F6E7DD05;
}

.offline-summary-item img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}

.offline-summary-item span {
    overflow: hidden;

    color: #F6E7DDD1;

    font-size: 0.43rem;

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

.offline-summary-item strong {
    color: #F7CDA9F0;

    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: #F6E7DD06;

    font-size: 0.45rem;
}

.offline-summary-stat span {
    color: #F6E7DDB8;
}

.offline-summary-stat strong {
    color: #F7CDA9F0;
}

.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: #F7CDA90A;
    color: #F6E7DDDB;

    font-size: 0.44rem;
}

.offline-summary-note {
    margin: 11px 0 0;
    padding: 7px 8px;

    border: 1px solid #F7CDA929;
    border-radius: 8px;

    background: #F7CDA90E;
    color: #F6E7DDF0;

    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 #F7CDA933;
    border-radius: 8px;

    background: #F7CDA90E;
}

.header-queue-paused[hidden] {
    display: none;
}

.header-queue-paused span {
    color: #F6E7DDEB;

    font-size: 0.41rem;
}

.header-queue-paused button {
    padding: 5px 7px;

    border: 1px solid #F7CDA947;
    border-radius: 7px;

    background: #F7CDA914;
    color: #F6E7DDF0;

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

    cursor: pointer;
}

.header-queue-paused button:hover {
    border-color: #F7CDA97A;

    background: #F7CDA921;
}



/* ==============================
   BACKGROUND GARDENING
   ============================== */

.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 #F7CDA924;
    border-radius: 9px;

    background: #F7CDA90B;
}

.gathering-background-note span {
    font-size: 0.85rem;

    text-align: center;
}

.gathering-background-note p {
    margin: 0;

    color: #F6E7DDC2;

    font-size: 0.60rem;
    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 #F6E7DD1F;
    border-radius: 12px;

    background:
        linear-gradient(
            155deg,
            #F6E7DD06,
            #F6E7DD03
        );
}

.gathering-plot-card.empty {
    align-content: start;

    text-align: left;
}

.gathering-plot-card.growing {
    border-color: #F7CDA92E;

    background:
        linear-gradient(
            155deg,
            #F7CDA90E,
            #F6E7DD03
        );
}

.gathering-plot-card.ready {
    border-color: #F7CDA94C;

    background:
        radial-gradient(
            circle at top right,
            #F7CDA91A,
            transparent 46%
        ),
        #F6E7DD05;

    box-shadow:
        0 0 18px #F7CDA90A;
}

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

    width: 100%;
}

.gathering-plot-number {
    color: #F7CDA9D1;

    font-size: 0.54rem;
    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 #F7CDA933;
    border-radius: 999px;

    background: #F7CDA90A;

    font-size: 1.25rem;
}

.gathering-plot-card.empty > strong {
    color: #F6E7DDE6;

    font-size: 0.66rem;
}

.gathering-plot-card.empty > p,
.gathering-plot-card.invalid > p {
    margin: 0;

    color: #F6E7DDA3;

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

.gathering-plot-crop-picker {
    display: grid;

    gap: 5px;

    width: 100%;
}

.gathering-plot-crop-picker > span {
    color: #F7CDA9C7;

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

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gathering-plot-crop-select {
    width: 100%;
    min-width: 0;

    padding: 8px 9px;

    border: 1px solid #F7CDA92E;
    border-radius: 9px;

    background: #1E1723F2;
    color: #F6E7DDF2;

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

.gathering-plot-crop-select:focus {
    outline: 2px solid #F7CDA947;
    outline-offset: 1px;
}

.gathering-plot-choice-preview {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    width: 100%;
    padding: 7px;

    box-sizing: border-box;

    border: 1px solid #F6E7DD14;
    border-radius: 10px;

    background: #F6E7DD05;
}

.gathering-plot-choice-preview img {
    width: 48px;
    height: 48px;

    padding: 3px;

    object-fit: contain;

    box-sizing: border-box;

    border-radius: 8px;

    background: #F6E7DD07;
}

.gathering-plot-choice-preview > div {
    display: grid;

    gap: 5px;

    min-width: 0;
}

.gathering-plot-choice-preview strong {
    color: #F6E7DDF2;

    font-size: 0.62rem;
}

.gathering-plot-choice-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;
}

.gathering-plot-choice-meta span {
    padding: 3px 5px;

    border: 1px solid #F7CDA91F;
    border-radius: 999px;

    background: #F7CDA90A;
    color: #F6E7DDBA;

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

.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 #F6E7DD1A;
    border-radius: 10px;

    background: #F6E7DD06;
}

.gathering-plot-resource div {
    display: grid;

    gap: 3px;

    min-width: 0;
}

.gathering-plot-resource strong {
    color: #F6E7DDF0;

    font-size: 0.62rem;
}

.gathering-plot-resource span {
    color: #F7CDA9C7;

    font-size: 0.58rem;
}

.gathering-plot-timer {
    margin: 1px 0 0;

    color: #F6E7DDD1;

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

.gathering-grow-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #F6E7DD0D;
}

.gathering-grow-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #D59A5C99,
            #F7CDA9E0
        );

    transition: width 900ms linear;
}

.gathering-plot-card.growing > small {
    color: #F6E7DD94;

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

.gathering-plot-button {
    align-self: end;

    width: 100%;
}

.gathering-plot-card.ready
.gathering-plot-button {
    border-color: #F7CDA947;

    background: #F7CDA913;
}

@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 #F7CDA92E;
    border-radius: 15px;

    background:
        radial-gradient(
            circle at top left,
            #F7CDA91A,
            transparent 42%
        ),
        #F6E7DD05;
}

.shop-npc-avatar {
    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;

    border: 1px solid #F7CDA92E;
    border-radius: 18px;

    background: #F7CDA90F;

    font-size: 1.7rem;
}

.shop-npc-copy {
    min-width: 0;
}

.shop-npc-copy h2 {
    margin: 2px 0 4px;

    color: #F6E7DDF5;

    font-size: 0.76rem;
}

.shop-npc-copy > p:last-child {
    margin: 0;

    color: #F6E7DDB8;

    font-size: 0.60rem;
    line-height: 1.5;
}

.shop-wallet {
    display: grid;

    gap: 3px;

    min-width: 82px;

    padding: 8px 9px;

    border: 1px solid #F7CDA921;
    border-radius: 10px;

    background: #F7CDA90A;

    text-align: right;
}

.shop-wallet span {
    color: #F6E7DD9E;

    font-size: 0.55rem;
}

.shop-wallet strong {
    color: #F7CDA9F0;

    font-size: 0.64rem;
}

.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 #F6E7DD1C;
    border-radius: 11px;

    background: #F6E7DD06;
}

.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 #F7CDA91F;
    border-radius: 10px;

    background: #F7CDA90A;
}

.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: #F6E7DDF0;

    font-size: 0.62rem;

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

.seed-shop-heading span {
    flex: 0 0 auto;

    color: #F7CDA9E6;

    font-size: 0.58rem;
}

.seed-shop-copy small {
    display: block;

    margin-top: 2px;

    color: #F7CDA9B8;

    font-size: 0.56rem;
}

.seed-shop-copy p {
    margin: 5px 0 0;

    color: #F6E7DD9E;

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

.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 #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;
    color: #F6E7DDDB;

    font: inherit;
    font-size: 0.58rem;

    cursor: pointer;
}

.seed-shop-secondary-button:hover:not(:disabled) {
    border-color: #F7CDA947;

    background: #F7CDA90F;
}

.seed-shop-secondary-button:disabled {
    cursor: default;

    opacity: 0.48;
}

.seed-shop-status {
    min-height: 1.2em;
    margin: 10px 0 0;

    color: #F6E7DDE0;

    font-size: 0.60rem;
}

.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 #F7CDA91F;
    border-radius: 10px;

    background: #F7CDA909;
}

.shop-info-card > span {
    font-size: 0.85rem;

    text-align: center;
}

.shop-info-card strong {
    color: #F6E7DDE6;

    font-size: 0.60rem;
}

.shop-info-card p {
    margin: 3px 0 0;

    color: #F6E7DDA6;

    font-size: 0.58rem;
    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;
    }
}



/* ==============================
   GARDENING PLOT UNLOCKS
   ============================== */

.gathering-plot-card.locked {
    border-style: dashed;
    border-color: #F6E7DD26;

    background:
        radial-gradient(
            circle at top,
            #9E629512,
            transparent 45%
        ),
        #F6E7DD03;
}

.gathering-locked-plot-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 3px auto 0;

    border: 1px solid #F6E7DD24;
    border-radius: 999px;

    background: #9E62950E;

    font-size: 1.15rem;
}

.gathering-plot-card.locked > strong {
    color: #F6E7DDE6;

    font-size: 0.62rem;

    text-align: center;
}

.gathering-plot-card.locked > p {
    margin: 0;

    color: #F6E7DD9E;

    font-size: 0.60rem;
    line-height: 1.45;

    text-align: center;
}

.gathering-unlock-requirements {
    display: grid;

    gap: 4px;

    padding: 7px;

    border: 1px solid #F6E7DD14;
    border-radius: 8px;

    background: #F6E7DD05;
}

.gathering-unlock-requirement {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 7px;

    color: #F7CDA9C7;

    font-size: 0.56rem;
}

.gathering-unlock-requirement.met {
    color: #F7CDA9D1;
}

.gathering-unlock-requirement strong {
    flex: 0 0 auto;

    font-size: 0.56rem;
}



/* ==============================
   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 #F6E7DD14;
}

.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: #F6E7DDF0;

    font-size: 0.62rem;
}

.seed-shop-band-heading small {
    color: #F6E7DD9E;

    font-size: 0.56rem;
}

.seed-shop-band-heading > span {
    flex: 0 0 auto;

    padding: 4px 6px;

    border: 1px solid #F7CDA91F;
    border-radius: 999px;

    background: #F7CDA90A;
    color: #F7CDA9CC;

    font-size: 0.54rem;
}



/* ==============================
   NEW RECIPE CARDS
   ============================== */

.recipe-book-section-new {
    padding: 2px 4px;

    border: 1px solid #F7CDA938;
    border-radius: 999px;

    background: #F7CDA91A;
    color: #E7968E;

    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: #F7CDA9C2;

    box-shadow:
        0 0 0 1px #F7CDA914,
        0 0 18px #F7CDA914;

    cursor: pointer;
}

.recipe-book-card-new:hover,
.recipe-book-card-new:focus-visible {
    border-color: #F7CDA9F5;

    outline: none;

    transform: translateY(-1px);
}

.recipe-book-card-new-badge {
    flex: 0 0 auto;

    padding: 2px 5px;

    border: 1px solid #F7CDA947;
    border-radius: 999px;

    background: #F7CDA91F;
    color: #E7968E;

    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 #F7CDA900;
    }

    50% {
        box-shadow:
            0 0 0 3px #F7CDA933,
            0 0 24px #F7CDA929;
    }
}


/* ==============================
   CLICKABLE RECIPE UNLOCK TOAST
   ============================== */

.action-notification-clickable {
    pointer-events: auto;

    cursor: pointer;
}

.action-notification-clickable:hover,
.action-notification-clickable:focus-visible {
    border-color: #F7CDA9B2;

    outline: none;

    transform: translateX(0) translateY(-1px);
}

.recipe-unlocked-notification {
    border-color: #F7CDA97A;

    background:
        radial-gradient(
            circle at top left,
            #F7CDA91A,
            transparent 48%
        ),
        #343558F7;
}

.recipe-unlocked-notification
.action-notification-icon {
    background: #F7CDA91A;
}



/* ==============================
   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: #F6E7DDF5;
}

.session-loot-started {
    color: #F6E7DD8F;

    font-size: 0.39rem;
}

.session-loot-reset {
    flex: 0 0 auto;

    padding: 5px 7px;

    border: 1px solid #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;
    color: #F6E7DDD1;

    font: inherit;
    font-size: 0.40rem;

    cursor: pointer;
}

.session-loot-reset:hover:not(:disabled) {
    border-color: #F7CDA947;

    background: #F7CDA90F;
}

.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 #F7CDA91A;
    border-radius: 8px;

    background: #F7CDA908;
}

.session-loot-summary span {
    color: #F6E7DDA3;

    font-size: 0.39rem;
}

.session-loot-summary strong {
    color: #F7CDA9EB;

    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 #F6E7DD17;
    border-radius: 8px;

    background: #F6E7DD05;
}

.session-loot-image-shell {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid #F6E7DD14;
    border-radius: 7px;

    background: #F6E7DD05;
}

.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: #F6E7DDE0;

    font-size: 0.42rem;

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

.session-loot-quantity {
    color: #F7CDA9EB;

    font-size: 0.45rem;
}

.session-loot-empty {
    grid-column: 1 / -1;

    margin: 0;
    padding: 8px;

    border: 1px dashed #F6E7DD17;
    border-radius: 8px;

    color: #F6E7DD8A;

    font-size: 0.41rem;
    line-height: 1.45;

    text-align: center;
}

.session-loot-note {
    margin: 0;

    color: #F6E7DD7A;

    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 #F6E7DD1F;
    border-radius: 9px;

    background: #F6E7DD06;
    color: #F6E7DDC2;

    font: inherit;
    font-size: 0.42rem;

    cursor: pointer;
}

.blacksmithing-tab:hover,
.blacksmithing-tab.selected {
    border-color: #F7CDA94C;

    background: #F7CDA912;
    color: #F6E7DDF5;
}

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

    gap: 10px;
}

.blacksmithing-selected-heading img {
    width: 58px;
    height: 58px;

    padding: 4px;

    border: 1px solid #F6E7DD1A;
    border-radius: 10px;

    background: #F6E7DD05;

    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 #F6E7DD1F;
    border-radius: 9px;
    background: #F6E7DD06;
    color: #F6E7DDC2;
    font: inherit;
    font-size: 0.42rem;
    cursor: pointer;
}

.metalworking-tab:hover,
.metalworking-tab.selected {
    border-color: #F7CDA94C;
    background: #F7CDA912;
    color: #F6E7DDF5;
}

.metalworking-selected-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metalworking-selected-heading img {
    width: 58px;
    height: 58px;
    padding: 4px;
    border: 1px solid #F6E7DD1A;
    border-radius: 10px;
    background: #F6E7DD05;
    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 #9E629547;
    border-radius: 999px;

    background: #9E62951A;

    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 #9E62953D;
    border-radius: 999px;

    background: #9E62951A;
}

.combat-bar-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background: #B48B95B8;

    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 #9E62953D;
    border-radius: 10px;

    background: #9E629512;
    color: #F6E7DD;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.combat-monster-card:hover:not(:disabled),
.combat-monster-card.selected {
    border-color: #E7968E;

    background: #B48B951F;
}

.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-style-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.combat-style-level-card {
    display: grid;
    gap: 3px;

    min-width: 0;
    padding: 7px 6px;

    border: 1px solid #9E629538;
    border-radius: 10px;

    background: #9E62950D;

    color: inherit;
    font: inherit;
    text-align: left;

    font-size: 0.64rem;

    cursor: pointer;
}

.combat-style-level-card:hover,
.combat-style-level-card:focus-visible {
    border-color: #F7CDA985;

    background: #F7CDA914;
}

.combat-style-level-card.active {
    border-color: #E7968E;

    background: #B48B951A;
}

.combat-style-level-card strong,
.combat-style-level-card span,
.combat-style-level-card small {
    min-width: 0;
}

.combat-style-level-card small {
    font-size: 0.57rem;
    line-height: 1.25;
}

.combat-progress-summary {
    display: grid;
    gap: 8px;

    margin-bottom: 8px;
}

.combat-progress-next-spell {
    margin: 0;
    padding: 0;

    background: none !important;

    font-size: 0.6rem !important;
    line-height: 1.35;
    opacity: 0.78;
}

.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 #9E629533;
    border-radius: 8px;

    background: #9E62950D;

    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: #24263F;

    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 #F6E7DD75;
    border-radius: 999px;

    background: #343558D6;
    color: #24263F;

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

    cursor: pointer;

    backdrop-filter: blur(7px);

    box-shadow: 0 3px 12px #24263F3D;
}

.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 #F6E7DD66;
    border-radius: 18px;

    background: #F6E7DDE0;
    color: #F6E7DD;

    backdrop-filter: blur(8px);

    box-shadow: 0 7px 22px #24263F42;

    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: #9E629524;

    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 #634A332E;
    border-radius: 999px;

    background: #634A331F;
}

.combat-board-bar-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    transition: width 180ms ease;
}

.combat-hp-fill {
    background: #E7968ED6;
}

.combat-mana-fill {
    background: #9E6295D6;
}

.combat-enemy-hp-fill {
    background: #E7968EDB;
}

.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: #9E62951A;

    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 #634A3333;
    border-radius: 7px;

    background: #F6E7DDD1;
    color: #F6E7DD;

    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 #634A3324;
}

.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 #24263F3D);
}

.combat-enemy-stage img.sprite-missing {
    display: none;
}

.combat-enemy-sprite-fallback {
    display: grid;
    place-items: center;

    width: min(78%, 190px);
    min-height: 145px;

    font-size: clamp(4rem, 9vw, 6.5rem);
    line-height: 1;

    filter: drop-shadow(0 8px 8px #24263F3D);
}

.combat-enemy-sprite-fallback[hidden] {
    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 #634A3329;
    border-radius: 8px;

    background: #F6E7DD94;

    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 #F6E7DD66;
    border-radius: 15px;

    background: #343558D6;
    color: #24263F;

    backdrop-filter: blur(8px);

    box-shadow: 0 7px 22px #24263F3D;

    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 #F6E7DD33;
    border-radius: 999px;

    background: #F6E7DD17;
}

.combat-cast-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #CC7790EB;
}

.combat-cast-fill.enemy {
    background: #E7968EEB;
}

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

    gap: 9px;
}

.combat-board-actions button {
    min-height: 34px;

    padding: 7px 11px;

    border: 1px solid #F6E7DD4C;
    border-radius: 8px;

    background: #F6E7DD21;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;

    cursor: pointer;
}

.combat-board-actions button.start-fight {
    background: #D59A5CE0;

    border-color: #F7CDA9B8;
}

.combat-board-actions button:disabled {
    opacity: 0.48;

    cursor: not-allowed;
}

#board-combat-status {
    overflow: hidden;

    color: #F6E7DD;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;

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

    text-shadow: 0 1px 3px #24263FCC;
}

.combat-effects-layer {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 7;
}

.combat-projectile,
.combat-projectile-impact {
    --combat-projectile-colour: #F59A3A;
    position: absolute;

    pointer-events: none;
}

.combat-projectile {
    width: 1px;
    height: 1px;

    z-index: 2;

    animation:
        combat-projectile-flight
        var(--combat-projectile-duration, 260ms)
        cubic-bezier(0.20, 0.70, 0.28, 1)
        forwards;
}

.combat-projectile.player,
.combat-projectile-impact.player {
    --combat-projectile-colour: #F59A3A;
}

.combat-projectile.monster,
.combat-projectile-impact.monster {
    --combat-projectile-colour: #E34B4B;
}

.combat-projectile.pet,
.combat-projectile-impact.pet {
    --combat-projectile-colour: #F6D74A;
}

.combat-projectile-bolt {
    position: absolute;
    left: 0;
    top: 0;

    width: 34px;
    height: 6px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--combat-projectile-colour) 58%,
            #FFF7DE 100%
        );

    box-shadow:
        0 0 5px
            var(--combat-projectile-colour),
        0 0 12px
            var(--combat-projectile-colour);

    transform:
        translate(-50%, -50%)
        rotate(
            var(
                --combat-projectile-angle,
                0deg
            )
        );

    transform-origin: center;
}

.combat-projectile-bolt::after {
    position: absolute;
    right: -3px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #FFF7DE;

    box-shadow:
        0 0 6px
            var(--combat-projectile-colour),
        0 0 14px
            var(--combat-projectile-colour);

    content: "";

    transform:
        translateY(-50%);
}

.combat-projectile-impact {
    width: 12px;
    height: 12px;

    border: 2px solid
        var(--combat-projectile-colour);
    border-radius: 50%;

    box-shadow:
        0 0 7px
            var(--combat-projectile-colour),
        0 0 16px
            var(--combat-projectile-colour);

    z-index: 3;

    animation:
        combat-projectile-impact
        320ms ease-out forwards;
}

@keyframes combat-projectile-flight {
    from {
        opacity: 0;
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(0.72);
    }

    12% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    to {
        opacity: 0.92;
        transform:
            translate3d(
                var(--combat-projectile-x),
                var(--combat-projectile-y),
                0
            )
            scale(1);
    }
}

@keyframes combat-projectile-impact {
    from {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

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

@media (prefers-reduced-motion: reduce) {
    .combat-projectile,
    .combat-projectile-impact {
        display: none !important;
    }
}



.combat-float-result {
    position: absolute;

    padding: 6px 10px;

    border: 2px solid #F6E7DDE0;
    border-radius: 999px;

    background: #343558F0;
    color: #F6E7DD;

    font-size: 0.94rem;
    font-weight: 900;

    letter-spacing: 0.02em;
    text-shadow:
        0 2px 3px #24263FEB,
        0 0 5px #24263F9E;

    box-shadow: 0 4px 10px #24263F57;

    animation: combat-float-result 1800ms ease-out forwards;
}

.combat-float-result.player {
    left: 61%;
    top: 37%;

    background: #CC7790F5;
}

.combat-float-result.enemy {
    left: 29%;
    top: 37%;

    background: #D59A5CF5;
}

.combat-float-result.critical {
    color: #F7CDA9;

    font-size: 1.08rem;

    border-color: #F7CDA9F5;
}

@keyframes combat-float-result {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.94);
    }

    12% {
        opacity: 1;
        transform: translateY(2px) scale(1);
    }

    72% {
        opacity: 1;
        transform: translateY(-10px) scale(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(2, minmax(0, 1fr));

    gap: 5px;

    position: sticky;
    top: 0;

    padding: 0 0 8px;

    background: #24263FF5;

    z-index: 3;
}

.combat-side-tab {
    min-width: 0;

    padding: 7px 5px;

    border: 1px solid #9E629538;
    border-radius: 8px;

    background: #9E629514;
    color: #F6E7DDD1;

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

    cursor: pointer;
}

.combat-side-tab:hover,
.combat-side-tab.selected {
    border-color: #B48B9594;

    background: #B48B9524;
    color: #F6E7DDFA;
}

[data-combat-side-panel][hidden] {
    display: none;
}

.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 #9E62952E;
    border-radius: 8px;

    background: #9E62950D;

    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: #B48B9570;
}

.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 #9E629533;
    border-radius: 7px;

    background: #9E62950F;
    color: #F6E7DDD6;

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

    cursor: pointer;
}

.combat-monster-action:hover:not(:disabled),
.combat-monster-action.primary {
    border-color: #B48B9570;

    background: #B48B951A;
}

.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 #9E629526;
}

.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: #24263F;
    background-image:
        linear-gradient(
            #3435580A,
            #3435580A
        ),
        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: #634A334C;

    background: #F6E7DDF2;
    color: #24263F;
}

.combat-board-player *,
.combat-board-enemy * {
    color: inherit;
}

.combat-board-heading small {
    color: #24263FB8;
    opacity: 1;
}

.combat-board-heading > span {
    background: #D59A5C21;
    color: #24263F;
}

.combat-board-stat-grid span {
    background: #D59A5C1A;
    color: #24263F;
}

.combat-board-vital-heading,
.combat-auto-toggle,
.combat-auto-thresholds label,
#combat-auto-description {
    color: #24263F;
}

.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select {
    border-color: #634A3347;

    background: #F6E7DDF0;
    color: #24263F;
}

.combat-supply-row select option,
.combat-auto-thresholds select option {
    background: #F6E7DD;
    color: #24263F;
}

.combat-loot-slot {
    border-color: #634A3338;

    background: #F6E7DDC2;
    color: #24263F;
}

.combat-loot-slot.unknown {
    color: #24263FB2;
}


/* ==============================
   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: #F7CDA912;
    color: #F7CDA9E6;

    font-size: 0.39rem;
}

.session-loot-summary,
.session-loot-note {
    display: none;
}

.session-loot-gold-pill {
    display: inline-flex;
    align-items: center;

    width: fit-content;

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

    border: 1px solid #F7CDA952;
    border-radius: 999px;

    background: #F7CDA91A;
    color: #F6E7DDF0;

    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.2;
}

.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 #9E62953D;
    border-radius: 8px;

    background: #9E629514;
}

.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: #24263FEB;
    color: #F6E7DDF5;

    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: #24263F;
}

.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 #F6E7DD42;

    background: #343558F0;
    color: #F6E7DD;

    box-shadow:
        0 9px 26px #24263F57,
        inset 0 1px #F6E7DD0A;
}

.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: #F6E7DD;
}

.combat-board-heading small,
#combat-auto-description {
    color: #F6E7DDBD;
}

.combat-board-heading > span,
.combat-board-stat-grid span {
    background: #F6E7DD17;
    color: #F6E7DD;
}

.combat-board-bar-track {
    border-color: #F6E7DD2E;
    background: #24263F42;
}

.combat-auto-panel {
    border-top-color: #F6E7DD24;
}

.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select {
    border-color: #F6E7DD47;

    background: #F6E7DDF5;
    color: #513966 !important;
}

.combat-supply-row select option,
.combat-auto-thresholds select option {
    background: #F6E7DD;
    color: #513966;
}

.combat-board-enemy .combat-loot-slot {
    border-color: #F6E7DD29;

    background: #F6E7DD14;
    color: #F6E7DD;
}

.combat-board-enemy .combat-loot-slot strong,
.combat-board-enemy .combat-loot-slot small,
.combat-board-enemy .combat-loot-slot.unknown {
    color: #F6E7DD;
}

.combat-board-enemy .combat-loot-slot.unknown {
    opacity: 0.72;
}


/* ==============================
   COMBAT SIDE PANEL
   Fight = current target/session.
   Creatures = browse + inspect loot.
   Combat/style XP stays visible above tabs.
   ============================== */

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

.combat-selected-card,
.combat-empty-selection,
.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 #9E62953D;
    border-radius: 7px;

    background: #9E629514;
    color: #F6E7DDE6;

    font: inherit;
    font-size: 0.82rem;
    line-height: 1;

    cursor: pointer;
}

.combat-loot-close:hover {
    border-color: #B48B9580;
    background: #B48B951F;
}

.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 #F6E7DD2E;
    border-radius: 8px;

    background: #F6E7DD12;
    color: #F6E7DDC7 !important;

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

    cursor: pointer;
}

.combat-player-tab:hover,
.combat-player-tab.selected {
    border-color: #F7CDA985;

    background: #F7CDA926;
    color: #F6E7DD !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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 56px;

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

    border: 1px solid #9E629533;
    border-radius: 8px;

    background: #9E629512;
    color: #F6E7DDC2;

    font: inherit;
    font-size: 0.53rem;
    font-weight: bold;
    text-align: center;

    cursor: pointer;
}

.sidebar-tab-icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    line-height: 1;
}

.sidebar-tab-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}

.sidebar-tab-text {
    display: block;

    line-height: 1.05;
}

.sidebar-tab:hover,
.sidebar-tab.selected {
    border-color: #F7CDA980;

    background: #F7CDA924;
    color: #F6E7DD;
}

.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: #F6E7DD !important;

    text-shadow: 0 1px 3px #24263FB8;
}

.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 #9E62952E;
}

.combat-inspector-section-title {
    margin: 0 0 6px;

    color: #F6E7DDF0;

    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 #9E62953D;
    border-radius: 999px;

    background: #9E629517;
    color: #F6E7DDB2;

    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: #F6E7DDF0;
}

.combat-inspected-quests
.recipe-card-status {
    color: #F6E7DDB8;
}



/* ==============================
   MAGIC SPELL SUPPLY DETAIL
   ============================== */

.combat-spell-detail {
    display: block;

    padding: 5px 7px;

    border-radius: 7px;

    background: #F6E7DD14;
    color: #F6E7DDC7 !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 #9E629547;
    border-radius: 10px;

    background: #F6E7DD29;

    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 #9E629538;
    border-radius: 9px;

    background: #F6E7DD1C;
}

.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: #9E629529;

    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: #24263FEB;
    color: #F6E7DDF5;

    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 #F6E7DD24;
    border-radius: 999px;

    background: #9E62950F;
    color: #F6E7DD;

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

    cursor: pointer;
}

.pantry-category-tab:hover,
.pantry-category-tab.active {
    border-color: #F7CDA96B;
    background: #F7CDA91C;
}

.pantry-tab-manager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;

    padding: 7px;

    border: 1px solid #F6E7DD1A;
    border-radius: 9px;

    background: #3435582E;
}

.pantry-tab-manager select,
.pantry-tab-manager input {
    min-width: 0;
    padding: 5px 6px;

    border: 1px solid #F6E7DD29;
    border-radius: 7px;

    background: #F6E7DDF0;
    color: #24263F;

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

.pantry-tab-manager select {
    color-scheme: light;
}

.pantry-tab-manager select option {
    background: #F6E7DD;
    color: #24263F;
}

.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 #F6E7DD1F;
    border-radius: 6px;

    background: #F6E7DDF0;
    color: #24263F;

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

.pantry-item-tab-select option {
    background: #F6E7DD;
    color: #24263F;
}

.cooking-recipe-card.level-locked {
    border-color: #F6E7DD1F;
    opacity: 0.48;
}

.cooking-recipe-card.level-locked small {
    color: #E7968E;
    opacity: 1;
}


/* ==============================
   DEATH RECOVERY
   ============================== */

.death-recovery-chip {
    display: inline-flex;
    align-items: center;

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

    border: 1px solid #F7CDA961;
    border-radius: 999px;

    background: #CC7790E6;
    color: #F6E7DD;

    font-size: 0.56rem;
    white-space: nowrap;

    box-shadow: 0 3px 12px #24263F33;
}

.death-recovery-chip[hidden] {
    display: none;
}

.death-recovery-chip strong {
    color: #F6E7DD;
    font-size: 0.58rem;
}

.death-recovery-repair-button {
    min-height: 23px;

    margin-left: 2px;
    padding: 3px 7px;

    border: 1px solid #F7CDA975;
    border-radius: 999px;

    background: #F6E7DD1F;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.52rem;
    font-weight: 800;
    white-space: nowrap;

    cursor: pointer;
}

.death-recovery-repair-button:hover {
    border-color: #F7CDA9D1;

    background: #F7CDA92E;
}

.death-recovery-repair-button[hidden] {
    display: none;
}

.collection-catch-chance {
    display: block;

    margin-top: 2px;

    font-size: 0.58rem;
    opacity: 0.75;
}

.collection-item.rarity-rare {
    border-color: #343558;
}

.collection-item.rarity-epic {
    border-color: #CC7790B8;
}

.collection-item.rarity-legendary {
    border-color: #F7CDA9E0;
}

.collection-item.rarity-mythic {
    border-color: #F6E7DDEB;
    box-shadow: 0 0 10px #F6E7DD1F;
}



/* ==============================
   ENHANCED COOKED FISH
   Uses the base fish artwork with
   a warm #D59A5C quality outline.
   ============================== */

.inventory-slot.item-quality-enhanced {
    border: 2px solid #D59A5C;

    box-shadow:
        inset 0 0 0 1px #F7CDA952,
        0 0 10px #D59A5C38;
}

.inventory-slot.item-quality-enhanced:hover,
.inventory-slot.item-quality-enhanced:focus-visible {
    border-color: #D59A5C;

    box-shadow:
        inset 0 0 0 1px #F7CDA96B,
        0 0 14px #D59A5C57;
}

.pantry-item-card.item-quality-enhanced
.pantry-item-image-shell {
    border: 2px solid #D59A5C;

    box-shadow:
        inset 0 0 0 1px #F7CDA947,
        0 0 10px #D59A5C2E;
}


/* ==============================
   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 #F6E7DD47;
    border-radius: 10px;

    background: #343558EB;
    color: #F6E7DD;

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

    cursor: pointer;

    backdrop-filter: blur(6px);

    box-shadow: 0 3px 10px #24263F3D;
}

.map-favorite-jump:hover,
.map-favorites-toggle:hover {
    border-color: #F7CDA985;
    background: #B48B95EB;
}

.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 #F6E7DD3D;
    border-radius: 12px;

    background: #343558F7;
    color: #F6E7DD;

    box-shadow: 0 10px 28px #24263F57;
    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 #F6E7DD33;
    border-radius: 8px;

    background: #F6E7DDF5;
    color: #634A33;
}

#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-step-row {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 6px;
}

.activity-plan-step-direction,
.activity-plan-step-button {
    padding: 5px 7px;

    border: 1px solid #F6E7DD24;
    border-radius: 7px;

    background: #34355838;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.46rem;
    font-weight: 800;

    cursor: pointer;
}

.activity-plan-step-direction {
    flex: 0 0 auto;

    min-width: 72px;

    border-color: #F7CDA94C;
    background: #F7CDA917;
}

.activity-plan-step-direction.is-decrease {
    border-color: #F7CDA952;
    background: #F7CDA917;
}

.activity-plan-step-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    flex: 1 1 auto;

    gap: 4px;
    min-width: 0;
}

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

    padding-inline: 4px;
}

.activity-plan-step-direction:hover,
.activity-plan-step-button:hover {
    border-color: #F7CDA97A;
    background: #F7CDA921;
}



.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 #F6E7DD1F;
    border-radius: 9px;

    background: #34355838;
}

.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 #F7CDA947;
    border-radius: 8px;

    background: #F7CDA914;
    color: #F6E7DD;

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

    cursor: pointer;
}

.activity-plan-max-button:hover {
    border-color: #F7CDA985;
    background: #F7CDA924;
}


/* ==============================
   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: #F7CDA96B;
    text-underline-offset: 2px;
}

.header-action-status.can-navigate:hover .header-action-copy strong {
    text-decoration-line: underline;
}


@media (max-width: 520px) {
    .activity-plan-step-row {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-plan-step-direction {
        width: 100%;
    }
}



@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;
    }
}

/* ==============================
   ALPHA 0.1.2 SMART QUEUE
   ============================== */

.header-queued-task {
    grid-template-columns:
        20px
        22px
        minmax(0, 1fr)
        auto;
}

.header-queued-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.header-queued-control {
    display: grid;
    place-items: center;

    min-width: 22px;
    height: 22px;
    padding: 0 5px;

    border: 1px solid #F6E7DD21;
    border-radius: 7px;

    background: #F6E7DD09;
    color: #F6E7DDD6;

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

    cursor: pointer;
}

.header-queued-control:hover:not(:disabled) {
    border-color: #F7CDA961;
    background: #F7CDA917;
}

.header-queued-control:disabled {
    opacity: 0.28;
    cursor: default;
}

.header-queued-control.danger {
    color: #E7968EEB;
}

.header-queued-control.blocked {
    border-color: #F7CDA98C;
}

/* ==============================
   REUSABLE SSQ CONFIRM DIALOG
   In-game replacement for native
   browser confirm() prompts.
   ============================== */

.ssq-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: #24263FA8;
    backdrop-filter: blur(7px);
}

.ssq-confirm-dialog {
    width: min(390px, 92vw);

    padding: 18px;

    border: 1px solid #F7CDA95C;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #343558FA,
            #24263FFD
        );

    box-shadow:
        0 20px 55px #00000075,
        inset 0 1px 0 #F6E7DD12;

    color: #F6E7DD;
}

.ssq-confirm-eyebrow {
    margin: 0 0 4px;

    color: #F7CDA9;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ssq-confirm-dialog h2 {
    margin: 0;

    color: #F6E7DD;
    font-size: 1.1rem;
}

.ssq-confirm-message {
    margin: 9px 0 0;

    color: #F6E7DDD9;
    font-size: 0.82rem;
    line-height: 1.45;

    white-space: pre-line;
}

.ssq-confirm-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

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

.ssq-confirm-actions.single {
    grid-template-columns: 1fr;
}

.ssq-confirm-actions.single
.ssq-confirm-button {
    width: 100%;
}


.ssq-confirm-button {
    min-height: 42px;

    padding: 9px 12px;

    border: 1px solid #F6E7DD2E;
    border-radius: 10px;

    color: #F6E7DD;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;

    cursor: pointer;

    touch-action: manipulation;
}

.ssq-confirm-button.secondary {
    background: #F6E7DD0D;
}

.ssq-confirm-button.primary {
    border-color: #F7CDA975;

    background:
        linear-gradient(
            180deg,
            #D59A5C,
            #B97842
        );

    color: #24263F;
}

.ssq-confirm-button.destructive {
    border-color: #E7968E7A;

    background: #E7968E24;
}

.ssq-confirm-button:hover,
.ssq-confirm-button:focus-visible {
    border-color: #F7CDA9B3;

    outline: none;

    transform: translateY(-1px);
}

.ssq-confirm-button.primary:hover,
.ssq-confirm-button.primary:focus-visible {
    background:
        linear-gradient(
            180deg,
            #E8B272,
            #C88A50
        );
}

@media (max-width: 520px) {
    .ssq-confirm-dialog {
        padding: 15px;
    }

    .ssq-confirm-actions {
        grid-template-columns: 1fr;
    }

    .ssq-confirm-button.primary {
        order: -1;
    }
}


.activity-decision-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: #34355894;
    backdrop-filter: blur(5px);
}

.activity-decision-overlay[hidden] {
    display: none;
}

.activity-decision-dialog {
    width: min(420px, 94vw);

    padding: 16px;

    border: 1px solid #F6E7DD47;
    border-radius: 16px;

    background: #343558F7;
    box-shadow: 0 18px 45px #24263F57;

    color: #24263F;
}

.activity-decision-dialog h3 {
    margin: 0 0 4px;

    color: #F6E7DD;
    font-size: 1.08rem;
}

.activity-decision-current {
    margin: 0 0 12px;

    color: #F6E7DDF0;
    font-size: 0.82rem;
}

.activity-decision-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.activity-decision-option {
    display: grid;
    gap: 2px;

    padding: 10px;

    border: 1px solid #F6E7DD2E;
    border-radius: 10px;

    background: #F6E7DD0E;
    color: #24263F;

    text-align: left;
    cursor: pointer;
}

.activity-decision-option:hover {
    border-color: #F7CDA97A;
    background: #F7CDA91A;
}

.activity-decision-option.destructive:hover {
    border-color: #F7CDA985;
    background: #F7CDA91A;
}

.activity-decision-option strong {
    color: #F6E7DD;
    font-size: 0.82rem;
}

.activity-decision-option small {
    color: #F6E7DDDB;
    font-size: 0.70rem;
}

.activity-decision-error {
    display: block;
    min-height: 1.1em;

    margin-top: 8px;

    color: #F7CDA9;
    font-size: 0.72rem;
}

.activity-decision-cancel {
    width: 100%;

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

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #F6E7DDE6;

    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.activity-decision-cancel:hover {
    color: #24263F;
    background: #F6E7DD0D;
}

@media (max-width: 700px) {
    .activity-decision-options {
        grid-template-columns: 1fr;
    }

    .header-queued-controls {
        gap: 2px;
    }

    .header-queued-control {
        min-width: 20px;
        padding: 0 4px;
    }
}

.activity-decision-option:disabled {
    opacity: 0.38;
    cursor: default;
}


/* ==============================
   ALPHA 0.1.3 MOBILE POLISH
   ============================== */

.header-action-jump {
    appearance: none;

    padding: 0;

    border: 1px solid transparent;

    color: inherit;

    font-family: inherit;

    cursor: default;
}

.header-action-jump.can-navigate {
    border-color: #F7CDA947;

    cursor: pointer;

    touch-action: manipulation;
}

.header-action-jump.can-navigate:hover,
.header-action-jump.can-navigate:focus-visible {
    border-color: #F7CDA9AD;

    background: #F7CDA929;

    outline: none;
}

.header-action-jump:disabled {
    opacity: 1;
}

.header-action-status.can-navigate .header-action-copy,
.header-action-status.can-navigate .header-action-progress-track {
    cursor: default;
}

.header-action-status.can-navigate .header-action-copy strong,
.header-action-status.can-navigate:hover .header-action-copy strong {
    text-decoration-line: none;
}

.map-favorites,
.map-favorites * {
    touch-action: manipulation;
}

.map-favorites-popover select {
    min-height: 40px;

    font-size: 0.7rem;
}

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

        width: min(180px, calc(100% - 150px));

        gap: 4px;

        transform: none;
    }

    .action-notification {
        grid-template-columns: 26px minmax(0, 1fr);

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

        border-radius: 9px;

        box-shadow: 0 5px 16px #24263F4C;
    }

    .action-notification-icon {
        width: 26px;
        height: 26px;

        border-radius: 7px;

        font-size: 0.82rem;
    }

    .action-notification-icon img {
        width: 21px;
        height: 21px;
    }

    .action-notification-text {
        gap: 1px;
    }

    .action-notification-text strong {
        overflow: hidden;

        font-size: 0.56rem;

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

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

    .action-notification-text small {
        display: none;
    }

    .map-favorites-popover {
        width: min(280px, calc(100vw - 20px));
    }

    .map-favorites-popover select {
        min-height: 44px;

        font-size: 16px;
    }
}


@media (max-width: 700px) {
    .map-marker-title-banner {
        width: 168px;
        min-height: 42px;

        padding: 7px 25px;

        font-size: 0.72rem;
    }

    .map-marker.named-hotspot:not([data-marker-type="building"]) {
        width: 168px;
        min-height: 42px;
    }

    .map-marker-title-banner.long-label {
        font-size: 0.64rem;
    }

    .map-marker-title-banner.very-long-label {
        font-size: 0.58rem;
    }

    .map-marker.building-hotspot .map-marker-title-banner {
        width: 176px;
    }

    .map-back-button {
        top: 14px;
        left: 14px;

        padding: 9px 14px;

        font-size: 0.9rem;
    }
}


/* ALPHA READABILITY + COMBAT FAMILY MAP */
@media (max-width: 700px) {
    .activity-decision-dialog {
        padding: 18px;
    }

    .activity-decision-dialog h3 {
        font-size: 1.18rem;
    }

    .activity-decision-current {
        font-size: 0.9rem;
    }

    .activity-decision-option {
        min-height: 58px;
        padding: 12px 14px;
    }

    .activity-decision-option strong {
        font-size: 0.9rem;
    }

    .activity-decision-option small {
        font-size: 0.76rem;
    }

    .header-action-copy strong {
        font-size: 0.88rem;
    }

    .header-action-copy span {
        font-size: 0.72rem;
    }

    .map-marker[data-marker-type="combat"],
    .map-marker[data-marker-type="combat"] .map-marker-title-banner {
        width: 112px;
        min-height: 34px;
    }

    .map-marker[data-marker-type="combat"] .map-marker-title-banner {
        padding: 5px 19px;
        font-size: 0.60rem;
    }
}



/* ==============================
   ACTIVITY PANEL SECTION TABS
   Keeps skill panels compact so
   the right column is not one long
   scrolling stack of cards.
   ============================== */

.activity-section-tabs {
    position: sticky;
    top: 0;
    z-index: 6;

    display: grid;
    grid-template-columns:
        repeat(
            var(--activity-tab-count, 3),
            minmax(0, 1fr)
        );

    gap: 5px;

    margin: 0 0 8px;
    padding: 5px;

    border: 1px solid #9E629538;
    border-radius: 12px;

    background: #24263FF7;

    box-shadow: 0 5px 14px #24263F2E;
}

.activity-section-tab {
    min-width: 0;
    min-height: 34px;

    padding: 6px 5px;

    border: 1px solid #9E629538;
    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #9E62951F,
            #9E62950D
        );
    color: #F6E7DDD1;

    font: inherit;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.15;

    cursor: pointer;

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

.activity-section-tab:hover,
.activity-section-tab.selected {
    border-color: #F7CDA99E;

    background:
        linear-gradient(
            180deg,
            #F7CDA938,
            #B48B951C
        );
    color: #F6E7DD;
}

.activity-section-tab.selected {
    box-shadow:
        inset 0 0 0 1px #F7CDA91F,
        0 2px 8px #24263F24;
}

.activity-section-tab:active {
    transform: translateY(1px);
}

.activity-section-tab-panel {
    min-width: 0;
}

.activity-section-tab-panel[hidden] {
    display: none;
}

.activity-section-tab-panel > *:last-child {
    margin-bottom: 0;
}



/* ==============================
   QUEST TYPE TABS
   Discovery and regular quests are
   separate systems but should feel
   like one themed quest journal.
   ============================== */

.quest-type-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin-bottom: 10px;
    padding: 5px;

    border: 1px solid #9E629542;
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #9E62951C,
            #24263F2E
        );

    box-shadow: inset 0 1px 0 #F6E7DD0A;
}

.quest-type-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 5px;

    min-width: 0;
    min-height: 38px;

    padding: 7px 7px;

    border: 1px solid #9E629533;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #9E629517,
            #9E629508
        );
    color: #F6E7DDC2;

    font: inherit;
    font-size: 0.57rem;
    font-weight: 800;
    text-align: left;

    cursor: pointer;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        color 120ms ease;
}

.quest-type-tab > span:first-child {
    overflow: hidden;

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

.quest-type-tab:hover,
.quest-type-tab.active {
    border-color: #F7CDA994;

    background:
        linear-gradient(
            180deg,
            #F7CDA92E,
            #B48B9517
        );
    color: #F6E7DD;
}

.quest-type-tab.active {
    box-shadow:
        inset 0 0 0 1px #F7CDA91A,
        0 2px 8px #24263F24;
}

.quest-type-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;

    padding: 3px 6px;

    border: 1px solid #F7CDA947;
    border-radius: 999px;

    background: #F7CDA91A;
    color: #F6E7DDD1;

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

.quest-type-tab.active .quest-type-count {
    border-color: #F7CDA96B;

    background: #F7CDA924;
    color: #F6E7DD;
}

.quest-type-panel[hidden] {
    display: none;
}

.quest-panel-heading {
    margin-bottom: 8px;
    padding-bottom: 7px;

    border-bottom: 1px solid #9E629529;
}

.quest-panel-heading .panel-label {
    color: #F7CDA9B8;
}



@media (max-width: 560px) {
    .activity-section-tab,
    .quest-type-tab {
        font-size: 0.54rem;
    }

    .activity-section-tabs {
        gap: 4px;
        padding: 4px;
    }
}

/* Keep both quest-tab labels readable in the narrow left sidebar. */
.quest-type-tab {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;

    min-height: 50px;

    text-align: center;
}

.quest-type-tab > span:first-child {
    overflow: visible;

    text-overflow: clip;
    white-space: normal;
}

.quest-type-count {
    justify-self: center;
}



/* ==============================
   SALEM QUEST BOARD
   Regular Quest Board v1.
   ============================== */

.quest-board-region-content[hidden] {
    display: none;
}

.quest-board-card {
    display: grid;

    gap: 10px;
}

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

    gap: 10px;
}

.quest-board-header h2 {
    margin-bottom: 0;
}

.quest-board-stats {
    display: grid;

    gap: 4px;

    flex: 0 0 auto;
}

.quest-board-stats span {
    padding: 4px 7px;

    border: 1px solid #F7CDA942;
    border-radius: 999px;

    background: #F7CDA917;
    color: #F6E7DDD1;

    font-size: 0.54rem;
    font-weight: 800;
    text-align: center;
}

.quest-board-intro {
    margin: 0;
    padding: 8px 9px;

    border: 1px solid #9E629533;
    border-radius: 9px;

    background: #9E629514;

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

.quest-board-list {
    display: grid;

    gap: 9px;
}

.quest-board-request {
    display: grid;

    gap: 7px;

    padding: 10px;

    border: 1px solid #B48B9557;
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #343558F5,
            #343558F5
        );

    box-shadow:
        inset 0 1px 0 #F6E7DD09,
        0 4px 12px #24263F1A;
}

.quest-board-request-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;
}

.quest-board-request-title-wrap {
    flex: 1 1 180px;
    min-width: 0;
}

.quest-board-category {
    display: inline-block;

    margin-bottom: 3px;

    color: #F7CDA9C2;

    font-size: 0.50rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quest-board-request-title {
    margin: 0;

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

.quest-board-reward {
    flex: 0 1 auto;
    align-self: flex-start;

    max-width: 100%;
    padding: 4px 7px;

    border: 1px solid #F7CDA942;
    border-radius: 999px;

    background: #F7CDA914;
    color: #D59A5C;

    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.quest-board-description {
    margin: 0;

    color: #F6E7DDBD;

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

.quest-board-objectives {
    display: grid;

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

    list-style: none;
}

.quest-board-objective {
    padding: 5px 7px;

    border-left: 2px solid #9E629570;
    border-radius: 0 7px 7px 0;

    background: #9E629512;

    font-size: 0.57rem;
}

.quest-board-accept-button,
.quest-claim-button {
    width: 100%;

    padding: 7px 9px;

    border: 1px solid #F7CDA97A;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #F7CDA933,
            #B48B951A
        );
    color: #F6E7DD;

    font: inherit;
    font-size: 0.59rem;
    font-weight: 800;

    cursor: pointer;
}

.quest-board-accept-button:hover,
.quest-claim-button:hover {
    border-color: #F7CDA9B8;

    background:
        linear-gradient(
            180deg,
            #F7CDA947,
            #B48B9526
        );
}

.quest-board-accept-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.quest-board-empty {
    margin: 0;
    padding: 12px;

    border: 1px dashed #9E629547;
    border-radius: 10px;

    color: #F6E7DDA8;

    font-size: 0.62rem;
    line-height: 1.5;
    text-align: center;
}

.quest-tracker-card.is-ready-to-claim {
    border-color: #F7CDA985;

    box-shadow:
        inset 0 0 0 1px #F7CDA914,
        0 3px 10px #24263F1A;
}

.quest-claim-button {
    margin-top: 8px;

    border-color: #F7CDA980;

    background:
        linear-gradient(
            180deg,
            #F7CDA933,
            #D59A5C1A
        );
}



@media (max-width: 560px) {
    .quest-board-header,
    .quest-board-request-heading {
        display: grid;
    }

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

    .quest-board-reward {
        justify-self: start;
    }
}

.quest-abandon-button {
    width: 100%;

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

    border: 1px solid #9E62953D;
    border-radius: 8px;

    background: #9E62950F;
    color: #F6E7DD9E;

    font: inherit;
    font-size: 0.55rem;
    font-weight: 700;

    cursor: pointer;
}

.quest-abandon-button:hover {
    border-color: #F7CDA95C;
    color: #F6E7DDE0;
}


/* ==============================
   SALEM ECONOMY V1
   ============================== */

.general-shop-grid,
.repair-shop-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.general-shop-card,
.repair-item-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #D59A5C40;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            #F6E7DDF5,
            #F6E7DD73
        );
    box-shadow: 0 6px 18px #634A3314;
}

.general-shop-card.sold-out {
    opacity: 0.58;
}

.secret-pet-shop-card {
    border-color: #F6D74A70;

    background:
        linear-gradient(
            135deg,
            #6F5A2138,
            #F6D74A10 46%,
            #34355866
        );

    box-shadow:
        inset 0 0 0 1px #F6D74A1F,
        0 0 18px #F6D74A14;
}

.secret-pet-shop-icon {
    overflow: hidden;

    border-color: #F6D74A61;
    background: #F6D74A12;
}

.secret-pet-shop-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 5px #24263F61
        );
}

.secret-pet-shop-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    margin-bottom: 4px;
    padding: 3px 6px;

    border: 1px solid #F6D74A61;
    border-radius: 999px;

    background: #F6D74A17;
    color: #FBEA8E;

    font-size: 0.43rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.secret-pet-buy-button {
    border-color: #F6D74A5C !important;

    background: #F6D74A17 !important;
    color: #FBEA8E !important;
}

.general-shop-icon,
.repair-item-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #F6E7DDC7;
    font-size: 1.45rem;
    box-shadow: inset 0 0 0 1px #634A3314;
}

.general-shop-copy,
.repair-item-copy {
    min-width: 0;
}

.general-shop-heading,
.repair-item-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.general-shop-heading strong,
.repair-item-heading strong {
    color: #634A33;
}

.general-shop-heading span,
.repair-item-heading span {
    flex: 0 0 auto;
    color: #D59A5C;
    font-size: 0.78rem;
    font-weight: 700;
}

.general-shop-copy p,
.repair-item-copy p {
    margin: 7px 0;
    color: #634A33C7;
    font-size: 0.82rem;
    line-height: 1.4;
}

.general-shop-copy small {
    display: block;
    color: #634A339E;
    font-size: 0.75rem;
}

.general-shop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.shop-buy-button,
.repair-button,
.repair-all-button {
    border: 1px solid #D59A5C47;
    border-radius: 999px;
    padding: 7px 11px;
    background: #F6E7DDDB;
    color: #634A33;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

.shop-buy-button:hover:not(:disabled),
.repair-button:hover:not(:disabled),
.repair-all-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #F6E7DD;
    box-shadow: 0 5px 12px #634A331F;
}

.shop-buy-button:disabled,
.repair-button:disabled,
.repair-all-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.general-shop-card {
    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 9px;

    padding: 9px;

    border: 1px solid #F6E7DD1C;
    border-radius: 11px;

    background: #F6E7DD06;
    box-shadow: none;
}

.general-shop-icon {
    width: 58px;
    height: 58px;

    overflow: hidden;

    border: 1px solid #F7CDA91F;
    border-radius: 10px;

    background: #F7CDA90A;
    box-shadow: none;
}

.general-shop-icon img {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    padding: 5px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 5px #24263F47
        );
}

.general-shop-heading strong {
    color: #F6E7DDF0;

    font-size: 0.49rem;
}

.general-shop-heading span {
    color: #F7CDA9E6;

    font-size: 0.43rem;
}

.general-shop-copy p {
    margin: 5px 0 0;

    color: #F6E7DD9E;

    font-size: 0.4rem;
    line-height: 1.4;
}

.general-shop-copy small {
    margin-top: 3px;

    color: #F7CDA9B8;

    font-size: 0.39rem;
}

.general-shop-actions {
    gap: 6px;

    margin-top: 8px;
}

.general-shop-card .shop-buy-button {
    padding: 6px 8px;

    border: 1px solid #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;
    color: #F6E7DDDB;

    font-size: 0.43rem;
}

.general-shop-card .shop-buy-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #F7CDA947;

    background: #F7CDA90F;
    box-shadow: none;
}

.repair-npc-card {
    border-color: #F7CDA98C;
}

.repair-heading {
    gap: 12px;
}

.repair-all-button {
    align-self: center;
    white-space: nowrap;
    background: #F7CDA973;
}

.repair-item-card {
    border-color: #E7968E38;
    background:
        linear-gradient(
            145deg,
            #F6E7DDFA,
            #F7CDA952
        );
}

.repair-item-copy p {
    color: #634A33;
    font-weight: 650;
}

.repair-button {
    margin-top: 4px;
    background: #F7CDA985;
}

.repair-shop-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 24px 14px;
    border: 1px dashed #D59A5C52;
    border-radius: 18px;
    text-align: center;
    color: #D59A5C;
    background: #F7CDA91F;
}

.repair-shop-empty > span {
    font-size: 1.6rem;
}

.repair-shop-empty p {
    margin: 0;
    font-size: 0.8rem;
}

.equipment-slot.broken {
    position: relative;
    border-color: #E7968EB2;
    background:
        linear-gradient(
            145deg,
            #F7CDA9B2,
            #634A3324
        );
    filter: saturate(0.68);
}

.equipment-slot.broken::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 44%,
            #634A3361 45%,
            #634A3361 48%,
            transparent 49%
        );
}

.equipment-broken-badge {
    position: absolute;
    z-index: 2;
    right: 3px;
    bottom: 3px;
    max-width: calc(100% - 6px);
    padding: 2px 4px;
    border-radius: 999px;
    background: #634A33;
    color: #F6E7DD;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.equipment-condition-badge {
    position: absolute;
    z-index: 2;
    right: 3px;
    bottom: 3px;
    padding: 2px 5px;
    border: 1px solid #8C714E66;
    border-radius: 999px;
    background: #F6E7DD;
    color: #634A33;
    font-size: 0.48rem;
    font-weight: 900;
    line-height: 1.1;
    box-shadow: 0 1px 3px #3E2E2326;
}

@media (max-width: 700px) {
    .general-shop-heading,
    .repair-item-heading,
    .repair-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .repair-all-button {
        align-self: flex-start;
    }
}


/* ==============================
   ORDINARY ITEM ENCHANTING
   ============================== */

.gear-enchant-intro {
    margin-bottom: 6px;

    font-size: 0.5rem;
    line-height: 1.45;

    opacity: 0.72;
}

.gear-enchant-section {
    margin-top: 10px;
}

.gear-enchant-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

.gear-enchant-section-title strong {
    font-size: 0.57rem;
}

.gear-enchant-section-title small {
    font-size: 0.43rem;

    opacity: 0.55;
}

.gear-enchant-active,
.gear-enchant-list {
    display: grid;

    gap: 7px;
}

.gear-enchant-active-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;

    gap: 7px;
    padding: 7px;

    border: 1px solid #F7CDA947;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #F6E7DD14,
        #F7CDA90D
    );
}

.gear-enchant-active-card.inactive {
    border-color: #F7CDA924;

    opacity: 0.58;
}

.gear-enchant-active-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid #F6E7DD38;
    border-radius: 9px;

    background: #F6E7DD14;

    font-size: 0.8rem;
}

.gear-enchant-active-card > div {
    display: grid;

    gap: 2px;

    min-width: 0;
}

.gear-enchant-active-card > div strong {
    overflow: hidden;

    font-size: 0.52rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gear-enchant-active-card > div span {
    color: #E7968E;

    font-size: 0.48rem;
}

.gear-enchant-active-card > div small {
    font-size: 0.43rem;
    line-height: 1.35;

    opacity: 0.65;
}

.gear-enchant-strip {
    padding: 5px 7px;

    border: 1px solid #F7CDA93D;
    border-radius: 7px;

    background: #F7CDA912;
    color: #24263F;

    font: inherit;
    font-size: 0.43rem;

    cursor: pointer;
}

.gear-enchant-strip:hover {
    border-color: #F7CDA98C;

    background: #F7CDA91F;
}

.gear-enchant-card {
    display: grid;

    gap: 5px;
    padding: 8px;

    border: 1px solid #F6E7DD26;
    border-radius: 10px;

    background: #F6E7DD06;
}

.gear-enchant-card.locked {
    min-height: 48px;

    place-content: center;

    background: #634A3324;

    text-align: center;
}

.gear-enchant-card.locked strong {
    letter-spacing: 0.12em;

    opacity: 0.42;
}

.gear-enchant-card.locked small {
    font-size: 0.43rem;

    opacity: 0.38;
}

.gear-enchant-card.fragment {
    border-color: #F7CDA94C;

    background: #F7CDA90E;
}

.gear-enchant-card.fragment small {
    font-size: 0.45rem;
    line-height: 1.4;

    opacity: 0.7;
}

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

    gap: 8px;
}

.gear-enchant-heading strong {
    color: #E7968E;

    font-size: 0.55rem;
}

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

    font-size: 0.43rem;

    opacity: 0.58;
}

.gear-enchant-effect {
    margin: 0;

    font-size: 0.51rem;
    font-weight: 700;
}

.gear-enchant-card > small {
    font-size: 0.44rem;

    opacity: 0.58;
}

.gear-enchant-costs {
    display: grid;

    gap: 2px;
    margin: 2px 0;
    padding: 0;

    list-style: none;

    font-size: 0.43rem;
}

.gear-enchant-costs .missing {
    opacity: 0.4;
}

.gear-enchant-targets {
    display: grid;

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

.gear-enchant-apply {
    width: 100%;
    padding: 6px 7px;

    border: 1px solid #F7CDA952;
    border-radius: 8px;

    background: #F7CDA917;
    color: #24263F;

    font: inherit;
    font-size: 0.44rem;
    line-height: 1.3;

    cursor: pointer;
}

.gear-enchant-apply:hover:not(:disabled) {
    border-color: #F7CDA99E;

    background: #F7CDA924;
}

.gear-enchant-apply:disabled {
    cursor: not-allowed;

    opacity: 0.42;
}

.gear-enchant-no-target {
    padding: 5px 0;

    font-size: 0.44rem;

    opacity: 0.55;
}

.equipment-slot.enchanted,
.tool-slot.enchanted {
    position: relative;

    box-shadow:
        inset 0 0 0 1px #F6E7DD2E,
        0 0 10px #F6E7DD14;
}

.equipment-enchant-badge {
    position: absolute;
    top: 2px;
    right: 2px;

    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    border: 1px solid #F6E7DD61;
    border-radius: 999px;

    background: #634A33E0;

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

.equipment-enchant-badge.inactive {
    filter: grayscale(1);

    opacity: 0.5;
}


/* ==============================
   ALPHA QOL - COMPACT LIVE HUD
   ============================== */

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

    width: 100%;
    height: 30px;
    min-width: 0;

    overflow: hidden;

    gap: 5px;
    margin-top: 4px;
    padding: 3px 5px;

    border: 1px solid #F7CDA942;
    border-radius: 7px;

    background: #F7CDA914;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-2px);

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

/*
 * Keep this slot in the activity bar even while there is no feedback.
 * Using display: none here made every catch change the bar height and
 * caused the whole page to jump up and down, especially on mobile.
 */
.header-action-feedback[hidden] {
    display: grid;

    visibility: hidden;
}

.header-action-feedback.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.header-action-feedback.action-rarity-uncommon {
    border-color: #D59A5C85;
}

.header-action-feedback.action-rarity-rare,
.header-action-feedback.action-rarity-epic,
.header-action-feedback.action-rarity-legendary,
.header-action-feedback.action-rarity-mythic {
    border-color: #9E62959E;
}

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

    width: 18px;
    height: 18px;

    font-size: 0.68rem;
}

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

    min-width: 0;

    gap: 2px 6px;
}

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

    overflow: hidden;

    font-size: 0.54rem;

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

.header-action-feedback-copy span {
    color: #D59A5C;

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

    white-space: nowrap;
}

.header-action-feedback-copy small {
    grid-column: 1 / -1;

    overflow: hidden;

    color: #F6E7DDAD;

    font-size: 0.44rem;

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


/* Keep map/combat view toggles readable on the dark pill. */
.combat-view-toggle,
.combat-return-button {
    color: #F6E7DD;
}


/* Smaller map controls. */
.map-zoom-controls {
    right: 10px;
    bottom: 10px;

    gap: 3px;
}

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

    border-width: 1px;
    border-radius: 8px;

    font-size: 0.88rem;
}


/* Emoji-only favourite quick hops, stacked up the map edge. */
.map-favorites {
    right: 10px;
    bottom: 46px;

    gap: 4px;
}

.map-favorites-quick {
    flex-direction: column;

    gap: 4px;
}

.map-favorite-jump,
.map-favorites-toggle {
    display: grid;
    place-items: center;

    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;

    padding: 0;

    border-radius: 8px;

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

.map-favorites-popover {
    position: absolute;
    right: 36px;
    bottom: 0;
}


@media (max-width: 600px) {
    .game-header {
        padding-top: 60px;
    }

    .header-action-bar {
        position: fixed;
        top: max(6px, env(safe-area-inset-top));
        right: 8px;
        left: 8px;

        z-index: 40;

        width: auto;
        max-width: 430px;

        margin: 0 auto;

        border-color: #9E62955C;

        background: #24263FF7;

        box-shadow: 0 5px 18px #24263F4C;
        backdrop-filter: blur(10px);
    }

    .header-action-feedback {
        margin-top: 3px;
        padding: 2px 4px;
    }

    .header-action-feedback-copy strong {
        font-size: 0.50rem;
    }

    .header-action-feedback-copy span {
        font-size: 0.45rem;
    }

    .header-action-feedback-copy small {
        display: none;
    }

    .map-zoom-controls {
        right: 7px;
        bottom: 7px;
    }

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

        border-radius: 7px;

        font-size: 0.76rem;
    }

    .map-favorites {
        right: 7px;
        bottom: 39px;
    }

    .map-favorite-jump,
    .map-favorites-toggle {
        width: 27px;
        min-width: 27px;
        height: 27px;
        min-height: 27px;

        border-radius: 7px;

        font-size: 0.74rem;
    }

    .map-favorites-popover {
        right: 33px;
        bottom: 0;

        width: min(260px, calc(100vw - 56px));
    }
}


/* ==============================
   ALPHA QOL - ULTRA COMPACT HUD
   Keeps catch/item feedback beside
   the progress bar instead of below
   it, so the sticky mobile HUD stays
   thin and never changes height.
   ============================== */

.header-action-bar {
    width: min(470px, 100%);
}

.header-action-status {
    display: grid;
    grid-template-areas:
        "copy copy"
        "progress feedback"
        "queue queue"
        "budget budget";
    grid-template-columns:
        minmax(70px, 1fr)
        minmax(105px, auto);
    align-items: center;

    column-gap: 7px;
}

.header-action-copy {
    grid-area: copy;
}

.header-action-progress-track {
    grid-area: progress;

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

.header-action-feedback {
    grid-area: feedback;

    display: flex;
    align-items: center;

    width: auto;
    min-width: 0;
    height: 20px;

    gap: 4px;
    margin-top: 2px;
    padding: 1px 4px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    transform: none;
}

.header-action-feedback[hidden] {
    display: flex;
}

.header-action-feedback.show {
    transform: none;
}

.header-action-feedback-icon {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    overflow: hidden;

    border-radius: 4px;

    background: #F6E7DD0F;

    font-size: 0.62rem;
}

.header-action-feedback-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

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

    min-width: 0;

    gap: 4px;
}

.header-action-feedback-copy strong {
    flex: 1 1 auto;

    min-width: 0;

    font-size: 0.48rem;
    line-height: 1;

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

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

    color: #D59A5C;

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

.header-action-feedback-copy small {
    display: none;
}

.header-queue-row {
    grid-area: queue;
}

.header-queue-budget-track {
    grid-area: budget;
}


@media (max-width: 600px) {
    .game-header {
        padding-top: 48px;
    }

    .header-action-bar {
        top: max(4px, env(safe-area-inset-top));
        right: 5px;
        left: 5px;

        max-width: none;

        grid-template-columns:
            24px minmax(0, 1fr) 25px;

        gap: 5px;
        padding: 3px 5px;

        border-radius: 7px;
    }

    .header-action-status-icon {
        width: 24px;
        height: 24px;

        border-radius: 6px;

        font-size: 0.70rem;
    }

    .header-stop-action {
        width: 25px;
        min-width: 25px;
        height: 25px;

        overflow: hidden;

        padding: 0;

        border-radius: 6px;

        color: transparent;

        font-size: 0;
    }

    .header-stop-action::before {
        color: #F6E7DDEB;

        content: "■";

        font-size: 0.58rem;
    }

    .header-action-status {
        grid-template-columns:
            minmax(72px, 1fr)
            minmax(112px, 46%);

        column-gap: 5px;
    }

    .header-action-copy strong {
        font-size: 0.61rem;
        line-height: 1.05;
    }

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

    .header-action-progress-track {
        height: 3px;
        margin-top: 2px;
    }

    .header-action-feedback {
        height: 17px;

        gap: 3px;
        margin-top: 1px;
        padding: 0 2px;
    }

    .header-action-feedback-icon {
        width: 15px;
        height: 15px;

        border-radius: 3px;
    }

    .header-action-feedback-copy {
        gap: 3px;
    }

    .header-action-feedback-copy strong {
        max-width: 78px;

        font-size: 0.43rem;
    }

    .header-action-feedback-copy span {
        display: inline;

        font-size: 0.42rem;
    }

    .header-queue-row {
        gap: 3px;
        margin-top: 1px;
    }

    .header-queue-row >
    .header-queue-time-chip,
    .header-queue-row >
    .header-queue-cap-chip {
        display: none;
    }

    .header-queue-toggle {
        min-height: 17px;
        padding: 1px 5px;

        font-size: 0.36rem;
    }

    .header-queue-budget-track {
        height: 2px;
        margin-top: 1px;
    }
}


/* ==============================
   ALPHA QOL - STABLE HUD WIDTH
   Keep a permanent horizontal slot
   for catch feedback so desktop's
   progress bar never resizes when a
   result appears or fades away.
   ============================== */

@media (min-width: 601px) {
    .header-action-status {
        grid-template-columns:
            minmax(120px, 1fr)
            175px;
    }

    .header-action-feedback {
        width: 175px;
        max-width: 175px;
    }
}


/* ==============================
   ALPHA QOL - MOBILE STICKY HEADER
   The complete header stays together:
   brand/actions + activity HUD. The
   activity bar no longer floats over
   or covers the first row of controls.
   ============================== */

@media (max-width: 600px) {
    .game-header {
        position: sticky;
        top: 0;

        z-index: 42;

        padding:
            calc(4px + env(safe-area-inset-top))
            8px
            5px;

        background: #24263FFB;

        border-bottom-color: #9E629557;

        box-shadow: 0 5px 18px #24263F4C;
        backdrop-filter: blur(10px);
    }

    .header-action-bar {
        position: static;

        top: auto;
        right: auto;
        left: auto;

        z-index: auto;

        width: 100%;
        max-width: none;

        margin: 0;

        justify-self: stretch;

        box-shadow: none;
        backdrop-filter: none;
    }
}


/* ==============================
   ALPHA QOL - MOBILE QUEUE CLAMP
   Keep the queue dropdown inside the
   viewport when the compact queue
   toggle sits on the left side of the
   sticky activity header.
   ============================== */

@media (max-width: 600px) {
    .header-queue-dropdown {
        right: 0;
        left: auto;

        width: min(330px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}


/* ==============================
   COMBAT UI V7 - SCENE FIRST
   Keep the monster in the world,
   reduce permanent card chrome and
   give mobile Combat real vertical
   space instead of the map's 3:2 box.
   ============================== */

.combat-board-enemy > .combat-loot-codex {
    display: none;
}

.combat-board-player,
.combat-board-enemy {
    gap: 7px;

    padding: 10px 12px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #343558E0,
            #3435589E
        );

    box-shadow: none;
    backdrop-filter: blur(5px);
}

.combat-board-player {
    top: 16px;
    left: 16px;

    width: min(31%, 300px);
    min-width: 220px;
}

.combat-board-enemy {
    top: 52px;
    right: 16px;

    width: min(25%, 255px);
    min-width: 190px;

    background:
        linear-gradient(
            270deg,
            #343558E0,
            #34355894
        );
}

.combat-board-heading strong {
    font-size: 0.84rem;
}

.combat-board-heading small {
    font-size: 0.54rem;
}

.combat-board-heading > span {
    padding: 2px 6px;

    background: #F6E7DD14;

    font-size: 0.56rem;
}

.combat-board-vital {
    gap: 3px;
}

.combat-board-vital-heading {
    font-size: 0.58rem;
}

.combat-board-bar-track {
    height: 7px;
}

.combat-enemy-stage-world {
    position: absolute;
    right: 12%;
    bottom: 19%;

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

    width: min(38%, 420px);
    height: 62%;
    min-height: 0;

    pointer-events: none;

    z-index: 2;
}

.combat-enemy-stage-world::after {
    position: absolute;
    right: 16%;
    bottom: 2%;
    left: 16%;

    height: 8%;

    border-radius: 50%;

    background: #3435583D;
    filter: blur(7px);

    content: "";

    transform: scaleY(0.45);

    z-index: -1;
}

.combat-enemy-stage-world img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;

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

    filter: drop-shadow(0 8px 7px #24263F4C);
}

.combat-enemy-stage-world .combat-enemy-sprite-fallback {
    width: auto;
    min-height: 0;

    font-size: clamp(4.2rem, 12vw, 8rem);
}

.combat-player-tabs {
    gap: 3px;
}

.combat-player-tab {
    padding: 4px 3px;

    border: 0;
    border-radius: 6px;

    background: #F6E7DD0F;

    font-size: 0.50rem;
}

.combat-board-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 3px;
}

.combat-board-stat-grid span {
    padding: 3px 4px;

    border-radius: 5px;

    background: #F6E7DD0F;

    font-size: 0.49rem;
}

.combat-board-casts {
    bottom: 12px;

    gap: 5px;

    width: min(48%, 520px);

    padding: 7px 9px;

    border: 0;
    border-radius: 10px;

    background: #24263FD1;

    box-shadow: none;
    backdrop-filter: blur(6px);
}

.combat-cast-row {
    grid-template-columns: 70px minmax(0, 1fr);

    gap: 6px;

    font-size: 0.54rem;
}

.combat-cast-track {
    height: 5px;
}

.combat-board-actions button {
    min-height: 28px;

    padding: 5px 8px;

    border-radius: 6px;

    font-size: 0.62rem;
}

#board-combat-status {
    font-size: 0.58rem;
}

.combat-view-toggle,
.combat-return-button {
    padding: 5px 8px;

    border-radius: 7px;

    font-size: 0.60rem;
}


@media (max-width: 620px) {
    .map-panel.combat-mode {
        height: clamp(430px, 64svh, 560px);

        aspect-ratio: auto;
    }

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

        aspect-ratio: auto;
    }

    .combat-viewport {
        border-radius: 14px;
    }

    .combat-background-image {
        object-position: center center;
    }

    .combat-view-toggle {
        top: 7px;
        left: 7px;
        right: auto;

        z-index: 9;
    }

    .combat-board-player,
    .combat-board-enemy {
        top: 38px;

        min-width: 0;
        max-height: none;

        padding: 7px 8px;

        border-radius: 8px;

        overflow: visible;
    }

    .combat-board-player {
        left: 7px;

        width: calc(52% - 10px);

        background:
            linear-gradient(
                90deg,
                #24263FE6,
                #24263F8F
            );
    }

    .combat-board-enemy {
        right: 7px;

        width: calc(48% - 10px);

        background:
            linear-gradient(
                270deg,
                #24263FE6,
                #24263F8F
            );
    }

    .combat-board-heading {
        gap: 5px;
    }

    .combat-board-heading strong {
        font-size: 0.67rem;
    }

    .combat-board-heading small {
        font-size: 0.42rem;
    }

    .combat-board-heading > span {
        padding: 1px 4px;

        font-size: 0.42rem;
    }

    .combat-board-vital-heading {
        font-size: 0.46rem;
    }

    .combat-board-bar-track {
        height: 5px;
    }

    [data-combat-player-tab="stats"],
    [data-combat-player-panel="stats"] {
        display: none !important;
    }

    .combat-player-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        margin-top: 1px;
    }

    .combat-player-tab {
        padding: 3px 2px;

        font-size: 0.42rem;
    }

    .combat-player-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;

        width: min(88vw, 300px);
        max-height: 150px;

        overflow-y: auto;

        padding: 7px;

        border-radius: 8px;

        background: #24263FF5;

        box-shadow: 0 6px 18px #24263F47;

        z-index: 12;
    }

    .combat-supply-table {
        gap: 4px;
    }

    .combat-supply-row {
        grid-template-columns: 50px minmax(0, 1fr) auto;

        gap: 4px;

        font-size: 0.48rem;
    }

    .combat-supply-row select,
    .combat-supply-row button,
    .combat-auto-thresholds select {
        padding: 4px 5px;

        font-size: 0.48rem;
    }

    .combat-auto-toggle,
    .combat-auto-thresholds label,
    #combat-auto-description {
        font-size: 0.48rem;
    }

    .combat-enemy-stage-world {
        right: 8%;
        bottom: 28%;

        width: 84%;
        height: 56%;
    }

    .combat-enemy-stage-world::after {
        right: 24%;
        bottom: 0;
        left: 24%;

        height: 10%;
    }

    .combat-enemy-stage-world img {
        max-width: 76%;
        max-height: 100%;
    }

    .combat-enemy-stage-world .combat-enemy-sprite-fallback {
        font-size: clamp(4rem, 22vw, 7rem);
    }

    .combat-board-casts {
        right: 7px;
        bottom: 7px;
        left: 7px;

        width: auto;

        gap: 4px;
        padding: 6px 7px;

        transform: none;
    }

    .combat-cast-row {
        grid-template-columns: 60px minmax(0, 1fr);

        gap: 5px;

        font-size: 0.46rem;
    }

    .combat-cast-track {
        height: 4px;
    }

    .combat-board-actions {
        gap: 6px;
    }

    .combat-board-actions button {
        min-height: 25px;

        padding: 4px 7px;

        font-size: 0.52rem;
    }

    #board-combat-status {
        font-size: 0.46rem;
    }

    .combat-float-result {
        padding: 4px 7px;

        border-width: 1px;

        font-size: 0.72rem;
    }

    .combat-float-result.player {
        left: 61%;
        top: 42%;
    }

    .combat-float-result.enemy {
        left: 24%;
        top: 42%;
    }
}


/* ==============================
   COMBAT LOADOUT STATS
   Keep the removed mobile battle
   stats available beside the gear
   that actually creates them.
   ============================== */

.combat-loadout-stats-section {
    margin-top: 10px;
}

.combat-loadout-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.combat-loadout-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    min-width: 0;

    padding: 7px 8px;

    border: 1px solid #9E629538;
    border-radius: 9px;

    background: #F6E7DD1C;
}

.combat-loadout-stat span {
    color: #F6E7DDA8;

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

.combat-loadout-stat strong {
    color: #F6E7DD;

    font-size: 0.70rem;
    font-weight: 900;
}




/* ==============================
   ALPHA FIX - ENCHANTING BUTTON READABILITY
   Keep Enchanting controls readable against the
   dark station panels without changing shared
   action buttons elsewhere in the game.
   ============================== */

#enchanting-region-content .enchanting-tab,
#enchanting-region-content .gear-enchant-strip,
#enchanting-region-content .gear-enchant-apply {
    color: #F6E7DDF5;
}

#enchanting-region-content .fishing-button {
    background: #D59A5CEB;
    color: #F6E7DDFA;
}

#enchanting-region-content .fishing-button:hover:not(:disabled) {
    background: #D59A5CFA;
    color: #F6E7DD;
}

#enchanting-region-content .fishing-button:disabled {
    color: #F6E7DDD1;
}



/* ==============================
   ALPHA FIX - MOBILE RECIPE BOOK LAYER
   The sticky mobile header sits above normal page
   content, so the Recipe Book must become the top
   interaction layer while it is open.
   ============================== */

@media (max-width: 600px) {
    .recipe-book-modal {
        z-index: 13000;

        padding: 8px;
    }

    .recipe-book-window {
        max-height: calc(100dvh - 16px);
    }

    .recipe-book-close {
        color: #F6E7DDF5;
    }
}

/* Personal Enchanting long-term progression clarity. */
.personal-enchant-investment {
    margin-top: 3px;
}

.personal-enchant-milestone {
    margin: 2px 0 4px;

    opacity: 0.82 !important;
}



/* ==============================
   COMBAT QUEUE + REPAIRS QOL
   ============================== */

.combat-fight-plan {
    display: grid;
    grid-template-columns: auto 76px minmax(0, 1fr);
    align-items: center;

    gap: 8px;

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

    border: 1px solid #F6E7DD1A;
    border-radius: 10px;

    background: #F6E7DD06;
}

.combat-fight-plan label {
    color: #F6E7DDE6;

    font-size: 0.44rem;
    font-weight: 800;
}

.combat-fight-plan input {
    width: 100%;

    padding: 6px 7px;

    border: 1px solid #F7CDA92E;
    border-radius: 8px;

    background: #F6E7DD0B;
    color: #F6E7DDF5;

    font: inherit;
    font-size: 0.45rem;
    font-weight: 800;

    box-sizing: border-box;
}

.combat-fight-plan input:focus {
    border-color: #F7CDA96B;
    outline: none;
}

.combat-fight-plan input:disabled {
    opacity: 0.58;
}

.combat-fight-plan small {
    color: #F7CDA9B8;

    font-size: 0.39rem;
    line-height: 1.4;
}

.repair-shop-list {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 9px;

    margin-top: 10px;
}

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

    gap: 9px;

    padding: 9px;

    border: 1px solid #F7CDA924;
    border-radius: 11px;

    background: #F6E7DD06;
    box-shadow: none;
}

.repair-item-icon {
    grid-row: 1 / span 2;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 1px solid #F7CDA921;
    border-radius: 10px;

    background: #F7CDA90B;
    box-shadow: none;

    color: #F7CDA9E6;

    font-size: 1.25rem;
}

.repair-item-icon img {
    display: block;

    width: 52px;
    height: 52px;

    padding: 4px;

    object-fit: contain;

    box-sizing: border-box;
}

.repair-item-heading {
    gap: 7px;
}

.repair-item-heading strong {
    overflow: hidden;

    color: #F6E7DDF0;

    font-size: 0.49rem;

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

.repair-item-heading span {
    color: #F7CDA9E6;

    font-size: 0.40rem;
}

.repair-item-copy p {
    margin: 5px 0 7px;

    color: #F7CDA9C2;

    font-size: 0.40rem;
    font-weight: 650;
    line-height: 1.4;
}

.repair-item-card .repair-button,
.repair-service-card .repair-all-button {
    padding: 6px 8px;

    border: 1px solid #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;
    color: #F6E7DDDB;

    font-size: 0.43rem;

    box-shadow: none;
}

.repair-item-card .repair-button:hover:not(:disabled),
.repair-service-card .repair-all-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #F7CDA94C;

    background: #F7CDA90F;
    box-shadow: none;
}

.repair-shop-empty {
    grid-column: 1 / -1;

    padding: 18px 12px;

    border: 1px dashed #F7CDA92E;
    border-radius: 11px;

    background: #F7CDA909;
    color: #F7CDA9D1;
}

.repair-shop-empty strong {
    color: #F6E7DDF0;

    font-size: 0.49rem;
}

.repair-shop-empty p {
    color: #F6E7DD9E;

    font-size: 0.40rem;
}

@media (max-width: 620px) {
    .combat-fight-plan {
        grid-template-columns: auto 68px;
    }

    .combat-fight-plan small {
        grid-column: 1 / -1;
    }
}



/* ==============================
   SALEM ECONOMY V1 — SELLING
   ============================== */

.inventory-item-lock {
    position: absolute;
    top: 3px;
    right: 3px;

    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    border: 1px solid #F7CDA933;
    border-radius: 999px;

    background: #24263FE0;

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

.pantry-item-lock {
    font-size: 0.72em;
}

.item-detail-lock-button.locked {
    border-color: #F7CDA959;
    background: #F7CDA91A;
}

.general-shop-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 12px;
}

.general-shop-tab {
    min-height: 34px;

    border: 1px solid #F6E7DD24;
    border-radius: 10px;

    background: #F6E7DD06;
    color: #F6E7DDB8;

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

    cursor: pointer;
}

.general-shop-tab:hover,
.general-shop-tab:focus-visible {
    border-color: #F7CDA94C;
    outline: none;

    background: #F7CDA90F;
    color: #F6E7DDF5;
}

.general-shop-tab.active {
    border-color: #F7CDA96B;

    background: #F7CDA91F;
    color: #F6E7DDFA;
}

.general-shop-mode-note,
.general-shop-lock-note,
.general-shop-sell-summary {
    margin: 9px 0 0;

    color: #F6E7DDAD;

    font-size: 0.43rem;
    line-height: 1.5;
}

.general-shop-lock-note {
    padding: 8px 9px;

    border: 1px solid #F7CDA924;
    border-radius: 9px;

    background: #F7CDA90A;
    color: #F6E7DDD1;
}

.general-shop-sell-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    gap: 8px;

    margin-top: 11px;
}

.general-shop-sell-toolbar input {
    min-width: 0;

    padding: 8px 9px;

    border: 1px solid #F6E7DD26;
    border-radius: 9px;

    background: #F6E7DD09;
    color: #F6E7DDF0;

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

.general-shop-sell-toolbar input::placeholder {
    color: #F6E7DD75;
}

.general-shop-sell-toolbar input:focus {
    border-color: #F7CDA957;
    outline: none;
}

.general-shop-sell-all {
    padding: 7px 10px;

    border: 1px solid #F7CDA947;
    border-radius: 9px;

    background: #F7CDA91A;
    color: #F6E7DDF0;

    font: inherit;
    font-size: 0.43rem;
    font-weight: 800;

    cursor: pointer;
}

.general-shop-sell-all:hover:not(:disabled) {
    border-color: #F7CDA970;

    background: #F7CDA929;
}

.general-shop-sell-all:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.general-shop-sell-summary {
    color: #F7CDA9CC;
    font-weight: 700;
}

.general-shop-sell-list {
    display: grid;

    gap: 8px;

    margin-top: 10px;
}

.general-shop-sell-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);

    gap: 9px;
    align-items: center;

    padding: 9px;

    border: 1px solid #F6E7DD1C;
    border-radius: 11px;

    background: #F6E7DD06;

    cursor: pointer;
}

.general-shop-sell-card:hover,
.general-shop-sell-card:focus-visible {
    border-color: #F7CDA942;
    outline: none;

    background: #F7CDA90B;
}

.general-shop-sell-card.locked {
    border-color: #F7CDA938;
    background: #F7CDA909;
}

.general-shop-sell-card.unsellable {
    opacity: 0.72;
}

.general-shop-sell-image {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    overflow: hidden;

    border: 1px solid #F7CDA91F;
    border-radius: 10px;

    background: #F7CDA90A;

    font-size: 1.25rem;
}

.general-shop-sell-image img {
    width: 100%;
    height: 100%;

    padding: 3px;

    object-fit: contain;
}

.general-shop-sell-copy {
    min-width: 0;
}

.general-shop-sell-heading {
    display: flex;
    justify-content: space-between;

    gap: 8px;
}

.general-shop-sell-heading strong {
    color: #F6E7DDF0;

    font-size: 0.48rem;
}

.general-shop-sell-heading span {
    color: #F6E7DD9E;

    font-size: 0.42rem;
    font-weight: 800;
}

.general-shop-sell-copy p {
    margin: 4px 0 0;

    color: #F7CDA9B8;

    font-size: 0.40rem;
}

.general-shop-sell-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;
}

.shop-sell-button,
.shop-lock-button {
    padding: 6px 8px;

    border: 1px solid #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD06;
    color: #F6E7DDDB;

    font: inherit;
    font-size: 0.40rem;
    font-weight: 800;

    cursor: pointer;
}

.shop-sell-button:hover:not(:disabled),
.shop-lock-button:hover:not(:disabled) {
    border-color: #F7CDA947;

    background: #F7CDA90F;
}

.shop-lock-button.locked {
    border-color: #F7CDA947;

    background: #F7CDA912;
    color: #F6E7DDF0;
}

.shop-sell-button:disabled {
    cursor: not-allowed;
    opacity: 0.36;
}

.general-shop-sell-empty {
    margin: 0;
    padding: 16px 10px;

    border: 1px dashed #F6E7DD1F;
    border-radius: 10px;

    color: #F6E7DD94;

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

@media (max-width: 620px) {
    .general-shop-sell-toolbar {
        grid-template-columns: 1fr;
    }

    .general-shop-sell-all {
        width: 100%;
    }
}



/* ==============================
   ECONOMY BALANCE LAB
   Developer-only economy audit UI.
   ============================== */

.economy-balance-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: #343558D1;
    backdrop-filter: blur(5px);
}

.economy-balance-overlay[hidden] {
    display: none;
}

.economy-balance-dialog {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);

    width: min(1500px, 96vw);
    height: min(900px, 94vh);
    min-height: 0;

    overflow: hidden;

    border: 1px solid #F7CDA947;
    border-radius: 18px;

    background: #24263F;
    box-shadow: 0 24px 80px #24263F7A;
}

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

    gap: 18px;
    padding: 18px 20px 14px;

    border-bottom: 1px solid #F6E7DD1C;
    background: linear-gradient(
        135deg,
        #343558F5,
        #24263FF5
    );
}

.economy-balance-kicker {
    margin: 0 0 5px;

    color: #F7CDA9CC;

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.economy-balance-header h2 {
    margin: 0;

    color: #F6E7DDFA;

    font-size: 1.35rem;
}

.economy-balance-header p:not(.economy-balance-kicker) {
    max-width: 760px;
    margin: 7px 0 0;

    color: #F6E7DDAD;

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

.economy-balance-close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    flex: 0 0 auto;

    padding: 0;

    border: 1px solid #F6E7DD24;
    border-radius: 10px;

    background: #F6E7DD06;
    color: #F6E7DDE6;

    font-size: 1.45rem;
    line-height: 1;

    cursor: pointer;
}

.economy-balance-toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;

    gap: 10px;
    padding: 10px 14px;

    border-bottom: 1px solid #F6E7DD1A;
    background: #343558DB;
}

.economy-balance-toolbar label {
    display: grid;

    gap: 4px;

    color: #F6E7DDAD;

    font-size: 0.66rem;
    font-weight: 800;
}

.economy-balance-toolbar select,
.economy-balance-toolbar input,
.economy-balance-toolbar button {
    min-height: 34px;

    padding: 7px 9px;

    border: 1px solid #F6E7DD24;
    border-radius: 8px;

    background: #F6E7DD;
    color: #24263F;

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

.economy-balance-toolbar button {
    background: #F7CDA91A;
    color: #F6E7DDEB;

    font-weight: 800;

    cursor: pointer;
}

.economy-balance-toolbar button:hover {
    background: #F7CDA92E;
}

.economy-balance-table-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;

    gap: 10px;
}

.economy-balance-table-controls[hidden] {
    display: none;
}

.economy-balance-table-controls input {
    width: min(260px, 58vw);
}

.economy-balance-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
    margin-left: auto;
}

.economy-balance-actions span {
    color: #F6E7DD9E;

    font-size: 0.68rem;
    font-weight: 800;
}

.economy-balance-meta {
    padding: 7px 14px;

    border-bottom: 1px solid #F6E7DD14;

    background: #24263FEB;
    color: #F6E7DD8A;

    font-size: 0.66rem;
    line-height: 1.4;
}

.economy-balance-content {
    min-height: 0;
    overflow: auto;

    padding: 14px;

    background: #24263F;
}

.balance-overview {
    display: grid;

    gap: 14px;
}

.balance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(150px, 1fr)
    );

    gap: 10px;
}

.balance-kpi,
.balance-summary-card {
    border: 1px solid #F6E7DD1A;
    border-radius: 12px;

    background: #F6E7DD06;
}

.balance-kpi {
    display: grid;

    gap: 5px;
    padding: 12px;
}

.balance-kpi span {
    color: #F6E7DD8F;

    font-size: 0.68rem;
    font-weight: 800;
}

.balance-kpi strong {
    color: #F6E7DDF5;

    font-size: 1.15rem;
    text-transform: capitalize;
}

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

    gap: 12px;
}

.balance-summary-card {
    padding: 13px;
}

.balance-summary-card h3 {
    margin: 0 0 10px;

    color: #F6E7DDE6;

    font-size: 0.86rem;
}

.balance-rank-list,
.balance-warning-card ul,
.balance-assumptions {
    margin: 0;
    padding-left: 20px;
}

.balance-rank-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    gap: 10px;
    margin: 5px 0;

    color: #F6E7DDB2;

    font-size: 0.74rem;
}

.balance-rank-list strong {
    color: #F7CDA9EB;
}

.balance-warning,
.balance-assumptions li {
    margin: 7px 0;

    color: #F6E7DDB8;

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

.balance-warning.is-negativeMargin,
.balance-warning.is-combatValue {
    color: #F7CDA9F0;
}

.balance-table-wrap {
    min-width: 100%;
    overflow: auto;

    border: 1px solid #F6E7DD1A;
    border-radius: 10px;
}

.balance-table {
    width: max-content;
    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 0.69rem;
}

.balance-table th,
.balance-table td {
    max-width: 300px;

    padding: 8px 9px;

    border-right: 1px solid #F6E7DD12;
    border-bottom: 1px solid #F6E7DD12;

    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.balance-table th {
    position: sticky;
    top: 0;
    z-index: 2;

    background: #343558;
    color: #F6E7DDE0;

    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

.balance-table th:nth-child(1),
.balance-table td:nth-child(1),
.balance-table th:nth-child(2),
.balance-table td:nth-child(2),
.balance-table th:nth-child(3),
.balance-table td:nth-child(3),
.balance-table .balance-notes {
    text-align: left;
}

.balance-table tbody tr:nth-child(even) {
    background: #F6E7DD05;
}

.balance-table tbody tr:hover {
    background: #F7CDA90E;
}

.balance-table small,
.balance-table code {
    color: #F6E7DD7A;

    font-size: 0.62rem;
}

.balance-table .balance-notes {
    min-width: 220px;

    color: #F6E7DD8F;

    line-height: 1.4;
    white-space: normal;
}

.balance-band {
    display: inline-block;

    min-width: 42px;

    padding: 3px 5px;

    border-radius: 999px;

    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
}

.balance-band.is-high {
    background: #F7CDA921;
    color: #F6E7DDF5;
}

.balance-band.is-low {
    background: #CC779021;
    color: #CC7790F0;
}

.balance-band.is-mid {
    background: #F7CDA91C;
    color: #F7CDA9EB;
}

.balance-band.is-loss {
    background: #E7968E26;
    color: #E7968EF2;
}

.balance-band.is-sink {
    background: #B48B9521;
    color: #F7CDA9EB;
}

@media (max-width: 760px) {
    .economy-balance-overlay {
        padding: 6px;
    }

    .economy-balance-dialog {
        width: 100%;
        height: 100%;

        border-radius: 12px;
    }

    .economy-balance-header {
        padding: 13px;
    }

    .economy-balance-header h2 {
        font-size: 1.05rem;
    }

    .economy-balance-toolbar {
        align-items: stretch;

        padding: 9px;
    }

    .economy-balance-toolbar > label,
    .economy-balance-table-controls,
    .economy-balance-table-controls label,
    .economy-balance-actions {
        width: 100%;
    }

    .economy-balance-table-controls {
        display: grid;
        grid-template-columns: 1fr;
    }

    .economy-balance-table-controls input,
    .economy-balance-toolbar select,
    .economy-balance-toolbar input {
        width: 100%;
    }

    .economy-balance-actions {
        margin-left: 0;
    }

    .economy-balance-actions button {
        flex: 1;
    }

    .balance-overview-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   EQUIPMENT UPGRADES +1 TO +5
   ============================== */

.inventory-upgrade-rank,
.equipment-upgrade-badge {
    position: absolute;
    left: 3px;
    bottom: 2px;

    z-index: 3;

    padding: 1px 4px;

    border: 1px solid #F7CDA957;
    border-radius: 999px;

    background: #634A33EB;
    color: #24263F;

    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1.2;
}

.equipment-upgrade-badge {
    bottom: 3px;
}

#item-detail-upgrade:disabled {
    cursor: default;
    opacity: 0.58;
}



/* ==============================
   EQUIPMENT RNG ROLLS + RANK BADGES
   ============================== */

.inventory-god-roll,
.equipment-god-roll-badge,
.pantry-god-roll-badge,
.pantry-upgrade-rank-badge {
    position: absolute;
    z-index: 4;

    display: grid;
    place-items: center;

    min-width: 16px;
    height: 16px;
    padding: 0 3px;

    border: 1px solid #F7CDA961;
    border-radius: 999px;

    background: #634A33EB;
    color: #24263F;

    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;

    box-sizing: border-box;
    pointer-events: none;
}

.inventory-god-roll,
.equipment-god-roll-badge,
.pantry-god-roll-badge {
    top: 3px;
    left: 3px;
}

.inventory-upgrade-rank,
.equipment-upgrade-badge,
.pantry-upgrade-rank-badge {
    top: 3px;
    right: 3px;
    bottom: auto;
    left: auto;
}

.inventory-item-lock {
    top: auto;
    right: auto;
    bottom: 3px;
    left: 3px;
}

.equipment-enchant-badge {
    top: auto;
    right: auto;
    bottom: 3px;
    left: 3px;
}

.pantry-item-image-shell {
    position: relative;
}

.item-roll-section {
    display: grid;
    gap: 6px;

    margin-top: 7px;
}

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

    gap: 8px;

    color: #F6E7DDF0;

    font-size: 0.5rem;
    font-weight: 800;
}

.item-roll-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(145px, 1fr));

    gap: 6px;
}

.item-roll-card {
    min-width: 0;
    padding: 7px;

    border: 1px solid #F6E7DD1A;
    border-radius: 8px;

    background: #F6E7DD06;
}

.item-roll-card-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: center;

    gap: 8px;
}

.item-roll-card-top strong {
    overflow: hidden;

    color: #F6E7DDF0;

    font-size: 0.48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-roll-stars {
    color: #E7968E;

    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.item-roll-value {
    margin-top: 3px;

    color: #F6E7DDF0;

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

.item-roll-effect-note {
    margin-top: 2px;

    color: #F6E7DDAD;

    font-size: 0.42rem;
    line-height: 1.35;
}

.item-roll-details {
    margin-top: 5px;

    border-top: 1px solid #F6E7DD14;
    padding-top: 5px;

    color: #F6E7DDB8;

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

.item-roll-details summary {
    color: #F7CDA9E0;

    font-weight: 700;

    cursor: pointer;
    user-select: none;
}

.item-roll-details p {
    margin: 4px 0 0;
}

@media (max-width: 520px) {
    .item-roll-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   COMPACT ITEM DETAILS V2
   Keeps the important item facts
   readable without crowding.
   ============================== */

.item-detail-dialog {
    width: min(620px, 100%);
    max-height: min(820px, calc(100vh - 36px));

    padding: 20px;
}

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

    gap: 16px;
}

.item-detail-image-shell {
    width: 96px;
    height: 96px;
}

.item-detail-heading .panel-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.item-detail-heading h2 {
    margin: 3px 0 5px;

    font-size: 1.42rem;
    line-height: 1.15;
}

.item-detail-heading #item-detail-subtitle {
    font-size: 0.88rem;
    line-height: 1.35;
}

.item-detail-location {
    margin-top: 6px !important;

    font-size: 0.78rem;
}

.item-detail-description {
    margin-top: 14px;

    font-size: 0.88rem;
    line-height: 1.5;
}

.item-detail-section {
    margin-top: 16px;
    padding-top: 14px;
}

.item-detail-section h3 {
    margin-bottom: 10px;

    font-size: 1rem;
}

.item-detail-info,
.item-detail-buffs {
    gap: 8px;
}

.item-detail-info-row,
.item-detail-buff-row {
    gap: 16px;

    padding: 8px 10px;

    font-size: 0.86rem;
    line-height: 1.35;
}

.item-detail-buff-row strong {
    max-width: 68%;
}

.item-detail-compact-block {
    display: grid;

    gap: 9px;
}

.item-detail-compact-block +
.item-detail-compact-block {
    margin-top: 6px;
}

.item-detail-compact-block h4 {
    margin: 0;

    color: #F6E7DDF5;

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

.item-detail-block-note {
    margin: -3px 0 0;

    color: #F6E7DDA8;

    font-size: 0.76rem;
}

.item-roll-section {
    margin-top: 0;
    padding: 0;
}

.item-roll-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 7px;
}

.item-roll-card {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        minmax(90px, auto)
        auto;
    align-items: center;

    gap: 2px 12px;

    padding: 10px 12px;

    border: 1px solid #F6E7DD1C;
    border-radius: 10px;

    background: #F6E7DD07;
}

.item-roll-card.perfect {
    border-color: #F7CDA938;

    background: #F7CDA90B;
}

.item-roll-label {
    min-width: 0;

    color: #F6E7DDF0;

    font-size: 0.9rem;
}

.item-roll-value {
    margin: 0;

    color: #F6E7DDFA;

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

.item-roll-stars {
    color: #E7968E;

    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-align: right;
    white-space: nowrap;
}

.item-roll-natural {
    grid-column: 1 / -1;

    color: #F7CDA9C7;

    font-size: 0.75rem;
}

.item-roll-details {
    grid-column: 1 / -1;

    margin-top: 4px;
    padding-top: 6px;

    border-top: 1px solid #F6E7DD14;

    color: #F6E7DDBD;

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

.item-roll-details summary {
    color: #F7CDA9EB;

    font-size: 0.78rem;
}

.item-roll-details p {
    margin: 5px 0 0;
}

.item-upgrade-block {
    margin-top: 4px;
    padding: 12px;

    border: 1px solid #F7CDA929;
    border-radius: 11px;

    background: #F7CDA90B;
}

.item-upgrade-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 12px;
}

.item-upgrade-header strong {
    color: #F6E7DDFA;

    font-size: 1.02rem;
}

.item-upgrade-header small {
    color: #F7CDA9C7;

    font-size: 0.75rem;
    text-align: right;
}

.item-upgrade-gain {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    gap: 10px;

    padding-top: 8px;

    border-top: 1px solid #F7CDA91A;

    font-size: 0.82rem;
}

.item-upgrade-gain span,
.item-upgrade-requires-label {
    color: #F6E7DDA8;
}

.item-upgrade-gain strong {
    color: #F6E7DDF0;

    font-weight: 700;
}

.item-upgrade-requires-label {
    margin-top: 1px;

    font-size: 0.78rem;
    font-weight: 700;
}

.item-upgrade-requirements {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.item-upgrade-requirements span,
.item-detail-meta-footer span {
    padding: 5px 8px;

    border: 1px solid #F6E7DD1A;
    border-radius: 999px;

    background: #F6E7DD06;

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

.item-detail-key-facts:empty {
    display: none;
}

.item-detail-meta-footer {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 2px;
    padding-top: 9px;

    border-top: 1px solid #F6E7DD14;

    color: #F6E7DDBD;
}

.item-detail-quantity-row input {
    font-size: 0.9rem;
}

.item-detail-presets button {
    font-size: 0.76rem;
}

.item-detail-status {
    font-size: 0.8rem;
}

.item-detail-actions {
    gap: 8px;

    margin-top: 10px;
}

#item-detail-upgrade:not([hidden]) {
    grid-column: 1 / -1;
}

@media (max-width: 520px) {
    .item-detail-dialog {
        padding: 14px;
    }

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

        gap: 11px;
    }

    .item-detail-image-shell {
        width: 76px;
        height: 76px;
    }

    .item-detail-heading h2 {
        font-size: 1.12rem;
    }

    .item-detail-heading #item-detail-subtitle {
        font-size: 0.78rem;
    }

    .item-detail-description,
    .item-detail-info-row,
    .item-detail-buff-row {
        font-size: 0.8rem;
    }

    .item-roll-card {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 3px 8px;
    }

    .item-roll-label {
        font-size: 0.84rem;
    }

    .item-roll-value {
        grid-column: 1;
        grid-row: 2;

        font-size: 0.94rem;
        text-align: left;
    }

    .item-roll-stars {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .item-roll-natural,
    .item-roll-details {
        grid-column: 1 / -1;
    }

    .item-upgrade-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;
    }

    .item-upgrade-header small {
        text-align: left;
    }

    .item-upgrade-gain {
        grid-template-columns: 1fr;

        gap: 3px;
    }
}


/* ==============================
   COMPACT ITEM DETAILS V2.1
   Desktop-first roll cards + one
   equal-width action bar.
   ============================== */

@media (min-width: 681px) {
    .item-detail-dialog {
        width: min(760px, 100%);
        max-height: min(860px, calc(100vh - 28px));
    }

    .item-roll-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .item-roll-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label stars"
            "value value"
            "natural natural"
            "details details";
        align-content: start;

        gap: 5px 8px;
        min-width: 0;
        padding: 12px;
    }

    .item-roll-label {
        grid-area: label;

        font-size: 0.9rem;
    }

    .item-roll-value {
        grid-area: value;

        margin-top: 2px;

        font-size: 1.12rem;
        text-align: left;
    }

    .item-roll-stars {
        grid-area: stars;

        align-self: center;
        font-size: 0.8rem;
        text-align: right;
    }

    .item-roll-natural {
        grid-area: natural;

        font-size: 0.76rem;
        line-height: 1.35;
    }

    .item-roll-details {
        grid-area: details;

        margin-top: 2px;
        padding-top: 6px;
    }

    .item-upgrade-block {
        padding: 11px 12px;
    }

    .item-detail-actions {
        grid-template-columns: repeat(
            auto-fit,
            minmax(132px, 1fr)
        );
        gap: 8px;
    }

    .item-detail-actions button {
        min-height: 40px;
        padding: 8px 10px;

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

    #item-detail-upgrade:not([hidden]) {
        grid-column: auto;
    }
}


@media (max-width: 680px) {
    .item-roll-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    #item-detail-upgrade:not([hidden]) {
        grid-column: auto;
    }
}


@media (max-width: 440px) {
    .item-roll-grid {
        grid-template-columns: 1fr;
    }
}


.item-detail-actions:has(button:not([hidden])) {
    position: sticky;
    bottom: -1px;
    z-index: 4;

    padding: 10px 0 2px;

    background:
        linear-gradient(
            to bottom,
            #34355800,
            #343558F5 28%,
            #343558FC
        );
}



/* ==============================
   GEAR SLOT PICKER
   Bag-first equipment switching
   with live stat comparison.
   ============================== */

.gear-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;

    display: grid;
    place-items: center;

    padding: 20px;

    background: #343558B8;
    backdrop-filter: blur(5px);
}

.gear-picker-overlay[hidden] {
    display: none;
}

.gear-picker-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;

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

    gap: 14px;
    padding: 18px;

    overflow: hidden;

    border: 1px solid #B48B956B;
    border-radius: 18px;

    background: #343558;
    box-shadow: 0 22px 70px #24263F70;
}

.gear-picker-header,
.gear-picker-section-heading,
.gear-picker-actions,
.gear-picker-current-card {
    display: flex;
    align-items: center;
}

.gear-picker-header {
    justify-content: space-between;

    gap: 16px;
}

.gear-picker-eyebrow,
.gear-picker-current-label {
    display: block;

    margin-bottom: 3px;

    color: #E7968E;

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gear-picker-header h3 {
    margin: 0;

    font-size: 1.45rem;
}

.gear-picker-close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 1px solid #F6E7DD2E;
    border-radius: 10px;

    background: #F6E7DD0F;
    color: #F6E7DD;

    font-size: 1.35rem;

    cursor: pointer;
}

.gear-picker-current,
.gear-picker-preview-wrap,
.gear-picker-options-wrap {
    border: 1px solid #9E629533;
    border-radius: 13px;

    background: #9E62950F;
}

.gear-picker-current {
    min-height: 74px;

    padding: 10px 12px;
}

.gear-picker-current.empty,
.gear-picker-preview.empty,
.gear-picker-empty {
    color: #F6E7DD9E;
}

.gear-picker-current-card {
    gap: 12px;
}

.gear-picker-current-card > div:last-child {
    display: grid;

    gap: 2px;
}

.gear-picker-current-card strong {
    font-size: 1rem;
}

.gear-picker-broken {
    color: #E7968E;

    font-weight: 700;
}

.gear-picker-preview-wrap,
.gear-picker-options-wrap {
    padding: 11px;
}

.gear-picker-options-wrap {
    display: flex;
    flex-direction: column;

    min-height: 0;

    overflow: hidden;
}

.gear-picker-section-heading {
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 9px;
}

.gear-picker-section-heading strong {
    font-size: 0.95rem;
}

.gear-picker-section-heading span {
    color: #F6E7DD94;

    font-size: 0.76rem;
}

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

    gap: 7px;
}

.gear-picker-preview.empty {
    display: block;

    padding: 8px 2px 2px;

    font-size: 0.86rem;
}

.gear-picker-preview-stat {
    display: grid;

    min-width: 0;

    gap: 3px;
    padding: 8px 9px;

    border-radius: 9px;

    background: #F6E7DD0E;
}

.gear-picker-preview-stat > span {
    color: #F6E7DD9E;

    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.gear-picker-preview-stat strong {
    overflow: hidden;

    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gear-picker-preview-stat small {
    font-size: 0.72rem;
    font-weight: 700;
}

.gear-picker-preview-stat .positive {
    color: #F7CDA9;
}

.gear-picker-preview-stat .negative {
    color: #E7968E;
}

.gear-picker-preview-stat .neutral {
    color: #F6E7DD80;
}

.gear-picker-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    flex: 1 1 auto;
    align-content: start;

    min-height: 0;
    gap: 8px;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;

    scrollbar-gutter: stable;
}

.gear-picker-options::-webkit-scrollbar {
    width: 8px;
}

.gear-picker-options::-webkit-scrollbar-track {
    border-radius: 999px;

    background: #F6E7DD0D;
}

.gear-picker-options::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background: #B48B958C;
    background-clip: padding-box;
}

.gear-picker-option {
    position: relative;

    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;

    min-width: 0;

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

    border: 1px solid #9E629538;
    border-radius: 11px;

    background: #9E629512;
    color: #F6E7DD;

    text-align: center;

    cursor: pointer;
}

.gear-picker-option:hover,
.gear-picker-option:focus-visible {
    border-color: #B48B95B8;

    background: #B48B951F;
}

.gear-picker-option.selected {
    border-color: #D59A5C;

    background: #D59A5C29;
    box-shadow: inset 0 0 0 1px #D59A5C52;
}

.gear-picker-option.level-locked {
    cursor: not-allowed;

    opacity: 0.48;
}

.gear-picker-artwork {
    position: relative;

    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;
}

.gear-picker-current-card .gear-picker-artwork {
    width: 54px;
    height: 54px;
}

.gear-picker-artwork img {
    width: 100%;
    height: 100%;

    padding: 2px;

    object-fit: contain;
}

.gear-picker-badge {
    position: absolute;

    display: grid;
    place-items: center;

    min-width: 20px;
    height: 20px;

    padding: 0 4px;

    border-radius: 7px;

    background: #24263FE0;

    font-size: 0.72rem;
    font-weight: 800;
}

.gear-picker-badge.god-roll {
    top: 0;
    left: 0;

    color: #F7CDA9;
}

.gear-picker-badge.upgrade-rank {
    top: 0;
    right: 0;

    color: #E7968E;
}

.gear-picker-option-name {
    overflow: hidden;

    width: 100%;

    font-size: 0.8rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gear-picker-rolls {
    display: grid;

    width: 100%;

    gap: 2px;
}

.gear-picker-rolls span {
    overflow: hidden;

    color: #F6E7DDB2;

    font-size: 0.64rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gear-picker-rolls .muted {
    color: #F6E7DD6B;
}

.gear-picker-level-lock {
    color: #E7968E;

    font-size: 0.66rem;
}

.gear-picker-empty {
    grid-column: 1 / -1;

    margin: 0;
    padding: 14px 6px;

    font-size: 0.86rem;
}

.gear-picker-status {
    min-height: 18px;

    margin: -3px 2px 0;

    font-size: 0.8rem;
}

.gear-picker-status:empty {
    display: none;
}

.gear-picker-status[data-type="warning"] {
    color: #D59A5C;
}

.gear-picker-status[data-type="error"] {
    color: #E7968E;
}

.gear-picker-actions {
    gap: 8px;
}

.gear-picker-actions button {
    flex: 1 1 0;

    min-height: 40px;
    padding: 8px 10px;

    border: 1px solid #9E629542;
    border-radius: 10px;

    background: #9E629517;
    color: #F6E7DD;

    font-weight: 700;

    cursor: pointer;
}

.gear-picker-actions button.primary {
    border-color: #D59A5C9E;

    background: #D59A5C2E;
}

.gear-picker-actions button:disabled {
    cursor: not-allowed;

    opacity: 0.42;
}

@media (max-width: 900px) {
    .gear-picker-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gear-picker-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .gear-picker-overlay {
        align-items: end;

        padding: 8px;
    }

    .gear-picker-panel {
        width: 100%;
        max-height: 94vh;

        gap: 10px;
        padding: 13px;

        border-radius: 16px 16px 10px 10px;
    }

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

    .gear-picker-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gear-picker-artwork {
        width: 58px;
        height: 58px;
    }

    .gear-picker-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .gear-picker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gear-picker-preview {
        grid-template-columns: 1fr 1fr;
    }

    .gear-picker-option-name {
        white-space: normal;
    }
}



/* ==============================
   TESTER POLISH - MAP AVAILABILITY
   Make unlocked skill sources much
   easier to scan at a glance.
   ============================== */

.map-marker.unlocked .map-marker-title-banner {
    filter:
        saturate(1.16)
        brightness(1.06)
        drop-shadow(0 7px 12px #24263F47);
}

.map-marker.unlocked:is(
    [data-marker-type="combat"],
    [data-marker-type="fishing"],
    [data-marker-type="mining"],
    [data-marker-type="woodcutting"],
    [data-marker-type="gathering"]
)::after {
    position: absolute;
    top: -7px;
    right: -7px;

    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border: 2px solid #F6E7DDEB;
    border-radius: 999px;

    background: #D59A5C;
    color: #F6E7DD;

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

    box-shadow: 0 3px 8px #24263F47;

    content: "✓";

    pointer-events: none;

    z-index: 4;
}



/* ==============================
   TESTER POLISH - COMBAT QUICK HEAL
   Keep healing available without
   opening the Supplies overlay.
   ============================== */

.combat-quick-heal {
    display: inline-grid;
    grid-template-columns: 30px auto;
    align-items: center;
    justify-self: start;

    gap: 7px;

    min-height: 34px;
    padding: 3px 9px 3px 4px;

    border: 1px solid #F6E7DD33;
    border-radius: 9px;

    background: #F6E7DD14;
    color: #F6E7DD;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.combat-quick-heal:hover:not(:disabled) {
    border-color: #F7CDA9B8;

    background: #F7CDA924;
}

.combat-quick-heal:disabled {
    opacity: 0.52;

    cursor: default;
}

.combat-quick-heal-image,
.combat-quick-heal-fallback {
    width: 28px;
    height: 28px;
}

.combat-quick-heal-image {
    display: block;

    object-fit: contain;
}

.combat-quick-heal-fallback {
    display: grid;
    place-items: center;

    font-size: 1.1rem;
}

.combat-quick-heal-copy {
    display: grid;

    gap: 0;

    line-height: 1.05;
}

.combat-quick-heal-copy strong {
    font-size: 0.58rem;
}

.combat-quick-heal-copy small {
    opacity: 0.78;

    font-size: 0.48rem;
}



@media (max-width: 700px) {
    .map-back-button {
        top: 8px;
        left: 8px;

        display: grid;
        place-items: center;

        width: 40px;
        height: 40px;

        padding: 0;

        font-size: 0;
    }

    .map-back-button::before {
        margin: 0;

        font-size: 1.05rem;

        content: "←";
    }

    .map-marker.unlocked:is(
        [data-marker-type="combat"],
        [data-marker-type="fishing"],
        [data-marker-type="mining"],
        [data-marker-type="woodcutting"],
        [data-marker-type="gathering"]
    )::after {
        top: -5px;
        right: -5px;

        width: 19px;
        height: 19px;

        font-size: 0.62rem;
    }
}



@media (max-width: 620px) {
    .combat-quick-heal {
        grid-template-columns: 25px auto;

        gap: 5px;

        min-height: 29px;
        padding: 2px 6px 2px 3px;

        border-radius: 7px;
    }

    .combat-quick-heal-image,
    .combat-quick-heal-fallback {
        width: 23px;
        height: 23px;
    }

    .combat-quick-heal-fallback {
        font-size: 0.92rem;
    }

    .combat-quick-heal-copy strong {
        font-size: 0.47rem;
    }

    .combat-quick-heal-copy small {
        font-size: 0.40rem;
    }
}


/* ==============================
   COMBAT QUICK HEAL V2
   Three small assignable healing
   buttons outside the player card.
   Slot 1 is the Auto Eat source.
   ============================== */

.combat-quick-heal-strip {
    position: absolute;
    top: clamp(220px, 45%, 300px);
    left: 9px;

    display: grid;
    justify-items: center;

    gap: 4px;

    z-index: 11;
}

.combat-quick-heal-strip[hidden] {
    display: none;
}

.combat-quick-heal-edit {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    padding: 0;

    border: 1px solid #F6E7DD47;
    border-radius: 999px;

    background: #24263FC7;
    color: #F6E7DD;

    font-size: 0.68rem;
    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(5px);
}

.combat-quick-heal-edit:hover,
.combat-quick-heal-edit.selected {
    border-color: #F7CDA9D1;

    background: #D59A5CEB;
}

.combat-quick-heal-buttons {
    display: grid;

    gap: 5px;
}

.combat-quick-heal-slot {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 47px;

    padding: 3px;

    border: 1px solid #F6E7DD3D;
    border-radius: 9px;

    background: #24263FD1;
    color: #F6E7DD;

    cursor: pointer;

    box-shadow: 0 3px 9px #24263F38;
    backdrop-filter: blur(5px);
}

.combat-quick-heal-slot:first-child::before {
    position: absolute;
    top: -4px;
    left: -4px;

    display: grid;
    place-items: center;

    width: 13px;
    height: 13px;

    border-radius: 999px;

    background: #D59A5CF5;
    color: #F6E7DD;

    font-size: 0.42rem;
    font-weight: 900;

    content: "A";

    pointer-events: none;
}

.combat-quick-heal-strip.editing
.combat-quick-heal-slot:first-child::before {
    content: "1";
}

.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(2)::before,
.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(3)::before {
    position: absolute;
    top: -4px;
    left: -4px;

    display: grid;
    place-items: center;

    width: 13px;
    height: 13px;

    border-radius: 999px;

    background: #634A33E6;
    color: #F6E7DD;

    font-size: 0.42rem;
    font-weight: 900;

    pointer-events: none;
}

.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(2)::before {
    content: "2";
}

.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(3)::before {
    content: "3";
}

.combat-quick-heal-slot:hover:not(:disabled) {
    border-color: #F7CDA9D1;

    transform: translateY(-1px);
}

.combat-quick-heal-slot:disabled,
.combat-quick-heal-slot.out-of-stock {
    opacity: 0.52;
}

.combat-quick-heal-strip.editing
.combat-quick-heal-slot {
    opacity: 1;

    cursor: pointer;
}

.combat-quick-heal-slot.empty {
    border-style: dashed;

    background: #24263F94;
}

.combat-quick-heal-slot img,
.combat-quick-heal-icon {
    width: 29px;
    height: 29px;

    object-fit: contain;
}

.combat-quick-heal-icon {
    display: grid;
    place-items: center;

    font-size: 1.2rem;
}

.combat-quick-heal-add {
    font-size: 1rem;
    font-weight: 800;
}

.combat-quick-heal-restore {
    position: absolute;
    right: 2px;
    bottom: 2px;

    padding: 1px 3px;

    border-radius: 4px;

    background: #24263FEB;

    font-size: 0.43rem;
    font-weight: 800;
    line-height: 1.1;
}

.combat-quick-heal-quantity {
    position: absolute;
    top: 2px;
    right: 2px;

    padding: 1px 3px;

    border-radius: 4px;

    background: #24263FE0;

    font-size: 0.38rem;
    font-weight: 700;
    line-height: 1.1;
}

.combat-quick-heal-picker {
    position: absolute;
    top: 25px;
    left: 48px;

    display: grid;

    gap: 6px;

    width: min(230px, calc(100vw - 75px));
    max-height: 220px;
    padding: 8px;

    overflow-y: auto;

    border: 1px solid #F6E7DD33;
    border-radius: 10px;

    background: #24263FF7;
    color: #F6E7DD;

    box-shadow: 0 8px 22px #24263F57;

    backdrop-filter: blur(8px);
}

.combat-quick-heal-picker[hidden] {
    display: none;
}

.combat-quick-heal-picker > strong {
    font-size: 0.58rem;
}

.combat-quick-heal-picker-options {
    display: grid;

    gap: 4px;
}

.combat-quick-heal-picker-option {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;

    gap: 6px;

    padding: 5px 6px;

    border: 1px solid #F6E7DD1F;
    border-radius: 7px;

    background: #F6E7DD0F;
    color: #F6E7DD;

    text-align: left;

    cursor: pointer;
}

.combat-quick-heal-picker-option:hover,
.combat-quick-heal-picker-option.selected {
    border-color: #F7CDA9B2;

    background: #F7CDA921;
}

.combat-quick-heal-picker-option img,
.combat-quick-heal-picker-option > span:first-child {
    width: 29px;
    height: 29px;

    object-fit: contain;
}

.combat-quick-heal-picker-option > span:last-child {
    display: grid;

    gap: 1px;

    min-width: 0;
}

.combat-quick-heal-picker-option strong {
    overflow: hidden;

    font-size: 0.52rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combat-quick-heal-picker-option small {
    opacity: 0.76;

    font-size: 0.44rem;
}


@media (max-width: 620px) {
    .combat-quick-heal-strip {
        top: clamp(285px, 62%, 330px);
        left: 6px;

        gap: 3px;
    }

    .combat-quick-heal-edit {
        width: 20px;
        height: 20px;

        font-size: 0.60rem;
    }

    .combat-quick-heal-buttons {
        grid-template-columns:
            repeat(3, 36px);

        gap: 4px;
    }

    .combat-quick-heal-slot {
        width: 36px;
        height: 41px;

        border-radius: 7px;
    }

    .combat-quick-heal-slot img,
    .combat-quick-heal-icon {
        width: 25px;
        height: 25px;
    }

    .combat-quick-heal-restore {
        font-size: 0.38rem;
    }

    .combat-quick-heal-quantity {
        font-size: 0.34rem;
    }

    .combat-quick-heal-picker {
        top: 22px;
        left: 41px;

        width: min(205px, calc(100vw - 58px));
        max-height: 190px;
        padding: 6px;
    }

    .combat-quick-heal-picker-option {
        grid-template-columns: 27px minmax(0, 1fr);

        padding: 4px 5px;
    }

    .combat-quick-heal-picker-option img,
    .combat-quick-heal-picker-option > span:first-child {
        width: 25px;
        height: 25px;
    }
}



/* ==============================
   REPEATABLE QUEST OFFERS
   Compact rolled-offer card used
   from Item Details.
   ============================== */

.item-repeatable-offer {
    padding: 12px;

    border: 1px solid #F7CDA92E;
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #F7CDA90E,
            #F7CDA909
        );
}

.item-repeatable-offer .item-detail-info-row {
    padding: 7px 0;

    border: 0;
    border-bottom: 1px solid #F6E7DD12;
    border-radius: 0;

    background: transparent;
}

.item-repeatable-offer .item-detail-info-row:last-of-type {
    border-bottom: 0;
}

.item-repeatable-offer-note,
.item-repeatable-rare-note {
    margin: 3px 0 0;
    padding-top: 8px;

    border-top: 1px solid #F6E7DD14;

    color: #F6E7DDB8;

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

.item-repeatable-rare-note {
    color: #F7CDA9EB;
}


/* ==============================
   REGULAR QUEST STAGES
   Compact progression labels for
   multi-stage Salem quests.
   ============================== */

.quest-board-meta,
.quest-stage-label {
    margin: 0;

    color: #F7CDA9E0;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.quest-board-stage-title {
    color: #F6E7DDEB;

    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
}

.quest-board-first-label {
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.72;
    text-transform: none;
}

.quest-stage-description {
    margin: -2px 0 2px;

    color: #F6E7DDB8;

    font-size: 0.58rem;
    line-height: 1.35;
}

.quest-stage-continue-button {
    width: 100%;

    margin-top: 7px;
    padding: 7px 9px;

    border: 1px solid #F7CDA952;
    border-radius: 9px;

    background: #F7CDA91A;
    color: #F6E7DDF5;

    font: inherit;
    font-size: 0.60rem;
    font-weight: 800;

    cursor: pointer;
}

.quest-stage-continue-button:hover {
    background: #F7CDA929;
}


/* ==============================
   BOSS + DUNGEON MAP MARKERS
   Special Whispering Woods nodes
   use the normal location banner
   with a stronger fantasy accent.
   ============================== */

.map-marker[data-marker-type="boss"],
.map-marker[data-marker-type="dungeon"] {
    width: 154px;
    min-height: 42px;
}

.map-marker[data-marker-type="boss"] .map-marker-title-banner,
.map-marker[data-marker-type="dungeon"] .map-marker-title-banner {
    width: 154px;
    min-height: 42px;

    padding: 7px 25px;

    font-size: 0.68rem;
    font-weight: 800;
}

.map-marker[data-marker-type="boss"] .map-marker-title-banner {
    color: #513966;

    filter:
        saturate(1.28)
        brightness(1.05)
        drop-shadow(0 0 8px #F7CDA9C7)
        drop-shadow(0 7px 12px #24263F4C);
}

.map-marker[data-marker-type="dungeon"] .map-marker-title-banner {
    color: #513966;

    filter:
        saturate(1.2)
        brightness(1.03)
        drop-shadow(0 0 8px #F6E7DDDB)
        drop-shadow(0 7px 12px #24263F47);
}

.map-marker[data-marker-type="boss"]:hover .map-marker-title-banner,
.map-marker[data-marker-type="dungeon"]:hover .map-marker-title-banner {
    filter:
        saturate(1.35)
        brightness(1.1)
        drop-shadow(0 0 11px #F6E7DDE6)
        drop-shadow(0 8px 14px #24263F52);
}



/* ==============================
   BOSS + DUNGEON COMBAT CARDS
   ============================== */

.combat-monster-card.boss-encounter-card {
    border-color: #B48B9575;

    background:
        linear-gradient(
            135deg,
            #F7CDA92E,
            #9E629514
        );

    box-shadow:
        0 7px 18px #634A3314;
}

.combat-monster-card.dungeon-encounter-card {
    border-color: #9E62956B;

    background:
        linear-gradient(
            135deg,
            #F6E7DD33,
            #F7CDA917
        );

    box-shadow:
        0 7px 18px #634A3314;
}


/* ==============================
   COMBAT UI - DESKTOP ENEMY CENTRE
   Centre monster and boss artwork on
   larger screens without changing the
   existing mobile Combat layout.
   ============================== */

@media (min-width: 621px) {
    .combat-enemy-stage-world {
        right: auto;
        left: 50%;

        transform: translateX(-50%);
    }
}



/* ==============================
   DESKTOP READABILITY PASS
   Comfortable ~110% desktop feel
   at normal browser zoom, with
   tighter gutters around the map.
   ============================== */

@media (min-width: 1200px) {
    html {
        font-size: 18.7px;
    }

    .game-header {
        min-height: 59px;
        padding: 7px 15px;
    }

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

    .game-main {
        grid-template-columns:
            278px
            minmax(0, 1fr)
            372px;

        gap: 6px;
        padding: 8px;
    }

    .inventory-sidebar,
    .activity-panel {
        padding: 11px;
    }

    .inventory-grid {
        gap: 6px;
    }

    .header-actions {
        gap: 8px;
    }

    .header-action-button {
        gap: 7px;
        padding: 8px 11px;
    }

    .map-marker.named-hotspot:not([data-marker-type="building"]) {
        width: 229px;
        min-height: 58px;
    }

    .map-marker-title-banner {
        width: 229px;
        min-height: 58px;
        padding: 9px 40px;
    }

    .map-marker.building-hotspot .map-marker-title-banner {
        width: 224px;
    }

    .map-marker[data-marker-type="combat"] {
        width: 154px;
        min-height: 44px;
    }

    .map-marker[data-marker-type="combat"] .map-marker-title-banner {
        width: 154px;
        min-height: 44px;
        padding: 7px 26px;
    }

    .map-marker[data-marker-type="boss"],
    .map-marker[data-marker-type="dungeon"] {
        width: 169px;
        min-height: 46px;
    }

    .map-marker[data-marker-type="boss"] .map-marker-title-banner,
    .map-marker[data-marker-type="dungeon"] .map-marker-title-banner {
        width: 169px;
        min-height: 46px;
        padding: 8px 27px;
    }
}



/* ==============================
   MOBILE ACTIVITY HUD DETAILS
   Keep the compact sticky HUD but
   do not hide useful plan/cast info.
   ============================== */

@media (max-width: 600px) {
    .header-action-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 1px;
    }

    .header-action-copy span {
        display: block;

        width: 100%;
        max-width: none;
        min-width: 0;

        overflow: hidden;

        font-size: 0.43rem;
        line-height: 1.05;

        opacity: 0.82;

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

    .header-queue-row {
        display: grid;
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 0.9fr)
            auto;
        align-items: center;

        gap: 3px;
    }

    .header-queue-row >
    .header-queue-time-chip,
    .header-queue-row >
    .header-queue-cap-chip {
        display: block;

        min-width: 0;

        padding: 1px 3px;

        overflow: hidden;

        font-size: 0.34rem;
        line-height: 1.1;

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

    .header-queue-menu {
        min-width: 0;
    }

    .header-queue-toggle {
        white-space: nowrap;
    }
}



/* ==============================
   ACCOUNT / CHARACTER
   ============================== */

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

    z-index: 60;

    display: grid;
    place-items: center;

    padding: 18px;
}

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

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

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: #343558C7;

    cursor: default;
}

.account-window {
    position: relative;

    z-index: 1;

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

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow: 0 18px 60px #24263F7A;
}

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

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

    border-bottom: 1px solid #9E629533;
}

.account-header h2 {
    margin: 0;

    font-size: 1rem;
}

.account-content {
    display: grid;

    gap: 9px;
    padding: 11px;
}

.account-card {
    padding: 11px;

    border: 1px solid #9E629538;
    border-radius: 11px;

    background: #343558B8;
}

.account-card[hidden] {
    display: none;
}

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

    font-size: 0.84rem;
}

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

    font-size: 0.64rem;
    line-height: 1.5;
}

.account-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;
    margin: 11px 0 9px;
}

.account-mode-switch button,
.account-secondary-button {
    padding: 8px 10px;

    border: 1px solid #9E62954C;
    border-radius: 9px;

    background: #9E62951A;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;

    cursor: pointer;
}

.account-mode-switch button:hover,
.account-secondary-button:hover {
    border-color: #E7968E;

    background: #F7CDA91A;
}

.account-mode-switch button.selected {
    border-color: #F7CDA9B8;

    background: #F7CDA929;
    color: #F6E7DD;
}

.account-form {
    display: grid;

    gap: 8px;
}

.account-form label {
    display: grid;

    gap: 4px;

    color: #F6E7DDD1;

    font-size: 0.61rem;
    font-weight: 700;
}

.account-form input {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background: #343558C7;
    color: #F6E7DD;

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

.account-form input:focus {
    outline: 2px solid #F7CDA999;
    outline-offset: 1px;
}

.account-form .fishing-button {
    width: 100%;

    margin-top: 2px;
}

.account-hint {
    opacity: 0.66;
}

.account-status {
    min-height: 1.3em;
    margin-top: 8px !important;
}

.account-status[data-tone="success"] {
    color: #D59A5C;
}

.account-status[data-tone="error"] {
    color: #E7968E;
}

#account-button-text {
    max-width: 92px;

    overflow: hidden;

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

.account-secondary-button {
    width: 100%;

    margin-top: 10px;
}

.account-ready-card {
    background:
        linear-gradient(
            135deg,
            #D59A5C42,
            #343558C7
        );
}

.account-cloud-status,
.account-local-status {
    display: grid;

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

    border: 1px solid #F7CDA940;
    border-radius: 9px;

    background: #34355847;

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

.account-cloud-status span,
.account-local-status span {
    opacity: 0.72;
}



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

    .account-window {
        width: 100%;
    }
}



/* Image-palette control contrast */
.fishing-button {
    background: #60498F;
    color: #F6E7DD;
}

.fishing-button:hover:not(:disabled),
.map-zoom-button:hover:not(:disabled) {
    background: #9E6295;
    color: #F6E7DD;
}

.quest-progress-bar,
.skills-progress-bar {
    background: #E7968E;
}



/* ==============================
   FULL-SCREEN LOGIN
   ============================== */

.account-modal.login-screen {
    display: block;
    padding: 0;

    background:
        #343558
        url("../assets/images/login-screen.png")
        center center / cover
        no-repeat;
}

.account-modal.login-screen[hidden] {
    display: none;
}

.account-modal.character-setup-screen #account-close {
    display: none;
}

.account-modal.character-setup-screen .account-backdrop {
    cursor: default;
}

.account-modal.character-setup-screen #account-character-create {
    border-color: rgba(247, 205, 169, 0.42);
}

.account-modal.login-screen .account-backdrop,
.account-modal.login-screen .account-header {
    display: none;
}

.account-modal.login-screen .account-window {
    position: relative;

    width: 100vw;
    height: 100dvh;
    max-height: none;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.account-modal.login-screen .account-content {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
}

.account-modal.login-screen #account-signed-out {
    position: absolute;
    top: 51.5%;
    left: 50%;

    width: min(410px, 82vw);

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    transform: translateX(-50%);
}

.account-modal.login-screen
#account-signed-out > .panel-label,
.account-modal.login-screen
#account-signed-out > h3,
.account-modal.login-screen
#account-signed-out > p:not(.account-hint):not(.account-status) {
    display: none;
}

.account-modal.login-screen .account-mode-switch {
    gap: 8px;
    margin: 0 0 10px;
}

.account-modal.login-screen .account-mode-switch button,
.account-modal.login-screen .account-secondary-button {
    min-height: 42px;

    border: 1px solid #CC7790;
    border-radius: 999px;

    background: #343558D9;
    color: #F6E7DD;

    box-shadow:
        0 5px 18px #24263F73,
        inset 0 1px 0 #F7CDA933;

    backdrop-filter: blur(8px);
}

.account-modal.login-screen .account-mode-switch button:hover,
.account-modal.login-screen .account-secondary-button:hover {
    border-color: #E7968E;
    background: #60498FE6;
}

.account-modal.login-screen .account-mode-switch button.selected {
    border-color: #F7CDA9;

    background: #60498FEF;
    color: #F6E7DD;
}

.account-modal.login-screen .account-form {
    gap: 9px;
}

.account-modal.login-screen .account-form label {
    gap: 5px;

    color: #F6E7DD;
    text-shadow: 0 2px 8px #24263FCC;
}

.account-modal.login-screen .account-form input {
    min-height: 44px;

    border: 1px solid #CC7790;
    border-radius: 12px;

    background: #24263FE6;
    color: #F6E7DD;

    box-shadow:
        0 5px 18px #24263F66,
        inset 0 1px 0 #F7CDA91F;

    backdrop-filter: blur(8px);
}

.account-modal.login-screen .account-form input:focus {
    outline: 2px solid #F7CDA9;
    border-color: #E7968E;
}

.account-modal.login-screen .account-form .fishing-button {
    min-height: 44px;
    margin-top: 2px;

    border-color: #F7CDA9;

    background: linear-gradient(
        135deg,
        #60498F,
        #343558
    );
    color: #F6E7DD;

    box-shadow: 0 7px 22px #24263F80;
}

.account-modal.login-screen .account-hint,
.account-modal.login-screen .account-status {
    margin: 7px 6px 0 !important;

    color: #F6E7DD;

    text-align: center;
    text-shadow: 0 2px 8px #24263FD9;
}

.account-modal.login-screen .account-status[data-tone="success"] {
    color: #F7CDA9;
}

.account-modal.login-screen .account-status[data-tone="error"] {
    color: #E7968E;
}

@media (max-width: 700px) {
    .account-modal.login-screen {
        background-image:
            url("../assets/images/login-screen-mobile.png");
        background-position: center top;
    }

    .account-modal.login-screen #account-signed-out {
        top: 40.5%;
        width: min(390px, 86vw);
    }

    .account-modal.login-screen .account-mode-switch button {
        min-height: 40px;
        font-size: 0.72rem;
    }

    .account-modal.login-screen .account-form input,
    .account-modal.login-screen .account-form .fishing-button {
        min-height: 42px;
        font-size: 0.72rem;
    }
}

@media (max-width: 420px) {
    .account-modal.login-screen #account-signed-out {
        top: 39.5%;
        width: 88vw;
    }
}



/* ==============================
   PLAYER PROFILE V1
   ============================== */

.account-profile-card {
    display: grid;

    gap: 10px;
    margin: 10px 0;
    padding: 11px;

    border: 1px solid #F6E7DD47;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #634A3347,
            #343558B8
        );
}

.account-profile-heading {
    display: flex;
    align-items: center;

    gap: 10px;
}

.account-profile-heading .panel-label {
    margin: 0 0 2px;
}

.account-profile-ghost {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 1px solid #F6E7DD57;
    border-radius: 12px;

    background: #34355857;

    font-size: 1.35rem;
}

.account-profile-selected-title {
    display: block;

    color: #F6E7DD;

    font-size: 0.82rem;
    line-height: 1.35;
}

.account-profile-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.account-profile-meta span {
    display: grid;

    gap: 2px;
    padding: 8px;

    border: 1px solid #F7CDA92E;
    border-radius: 9px;

    background: #3435583D;

    color: #F6E7DDAD;

    font-size: 0.72rem;
}

.account-profile-meta strong {
    color: #F6E7DD;

    font-size: 0.74rem;
}

.account-profile-title-picker {
    display: grid;

    gap: 5px;

    color: #F6E7DDD1;

    font-size: 0.72rem;
    font-weight: 700;
}

.account-profile-title-picker select {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background: #343558C7;
    color: #F6E7DD;

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

.account-profile-title-picker select:focus {
    outline: 2px solid #F7CDA999;
    outline-offset: 1px;
}

.account-profile-title-picker select:disabled {
    opacity: 0.58;

    cursor: not-allowed;
}

.account-profile-title-picker small {
    color: #F6E7DD94;

    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.45;
}

.account-game-shop-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    width: 100%;

    gap: 10px;
    margin: 10px 0;
    padding: 10px 11px;

    border: 1px solid #D59A5C70;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #D59A5C24,
            #9E629520
        );
    color: #F6E7DD;

    font: inherit;

    text-align: left;

    cursor: pointer;
}

.account-game-shop-button:hover {
    border-color: #F7CDA9;

    background:
        linear-gradient(
            135deg,
            #D59A5C35,
            #B48B9530
        );
}

.account-game-shop-icon {
    font-size: 1.35rem;
}

.account-game-shop-copy {
    display: grid;

    gap: 2px;
}

.account-game-shop-copy strong {
    font-size: 0.76rem;
}

.account-game-shop-copy small {
    color: #F6E7DDA3;

    font-size: 0.61rem;
}

.account-game-shop-arrow {
    color: #F7CDA9;

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


.account-profile-email {
    opacity: 0.7;
}



@media (max-width: 600px) {
    .account-profile-meta {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   ACCOUNT CLOUD SAVE
   ============================== */

.account-cloud-meta {
    margin-top: 3px;

    opacity: 0.58;

    font-size: 0.56rem;
    line-height: 1.4;
}

.account-cloud-actions {
    display: grid;

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

.account-cloud-actions .fishing-button,
.account-cloud-actions .account-secondary-button {
    width: 100%;
    margin: 0;
}

.account-cloud-actions button:disabled {
    opacity: 0.48;

    cursor: wait;
}


/* ==============================
   GLOBAL READABILITY AUDIT
   Closed Alpha accessibility pass.
   Keep ordinary gameplay copy readable
   while preserving compact badges/HUD.
   ============================== */

/* Welcome Back / modal body text */
#offline-summary-time,
.offline-summary-item span,
.offline-summary-item strong,
.offline-summary-note,
.offline-summary-recipes li,
.offline-summary-section h3,
.offline-summary-stat,
.offline-summary-task small,
.offline-summary-task strong {
    font-size: 0.74rem;
}

/* Account and cloud-save text */
.account-card p,
.account-cloud-meta,
.account-form label {
    font-size: 0.72rem;
}

/* Readable UI copy and metadata */
#board-combat-status,
#combat-spell-text,
#header-clear-queue,
.account-cloud-status,
.account-local-status,
.action-notification-text small,
.action-notification-text span,
.action-notification-text strong,
.active-buff-row small,
.active-buff-time,
.activity-plan-controls label,
.activity-plan-estimate,
.activity-plan-heading small,
.activity-plan-heading strong,
.activity-plan-value small,
.balance-band,
.collection-catch-chance,
.collection-mastery-row,
.combat-creature-help,
.combat-inspected-quest-count,
.combat-inspector-quest-hint,
.combat-inspector-section-title,
.combat-loadout-stat span,
.combat-loot-inspector .combat-loot-slot small,
.combat-loot-inspector-meta,
.combat-loot-slot strong,
.combat-loot-slot.unknown,
.combat-monster-action,
.combat-monster-loot-preview .combat-loot-slot small,
.combat-monster-meta,
.combat-monster-card small,
.combat-progress-next-spell,
.combat-spell-detail,
.combat-stat-grid p,
.combat-status-line,
.combat-style-level-card,
.combat-style-level-card small,
.cooking-detail-label,
.cooking-empty-message,
.cooking-ingredient,
.cooking-meta-grid p,
.cooking-recipe-card span,
.cooking-recipe-card small,
.cooking-recipe-card strong,
.death-recovery-chip,
.death-recovery-chip strong,
.disenchant-card small,
.economy-balance-meta,
.enchant-empty,
.enchant-status,
.enchant-future,
.enchant-maxed,
.gathering-background-note p,
.gathering-plot-card.empty > p,
.gathering-plot-card.invalid > p,
.gathering-plot-card.empty > strong,
.gathering-plot-card.growing > small,
.gathering-plot-card.locked > p,
.gathering-plot-card.locked > strong,
.gathering-plot-resource span,
.gathering-plot-resource strong,
.gathering-plot-timer,
.gear-enchant-active-card > div small,
.gear-enchant-active-card > div span,
.gear-enchant-active-card > div strong,
.gear-enchant-card > small,
.gear-enchant-card.fragment small,
.gear-enchant-card.locked small,
.gear-enchant-costs,
.gear-enchant-effect,
.gear-enchant-heading span,
.gear-enchant-heading strong,
.gear-enchant-intro,
.gear-enchant-no-target,
.gear-enchant-section-title small,
.gear-enchant-section-title strong,
.gear-enchant-strip,
.gear-picker-rolls span,
.general-shop-copy p,
.general-shop-copy small,
.general-shop-heading span,
.general-shop-heading strong,
.general-shop-sell-all,
.general-shop-sell-copy p,
.general-shop-sell-empty,
.general-shop-sell-heading span,
.general-shop-sell-heading strong,
.inventory-capacity,
.item-detail-heading
#item-detail-subtitle,
.item-roll-card-top strong,
.item-roll-effect-note,
.item-roll-heading,
.map-favorites-heading small,
.map-favorites-heading strong,
.map-favorites-popover label,
.mastery-entry-heading span,
.mastery-entry-heading strong,
.mastery-entry-meta,
.mastery-milestone-card span,
.mastery-milestone-card strong,
.mastery-next-reward,
.mastery-summary,
.mastery-xp-progress,
.mining-source-copy span,
.mining-source-copy strong,
.onboarding-skip,
.onboarding-step-label,
.onboarding-tip,
.panel-label,
.pantry-access-note,
.pantry-item-copy > span,
.pantry-item-copy strong,
.pantry-item-note,
.pantry-section-heading h3,
.personal-enchant-costs,
.personal-enchant-effect,
.personal-enchant-next,
.personal-enchant-heading span,
.personal-slot-note,
.quest-board-category,
.quest-board-description,
.quest-board-empty,
.quest-board-intro,
.quest-board-meta,
.quest-stage-label,
.quest-board-objective,
.quest-board-reward,
.quest-board-stats span,
.quest-bound-source,
.quest-objective-label,
.quest-objective-progress,
.quest-regular-description,
.quest-skill-gate,
.quest-stage-description,
.quest-tracker-empty,
.quest-tracker-reward,
.quest-waiting-message,
.recipe-book-card-hint,
.recipe-book-card-status,
.recipe-book-meta-label,
.recipe-book-meta-value,
.recipe-book-summary,
.recipe-card-status,
.recipe-discovery-hint,
.repair-item-copy p,
.repair-item-heading span,
.repair-item-heading strong,
.repair-shop-empty p,
.repair-shop-empty strong,
.ritual-card span,
.seed-shop-band-heading > span,
.seed-shop-band-heading small,
.seed-shop-band-heading strong,
.seed-shop-copy p,
.seed-shop-copy small,
.seed-shop-heading span,
.seed-shop-heading strong,
.seed-shop-status,
.settings-card p,
.shop-info-card p,
.shop-info-card strong,
.shop-npc-copy > p:last-child,
.shop-wallet span,
.shop-wallet strong,
.skills-card-level,
.skills-card-name,
.skills-card-xp,
.skills-total {
    font-size: 0.72rem;
}

/* Session tracker text */
.session-loot-empty,
.session-loot-gold-pill,
.session-loot-name,
.session-loot-note,
.session-loot-quantity,
.session-loot-started,
.session-loot-summary span,
.session-loot-summary strong,
.session-loot-total {
    font-size: 0.68rem;
}

/* Compact controls and tabs */
.account-mode-switch button,
.account-secondary-button,
.activity-plan-controls select,
.activity-plan-controls input,
.activity-plan-max-button,
.activity-plan-mode-button,
.activity-plan-step-direction,
.activity-plan-step-button,
.activity-section-tab,
.activity-section-tab,
    .quest-type-tab,
.balance-table small,
.balance-table code,
.balance-table th,
.blacksmithing-tab,
.death-recovery-repair-button,
.economy-balance-toolbar label,
.enchant-filter,
.enchanting-tab,
.gear-enchant-apply,
.general-shop-card .shop-buy-button,
.general-shop-mode-note,
.general-shop-lock-note,
.general-shop-sell-summary,
.general-shop-sell-toolbar input,
.general-shop-tab,
.header-stop-action,
.loadout-tab,
.location-card p:not(#selected-location-description):not(#fishing-status),
.mastery-toolbar input,
.mastery-toolbar select,
.metalworking-tab,
.pantry-category-tab,
.pantry-item-actions .fishing-button,
.pantry-item-tab-select,
.pantry-tab-manager .fishing-button,
.pantry-tab-manager select,
.pantry-tab-manager input,
.pantry-view-tab,
.quest-abandon-button,
.quest-board-accept-button,
.quest-claim-button,
.quest-stage-continue-button,
.quest-type-tab,
.recipe-book-filter,
.recipe-book-search input,
.recipe-book-filter select,
.recipe-book-section-button,
.repair-item-card .repair-button,
.repair-service-card .repair-all-button,
.seed-shop-secondary-button,
.session-loot-reset,
.settings-guide-button,
.shop-sell-button,
.shop-lock-button,
.sidebar-tab,
.skills-view-tab {
    font-size: 0.68rem;
}

/* Dense live HUD and Combat controls */
#combat-auto-description,
.combat-auto-thresholds label,
.combat-auto-toggle,
.combat-auto-toggle,
    .combat-auto-thresholds label,
    #combat-auto-description,
.combat-board-actions button,
.combat-board-heading > span,
.combat-board-heading small,
.combat-board-heading strong,
.combat-board-stat-grid span,
.combat-board-vital-heading,
.combat-cast-row,
.combat-fight-plan input,
.combat-fight-plan label,
.combat-fight-plan small,
.combat-player-tab,
.combat-quick-heal-copy small,
.combat-quick-heal-copy strong,
.combat-quick-heal-edit,
.combat-quick-heal-picker > strong,
.combat-quick-heal-picker-option small,
.combat-quick-heal-picker-option strong,
.combat-quick-heal-restore,
.combat-selected-meta span,
.combat-side-tab,
.combat-supply-row,
.combat-supply-row select,
    .combat-supply-row button,
    .combat-auto-thresholds select,
.combat-supply-row select,
.combat-supply-row button,
.combat-auto-thresholds select,
.combat-view-toggle,
.combat-return-button,
.header-action-copy span,
.header-action-copy strong,
.header-action-feedback-copy small,
.header-action-feedback-copy span,
.header-action-feedback-copy strong,
.header-action-feedback-icon,
.header-currencies span,
.header-currencies strong,
.header-queue-dropdown-heading small,
.header-queue-dropdown-heading strong,
.header-queue-empty,
.header-queue-paused button,
.header-queue-paused span,
.header-queue-row span,
.header-queue-toggle,
.header-queued-control,
.header-queued-copy small,
.header-queued-copy strong,
.header-queued-position {
    font-size: 0.66rem;
}

/* Compact labels */
.equipment-slot-label,
.gathering-unlock-requirement,
.gathering-unlock-requirement strong,
.gear-picker-level-lock,
.pantry-counts {
    font-size: 0.66rem;
}

/* Badges, counters and fixed-size chips */
.collection-lock,
.collection-rarity,
.combat-quick-heal-quantity,
.combat-quick-heal-slot:first-child::before,
.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(2)::before,
.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(3)::before,
.equipment-broken-badge,
.equipment-condition-badge,
.equipment-enchant-badge,
.equipment-stack-quantity,
.gathering-plot-number,
.header-badge,
.header-queue-row >
    .header-queue-time-chip,
    .header-queue-row >
    .header-queue-cap-chip,
.header-stop-action::before,
.inventory-god-roll,
.equipment-god-roll-badge,
.pantry-god-roll-badge,
.pantry-upgrade-rank-badge,
.inventory-item-amount,
.inventory-item-lock,
.inventory-upgrade-rank,
.equipment-upgrade-badge,
.quest-type-count,
.recipe-book-card-new-badge,
.recipe-book-section-new,
.session-loot-slot-quantity {
    font-size: 0.62rem;
}

/* Map labels */
.map-marker-title-banner.long-label,
.map-marker-title-banner.very-long-label,
.map-marker.unlocked:is(
        [data-marker-type="combat"],
        [data-marker-type="fishing"],
        [data-marker-type="mining"],
        [data-marker-type="woodcutting"],
        [data-marker-type="gathering"]
    )::after,
.map-marker[data-marker-type="combat"] .map-marker-title-banner,
.map-marker[data-marker-type="combat"] .map-marker-title-banner.long-label,
.map-marker[data-marker-type="combat"] .map-marker-title-banner.very-long-label {
    font-size: 0.64rem;
}


/* ==============================
   DENSE ITEM TEXT TUNING
   Keep Bag and Combat food labels
   compact without returning to the
   original microscopic sizes.
   ============================== */

/* Bag item overlays */
.inventory-item-amount {
    font-size: 0.58rem;
}

.inventory-item-lock,
.inventory-god-roll,
.inventory-upgrade-rank {
    font-size: 0.56rem;
}

/* Combat quick-heal item text */
.combat-quick-heal-copy strong,
.combat-quick-heal-picker > strong {
    font-size: 0.60rem;
}

.combat-quick-heal-picker-option strong {
    font-size: 0.58rem;
}

.combat-quick-heal-copy small,
.combat-quick-heal-picker-option small,
.combat-quick-heal-restore {
    font-size: 0.54rem;
}

.combat-quick-heal-quantity,
.combat-quick-heal-slot:first-child::before,
.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(2)::before,
.combat-quick-heal-strip.editing
.combat-quick-heal-slot:nth-child(3)::before {
    font-size: 0.50rem;
}



/* ==============================
   CLOUD-ONLY GAMEPLAY GATE
   ============================== */

.cloud-save-required-banner {
    margin: 12px 18px 0;
    padding: 10px 14px;
    border: 1px solid #B48B958C;
    border-radius: 12px;
    background: #24263FF5;
    color: #F6E7DD;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 14px #24263F2E;
}

html.cloud-play-locked .game-main {
    opacity: 0.58;
}

html.cloud-play-locked #header-action-bar {
    opacity: 0.58;
}



/* ==============================
   PANTRY OVERLAY V2
   ============================== */

body.pantry-open {
    overflow: hidden;
}

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

    z-index: 47;

    display: grid;
    place-items: center;

    padding: 18px;
}

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

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

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: #343558C7;

    cursor: default;
}

.pantry-window {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

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

    overflow: hidden;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow:
        0 18px 60px #24263F7A;
}

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

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

    border-bottom:
        1px solid #9E629533;
}

.pantry-header h2 {
    margin: 0;

    font-size: 1rem;
}

.pantry-summary {
    margin: 4px 0 0;

    color: #F6E7DDAD;

    font-size: 0.58rem;
}

.pantry-header-actions {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}

.pantry-modal .pantry-counts {
    min-width: 116px;

    gap: 4px;

    font-size: 0.52rem;
}

.pantry-modal .pantry-counts span {
    gap: 10px;
}

.pantry-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;

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

.pantry-search {
    display: grid;

    gap: 4px;

    color: #F6E7DDB8;

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

.pantry-search input {
    width: 100%;
    min-width: 0;

    padding: 7px 9px;

    border: 1px solid #F6E7DD2E;
    border-radius: 8px;

    background: #F6E7DDF0;
    color: #24263F;

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

.pantry-modal .pantry-deposit-all {
    width: auto;

    padding: 7px 10px;

    font-size: 0.5rem;
}

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

    gap: 6px;
    margin: 0;
    padding: 0 12px 9px;
}

.pantry-modal .pantry-view-tab {
    padding: 7px 9px;

    font-size: 0.54rem;
}

.pantry-scroll {
    min-height: 0;

    overflow-y: auto;

    padding: 0 12px 14px;
}

.pantry-status {
    margin: 0 0 8px;
}

.pantry-modal .pantry-access-note {
    margin: 0 0 9px;

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

.pantry-modal .pantry-section-heading {
    margin-top: 6px;
}

.pantry-modal .pantry-section-heading h3 {
    font-size: 0.64rem;
}

.pantry-modal .pantry-item-list {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

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

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

    width: auto;
    min-width: 0;

    gap: 7px;
    padding: 8px;

    border: 1px solid #9E629533;
    border-radius: 9px;

    background: #343558B8;
}

.pantry-modal .pantry-item-image-shell {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;

    border-radius: 8px;
}

.pantry-modal
.pantry-item-image-shell
.pantry-item-image {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;

    margin: 0;
    padding: 0;

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

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

    gap: 3px;
}

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

    color: #F6E7DD;

    font-size: 0.58rem;

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

.pantry-modal .pantry-item-copy > span {
    color: #F6E7DDB8;

    font-size: 0.51rem;
}

.pantry-modal .pantry-item-tab-select {
    margin-top: 2px;
    padding: 4px 5px;

    font-size: 0.48rem;
}

.pantry-modal .pantry-item-actions {
    grid-column: 1 / -1;

    display: grid;

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

.pantry-item-action-label {
    color: #F6E7DDAD;

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

.pantry-quick-actions {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 4px;
}

.pantry-modal
.pantry-transfer-button {
    min-width: 0;

    padding: 5px 4px;

    font-size: 0.49rem;
}

.pantry-custom-transfer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 4px;
}

.pantry-custom-transfer input {
    width: 100%;
    min-width: 0;

    padding: 5px 6px;

    border: 1px solid #F6E7DD2E;
    border-radius: 7px;

    background: #F6E7DDF0;
    color: #24263F;

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

.pantry-modal
.pantry-custom-transfer-button {
    padding: 5px 7px;

    font-size: 0.48rem;
}

.pantry-modal .pantry-item-note {
    grid-column: 1 / -1;

    margin: 2px 0 0;

    font-size: 0.48rem;
    line-height: 1.35;
}

.pantry-modal .pantry-organiser {
    gap: 8px;
    margin-top: 8px;
}

.pantry-modal .pantry-category-tabs {
    gap: 5px;
}

.pantry-modal .pantry-category-tab {
    padding: 5px 8px;

    font-size: 0.49rem;
}

.pantry-modal .pantry-tab-manager {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto
        auto
        auto;

    align-items: center;

    gap: 5px;
    padding: 7px;
}

.pantry-modal .pantry-tab-manager select,
.pantry-modal .pantry-tab-manager input {
    padding: 6px 7px;

    font-size: 0.5rem;
}

.pantry-modal
.pantry-tab-manager
.fishing-button {
    padding: 6px 7px;

    font-size: 0.47rem;
}

.pantry-modal .enchant-empty {
    grid-column: 1 / -1;
}



@media (max-width: 900px) {
    .pantry-modal .pantry-item-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .pantry-modal .pantry-tab-manager {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            repeat(3, auto);
    }
}



@media (max-width: 720px) {
    .pantry-modal {
        padding: 10px;
    }

    .pantry-window {
        width: min(96vw, 680px);
        max-height: 94vh;
    }

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

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

    .pantry-modal .pantry-item-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pantry-modal .pantry-tab-manager {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .pantry-modal
    .pantry-tab-manager
    .fishing-button {
        width: 100%;
    }
}



@media (max-width: 460px) {
    .pantry-modal .pantry-item-list {
        grid-template-columns: 1fr;
    }

    .pantry-header {
        gap: 8px;
        padding: 12px;
    }

    .pantry-header-actions {
        gap: 6px;
    }

    .pantry-modal .pantry-counts {
        min-width: 96px;

        font-size: 0.47rem;
    }
}



/* ==============================
   UNIFORM ITEM / GEAR TILES
   Keep item artwork and stale-save text
   inside predictable cards so one asset
   cannot stretch the grid, especially on
   mobile.
   ============================== */

.equipment-slot,
.tool-slot {
    overflow: hidden;

    box-sizing: border-box;
}

.equipment-item-image {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;

    padding: 0;

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

    box-sizing: border-box;
}

.weapon-slot .equipment-item-image,
.ring-slot .equipment-item-image {
    max-width: 88%;
    max-height: 88%;
}

.amulet-slot .equipment-item-image {
    max-width: 84%;
    max-height: 84%;
}

.supply-slot .equipment-item-image {
    max-width: 82%;
    max-height: 82%;
}

.legs-slot .equipment-item-image {
    max-width: 74%;
    max-height: 74%;
}

.gear-picker-current {
    height: 74px;
    min-height: 74px;
    max-height: 74px;

    overflow: hidden;

    box-sizing: border-box;
}

.gear-picker-current-card {
    min-width: 0;
    height: 100%;
}

.gear-picker-current-card > div:last-child {
    min-width: 0;
}

.gear-picker-current-card strong {
    overflow: hidden;

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

.gear-picker-artwork {
    flex: 0 0 auto;

    overflow: hidden;
}

.gear-picker-artwork img {
    display: block;

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

    box-sizing: border-box;
}

.pantry-modal .pantry-item-list {
    grid-auto-rows: 138px;
}

.pantry-modal .pantry-item-card {
    height: 138px;
    min-height: 138px;
    max-height: 138px;

    align-self: stretch;

    overflow: hidden;

    box-sizing: border-box;
}

.pantry-modal .pantry-item-copy > span {
    min-width: 0;

    overflow: hidden;

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

.pantry-modal .pantry-item-actions {
    align-self: end;
}

.pantry-modal .pantry-item-card-unknown {
    grid-template-rows:
        auto minmax(0, 1fr);
}

.pantry-modal
.pantry-item-card-unknown
.pantry-item-note {
    align-self: end;

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 650px) {
    .gear-picker-current {
        height: 68px;
        min-height: 68px;
        max-height: 68px;
    }

    .gear-picker-current-card
    .gear-picker-artwork {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 460px) {
    .pantry-modal .pantry-item-list {
        grid-auto-rows: 132px;
    }

    .pantry-modal .pantry-item-card {
        height: 132px;
        min-height: 132px;
        max-height: 132px;
    }
}


/* ==============================
   LEGENDARY RELIC QUESTS + ASSEMBLY
   ============================== */

.legendary-quest-card {
    border-color: #F7CDA975;

    background:
        linear-gradient(
            145deg,
            #F7CDA91A,
            #9E629514
        );
}

.legendary-quest-meta,
.legendary-quest-story,
.legendary-quest-destination {
    margin: 7px 0 0;

    line-height: 1.45;
}

.legendary-quest-meta {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    opacity: 0.84;
}

.legendary-quest-story {
    font-size: 0.82rem;
}

.legendary-quest-requirements {
    display: grid;

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

.legendary-quest-requirement {
    padding: 5px 7px;

    border: 1px solid #9E62952E;
    border-radius: 9px;

    font-size: 0.76rem;
    line-height: 1.35;
}

.legendary-quest-requirement.complete {
    border-color: #D59A5C7A;

    background: #D59A5C1F;
}

.legendary-quest-destination {
    padding-top: 8px;

    border-top: 1px solid #F7CDA93D;

    font-size: 0.78rem;
    font-weight: 700;
}

.legendary-relic-assembly-list {
    display: grid;

    gap: 12px;
    margin: 12px 0;
}

.legendary-relic-assembly-list:empty {
    display: none;
}

.legendary-relic-assembly-card {
    display: block;

    min-width: 0;
    padding: 14px;
    overflow: hidden;

    border: 1px solid #F7CDA975;
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #F7CDA91A,
            #9E629514
        );
}

.legendary-relic-card-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;

    gap: 12px;
}

.legendary-relic-card-heading {
    min-width: 0;
}

.legendary-relic-card-heading h3,
.legendary-relic-card-heading p {
    margin: 0;
}

.legendary-relic-card-heading h3 {
    margin-top: 4px;

    font-size: 1.06rem;
    line-height: 1.18;

    overflow-wrap: break-word;
}

.legendary-relic-card-label {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;

    border-radius: 7px;

    font-size: 0.68rem;
    line-height: 1.2;
    white-space: normal;
}

.legendary-relic-media-tile {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    border: 1px solid #F7CDA94C;
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #F6E7DD29,
            #9E62951A 55%,
            #24263F3D
        );

    box-shadow:
        inset 0 1px 0 #F6E7DD0D,
        0 6px 14px #24263F1F;

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

.legendary-relic-mystery-icon {
    border-color: #F7CDA96B;

    background:
        radial-gradient(
            circle at 35% 30%,
            #F7CDA92E,
            #F7CDA91F 45%,
            #9E62951A
        );

    font-size: 2.15rem;
}

.legendary-relic-mystery-copy {
    margin-top: 7px !important;

    color: #F6E7DDD1;

    font-size: 0.78rem;
    line-height: 1.42;
}

.legendary-relic-requirements-label {
    margin: 13px 0 6px;

    color: #F6E7DD9E;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
}

.legendary-relic-assembly-requirements {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(158px, 1fr)
        );

    gap: 7px;
}

.legendary-relic-assembly-requirement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    min-width: 0;
    min-height: 44px;
    gap: 9px;
    padding: 7px 9px;

    border: 1px solid #9E629533;
    border-radius: 10px;

    background: #24263F29;

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

.legendary-relic-requirement-main {
    display: flex;
    align-items: flex-start;

    min-width: 0;
    gap: 6px;
}

.legendary-relic-requirement-status {
    flex: 0 0 auto;

    color: #F6E7DD9E;

    font-weight: 900;
}

.legendary-relic-requirement-name {
    min-width: 0;

    overflow-wrap: break-word;
}

.legendary-relic-requirement-count {
    flex: 0 0 auto;

    color: #F6E7DDC7;

    font-size: 0.71rem;
    font-weight: 800;
    white-space: nowrap;
}

.legendary-relic-assembly-requirement.complete {
    border-color: #D59A5C7A;

    background: #D59A5C1F;
}

.legendary-relic-assembly-requirement.complete
.legendary-relic-requirement-status,
.legendary-relic-assembly-requirement.complete
.legendary-relic-requirement-count {
    color: #D59A5C;
}

.legendary-relic-assemble-button {
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    padding: 8px 12px;

    border-radius: 10px;

    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.boss-relic-ascension-card {
    border-color: #F7CDA975;

    background:
        linear-gradient(
            145deg,
            #F7CDA91C,
            #9E629514
        );
}

.boss-relic-workshop-icon {
    border-color: #F7CDA957;

    background:
        radial-gradient(
            circle at 35% 30%,
            #F7CDA924,
            #9E62951C 55%,
            #24263F3D
        );

    font-size: 2.2rem;
}

.boss-relic-workshop-meta {
    display: flex;
    flex-wrap: wrap;

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

.boss-relic-workshop-chip {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding: 3px 7px;

    border: 1px solid #F7CDA93D;
    border-radius: 999px;

    background: #F7CDA914;

    color: #F6E7DDD1;

    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.2;
}

.boss-relic-passive-chip {
    border-color: #9E629547;

    background: #9E62951A;
}

.boss-relic-workshop-passive {
    margin-top: 11px;
    padding: 9px 10px;

    border: 1px solid #9E62952E;
    border-radius: 10px;

    background: #9E629517;
}

.boss-relic-workshop-passive-label {
    display: block;

    margin-bottom: 3px;

    color: #F6E7DD94;

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.boss-relic-workshop-passive p {
    margin: 0;

    font-size: 0.76rem;
    line-height: 1.4;
}

.boss-relic-workshop-maxed {
    margin: 11px 0 0;
    padding: 8px 10px;

    border: 1px solid #F7CDA947;
    border-radius: 10px;

    background: #F7CDA91A;

    color: #D59A5C;

    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
}

.boss-relic-ascend-button {
    width: 100%;
}

@media (max-width: 520px) {
    .legendary-relic-assembly-card {
        padding: 12px;
    }

    .legendary-relic-card-header {
        grid-template-columns: 58px minmax(0, 1fr);

        gap: 10px;
    }

    .legendary-relic-media-tile {
        width: 58px;
        height: 58px;

        border-radius: 13px;

        font-size: 1.75rem;
    }

    .legendary-relic-mystery-icon {
        font-size: 1.85rem;
    }

    .legendary-relic-card-heading h3 {
        font-size: 0.98rem;
    }

    .legendary-relic-card-label {
        font-size: 0.62rem;
    }

    .legendary-relic-assembly-requirements {
        grid-template-columns: 1fr;
    }

    .legendary-relic-assembly-requirement {
        min-height: 42px;
    }
}



/* ==============================
   COMBAT EVENT BANNER
   Boss phases and other important
   encounter events stay readable
   above the battlefield instead of
   sharing the rapid cast status.
   ============================== */

.combat-event-banner {
    position: absolute;
    top: 12px;
    left: 50%;

    z-index: 15;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;

    width: min(68%, 760px);
    max-width: calc(100% - 24px);

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

    border: 1px solid #F7CDA98F;
    border-radius: 11px;

    background: #24263FEB;
    color: #24263F;

    box-shadow: 0 7px 22px #24263F47;
    backdrop-filter: blur(7px);

    opacity: 0;
    pointer-events: none;

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

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.combat-event-banner[hidden] {
    display: none;
}

.combat-event-banner.show {
    opacity: 1;

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

.combat-event-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #F7CDA921;

    font-size: 1rem;
}

.combat-event-copy {
    display: grid;

    min-width: 0;

    gap: 1px;
}

.combat-event-copy small {
    color: #E7968E;

    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.combat-event-copy strong {
    overflow-wrap: anywhere;

    font-size: 0.82rem;
    line-height: 1.25;

    white-space: normal;
}

.combat-event-copy span {
    overflow-wrap: anywhere;

    color: #F6E7DDDB;

    font-size: 0.66rem;
    line-height: 1.38;

    white-space: normal;
}


@media (max-width: 620px) {
    .combat-event-banner {
        top: 7px;

        width: min(94%, 390px);
        max-width: calc(100% - 12px);

        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;

        gap: 7px;
        padding: 7px 9px;

        border-radius: 8px;
    }

    .combat-event-icon {
        width: 28px;
        height: 28px;

        border-radius: 7px;

        font-size: 0.90rem;
    }

    .combat-event-copy {
        gap: 0;
    }

    .combat-event-copy small {
        font-size: 0.54rem;
    }

    .combat-event-copy strong {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .combat-event-copy span {
        font-size: 0.58rem;
        line-height: 1.35;
    }
}


/* ==============================
   COMBAT SINGLE-LIST FLOW
   One creature list with an Info
   panel; Rest stays above styles.
   ============================== */

.combat-selection-state {
    display: none !important;
}

.combat-location-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 7px 8px;

    border: 1px solid #9E629529;
    border-radius: 10px;

    background: #9E62950B;
}

.combat-location-toolbar > div {
    display: grid;

    gap: 2px;

    min-width: 0;
}

.combat-location-toolbar .panel-label {
    margin: 0;
}

.combat-location-toolbar strong {
    font-size: 0.66rem;
    line-height: 1.2;
}

.combat-rest-button {
    flex: 0 0 auto;

    min-width: 82px;
    padding: 6px 10px;
}

.combat-overview-status {
    padding-top: 6px;

    border-top: 1px solid #9E629524;
}

.combat-creature-info {
    display: grid;

    gap: 8px;
}

.combat-creature-info[hidden] {
    display: none;
}

.combat-creature-info .combat-style-requirement {
    padding: 7px 8px;

    border: 1px solid #9E629529;
    border-radius: 8px;

    background: #9E62950B;

    font-size: 0.58rem;
    line-height: 1.4;
}

.combat-creature-info-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.combat-creature-info-actions .fishing-button {
    width: 100%;
}

.combat-creatures-panel .combat-monster-card:not(.dungeon-encounter-card) {
    grid-template-columns: minmax(0, 1fr) 92px;
}

.combat-creatures-panel
.combat-monster-card:not(.dungeon-encounter-card)
.combat-monster-actions {
    grid-template-columns: 1fr;
}

.combat-creatures-panel
.combat-monster-card:not(.dungeon-encounter-card)
.combat-monster-action {
    width: 100%;
}


@media (max-width: 620px) {
    .combat-location-toolbar {
        gap: 7px;
        padding: 6px 7px;
    }

    .combat-location-toolbar strong {
        font-size: 0.58rem;
    }

    .combat-rest-button {
        min-width: 72px;
        padding: 6px 8px;

        font-size: 0.52rem;
    }

    .combat-creatures-panel .combat-monster-card:not(.dungeon-encounter-card) {
        grid-template-columns: minmax(0, 1fr) 76px;

        gap: 6px;
    }

    .combat-creatures-panel
    .combat-monster-card:not(.dungeon-encounter-card)
    .combat-monster-actions {
        grid-template-columns: 1fr;
    }

    .combat-creature-info .combat-loot-codex {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .combat-creature-info .combat-fight-plan {
        grid-template-columns: auto 62px;
    }
}

/* Combat creature polish: keep scene artwork clear of the cast HUD
   and let longer loot names wrap inside compact drop cards. */
.combat-creature-info .combat-loot-slot,
.combat-loot-inspector .combat-loot-slot {
    min-width: 0;

    padding: 5px 3px;
}

.combat-creature-info .combat-loot-slot strong,
.combat-loot-inspector .combat-loot-slot strong {
    display: block;

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

    font-size: 0.58rem;
    line-height: 1.08;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.combat-creature-info .combat-loot-slot small,
.combat-loot-inspector .combat-loot-slot small {
    font-size: 0.54rem;
    line-height: 1.1;
}


/* ==============================
   ACTIVE MAP GHOSTIE
   Presentation-only indicator for
   the Activity Queue's current task.
   ============================== */

.map-marker.has-active-ghostie {
    z-index: 7;

    overflow: visible;
}

.map-marker.has-active-ghostie
.map-marker-title-banner {
    z-index: 2;
}

.map-active-ghostie {
    position: absolute;
    left: 50%;
    z-index: 1;

    display: flex;

    width: 72px;
    height: 72px;

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

    transform: translateX(-50%);

    pointer-events: none;
}

.map-marker:not([data-marker-type="building"])
.map-active-ghostie {
    top: calc(50% + 22px);
}

.map-marker[data-marker-type="building"]
.map-active-ghostie {
    top: -7px;
}

.map-active-ghostie-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 5px 8px #24263F42);

    animation:
        map-active-ghostie-float
        2.6s
        ease-in-out
        infinite;
}

@keyframes map-active-ghostie-float {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }
}

@media (max-width: 700px) {
    .map-active-ghostie {
        width: 54px;
        height: 54px;
    }

    .map-marker:not([data-marker-type="building"])
    .map-active-ghostie {
        top: calc(50% + 18px);
    }

    .map-marker[data-marker-type="building"]
    .map-active-ghostie {
        top: -5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-active-ghostie-image {
        animation: none;
    }
}


/* ==============================
   MOBILE HEADER V2
   Logo owns the compact mobile
   brand row. The game title moves
   beneath the activity HUD so the
   currency/action row gets width.
   ============================== */

.mobile-game-title {
    display: none;
}


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

        column-gap: 6px;
        row-gap: 4px;
    }

    .game-brand {
        grid-area: brand;

        min-width: 0;

        gap: 0;
    }

    .game-brand h1 {
        display: none;
    }

    .header-actions {
        position: relative;
        z-index: 300;

        grid-area: actions;

        min-width: 0;
        width: 100%;

        gap: 3px;

        flex-wrap: nowrap;
    }

    .header-currencies {
        order: 10;

        flex: 1 1 auto;
    }

    #account-button {
        order: 20;

        flex: 0 0 auto;

        min-width: 58px;

        justify-content: center;

        gap: 4px;
    }

    .mobile-player-text {
        display: inline;

        font-size: 0.52rem;
        font-weight: 800;
        line-height: 1;
    }

    .mobile-header-menu-toggle {
        order: 30;

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

        flex: 0 0 auto;

        min-height: 28px;

        gap: 4px;
        padding: 5px 7px;

        border: 1px solid #9E62954C;
        border-radius: 9px;

        background: #9E62951F;
        color: #F6E7DD;

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

        cursor: pointer;
    }

    .mobile-header-menu-toggle:hover,
    .mobile-header-menu-toggle[aria-expanded="true"] {
        border-color: #E7968E;

        background: #B48B953D;
    }

    .header-secondary-actions {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 500;

        display: none;

        width: min(250px, calc(100vw - 16px));

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
        padding: 8px;

        border: 1px solid #9E629566;
        border-radius: 12px;

        background:
            linear-gradient(
                180deg,
                #343558F7,
                #24263FFC
            );

        box-shadow:
            0 12px 30px #00000070;
    }

    .header-secondary-actions.open {
        display: grid;
    }

    .header-secondary-actions
    .header-action-button {
        order: initial;

        width: 100%;
        min-height: 36px;

        justify-content: flex-start;

        gap: 6px;
        padding: 7px 8px;
    }

    .header-secondary-actions
    .header-action-text {
        display: inline;

        min-width: 0;

        font-size: 0.56rem;
        line-height: 1.05;

        text-align: left;
    }

    .header-secondary-actions
    .header-action-icon {
        flex: 0 0 auto;

        font-size: 0.9rem;
    }

    .header-secondary-actions
    .header-badge {
        margin-left: auto;
    }

    .header-actions.gardening-ready-visible {
        flex-wrap: wrap;

        row-gap: 3px;
    }

    .header-actions.gardening-ready-visible::after {
        content: "";

        flex: 0 0 100%;

        width: 0;
        height: 0;

        order: 90;
    }

    .header-actions.gardening-ready-visible
    .gardening-ready-button {
        order: 99;

        min-height: 24px;

        margin-left: auto;
        padding: 3px 6px;
    }

    .header-actions.gardening-ready-visible
    .gardening-ready-button
    .header-action-icon {
        font-size: 0.78rem;
    }

    .header-currencies {
        min-width: 0;

        gap: 2px;
    }

    .header-currencies > span {
        gap: 2px;
        padding: 3px;
    }

    .header-currency-icon {
        width: 14px;
        height: 14px;

        flex: 0 0 14px;
    }

    .header-action-button {
        min-width: 0;

        padding: 5px 6px;
    }

    .gardening-ready-button {
        gap: 2px;
        padding: 5px;
    }

    .gardening-ready-count {
        min-width: 13px;

        padding: 1px 3px;
    }

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

    .mobile-game-title {
        grid-area: mobile-title;

        display: block;

        margin: -1px 0 0;

        color: #F6E7DD;

        font-size: 0.55rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.08em;

        text-align: center;

        opacity: 0.62;
    }
}


/* ==============================
   PARTY LOBBY V1
   ============================== */

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

    z-index: 60;

    display: grid;
    place-items: center;

    padding: 18px;
}

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

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

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: #343558C7;

    cursor: default;
}

.party-window {
    position: relative;

    z-index: 1;

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

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow: 0 18px 60px #24263F7A;
}

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

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

    border-bottom: 1px solid #9E629533;
}

.party-header h2 {
    margin: 0;

    font-size: 1rem;
}

.party-content {
    display: grid;

    gap: 9px;
    padding: 11px;
}

.party-card {
    padding: 11px;

    border: 1px solid #9E629538;
    border-radius: 11px;

    background: #343558B8;
}

.party-card[hidden] {
    display: none;
}

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

    font-size: 0.84rem;
}

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

    font-size: 0.64rem;
    line-height: 1.5;
}

.party-primary-button {
    width: 100%;

    margin-top: 10px;
}

.party-divider {
    display: flex;
    align-items: center;

    gap: 9px;
    margin: 12px 0;

    color: #F6E7DD7A;

    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}

.party-divider::before,
.party-divider::after {
    height: 1px;

    flex: 1;

    background: #9E629533;

    content: "";
}

.party-join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;

    gap: 8px;
}

.party-join-form label {
    display: grid;

    gap: 4px;

    color: #F6E7DDD1;

    font-size: 0.61rem;
    font-weight: 700;
}

.party-join-form input {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background: #343558C7;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.party-join-form input:focus {
    outline: 2px solid #F7CDA999;
    outline-offset: 1px;
}

.party-join-form button {
    min-height: 37px;
}

.party-status {
    min-height: 1.3em;
    margin-top: 10px !important;
}

.party-status[data-tone="success"] {
    color: #D59A5C;
}

.party-status[data-tone="error"] {
    color: #E7968E;
}

.party-active-card {
    background:
        linear-gradient(
            135deg,
            #D59A5C38,
            #343558C7
        );
}

.party-code-heading,
.party-roster-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.party-code-heading {
    padding: 10px;

    border: 1px solid #F6E7DD38;
    border-radius: 11px;

    background: #34355842;
}

.party-code {
    display: block;

    margin-top: 2px;

    color: #F6E7DD;

    font-size: 1rem;
    letter-spacing: 0.16em;
}

.party-copy-button {
    width: auto;
    margin: 0;
}

.party-roster-heading {
    margin-top: 12px;
}

.party-summary {
    color: #F6E7DDAD;

    font-size: 0.62rem;
}

.party-roster {
    display: grid;

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

.party-member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
    padding: 9px 10px;

    border: 1px solid #9E629533;
    border-radius: 10px;

    background: #34355847;
}

.party-member-card.is-me {
    border-color: #F7CDA96B;

    background: #F7CDA914;
}

.party-member-identity {
    display: grid;

    min-width: 0;

    gap: 2px;
}

.party-member-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}

.party-member-name-row strong {
    overflow: hidden;

    color: #F6E7DD;

    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-member-identity small {
    overflow: hidden;

    color: #F6E7DDB8;

    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-leader-badge,
.party-you-badge {
    padding: 2px 5px;

    border: 1px solid #F7CDA947;
    border-radius: 999px;

    color: #E7968E;

    font-size: 0.48rem;
    font-weight: 800;
    text-transform: uppercase;
}

.party-you-badge {
    border-color: #F7CDA94C;

    color: #D59A5C;
}

.party-ready-state {
    flex: 0 0 auto;

    color: #F6E7DD80;

    font-size: 0.6rem;
    font-weight: 800;
}

.party-ready-state.is-ready {
    color: #D59A5C;
}

.party-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

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

.party-actions .fishing-button,
.party-actions .account-secondary-button {
    width: 100%;
    margin: 0;
}

.party-leave-button {
    grid-column: 1 / -1;
}

.party-actions button:disabled,
.party-join-form button:disabled,
.party-join-form input:disabled,
.party-primary-button:disabled {
    opacity: 0.5;

    cursor: wait;
}

#party-button-text,
#guild-button-text {
    max-width: 82px;

    overflow: hidden;

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


/* ==============================
   GUILDS V1
   Uses the shared scenic Party shell.
   ============================== */

.guild-window {
    width: min(620px, 96vw);
}

.guild-create-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(92px, 0.34fr);
    gap: 8px;
    margin-top: 10px;
}

.guild-create-form label {
    display: grid;
    gap: 4px;

    color: #F6E7DDD1;

    font-size: 0.61rem;
    font-weight: 700;
}

.guild-create-form input,
.guild-role-select {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background: #343558C7;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

#guild-tag-input {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guild-create-form input:focus,
.guild-role-select:focus {
    outline: 2px solid #F7CDA999;
    outline-offset: 1px;
}

.guild-create-button {
    grid-column: 1 / -1;

    width: 100%;
    min-height: 37px;
}

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

    gap: 10px;
    margin-bottom: 9px;
}

.guild-identity-heading h3 {
    margin-bottom: 0;
}

.guild-code-heading {
    margin-bottom: 10px;
}

.guild-member-card {
    align-items: flex-start;
}

.guild-role-badge {
    display: inline-flex;
    align-items: center;

    min-height: 18px;
    padding: 2px 6px;

    border: 1px solid #9E629547;
    border-radius: 999px;

    background: #34355870;
    color: #F6E7DDD6;

    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.guild-role-badge.is-leader {
    border-color: #F7CDA96B;

    background: #F7CDA91F;
    color: #F7CDA9;
}

.guild-role-badge.is-officer {
    border-color: #C8B7E76B;

    background: #C8B7E71F;
    color: #DDD1F3;
}

.guild-member-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 5px;
    min-width: 154px;
}

.guild-role-select {
    width: auto;
    min-width: 92px;
    padding: 6px 8px;

    font-size: 0.58rem;
}

.guild-member-remove {
    min-height: 30px;
    margin: 0;
    padding: 5px 8px;

    font-size: 0.56rem;
}

.guild-actions {
    grid-template-columns: 1fr 1fr;
}

.guild-actions .party-leave-button {
    grid-column: auto;
}

.guild-invite-player-panel {
    display: grid;
    gap: 8px;
    margin-bottom: 11px;
    padding: 10px;

    border: 1px solid rgba(158,98,149,0.28);
    border-radius: 11px;

    background: rgba(23,25,46,0.28);
}

.guild-invite-player-panel[hidden] {
    display: none !important;
}

.guild-invite-player-panel h3,
.guild-invite-player-panel p,
.guild-invite-player-panel small {
    margin: 0;
}

.guild-invite-player-panel small {
    color: rgba(246,231,221,0.58);
    font-size: 0.54rem;
}

.guild-invite-player-form {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    align-items: end;
    gap: 7px;
}

.guild-invite-player-form label {
    display: grid;
    gap: 4px;

    color: #F6E7DDD1;
    font-size: 0.61rem;
    font-weight: 700;
}

.guild-invite-player-form input {
    width: 100%;
    min-width: 0;

    padding: 9px 10px;

    border: 1px solid #9E629557;
    border-radius: 9px;

    background: #343558C7;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

.guild-invite-player-form input:focus {
    outline: 2px solid #F7CDA999;
    outline-offset: 1px;
}

.guild-invite-inbox,
.guild-invite-list {
    display: grid;
    gap: 7px;
}

.guild-invite-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 9px;
    padding: 9px;

    border: 1px solid rgba(158,98,149,0.24);
    border-radius: 10px;

    background: rgba(23,25,46,0.34);
}

.guild-invite-card > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.guild-invite-card strong {
    overflow: hidden;

    color: #F6E7DD;
    font-size: 0.68rem;

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

.guild-invite-card small {
    color: rgba(246,231,221,0.56);
    font-size: 0.53rem;
}

.guild-invite-actions {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}

.guild-invite-actions button {
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 6px 9px;
}

.guild-create-form button:disabled,
.guild-create-form input:disabled,
.guild-invite-player-form button:disabled,
.guild-invite-player-form input:disabled,
.guild-role-select:disabled,
.guild-member-controls button:disabled,
.guild-invite-actions button:disabled {
    opacity: 0.5;

    cursor: wait;
}

@media (max-width: 600px) {
    .guild-create-form {
        grid-template-columns: 1fr;
    }

    .guild-invite-player-form {
        grid-template-columns: 1fr;
    }

    .guild-invite-card {
        align-items: stretch;
        flex-direction: column;
    }

    .guild-invite-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .guild-invite-actions button {
        width: 100%;
    }

    .guild-create-button {
        grid-column: auto;
    }

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

    .guild-member-card {
        align-items: stretch;
        flex-direction: column;
    }

    .guild-member-controls {
        justify-content: stretch;

        min-width: 0;
    }

    .guild-role-select,
    .guild-member-remove {
        flex: 1 1 120px;
    }

    .guild-actions {
        grid-template-columns: 1fr;
    }
}


/* Shared Party Combat V2 lives inside the lobby so the
   multiplayer test surface stays contained and easy to remove
   from stable single-player Combat if authority validation fails. */

.party-combat-panel {
    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid #9E62953D;
}

.party-combat-panel[hidden],
.party-combat-active[hidden],
.party-combat-start-card[hidden],
.party-combat-player-vitals[hidden],
#party-combat-mana[hidden] {
    display: none;
}

.party-combat-heading,
.party-combat-monster-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.party-combat-heading h3 {
    margin: 2px 0 0;
}

.party-combat-alpha-badge {
    padding: 3px 7px;

    border: 1px solid #E7968E5C;
    border-radius: 999px;

    background: #E7968E17;
    color: #F7CDA9;

    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.party-combat-start-card,
.party-combat-active {
    margin-top: 9px;
    padding: 10px;

    border: 1px solid #CC77903D;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #60498F24,
            #34355866
        );
}

.party-combat-start-card .fishing-button {
    width: 100%;
    margin-top: 8px;
}

.party-dungeon-picker {
    display: grid;
    gap: 5px;

    margin-top: 9px;

    color: #F6E7DDC7;
    font-size: 0.56rem;
    font-weight: 800;
}

.party-dungeon-picker select {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;

    border: 1px solid #CC77905C;
    border-radius: 8px;

    background: #24263F;
    color: #F6E7DD;
}

.party-dungeon-rule-copy {
    display: block;

    margin-top: 7px;

    color: #F6E7DD8F;
    font-size: 0.5rem;
    line-height: 1.45;
}

.party-combat-start-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    gap: 7px;

    margin-top: 8px;
}

.party-combat-start-actions .fishing-button {
    margin-top: 0;
}

.party-dungeon-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;

    margin-bottom: 9px;
    padding: 8px 9px;

    border: 1px solid #B9C8AE4D;
    border-radius: 9px;

    background: #B9C8AE12;
}

.party-dungeon-progress[hidden] {
    display: none;
}

.party-dungeon-progress > div:first-child {
    display: grid;
    gap: 2px;
}

.party-dungeon-progress strong {
    color: #F6E7DD;
    font-size: 0.65rem;
}

.party-dungeon-progress small,
.party-dungeon-progress > span {
    color: #F6E7DDA6;
    font-size: 0.5rem;
}

.party-dungeon-progress > span {
    color: #F7CDA9;
    font-weight: 800;
}

.party-dungeon-progress-actions {
    grid-column: 1 / -1;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.party-dungeon-progress-actions button {
    flex: 1 1 150px;
}

@media (max-width: 700px) {
    .party-combat-start-actions {
        grid-template-columns: 1fr;
    }

    .party-dungeon-progress {
        grid-template-columns: 1fr;
    }
}

.party-combat-monster-heading strong {
    color: #F6E7DD;

    font-size: 0.78rem;
}

.party-combat-monster-heading span {
    color: #F7CDA9;

    font-size: 0.61rem;
    font-weight: 800;
}

.party-combat-hp-track {
    height: 9px;

    margin-top: 7px;

    overflow: hidden;

    border: 1px solid #CC779047;
    border-radius: 999px;

    background: #24263F;
}

.party-combat-hp-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #CC7790,
        #E7968E,
        #F7CDA9
    );

    transition: width 0.22s ease;
}


.party-combat-player-vitals {
    display: grid;

    gap: 7px;
    margin-top: 10px;
    padding: 9px;

    border: 1px solid #60498F66;
    border-radius: 9px;

    background: #24263F73;
}

.party-combat-vital-heading,
.party-combat-vital-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.party-combat-vital-heading strong {
    color: #F6E7DD;

    font-size: 0.62rem;
}

.party-combat-vital-heading span {
    color: #F7CDA9;

    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.party-combat-vital-row {
    display: grid;

    gap: 4px;
}

.party-combat-vital-label {
    color: #F6E7DDA6;

    font-size: 0.52rem;
}

.party-combat-vital-label strong {
    color: #F6E7DD;

    font-size: 0.53rem;
}

.party-combat-vital-track {
    height: 7px;

    overflow: hidden;

    border: 1px solid #9E629547;
    border-radius: 999px;

    background: #24263F;
}

.party-combat-vital-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    transition: width 0.22s ease;
}

.party-combat-player-hp-fill {
    background: linear-gradient(
        90deg,
        #CC7790,
        #E7968E
    );
}

.party-combat-player-mana-fill {
    background: linear-gradient(
        90deg,
        #60498F,
        #9E6295,
        #F7CDA9
    );
}

.party-combat-player-resources,
.party-combat-last-monster-attack {
    margin: 0 !important;

    font-size: 0.52rem !important;
    line-height: 1.4;
}

.party-combat-player-resources {
    color: #F6E7DD9E;
}

.party-combat-last-monster-attack {
    color: #E7968E;

    font-weight: 700;
}

.party-combat-resource-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;
}

.party-combat-resource-actions button {
    width: 100%;
    margin: 0;

    font-size: 0.52rem;
}

.party-combat-resource-actions button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}

.party-combat-contributions {
    display: grid;

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

.party-combat-contribution {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    border: 1px solid #9E62952E;
    border-radius: 8px;

    background: #24263F52;
}

.party-combat-contribution.is-participating {
    border-color: #E7968E5C;

    background: #60498F2B;
}

.party-combat-contribution.is-defeated {
    opacity: 0.58;

    border-color: #CC77902E;
}

.party-combat-contribution > div {
    display: grid;

    min-width: 0;

    gap: 1px;
}

.party-combat-contribution strong {
    overflow: hidden;

    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-combat-contribution small {
    color: #F6E7DD8C;

    font-size: 0.52rem;
    text-transform: capitalize;
}

.party-combat-contribution > span {
    flex: 0 0 auto;

    color: #F7CDA9;

    font-size: 0.54rem;
    font-weight: 700;
}

.party-combat-last-attack {
    min-height: 1.2em;

    color: #E7968E;

    font-size: 0.58rem !important;
    font-weight: 700;
}

.party-combat-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

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

.party-combat-actions button {
    width: 100%;
    margin: 0;
}

.party-combat-abort {
    grid-column: 1 / -1;
}

.party-combat-status {
    margin-top: 8px !important;
}


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

    .party-window {
        width: 100%;
    }

    .party-join-form,
    .party-actions,
    .party-combat-actions,
    .party-combat-resource-actions {
        grid-template-columns: 1fr;
    }

    .party-leave-button,
    .party-combat-abort {
        grid-column: auto;
    }
}



/* ==============================
   APPRENTICE V1
   ============================== */

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

    z-index: 65;

    display: grid;
    place-items: center;

    padding: 16px;
}

.apprentice-modal[hidden] {
    display: none !important;
}

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

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: #343558D1;

    cursor: default;
}

.apprentice-window {
    position: relative;

    z-index: 1;

    width: min(1000px, 97vw);
    max-height: 92vh;

    overflow-y: auto;

    border: 1px solid #9E629575;
    border-radius: 18px;

    background: #24263F;

    box-shadow: 0 18px 60px #24263F85;
}

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

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

    border-bottom: 1px solid #9E629533;
}

.apprentice-header h2,
.apprentice-section-heading h3,
.apprentice-skill-heading h3,
.apprentice-spec-title h3,
.apprentice-job-heading h3 {
    margin: 0;
}

.apprentice-header h2 {
    font-size: 1rem;
}

.apprentice-content {
    display: grid;

    gap: 10px;
    padding: 12px;
}

.apprentice-status {
    min-height: 1.3em;
    margin: 0;

    color: #F6E7DDB8;

    font-size: 0.64rem;
}

.apprentice-status[data-tone="success"] {
    color: #D59A5C;
}

.apprentice-status[data-tone="error"] {
    color: #E7968E;
}

.apprentice-overview-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);

    gap: 10px;
}

.apprentice-access-card,
.apprentice-job-card,
.apprentice-skills-card,
.apprentice-skill-card {
    padding: 12px;

    border: 1px solid #9E629538;
    border-radius: 12px;

    background: #343558B8;
}

.apprentice-access-card {
    display: grid;
    align-content: center;

    min-height: 104px;

    gap: 4px;
}

.apprentice-access-remaining {
    color: #D59A5C;

    font-size: 1.35rem;
}

.apprentice-access-card small,
.apprentice-job-card small,
.apprentice-xp-text,
.apprentice-spec-title small {
    color: #F6E7DDA8;

    font-size: 0.58rem;
}

.apprentice-job-card.is-active {
    border-color: #F7CDA96B;

    background:
        linear-gradient(
            135deg,
            #D59A5C38,
            #343558C7
        );
}

.apprentice-job-card.is-blocked {
    border-color: #B48B9575;

    background:
        linear-gradient(
            135deg,
            #CC779033,
            #343558C7
        );
}

.apprentice-job-heading,
.apprentice-skill-heading,
.apprentice-spec-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.apprentice-job-heading h3,
.apprentice-section-heading h3,
.apprentice-skill-heading h3,
.apprentice-spec-title h3 {
    font-size: 0.82rem;
}

.apprentice-job-heading .account-secondary-button {
    width: auto;
    margin: 0;
}

.apprentice-job-card p {
    margin: 7px 0 4px;

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

.apprentice-job-actions {
    display: flex;
    flex-wrap: wrap;

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

.apprentice-job-actions .fishing-button,
.apprentice-job-actions .account-secondary-button {
    width: auto;
    margin: 0;
}

.apprentice-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.38fr);
    align-items: start;

    gap: 10px;
}

.apprentice-skill-list {
    display: grid;

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

.apprentice-skill-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 2px 8px;
    width: 100%;
    padding: 8px 9px;

    border: 1px solid #9E629533;
    border-radius: 9px;

    background: #3435584C;
    color: #F6E7DD;

    text-align: left;

    cursor: pointer;
}

.apprentice-skill-button strong {
    overflow: hidden;

    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apprentice-skill-button > span {
    color: #D59A5C;

    font-size: 0.6rem;
    font-weight: 800;
}

.apprentice-skill-button small {
    grid-column: 1 / -1;

    color: #F6E7DD94;

    font-size: 0.53rem;
}

.apprentice-skill-button:hover,
.apprentice-skill-button.selected {
    border-color: #F7CDA970;

    background: #F7CDA917;
}

.apprentice-skill-button.coming-soon {
    opacity: 0.68;
}

.apprentice-skill-heading {
    align-items: center;
}

.apprentice-skill-heading p {
    margin: 4px 0 0;

    color: #F6E7DDA8;

    font-size: 0.59rem;
}

.apprentice-points {
    flex: 0 0 auto;

    padding: 5px 8px;

    border: 1px solid #F7CDA942;
    border-radius: 999px;

    background: #F7CDA914;
    color: #D59A5C;

    font-size: 0.57rem;
}

.apprentice-xp-track {
    height: 7px;

    margin-top: 11px;

    overflow: hidden;

    border: 1px solid #9E62952E;
    border-radius: 999px;

    background: #3435589E;
}

.apprentice-xp-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #634A33,
        #D59A5C
    );

    transition: width 180ms ease;
}

.apprentice-xp-text {
    display: block;

    margin-top: 4px;

    text-align: right;
}

.apprentice-action-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;

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

.apprentice-action-form label {
    display: grid;

    gap: 4px;

    color: #F6E7DDD1;

    font-size: 0.61rem;
    font-weight: 700;
}

.apprentice-action-form select {
    width: 100%;

    padding: 8px 9px;

    border: 1px solid #9E62954C;
    border-radius: 9px;

    background: #343558C2;
    color: #F6E7DD;

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

.apprentice-action-form .fishing-button {
    min-height: 34px;
    margin: 0;
}

.apprentice-action-hint {
    margin: 6px 0 0;

    color: #F6E7DD99;

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

.apprentice-spec-title {
    align-items: end;

    margin-top: 16px;
    padding-top: 12px;

    border-top: 1px solid #9E62952E;
}

.apprentice-spec-title small {
    max-width: 240px;

    text-align: right;
}

.apprentice-spec-tree {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

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

.apprentice-spec-node {
    display: grid;

    gap: 6px;
    min-height: 112px;
    padding: 9px;

    border: 1px solid #9E629533;
    border-radius: 10px;

    background: #34355847;
}

.apprentice-spec-node.is-available {
    border-color: #F7CDA96B;
}

.apprentice-spec-node.is-unlocked {
    border-color: #F7CDA980;

    background: #D59A5C29;
}

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

    gap: 8px;
}

.apprentice-spec-heading strong {
    font-size: 0.67rem;
}

.apprentice-spec-heading span {
    flex: 0 0 auto;

    color: #D59A5C;

    font-size: 0.54rem;
    font-weight: 800;
}

.apprentice-spec-node p {
    margin: 0;

    color: #F6E7DDA8;

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

.apprentice-spec-footer {
    align-self: end;

    color: #F6E7DD94;

    font-size: 0.53rem;
}

.apprentice-spec-footer .account-secondary-button {
    width: 100%;
    margin: 0;
}

#apprentice-button.has-apprentice-job {
    border-color: #F7CDA96B;
}

#apprentice-button.has-apprentice-block {
    border-color: #B48B9594;
}

#apprentice-button:disabled {
    opacity: 0.48;
}

.apprentice-content button:disabled,
.apprentice-content select:disabled {
    opacity: 0.48;

    cursor: not-allowed;
}



.apprentice-check-summary,
.apprentice-satchel-card {
    padding: 12px;

    border: 1px solid #9E629538;
    border-radius: 12px;

    background: #343558B8;
}

.apprentice-check-summary[hidden] {
    display: none !important;
}

.apprentice-check-summary {
    border-color: #F7CDA966;

    background:
        linear-gradient(
            135deg,
            #D59A5C33,
            #343558C7
        );
}

.apprentice-check-summary.is-blocked {
    border-color: #B48B9570;
}

.apprentice-check-heading,
.apprentice-satchel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.apprentice-check-heading h3,
.apprentice-satchel-heading h3 {
    margin: 0;

    font-size: 0.82rem;
}

.apprentice-check-close {
    flex: 0 0 auto;
}

.apprentice-check-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

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

.apprentice-check-stats > div {
    display: grid;

    gap: 3px;
    padding: 8px;

    border: 1px solid #9E62952E;
    border-radius: 9px;

    background: #34355852;
}

.apprentice-check-stats span {
    color: #F6E7DD9E;

    font-size: 0.54rem;
}

.apprentice-check-stats strong {
    color: #D59A5C;

    font-size: 0.74rem;
}

.apprentice-check-items {
    display: flex;
    flex-wrap: wrap;

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

.apprentice-check-item {
    display: inline-flex;
    align-items: center;

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

    border: 1px solid #9E62952E;
    border-radius: 999px;

    background: #3435585C;

    font-size: 0.56rem;
}

.apprentice-check-item .apprentice-item-image,
.apprentice-check-item .apprentice-item-placeholder {
    width: 20px;
    height: 20px;
}

.apprentice-check-empty {
    color: #F6E7DD99;

    font-size: 0.57rem;
}

.apprentice-satchel-heading p:not(.panel-label) {
    max-width: 540px;
    margin: 5px 0 0;

    color: #F6E7DDA8;

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

.apprentice-satchel-capacity-wrap {
    display: grid;

    flex: 0 0 auto;

    gap: 3px;

    text-align: right;
}

.apprentice-satchel-capacity-wrap strong {
    color: #D59A5C;

    font-size: 0.68rem;
}

.apprentice-satchel-capacity-wrap small {
    max-width: 210px;

    color: #F6E7DD8A;

    font-size: 0.52rem;
    line-height: 1.35;
}

.apprentice-satchel-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));

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

.apprentice-satchel-slot {
    min-width: 0;
    min-height: 102px;
    padding: 5px;

    border: 1px solid #9E629538;
    border-radius: 9px;

    background: #3435584C;
}

.apprentice-satchel-slot.empty {
    display: grid;
    place-items: center;

    min-height: 82px;

    color: #F6E7DD33;

    font-size: 1rem;
}

.apprentice-satchel-slot.filled {
    display: grid;
    grid-template-rows: auto auto auto;

    gap: 4px;
}

.apprentice-satchel-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 48px;

    border-radius: 7px;

    background: #9E629514;
}

.apprentice-item-image,
.apprentice-item-placeholder {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    object-fit: contain;
}

.apprentice-item-placeholder {
    color: #F6E7DD7A;

    font-size: 1rem;
}

.apprentice-satchel-amount {
    position: absolute;
    right: 3px;
    bottom: 2px;

    padding: 1px 3px;

    border-radius: 5px;

    background: #343558DB;

    font-size: 0.48rem;
}

.apprentice-satchel-name {
    overflow: hidden;

    font-size: 0.52rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apprentice-satchel-withdraw {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 3px;
}

.apprentice-satchel-withdraw input,
.apprentice-satchel-deposit-form input,
.apprentice-satchel-deposit-form select {
    width: 100%;

    padding: 6px 7px;

    border: 1px solid #9E629547;
    border-radius: 7px;

    background: #343558C2;
    color: #F6E7DD;

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

.apprentice-satchel-withdraw .account-secondary-button {
    width: 100%;
    min-height: 25px;
    margin: 0;
    padding: 4px 5px;

    font-size: 0.5rem;
}

.apprentice-satchel-deposit-form {
    display: grid;
    grid-template-columns:
        minmax(100px, 0.55fr)
        minmax(180px, 1.45fr)
        minmax(80px, 0.45fr)
        auto;
    align-items: end;

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

    border-top: 1px solid #9E629529;
}

.apprentice-satchel-deposit-form label {
    display: grid;

    gap: 4px;

    color: #F6E7DDC7;

    font-size: 0.57rem;
    font-weight: 700;
}

.apprentice-satchel-deposit-form .fishing-button {
    min-height: 31px;
    margin: 0;
}

.apprentice-satchel-hint {
    margin: 6px 0 0;

    color: #F6E7DD94;

    font-size: 0.54rem;
    line-height: 1.4;
}



@media (max-width: 760px) {
    .apprentice-modal {
        padding: 7px;
    }

    .apprentice-window {
        width: 100%;
        max-height: 96vh;
    }

    .apprentice-overview-grid,
    .apprentice-workspace,
    .apprentice-spec-tree,
    .apprentice-action-form,
    .apprentice-satchel-deposit-form {
        grid-template-columns: 1fr;
    }

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

    .apprentice-job-heading,
    .apprentice-skill-heading,
    .apprentice-spec-title {
        align-items: stretch;
        flex-direction: column;
    }

    .apprentice-spec-title small {
        max-width: none;

        text-align: left;
    }

    .apprentice-check-heading,
    .apprentice-satchel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .apprentice-satchel-capacity-wrap {
        text-align: left;
    }

    .apprentice-satchel-capacity-wrap small {
        max-width: none;
    }

    .apprentice-satchel-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}



/* ==============================
   GAME SHOP MODAL
   ============================== */

.game-shop-modal {
    position: fixed;
    inset: 0;

    z-index: 70;

    display: grid;
    place-items: center;

    padding: 18px;
}

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

.game-shop-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: #343558C7;

    cursor: default;
}

.game-shop-window {
    position: relative;
    z-index: 1;

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

    width: min(1080px, 96vw);
    max-height: min(840px, 92vh);

    overflow: hidden;

    border: 1px solid #9E629575;
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.74) 0%,
            rgba(36, 38, 63, 0.68) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat;

    box-shadow:
        0 18px 54px rgba(23, 25, 46, 0.50),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

.game-shop-header {
    position: relative;
    isolation: isolate;

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

    min-height: 78px;

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

    border-bottom: 1px solid rgba(158, 98, 149, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(23, 25, 46, 0.84) 0%,
            rgba(36, 38, 63, 0.60) 40%,
            rgba(36, 38, 63, 0.58) 62%,
            rgba(23, 25, 46, 0.84) 100%
        ),
        url("../assets/images/ui/top-scene-banner.png")
        center 46% / cover no-repeat;

    box-shadow:
        0 5px 18px rgba(23, 25, 46, 0.34),
        inset 0 -1px 0 rgba(247, 205, 169, 0.08);

    text-shadow:
        0 2px 5px rgba(23, 25, 46, 0.92),
        0 0 12px rgba(23, 25, 46, 0.72);
}

.game-shop-header > * {
    position: relative;
    z-index: 1;
}

.game-shop-header h2 {
    margin: 0;

    font-size: 1.15rem;
}

.game-shop-summary {
    margin: 4px 0 0;

    font-size: 0.66rem;

    opacity: 0.72;
}

.game-shop-content {
    min-height: 0;

    overflow-y: auto;

    padding: 14px;
}

.game-shop-content .account-premium-card {
    margin: 0;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.game-shop-window
.account-product-catalogue {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}


.game-shop-bag-section {
    display: grid;

    gap: 9px;
    padding: 11px;

    border: 1px solid #D59A5C52;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(213, 154, 92, 0.10),
            rgba(158, 98, 149, 0.10)
        );
}

.game-shop-bag-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.game-shop-bag-heading
.account-premium-section-title {
    margin-bottom: 3px;
}

.game-shop-bag-copy {
    margin: 0;

    color: #F6E7DDA3;

    font-size: 0.61rem;
    line-height: 1.4;
}

.game-shop-bag-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 5px;
}

.game-shop-bag-summary span {
    padding: 4px 7px;

    border: 1px solid #F7CDA938;
    border-radius: 999px;

    background: #34355870;
    color: #F6E7DDA8;

    font-size: 0.57rem;
    white-space: nowrap;
}

.game-shop-bag-summary strong {
    color: #F7CDA9;

    font-size: 0.61rem;
}

.game-shop-bag-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.game-shop-bag-card {
    display: grid;

    min-width: 0;

    gap: 8px;
    padding: 10px;

    border: 1px solid #9E62954F;
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #343558A8,
            #24263FAE
        );
}

.game-shop-bag-card.owned {
    border-color: #D59A5C78;

    background:
        linear-gradient(
            145deg,
            #634A334D,
            #343558A8
        );
}

.game-shop-bag-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.game-shop-bag-card-heading > div {
    display: grid;

    min-width: 0;

    gap: 3px;
}

.game-shop-bag-card-heading strong {
    color: #F6E7DD;

    font-size: 0.73rem;
}

.game-shop-bag-card-heading small,
.game-shop-bag-capacity-copy {
    color: #F6E7DDA0;

    font-size: 0.58rem;
    line-height: 1.35;
}

.game-shop-bag-price {
    flex: 0 0 auto;

    color: #F7CDA9;

    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.game-shop-slot-preview {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;
}

.game-shop-slot-preview span {
    display: grid;
    place-items: center;

    min-height: 39px;

    border: 1px solid #F7CDA932;
    border-radius: 8px;

    background: #24263F73;

    font-size: 1rem;
}

.game-shop-bag-buy {
    width: 100%;
    margin: 0;

    border-color: #D59A5C61;

    background: #D59A5C1C;
}

.game-shop-bag-buy:hover:not(:disabled) {
    border-color: #F7CDA9;

    background: #D59A5C30;
}

.game-shop-bag-buy:disabled {
    opacity: 0.58;

    cursor: not-allowed;
}


@media (max-width: 700px) {
    .game-shop-modal {
        z-index: 13000;

        padding: 8px;
    }

    .game-shop-window {
        width: 100%;
        max-height: calc(100dvh - 16px);

        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.76) 0%,
                rgba(36, 38, 63, 0.70) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    .game-shop-header {
        min-height: 70px;
    }

    .game-shop-content {
        padding: 9px;
    }

    .game-shop-bag-heading {
        flex-direction: column;
    }

    .game-shop-bag-summary {
        justify-content: flex-start;
    }

    .game-shop-bag-grid,
    .game-shop-window
    .account-product-catalogue {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   SUPPORT / PREMIUM V1
   ============================== */

.account-premium-card {
    display: grid;

    gap: 11px;
    margin: 12px 0;
    padding: 12px;

    border: 1px solid #F7CDA94C;
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #634A334C,
            #343558B8
        );
}

.account-premium-card[hidden] {
    display: none;
}

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

    gap: 10px;
}

.account-support-title-row {
    display: flex;
    align-items: center;

    gap: 8px;
}

.account-support-title-row h3 {
    margin: 0;

    font-size: 0.94rem;
}

.account-support-rank {
    display: inline-grid;
    place-items: center;

    min-width: 34px;
    min-height: 25px;
    padding: 3px 8px;

    border: 1px solid #F7CDA975;
    border-radius: 999px;

    background: #F7CDA91F;
    color: #E7968E;

    font-size: 0.72rem;
    font-weight: 800;
}


.account-support-rank-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
    padding: 0;

    border: 0;
    background: transparent;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.account-support-rank-toggle:hover
.account-support-rank-title,
.account-support-rank-toggle:focus-visible
.account-support-rank-title {
    color: #F7CDA9;
}

.account-support-rank-toggle:focus-visible {
    outline: 2px solid #F7CDA975;
    outline-offset: 4px;
    border-radius: 8px;
}

.account-support-rank-title {
    font-size: 0.94rem;
    font-weight: 800;
}

.account-support-rank-hint {
    color: #F6E7DD8F;

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

.account-support-rank-roadmap {
    display: grid;

    gap: 9px;
    padding: 10px;

    border: 1px solid #F7CDA938;
    border-radius: 12px;

    background: #24263F78;
}

.account-support-rank-roadmap[hidden] {
    display: none;
}

.account-support-rank-roadmap-copy {
    margin: 0;

    color: #F6E7DDA3;

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

.account-support-rank-table-wrap {
    width: 100%;
    overflow-x: auto;

    border: 1px solid #9E629538;
    border-radius: 10px;
}

.account-support-rank-table {
    width: 100%;
    min-width: 780px;

    border-collapse: collapse;

    background: #17192E66;
}

.account-support-rank-table th,
.account-support-rank-table td {
    padding: 8px 9px;

    border-bottom: 1px solid #9E62952E;

    color: #F6E7DD;

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

    text-align: left;
    vertical-align: top;
}

.account-support-rank-table thead th {
    position: sticky;
    top: 0;

    background: #343558F5;
    color: #F7CDA9;

    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.account-support-rank-table tbody tr:last-child th,
.account-support-rank-table tbody tr:last-child td {
    border-bottom: 0;
}

.account-support-rank-table tbody tr[data-state="current"] {
    background: #F7CDA914;
}

.account-support-rank-table tbody tr[data-state="next"] {
    background: #9E629514;
}

.account-support-rank-table tbody tr[data-state="locked"] {
    opacity: 0.72;
}

.account-support-rank-benefits {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;
}

.account-support-rank-benefits span {
    padding: 3px 6px;

    border: 1px solid #F7CDA930;
    border-radius: 999px;

    background: #F7CDA90F;
}

.account-support-rank-reward {
    min-width: 150px;

    color: #F7CDA9 !important;

    font-weight: 800;
}

.account-support-rank-status {
    display: inline-flex;

    padding: 3px 7px;

    border: 1px solid #9E62954D;
    border-radius: 999px;

    background: #3435588A;

    font-size: 0.55rem;
    font-weight: 900;
}

tr[data-state="current"]
.account-support-rank-status {
    border-color: #F7CDA970;
    color: #F7CDA9;
}

tr[data-state="next"]
.account-support-rank-status {
    border-color: #E7968E70;
    color: #E7968E;
}

@media (max-width: 600px) {
    .account-support-rank-hint {
        flex-basis: 100%;
    }

    .account-support-rank-roadmap {
        padding: 8px;
    }
}

.account-premium-refresh {
    width: auto;
    margin: 0;
    padding: 6px 9px;

    font-size: 0.66rem;
}

.account-support-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    font-size: 0.69rem;
}

.account-support-progress-copy span {
    color: #F6E7DD94;

    text-align: right;
}

.account-support-progress {
    height: 7px;

    overflow: hidden;

    border: 1px solid #F6E7DD2E;
    border-radius: 999px;

    background: #3435586B;
}

.account-support-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #F7CDA9E6,
            #F7CDA9F5
        );

    transition: width 180ms ease;
}

.account-premium-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.account-premium-summary-grid > div {
    display: grid;

    gap: 3px;
    padding: 9px;

    border: 1px solid #F7CDA92E;
    border-radius: 10px;

    background: #34355847;
}

.account-premium-summary-grid span,
.account-premium-summary-grid small {
    color: #F6E7DD99;

    font-size: 0.66rem;
}

.account-premium-summary-grid strong {
    color: #F6E7DD;

    font-size: 0.76rem;
}

#account-premium-status[data-tone="active"] {
    color: #D59A5C;
}

#account-premium-status[data-tone="permanent"] {
    color: #E7968E;
}

.account-premium-section-title {
    margin: 0 0 7px;

    color: #F6E7DDB2;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-premium-benefits {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.account-premium-benefit {
    padding: 4px 7px;

    border: 1px solid #F7CDA947;
    border-radius: 999px;

    background: #F7CDA917;
    color: #F6E7DD;

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

.account-premium-benefit.inactive {
    opacity: 0.48;

    filter: grayscale(0.45);
}

.account-product-preview {
    padding-top: 2px;
}

.account-product-preview summary {
    color: #E7968E;

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

    cursor: pointer;
}

.account-product-note {
    margin: 8px 0;

    color: #F6E7DD94;

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

.account-product-catalogue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.account-product-card {
    display: grid;

    gap: 5px;
    padding: 8px;

    border: 1px solid #9E629538;
    border-radius: 9px;

    background: #3435584C;
}

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

    gap: 6px;
}

.account-product-heading strong,
.account-product-heading span {
    font-size: 0.66rem;
}

.account-product-heading span {
    color: #E7968E;

    white-space: nowrap;
}

.account-product-card small {
    color: #F6E7DD94;

    font-size: 0.61rem;
    line-height: 1.4;
}

.account-product-disabled {
    width: fit-content;
    padding: 2px 5px;

    border-radius: 999px;

    background: #9E62951F;
    color: #F6E7DD8A;

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

.account-product-buy {
    width: 100%;
    margin-top: 2px;
    min-height: 34px;

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

.account-product-active {
    width: fit-content;
    padding: 3px 6px;

    border: 1px solid #F7CDA947;
    border-radius: 999px;

    background: #F7CDA917;
    color: #F7CDA9;

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

.account-sg-buy-button {
    width: 100%;
    margin: 2px 0 0;
    padding: 6px 8px;

    border-color: #CC779066;

    background: #9E629529;
    color: #F6E7DD;

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

.account-sg-buy-button:hover:not(:disabled) {
    border-color: #E7968E;
    background: #CC77903D;
}

.account-sg-buy-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#account-premium-sg-note[data-tone="debt"] {
    color: #E7968E;
}

.account-monetisation-status {
    min-height: 1em;
    margin: 0;

    color: #F6E7DD9E;

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

.account-monetisation-status[data-tone="error"] {
    color: #E7968E;
}

.account-monetisation-status[data-tone="success"] {
    color: #F7CDA9;
}



@media (max-width: 600px) {
    .account-premium-summary-grid,
    .account-product-catalogue {
        grid-template-columns: 1fr;
    }

    .account-support-progress-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-support-progress-copy span {
        text-align: left;
    }
}



/* ==============================
   TABLET / MID-SIZE LAYOUT PASS
   iPad-sized viewports need their
   own tier between desktop + mobile.
   ============================== */

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

        min-height: 0;

        column-gap: 10px;
        row-gap: 6px;
        padding: 6px 10px;
    }

    .game-brand {
        grid-area: brand;

        min-width: 0;
    }

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

    .header-actions {
        grid-area: actions;

        min-width: 0;
        width: 100%;

        gap: 4px;

        flex-wrap: nowrap;
    }

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

        width: min(760px, 100%);
        max-width: 100%;

        justify-self: center;
    }

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

    .header-action-button {
        min-width: 34px;
        min-height: 32px;

        justify-content: center;

        gap: 3px;
        padding: 5px 7px;
    }

    .header-currencies {
        min-width: 0;

        gap: 3px;
    }

    .header-currencies > span {
        gap: 2px;
        padding: 3px 5px;
    }

    .header-currency-icon {
        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }
}


/* Narrow tablets such as iPad Mini portrait cannot fit every permanent
   header action side-by-side. Reuse the existing mobile Menu dropdown
   without switching the rest of the tablet layout into phone mode. */
@media (min-width: 601px) and (max-width: 820px) {
    .header-actions {
        position: relative;
        z-index: 300;

        display: flex;

        min-width: 0;
        width: 100%;

        gap: 4px;

        flex-wrap: nowrap;
    }

    .header-currencies {
        order: 10;

        flex: 1 1 auto;

        min-width: 0;
    }

    .mobile-season-pass-button {
        order: 18;

        flex: 0 0 auto;

        min-width: 58px;
        min-height: 30px;

        padding: 5px 7px;

        font-size: 0.50rem;
    }

    #account-button {
        order: 20;

        flex: 0 0 auto;

        min-width: 40px;

        justify-content: center;

        padding: 5px 6px;
    }

    .mobile-header-menu-toggle {
        order: 30;

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

        flex: 0 0 auto;

        min-height: 30px;

        gap: 4px;
        padding: 5px 8px;

        border: 1px solid #9E62954C;
        border-radius: 9px;

        background: #9E62951F;
        color: #F6E7DD;

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

        cursor: pointer;
    }

    .mobile-header-menu-toggle:hover,
    .mobile-header-menu-toggle[aria-expanded="true"] {
        border-color: #E7968E;

        background: #B48B953D;
    }

    .header-secondary-actions {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 500;

        display: none;

        width: min(300px, calc(100vw - 20px));

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
        padding: 8px;

        border: 1px solid #9E629566;
        border-radius: 12px;

        background:
            linear-gradient(
                180deg,
                #343558F7,
                #24263FFC
            );

        box-shadow:
            0 12px 30px #00000070;
    }

    .header-secondary-actions.open {
        display: grid;
    }

    .header-secondary-actions
    .header-action-button {
        order: initial;

        width: 100%;
        min-width: 0;
        min-height: 36px;

        justify-content: flex-start;

        gap: 6px;
        padding: 7px 8px;
    }

    .header-secondary-actions
    .header-action-text {
        display: inline;

        min-width: 0;

        font-size: 0.56rem;
        line-height: 1.05;

        text-align: left;
    }

    .header-secondary-actions
    .header-action-icon {
        flex: 0 0 auto;
    }

    .header-secondary-actions
    .header-badge {
        margin-left: auto;
    }
}


/* Portrait tablets / narrow desktop windows:
   give the map the full content width instead
   of squeezing it between both sidebars. */
@media (min-width: 601px) and (max-width: 1100px) {
    body {
        overflow: auto;
    }

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

    .game-main {
        grid-template-areas:
            "map map"
            "inventory activity";
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
        grid-template-rows:
            auto
            auto;

        align-items: start;

        gap: 8px;
        padding: 8px;
    }

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

        aspect-ratio: 3 / 2;
    }

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

        aspect-ratio: 3 / 2;
    }

    .inventory-sidebar,
    .activity-panel {
        height: min(560px, 48svh);
        min-height: 420px;
    }
}


/* ==============================
   SHARED PARTY COMBAT V3
   Full Combat-room presentation.
   Party modal remains the lobby.
   ============================== */

.party-combat-battle-viewport {
    background: #24263F;
}

.party-combat-battle-top-actions {
    position: absolute;
    top: 14px;
    right: 14px;

    display: flex;
    gap: 8px;

    z-index: 10;
}

.party-combat-battle-top-actions .combat-view-toggle {
    position: static;
}

.party-combat-battle-banner {
    position: absolute;
    top: 14px;
    left: 50%;

    display: grid;
    justify-items: center;
    gap: 1px;

    padding: 5px 12px;

    border: 1px solid #F6E7DD24;
    border-radius: 999px;

    background: #24263FD9;
    color: #F6E7DD;

    transform: translateX(-50%);

    backdrop-filter: blur(7px);
    z-index: 9;
}

.party-combat-battle-banner span {
    font-size: 0.67rem;
    font-weight: 800;
}

.party-combat-battle-banner small {
    font-size: 0.47rem;
    opacity: 0.68;
}

.combat-dungeon-banner[hidden] {
    display: none;
}

.combat-dungeon-banner {
    top: 14px;
    left: 50%;

    max-width: min(62%, 520px);

    transform: translateX(-50%);
}

.combat-dungeon-banner span,
.combat-dungeon-banner small {
    overflow: hidden;

    max-width: 100%;

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

.party-combat-battle-player {
    width: min(32%, 315px);
}

.party-combat-battle-enemy {
    width: min(26%, 270px);
}

.party-combat-battle-resource,
.party-combat-battle-presence {
    margin: 0;

    font-size: 0.54rem;
    line-height: 1.3;
}

.party-combat-battle-resource {
    color: #F7CDA9;
}

.party-combat-battle-presence {
    opacity: 0.78;
}

.party-combat-battle-roster {
    position: absolute;
    left: 16px;
    bottom: 16px;

    display: grid;
    gap: 5px;

    width: min(31%, 315px);
    max-height: 34%;
    overflow-y: auto;

    z-index: 5;
}

.party-combat-battle-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 6px 8px;

    border: 1px solid #F6E7DD1F;
    border-radius: 8px;

    background: #24263FCC;

    backdrop-filter: blur(6px);
}

.party-combat-battle-member > div {
    display: grid;
    min-width: 0;
}

.party-combat-battle-member strong,
.party-combat-battle-member small,
.party-combat-battle-member > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-combat-battle-member strong {
    font-size: 0.58rem;
}

.party-combat-battle-member small {
    margin-top: 1px;
    font-size: 0.47rem;
    opacity: 0.68;
}

.party-combat-battle-member > span {
    flex: 0 0 auto;
    font-size: 0.50rem;
    font-weight: 700;
}

.party-combat-battle-member.is-fighting {
    border-color: #B9C8AE66;
}

.party-combat-battle-member.is-offline {
    opacity: 0.56;
}

.party-combat-battle-member.is-defeated {
    border-color: #CC779066;
    opacity: 0.68;
}

.party-combat-battle-casts {
    width: min(55%, 610px);
}

/* Hidden shared-combat controls must stay hidden even when their
   base component class declares display:grid/flex. */
.party-combat-battle-casts .combat-cast-row[hidden],
.party-combat-battle-pet-food[hidden],
.party-combat-battle-actions button[hidden] {
    display: none !important;
}

/* Non-Pet co-op keeps three independent bottom HUD zones:
   roster left, casts centre, personal rewards right. */
.party-combat-battle-viewport:not(.party-pet-combat-active)
    .party-combat-battle-roster {
    width: min(25%, 285px);
}

.party-combat-battle-viewport:not(.party-pet-combat-active)
    .party-combat-battle-casts {
    width: min(38%, 480px);
}

.party-combat-battle-viewport:not(.party-pet-combat-active)
    .party-combat-reward-panel {
    width: min(24%, 260px);
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-casts {
    bottom: 2%;
    gap: 4px;
    width: min(39%, 440px);
    padding: 7px 9px;
    border-radius: 11px;
}

.party-combat-battle-viewport.party-pet-combat-active
    .combat-cast-row {
    grid-template-columns: 74px minmax(0,1fr);
    gap: 6px;
    font-size: 0.56rem;
}

.party-combat-battle-viewport.party-pet-combat-active
    .combat-cast-track {
    height: 6px;
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-actions {
    gap: 4px;
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-actions button,
.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-pet-food {
    min-height: 25px;
    padding: 4px 7px;
    font-size: 0.52rem;
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-pet-stage {
    bottom: 29%;
    height: 44%;
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-enemy-stage {
    bottom: 28%;
    height: 50%;
}

.party-combat-member-pet-vital {
    grid-column: 1 / -1;
    display: grid;
    gap: 2px;
    width: 100%;
    margin-top: 3px;
}

.party-combat-member-pet-vital > span {
    font-size: 0.46rem;
    font-weight: 800;
    opacity: 0.9;
}

.party-combat-member-pet-track {
    overflow: hidden;
    height: 5px;
    border: 1px solid #F6E7DD2B;
    border-radius: 999px;
    background: #F6E7DD14;
}

.party-combat-member-pet-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #F6D74AD9;
}

.party-combat-battle-member {
    flex-wrap: wrap;
}

.party-combat-battle-quick-heals {
    position: absolute;
    left: 12px;
    top: 39%;
    display: grid;
    gap: 5px;
    z-index: 7;
}

.party-combat-quick-heal-button {
    display: grid;
    grid-template-columns: 34px;
    place-items: center;
    gap: 1px;
    width: 46px;
    min-height: 48px;
    padding: 4px;
    border: 1px solid #F6E7DD3D;
    border-radius: 9px;
    background: #343558E8;
    color: #F6E7DD;
    cursor: pointer;
}

.party-combat-quick-heal-button img,
.party-combat-quick-heal-button > span {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.party-combat-quick-heal-button small {
    font-size: 0.42rem;
    line-height: 1;
    white-space: nowrap;
}

.party-combat-quick-heal-button.selected {
    border-color: #F7CDA9D9;
    box-shadow: 0 0 0 1px #F7CDA955;
}

.party-combat-float {
    z-index: 24;

    pointer-events: none;

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

    animation:
        party-combat-pill-float
        1800ms ease-out forwards;
}

.combat-float-result.party-combat-float.player {
    background: #D9823BF5;
}

.combat-float-result.party-combat-float.pet {
    background: #F2D247F5;
    color: #24263F;
    text-shadow: none;
}

.combat-float-result.party-combat-float.monster {
    background: #C84F5AF5;
}

.combat-float-result.party-combat-float.heal {
    background: #62A66FF5;
}

@keyframes party-combat-pill-float {
    from {
        opacity: 0;
        transform:
            translate(-50%, calc(-50% + 8px))
            scale(0.94);
    }

    12% {
        opacity: 1;
        transform:
            translate(-50%, calc(-50% + 2px))
            scale(1);
    }

    72% {
        opacity: 1;
        transform:
            translate(-50%, calc(-50% - 10px))
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            translate(-50%, calc(-50% - 24px))
            scale(1.04);
    }
}

.combat-target-hit-flash {
    animation: combat-target-hit-flash 180ms ease-out;
}

@keyframes combat-target-hit-flash {
    0% {
        filter: brightness(1);
    }
    45% {
        filter: brightness(1.8);
    }
    100% {
        filter: brightness(1);
    }
}


/* Co-op Pet dungeons mirror the solo Pet composition:
   own companion left, enemy right, compact HUD in the centre. */
.party-combat-pet-stage {
    left: 9%;
    bottom: 23%;

    width: min(27%, 285px);
    height: 47%;

    z-index: 2;
}

.party-combat-pet-stage .party-combat-pet-fallback {
    align-self: flex-end;

    font-size: clamp(3.5rem, 9vw, 6.5rem);
}

.party-combat-pet-stage.is-knocked-out {
    opacity: 0.55;
    filter: saturate(0.55);
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-enemy-stage {
    right: 6%;
    left: auto;

    width: min(34%, 370px);
    height: 57%;

    transform: none;
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-casts {
    width: min(42%, 470px);
}

.party-combat-battle-viewport.party-pet-combat-active
    .party-combat-battle-roster {
    width: min(29%, 300px);
    max-height: 31%;
}

.party-combat-battle-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.party-combat-battle-actions button {
    min-height: 28px;
    padding: 5px 9px;

    border: 1px solid #F6E7DD28;
    border-radius: 7px;

    background: #60498F;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.57rem;
    font-weight: 800;

    cursor: pointer;
}

.party-combat-battle-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.party-combat-battle-actions .party-combat-battle-abort {
    background: #CC77902E;
}

.party-combat-battle-status,
.party-combat-battle-last-event {
    display: block;
    text-align: center;
}

.party-combat-battle-status {
    font-size: 0.57rem;
}

.party-combat-battle-last-event {
    min-height: 0.75rem;
    font-size: 0.50rem;
    opacity: 0.74;
}

.party-combat-battle-pet-food {
    max-width: 190px;
    min-height: 28px;
    padding: 4px 7px;

    border: 1px solid #F6E7DD28;
    border-radius: 7px;

    background: #343558E8;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.55rem;
    font-weight: 700;
}

.party-combat-effects-layer {
    z-index: 12;
}

.party-combat-damage-popup {
    position: absolute;

    pointer-events: none;

    color: #FFD0D8;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1;

    text-shadow:
        0 2px 3px #24263F,
        0 0 8px #24263FCC;

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

    animation:
        party-combat-damage-float
        900ms ease-out forwards;

    z-index: 13;
}

.party-combat-damage-popup.pet {
    color: #F6D74A;
}

.party-combat-damage-popup.enemy {
    color: #FFF0F2;
}

.party-combat-damage-popup.heal {
    color: #9FE7B2;
}

.party-combat-impact {
    animation:
        party-combat-impact-flash
        180ms ease-out;
}

@keyframes party-combat-damage-float {
    0% {
        opacity: 0;
        transform:
            translate(-50%,-25%)
            scale(0.88);
    }

    18% {
        opacity: 1;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

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

@keyframes party-combat-impact-flash {
    0% {
        filter: brightness(1);
    }

    45% {
        filter: brightness(1.75);
    }

    100% {
        filter: brightness(1);
    }
}


.party-combat-return-button {
    right: 96px;
}

.party-combat-reward-panel {
    display: grid;
    gap: 5px;

    width: 100%;
    margin-top: 3px;
    padding: 7px 8px;

    border: 1px solid #F7CDA952;
    border-radius: 9px;

    background: #343558D9;

    box-shadow:
        0 8px 24px #24263F73;
}

.party-combat-reward-panel[hidden] {
    display: none;
}

.party-combat-reward-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 8px;
}

.party-combat-reward-heading strong {
    color: #F7CDA9;

    font-size: 0.58rem;
    white-space: nowrap;
}

.party-combat-reward-heading small {
    color: #F6E7DDA6;

    font-size: 0.48rem;

    text-align: right;
}

.party-combat-reward-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 4px;
}

.party-combat-reward-items span {
    padding: 3px 6px;

    border: 1px solid #E7968E3D;
    border-radius: 999px;

    background: #60498F4A;
    color: #F6E7DD;

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

.party-combat-reward-retry {
    justify-self: center;

    min-height: 27px;
    padding: 4px 9px;

    border: 1px solid #E7968E66;
    border-radius: 7px;

    background: #CC779033;
    color: #F6E7DD;

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

    cursor: pointer;
}

.party-combat-reward-retry[hidden] {
    display: none;
}

.combat-fight-reward-panel {
    margin-top: 2px;
}

.combat-fight-reward-panel[hidden] {
    display: none;
}

.combat-fight-reward-items {
    justify-content: flex-start;
}

.combat-fight-reward-items .party-combat-reward-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.combat-fight-reward-items .party-combat-reward-item-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (max-width: 980px) {
    .party-combat-battle-banner {
        top: 56px;
    }

    .party-combat-battle-player {
        top: 68px;
        left: 12px;

        width: min(42%, 300px);
        min-width: 0;
    }

    .party-combat-battle-enemy {
        top: 68px;
        right: 12px;

        width: min(36%, 245px);
        min-width: 0;
    }

    .party-combat-enemy-stage {
        right: 6%;
        bottom: 23%;

        width: 42%;
        height: 54%;
    }

    .party-combat-battle-roster {
        left: 12px;
        bottom: 88px;

        width: min(42%, 300px);
        max-height: 27%;
    }

    .party-combat-battle-casts {
        bottom: 10px;

        width: min(72%, 620px);
    }
}

@media (max-width: 680px) {
    .party-combat-battle-top-actions {
        top: 8px;
        right: 8px;
    }

    .party-combat-battle-top-actions .combat-view-toggle {
        padding: 6px 8px;
        font-size: 0.58rem;
    }

    .party-combat-battle-banner {
        top: 8px;
        left: 8px;

        justify-items: start;

        max-width: 45%;

        transform: none;
    }

    .combat-dungeon-banner {
        top: 8px;
        left: 50%;

        justify-items: center;

        max-width: 58%;

        transform: translateX(-50%);
    }

    .party-combat-battle-player
        .combat-board-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .party-combat-battle-player
        .combat-board-stat-grid span {
        min-width: 0;

        gap: 3px;

        white-space: nowrap;
    }

    .party-combat-battle-player,
    .party-combat-battle-enemy {
        top: 52px;

        width: calc(50% - 12px);
    }

    .party-combat-battle-player {
        left: 8px;
    }

    .party-combat-battle-enemy {
        right: 8px;
    }

    .party-combat-enemy-stage {
        right: 2%;
        bottom: 29%;

        width: 52%;
        height: 47%;
    }

    .party-combat-battle-roster {
        right: 8px;
        bottom: 120px;
        left: 8px;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        width: auto;
        max-height: 22%;
    }

    .party-combat-battle-member {
        padding: 5px 6px;
    }

    .party-combat-battle-member > span {
        display: none;
    }

    .party-combat-battle-casts {
        right: 8px;
        bottom: 8px;
        left: 8px;

        width: auto;
    }

    .party-combat-battle-actions button {
        flex: 1 1 auto;
    }

    .party-combat-reward-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    .party-combat-reward-heading small {
        text-align: left;
    }

    .party-combat-reward-items {
        justify-content: flex-start;
    }

    .party-combat-return-button {
        right: 84px;
    }
}


/* ==============================
   SOLO DUNGEON CAVERN BANNERS
   Boss/dungeon names use the same roomy title-banner proportions as
   normal map locations. Combat-family markers stay intentionally compact.
   ============================== */

#map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
.map-marker[data-marker-type="boss"],
#map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
.map-marker[data-marker-type="dungeon"] {
    width: 196px;
    min-height: 50px;
}

#map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
.map-marker[data-marker-type="boss"]
.map-marker-title-banner,
#map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
.map-marker[data-marker-type="dungeon"]
.map-marker-title-banner {
    width: 196px;
    min-height: 50px;

    padding: 8px 34px;

    font-size: 0.82rem;
}

@media (max-width: 700px) {
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"],
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"] {
        width: 168px;
        min-height: 42px;
    }

    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"]
    .map-marker-title-banner,
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"]
    .map-marker-title-banner {
        width: 168px;
        min-height: 42px;

        padding: 7px 25px;

        font-size: 0.72rem;
    }

    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"]
    .map-marker-title-banner.long-label,
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"]
    .map-marker-title-banner.long-label {
        font-size: 0.64rem;
    }

    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"]
    .map-marker-title-banner.very-long-label,
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"]
    .map-marker-title-banner.very-long-label {
        font-size: 0.58rem;
    }
}

@media (min-width: 1200px) {
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"],
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"] {
        width: 229px;
        min-height: 58px;
    }

    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="boss"]
    .map-marker-title-banner,
    #map-viewport:is([data-map-id="whisperingCavernsOne"],[data-map-id="whisperingCavernsTwo"])
    .map-marker[data-marker-type="dungeon"]
    .map-marker-title-banner {
        width: 229px;
        min-height: 58px;

        padding: 9px 40px;
    }
}


/* ==============================
   MAP MARKER TOP-CENTRE STATUS BADGES
   Keep status symbols out of the title artwork: unlocked-source ticks and
   boss/dungeon crowns sit just above the middle of their banner.
   ============================== */

.map-marker.unlocked:is(
    [data-marker-type="combat"],
    [data-marker-type="fishing"],
    [data-marker-type="mining"],
    [data-marker-type="woodcutting"],
    [data-marker-type="gathering"]
)::after {
    top: 0;
    right: auto;
    left: 50%;

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

.map-marker-top-badge {
    position: absolute;
    top: 0;
    left: 50%;

    z-index: 5;

    display: grid;
    place-items: center;

    pointer-events: none;

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

.map-marker-top-badge.boss-marker-badge {
    width: 30px;
    height: 24px;

    font-size: 1.05rem;
    line-height: 1;

    filter:
        drop-shadow(0 2px 1px #F6E7DDA8)
        drop-shadow(0 4px 5px #24263F66);
}

@media (max-width: 700px) {
    .map-marker.unlocked:is(
        [data-marker-type="combat"],
        [data-marker-type="fishing"],
        [data-marker-type="mining"],
        [data-marker-type="woodcutting"],
        [data-marker-type="gathering"]
    )::after {
        top: 0;
        right: auto;
        left: 50%;

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

    .map-marker-top-badge.boss-marker-badge {
        width: 26px;
        height: 21px;

        font-size: 0.92rem;
    }
}


/* ==============================
   FISHING HUD + COLLECTION PASS
   20 Sep 2026
   ============================== */

/* Idle allowance still exists in Run Plan / queue logic; keep it out of
   the always-visible top activity strip. */
#header-queue-cap {
    display: none !important;
}

#fishing-region-content
.activity-section-tab-panel[
    data-activity-section-panel="activity"
] {
    display: grid;

    gap: 7px;
}

#fishing-region-content
.activity-section-tab-panel[
    data-activity-section-panel="activity"
][hidden] {
    display: none;
}

#fishing-region-content .collection-panel {
    margin: 0;
    padding: 8px;

    border: 1px solid #9E629538;
    border-radius: 10px;

    background: #24263F70;
}

#fishing-region-content .collection-heading {
    margin-bottom: 5px;
}

#fishing-region-content .collection-weight-note {
    margin-bottom: 6px;
}

#fishing-region-content .fish-collection {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 5px;
}

#fishing-region-content .collection-item {
    position: relative;

    min-height: 68px;

    overflow: hidden;
}

.fish-catch-flash {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: grid;
    place-items: center;

    padding: 5px;

    background: #24263FE8;

    pointer-events: none;

    opacity: 0;

    transform: scale(0.88);

    transition:
        opacity 150ms ease,
        transform 180ms ease;
}

.fish-catch-flash.show {
    opacity: 1;

    transform: scale(1);
}

.fish-catch-flash img {
    width: 44px;
    height: 44px;

    object-fit: contain;

    filter:
        drop-shadow(0 3px 6px #24263F8A);
}

.fish-catch-flash-fallback {
    font-size: 1.55rem;
}

.fish-catch-flash-badge {
    position: absolute;
    right: 5px;
    bottom: 4px;

    padding: 2px 5px;

    border: 1px solid #F7CDA95E;
    border-radius: 999px;

    background: #343558ED;
    color: #F6E7DD;

    font-size: 0.54rem;
    line-height: 1.1;
}

@media (max-width: 560px) {
    #fishing-region-content .fish-collection {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 4px;
    }

    #fishing-region-content .collection-item {
        min-height: 64px;

        padding: 5px 6px;
    }

    #fishing-region-content .collection-heading {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #fishing-region-content
    .collection-heading h2 {
        font-size: 0.76rem;
    }

    #fishing-region-content
    .collection-heading p {
        font-size: 0.56rem;
    }

    #fishing-region-content
    .collection-name {
        font-size: 0.64rem;
    }

    #fishing-region-content
    .collection-catch-chance,
    #fishing-region-content
    .collection-mastery-row {
        font-size: 0.50rem;
    }

    #fishing-region-content
    .collection-mastery-row {
        flex-wrap: wrap;

        gap: 2px 4px;
    }

    .fish-catch-flash img {
        width: 38px;
        height: 38px;
    }
}


/* ==============================
   SHARED ACTIVITY RESULT FLASH
   20 Sep 2026
   ============================== */

.activity-result-host {
    position: relative !important;
}

.activity-result-flash {
    position: absolute;
    inset: 0;
    z-index: 18;

    display: grid;
    place-items: center;

    padding: 7px;

    border-radius: inherit;

    background: #24263FEE;

    box-sizing: border-box;
    pointer-events: none;

    opacity: 0;

    transform: scale(0.94);

    transition:
        opacity 150ms ease,
        transform 180ms ease;
}

.activity-result-flash.show {
    opacity: 1;

    transform: scale(1);
}

.activity-result-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    max-width: 100%;

    gap: 6px;
}

.activity-result-item {
    position: relative;

    display: grid;
    place-items: center;

    width: 58px;
    min-width: 0;

    gap: 2px;
}

.activity-result-item img {
    width: 46px;
    height: 46px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 7px #24263FA6
        );
}

.activity-result-fallback {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    font-size: 1.4rem;
}

.activity-result-quantity {
    position: absolute;
    right: 0;
    bottom: 14px;

    min-width: 22px;

    padding: 2px 5px;

    border: 1px solid #F7CDA96B;
    border-radius: 999px;

    background: #343558F5;
    color: #F6E7DD;

    font-size: 0.58rem;
    line-height: 1.1;
    text-align: center;

    box-shadow:
        0 2px 6px #24263F7A;
}

.activity-result-label {
    max-width: 100%;

    overflow: hidden;

    color: #F7CDA9;

    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1.1;

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

.activity-result-flash.compact {
    padding: 3px;
}

.activity-result-flash.compact
.activity-result-item {
    width: 48px;
}

.activity-result-flash.compact
.activity-result-item img,
.activity-result-flash.compact
.activity-result-fallback {
    width: 38px;
    height: 38px;
}

.activity-result-flash.compact
.activity-result-quantity {
    right: -1px;
    bottom: 11px;

    min-width: 20px;

    padding: 1px 4px;

    font-size: 0.52rem;
}

@media (max-width: 560px) {
    .activity-result-flash {
        padding: 5px;
    }

    .activity-result-grid {
        gap: 4px;
    }

    .activity-result-item {
        width: 50px;
    }

    .activity-result-item img,
    .activity-result-fallback {
        width: 40px;
        height: 40px;
    }

    .activity-result-quantity {
        bottom: 12px;

        font-size: 0.52rem;
    }
}


/* ==============================
   PERSISTENT SKILL COLLECTIONS
   20 Sep 2026
   ============================== */

.skill-collections-section {
    display: grid;
    gap: 6px;
}

.skill-collections-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.skill-collections-heading h2 {
    margin: 0;
    font-size: 0.78rem;
}

.skill-collection-progress {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid #F7CDA938;
    border-radius: 999px;
    background: #F7CDA90F;
    color: #F6E7DD;
    font-size: 0.56rem;
    font-weight: 800;
}

.skill-collection-picker {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    color: #F6E7DDC7;
    font-size: 0.56rem;
    font-weight: 800;
}

.skill-collection-picker select {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #9E62954C;
    border-radius: 8px;
    background: #343558;
    color: #F6E7DD;
    font: inherit;
    font-size: 0.58rem;
}

.skill-collection-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.skill-collection-card {
    position: relative;
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 48px;
    gap: 5px;
    padding: 5px;
    overflow: hidden;
}

.skill-collection-image-shell {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #24263F6E;
}

.skill-collection-image-shell img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.skill-collection-placeholder {
    font-size: 0.82rem;
    opacity: 0.76;
}

.skill-collection-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.skill-collection-copy strong,
.skill-collection-copy span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-collection-copy strong {
    color: #F6E7DD;
    font-size: 0.56rem;
}

.skill-collection-copy span {
    color: #F6E7DDA8;
    font-size: 0.49rem;
}

.skill-collection-card.locked,
.skill-collection-card.undiscovered {
    opacity: 0.66;
}

/* Yield quantity belongs below the item artwork, never over it. */
.activity-result-item {
    grid-template-rows:
        auto auto auto;
    justify-items: center;
}

.activity-result-quantity,
.activity-result-flash.compact
.activity-result-quantity {
    position: static;
    min-width: 0;
    margin-top: -1px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #F7CDA9;
    font-size: 0.58rem;
    line-height: 1;
    box-shadow: none;
}

.activity-result-flash.compact
.activity-result-quantity {
    font-size: 0.54rem;
}

@media (max-width: 460px) {
    .skill-collection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .skill-collection-card {
        grid-template-columns:
            34px minmax(0, 1fr);
        min-height: 44px;
        gap: 4px;
        padding: 4px;
    }

    .skill-collection-image-shell {
        width: 34px;
        height: 34px;
    }

    .skill-collection-image-shell img {
        width: 30px;
        height: 30px;
    }
}


/* ==============================
   COMPACT SKILL PROGRESS + RELICS
   20 Sep 2026
   ============================== */

.compact-skill-progress {
    min-height: 0;

    gap: 5px;
    margin-bottom: 6px;
    padding: 5px 7px;
}

.compact-skill-progress > p {
    display: inline-flex;
    align-items: baseline;

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

    font-size: 0.62rem;
}

.compact-skill-progress > p strong {
    font-weight: 800;
}

.compact-skill-progress.production-skill-panel {
    display: block;
}

.compact-skill-progress
.production-skill-heading {
    flex-wrap: nowrap;

    gap: 6px;
}

.compact-skill-progress
.production-skill-meta {
    min-width: 0;

    gap: 5px;
}

.compact-skill-progress
.production-skill-meta > span {
    padding: 3px 6px;

    font-size: 0.62rem;
}

.relic-workshop-button {
    flex: 0 0 auto;

    min-height: 28px;

    padding: 4px 8px;

    border: 1px solid #F7CDA95C;
    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #F7CDA929,
            #9E629514
        );
    color: #F6E7DD;

    font: inherit;
    font-size: 0.58rem;
    font-weight: 800;

    cursor: pointer;
}

.relic-workshop-button:hover {
    border-color: #F7CDA99E;

    background:
        linear-gradient(
            180deg,
            #F7CDA93D,
            #9E629522
        );
}

body.relic-workshop-open {
    overflow: hidden;
}

.relic-workshop-window {
    width: min(760px, 96vw);
    max-height: 90vh;
}

.relic-workshop-scroll {
    min-height: 0;

    overflow-y: auto;

    padding: 10px 12px 14px;

    scrollbar-width: thin;
}

.relic-workshop-panel[hidden] {
    display: none;
}

.relic-workshop-empty {
    margin: 0;
    padding: 18px 12px;

    border: 1px dashed #9E62954C;
    border-radius: 11px;

    color: #F6E7DDB8;

    font-size: 0.66rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 460px) {
    .compact-skill-progress
    .production-skill-heading {
        align-items: center;
        flex-wrap: wrap;
    }

    .compact-skill-progress
    .production-skill-meta {
        flex: 1 1 auto;
    }

    .relic-workshop-button {
        min-height: 26px;

        padding: 4px 7px;
    }

    .relic-workshop-modal {
        padding: 8px;
    }

    .relic-workshop-window {
        width: 100%;
        max-height: 94vh;
    }
}


/* ==============================
   SKILL HEADER DENSITY PASS
   20 Sep 2026
   ============================== */

#selected-region-description:empty {
    display: none;
}

.region-heading:has(
    #selected-region-description:empty
) {
    margin-bottom: 4px;
    padding-bottom: 2px;
}

.region-heading:has(
    #selected-region-description:empty
) h2 {
    margin-bottom: 0;
}

.compact-skill-name {
    flex: 0 1 auto;

    min-width: 0;

    margin-right: auto;

    overflow: hidden;

    color: #F6E7DD;

    font-size: 0.70rem;
    font-weight: 800;

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

.compact-skill-progress {
    align-items: center;

    padding: 5px 7px;
}

/* Resource skill headers share the same stable layout at every width:
   Skill | Lv | XP on the first row, Active Stats below. This avoids the
   desktop activity sidebar squeezing names like Fishing down to "Fi…". */
.compact-skill-progress:not(
    .production-skill-panel
) {
    display: grid;
    grid-template-columns:
        minmax(84px, 1fr)
        auto
        minmax(96px, auto);
    align-items: center;

    gap: 4px 6px;
}

.compact-skill-progress:not(
    .production-skill-panel
) .compact-skill-name {
    width: 100%;
    min-width: 0;
    margin-right: 0;

    overflow: visible;

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

.compact-skill-progress:not(
    .production-skill-panel
) > p {
    min-width: 0;
}

.compact-skill-progress:not(
    .production-skill-panel
) .active-skill-stats {
    grid-column: 1 / -1;

    margin-top: 0;
}

.compact-skill-progress
.production-skill-heading {
    width: 100%;

    align-items: center;
}

.compact-skill-progress
.production-skill-heading
.compact-skill-name {
    margin-right: auto;
}

@media (max-width: 700px) {
    .compact-skill-progress:not(
        .production-skill-panel
    ) {
        grid-template-columns:
            minmax(78px, 1fr)
            auto
            minmax(92px, auto);

        gap: 4px 5px;
    }
}


@media (max-width: 460px) {
    .compact-skill-name {
        font-size: 0.64rem;
    }

    .compact-skill-progress {
        gap: 4px;
        padding: 4px 6px;
    }

    .compact-skill-progress:not(
        .production-skill-panel
    ) {
        grid-template-columns:
            minmax(72px, 1fr)
            auto
            minmax(86px, auto);
    }

    .compact-skill-progress > p,
    .compact-skill-progress
    .production-skill-meta > span {
        padding: 3px 5px;

        font-size: 0.57rem;
    }
}


/* ==============================
   COLLECTION CARD DETAIL PASS
   20 Sep 2026
   ============================== */

.skill-collection-context {
    margin: 0;

    color: #F6E7DDAA;

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

.skill-collection-context[hidden] {
    display: none;
}

.skill-collection-card {
    grid-template-columns:
        34px minmax(0, 1fr);

    align-items: start;

    min-height: 88px;

    padding: 6px;
}

.skill-collection-image-shell {
    width: 34px;
    height: 34px;
}

.skill-collection-image-shell img {
    width: 31px;
    height: 31px;
}

.skill-collection-copy {
    align-content: start;

    gap: 3px;
}

.skill-collection-copy
.skill-collection-name {
    overflow: visible;

    font-size: 0.55rem;
    line-height: 1.15;

    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.skill-collection-state {
    color: #F6E7DD9C;

    font-size: 0.49rem;
    line-height: 1.2;

    white-space: normal;
}

.skill-collection-detail-row {
    display: flex;
    flex-wrap: wrap;

    gap: 1px 5px;

    color: #F6E7DDB3;

    font-size: 0.48rem;
    line-height: 1.15;
}

.skill-collection-detail-row span {
    white-space: normal;
}

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

    gap: 1px 4px;

    color: #F6E7DDD0;

    font-size: 0.48rem;
    line-height: 1.15;
}

.skill-collection-mastery-row span {
    white-space: normal;
}

.skill-collection-mastery-track {
    width: 100%;
    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background: #24263F9E;
}

.skill-collection-mastery-fill {
    height: 100%;

    border-radius: inherit;

    background: #F7CDA9;
}

@media (max-width: 460px) {
    .skill-collection-card {
        min-height: 86px;

        padding: 5px;
    }

    .skill-collection-copy
    .skill-collection-name {
        font-size: 0.52rem;
    }

    .skill-collection-detail-row,
    .skill-collection-mastery-row {
        font-size: 0.46rem;
    }
}

/* ==============================
   SCENIC GAME HEADER
   Header controls live directly
   over the Salem panorama.
   ============================== */

.game-header {
    position: relative;

    background:
        linear-gradient(
            90deg,
            #17192EC2 0%,
            #24263F8F 34%,
            #24263F82 62%,
            #17192EBF 100%
        ),
        url("../assets/images/ui/top-scene-banner.png")
        center 47% / cover no-repeat;

    border-bottom-color: #9E62956B;

    box-shadow:
        0 5px 18px #24263F66,
        inset 0 -1px 0 #F7CDA91A;
}

.game-brand {
    position: relative;
    z-index: 1;
}

.game-brand h1,
.mobile-game-title {
    text-shadow:
        0 2px 5px #17192E,
        0 0 12px #17192ECC;
}

.header-action-bar {
    position: relative;
    z-index: 1;

    border-color: #B48B9570;

    background: #24263F78;

    box-shadow:
        0 3px 12px #17192E3D,
        inset 0 1px 0 #F6E7DD0A;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.header-action-bar.active {
    border-color: #B48B9559;

    background: #B48B950D;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.header-actions {
    position: relative;
    z-index: 1;
}

.header-action-button,
.header-currencies > span,
.death-recovery-chip {
    background: #24263FB8;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.header-action-button:hover {
    background: #B48B9545;
}


/* Keep the artwork behind the complete
   compact mobile header as it sticks. */
@media (max-width: 600px) {
    .game-header {
        background:
            linear-gradient(
                180deg,
                #17192E9E 0%,
                #24263F91 48%,
                #17192EAD 100%
            ),
            url("../assets/images/ui/top-scene-banner.png")
            center 46% / cover no-repeat;

        border-bottom-color: #9E62956B;

        box-shadow:
            0 5px 18px #24263F70,
            inset 0 -1px 0 #F7CDA91A;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header-action-bar {
        background: #24263F88;
    }

    .header-action-bar.active {
        background: #B48B9514;
    }

    .header-action-button,
    .header-currencies > span,
    .death-recovery-chip {
        background: #24263FAE;
    }
}


/* Mid-size layouts use two header rows,
   so bias the panorama slightly upward to
   keep the moon/city visible behind both. */
@media (min-width: 601px) and (max-width: 1399px) {
    .game-header {
        background-position: center 44%;
    }
}


/* ==============================
   EXTRA TRANSPARENT ACTIVITY BAR
   ============================== */

.game-header .header-action-bar {
    background: rgba(36, 38, 63, 0.28) !important;
    border-color: rgba(180, 139, 149, 0.42) !important;

    box-shadow:
        inset 0 1px 0 rgba(246, 231, 221, 0.06) !important;

    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
}

.game-header .header-action-bar.active {
    background: rgba(180, 139, 149, 0.08) !important;
    border-color: rgba(180, 139, 149, 0.34) !important;

    box-shadow:
        inset 0 1px 0 rgba(246, 231, 221, 0.05) !important;

    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

/* Mobile: slightly stronger than desktop,
   but still much more see-through than now */
@media (max-width: 600px) {
    .game-header .header-action-bar {
        background: rgba(36, 38, 63, 0.36) !important;
        border-color: rgba(180, 139, 149, 0.40) !important;

        backdrop-filter: blur(1.5px) !important;
        -webkit-backdrop-filter: blur(1.5px) !important;
    }

    .game-header .header-action-bar.active {
        background: rgba(180, 139, 149, 0.10) !important;
        border-color: rgba(180, 139, 149, 0.34) !important;

        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
    }
}

/* ==============================
   MATCH HEADER CONTROLS TO GLASS HUD
   Currency chips + top action buttons
   use the same scenic transparency.
   ============================== */

.game-header .header-action-button,
.game-header .header-currencies > span,
.game-header .death-recovery-chip {
    border-color: rgba(180, 139, 149, 0.42) !important;

    background: rgba(36, 38, 63, 0.28) !important;

    box-shadow:
        inset 0 1px 0 rgba(246, 231, 221, 0.06) !important;

    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
}

.game-header .header-action-button:hover {
    border-color: rgba(247, 205, 169, 0.58) !important;

    background: rgba(180, 139, 149, 0.18) !important;

    box-shadow:
        inset 0 1px 0 rgba(246, 231, 221, 0.08),
        0 2px 8px rgba(23, 25, 46, 0.20) !important;
}

.game-header .header-action-button:disabled {
    background: rgba(36, 38, 63, 0.22) !important;
}

@media (max-width: 600px) {
    .game-header .header-action-button,
    .game-header .header-currencies > span,
    .game-header .death-recovery-chip {
        border-color: rgba(180, 139, 149, 0.40) !important;

        background: rgba(36, 38, 63, 0.36) !important;

        backdrop-filter: blur(1.5px) !important;
        -webkit-backdrop-filter: blur(1.5px) !important;
    }

    .game-header .header-action-button:hover {
        background: rgba(180, 139, 149, 0.18) !important;
    }
}

/* ==============================
   GLOBAL SCENIC GAME BACKDROP
   Reuse the login artwork behind
   the game while keeping focal
   content such as the map opaque.
   ============================== */

body {
    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.16) 0%,
            rgba(23, 25, 46, 0.24) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat fixed;
}

.game-shell,
.game-main,
.map-panel {
    background: transparent;
}

/* Main side columns become glass so the
   login artwork remains visible around
   the solid map/content focal point. */
.inventory-sidebar,
.activity-panel {
    border: 1px solid rgba(158, 98, 149, 0.34);

    background: rgba(36, 38, 63, 0.42);

    box-shadow:
        0 8px 26px rgba(23, 25, 46, 0.22),
        inset 0 1px 0 rgba(246, 231, 221, 0.05);

    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
}

/* Keep inner cards readable, but no longer
   fully hide the artwork behind the panel. */
.activity-panel .skill-panel,
.activity-panel .location-card,
.activity-panel .collection-panel,
.activity-panel .future-region-content {
    border-color: rgba(158, 98, 149, 0.28);

    background: rgba(52, 53, 88, 0.52);

    box-shadow:
        0 2px 8px rgba(23, 25, 46, 0.14);

    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.inventory-sidebar .sidebar-tab {
    background: rgba(36, 38, 63, 0.30);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.inventory-sidebar .sidebar-tab:hover,
.inventory-sidebar .sidebar-tab.selected {
    background: rgba(247, 205, 169, 0.14);
}

.inventory-sidebar .inventory-capacity,
.inventory-sidebar .inventory-slot,
.inventory-sidebar .equipment-slot,
.inventory-sidebar .tool-slot,
.activity-panel .skill-panel p,
.activity-panel .production-skill-meta > span,
.activity-panel .location-card p:not(#selected-location-description):not(#fishing-status) {
    background-color: rgba(36, 38, 63, 0.30);
}

/* The map itself stays deliberately solid and
   visually separated from the glass UI. */
.map-viewport {
    background: #343558;

    box-shadow:
        0 10px 30px rgba(23, 25, 46, 0.28),
        0 0 0 1px rgba(246, 231, 221, 0.06);
}


/* Mobile uses the dedicated login artwork. */
@media (max-width: 700px) {
    body {
        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.12) 0%,
                rgba(23, 25, 46, 0.22) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;

        background-attachment: scroll;
    }

    .inventory-sidebar,
    .activity-panel {
        background: rgba(36, 38, 63, 0.48);

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .activity-panel .skill-panel,
    .activity-panel .location-card,
    .activity-panel .collection-panel,
    .activity-panel .future-region-content {
        background: rgba(52, 53, 88, 0.56);
    }
}

/* ==============================
   RELIC WORKSHOP VISUAL POLISH
   21 Sep 2026
   Scenic glass workshop, item art,
   wide Gold cards and true next-rank
   Ascension stat/passive previews.
   ============================== */

.relic-workshop-window {
    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.78) 0%,
            rgba(36, 38, 63, 0.72) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat;

    box-shadow:
        0 18px 52px rgba(23, 25, 46, 0.48),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

.relic-workshop-window > .pantry-header {
    background: rgba(36, 38, 63, 0.76);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.relic-workshop-scroll {
    background: rgba(23, 25, 46, 0.18);
}

.relic-workshop-panel.legendary-relic-assembly-list {
    gap: 15px;
}

.relic-workshop-panel .legendary-relic-assembly-card {
    border-color: rgba(247, 205, 169, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(67, 51, 86, 0.76),
            rgba(36, 38, 63, 0.70)
        );

    box-shadow:
        0 8px 24px rgba(23, 25, 46, 0.24),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.legendary-relic-media-image {
    display: block;

    width: 56px;
    height: 56px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(23, 25, 46, 0.38)
        );
}

.legendary-relic-assembly-requirements {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    gap: 8px;
}

.legendary-relic-assembly-requirement {
    min-height: 54px;
    padding: 8px 10px;

    border-color:
        rgba(158, 98, 149, 0.36);

    background:
        rgba(36, 38, 63, 0.48);

    box-shadow:
        inset 0 1px 0
        rgba(246, 231, 221, 0.035);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.legendary-relic-assembly-requirement.is-gold {
    grid-column: span 2;

    border-color:
        rgba(247, 205, 169, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(213, 154, 92, 0.18),
            rgba(36, 38, 63, 0.50)
        );
}

.legendary-relic-requirement-main {
    align-items: center;

    gap: 7px;
}

.legendary-relic-requirement-image-shell {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border: 1px solid
        rgba(246, 231, 221, 0.08);

    border-radius: 9px;

    background:
        rgba(23, 25, 46, 0.34);
}

.legendary-relic-requirement-image {
    display: block;

    width: 29px;
    height: 29px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 2px 4px
            rgba(23, 25, 46, 0.35)
        );
}

.legendary-relic-requirement-status {
    width: 12px;

    text-align: center;
}

.legendary-relic-requirement-name {
    min-width: 0;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.legendary-relic-requirement-count {
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}

.legendary-relic-assembly-requirement.is-gold
.legendary-relic-requirement-name,
.legendary-relic-assembly-requirement.is-gold
.legendary-relic-requirement-count {
    color: #F7CDA9;
}

.boss-relic-upgrade-preview {
    display: grid;

    gap: 9px;
    margin-top: 11px;
    padding: 11px 12px;

    border: 1px solid
        rgba(247, 205, 169, 0.28);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(247, 205, 169, 0.10),
            rgba(158, 98, 149, 0.13)
        );

    box-shadow:
        inset 0 1px 0
        rgba(246, 231, 221, 0.045);
}

.boss-relic-upgrade-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 5px 10px;
}

.boss-relic-upgrade-heading strong {
    color: #F6E7DD;

    font-size: 0.82rem;
}

.boss-relic-upgrade-eyebrow,
.boss-relic-upgrade-passive > span {
    color: #F7CDA9;

    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.boss-relic-upgrade-passive {
    display: grid;

    gap: 3px;
}

.boss-relic-upgrade-passive p {
    margin: 0;

    color: rgba(246, 231, 221, 0.90);

    font-size: 0.74rem;
    line-height: 1.4;
}

.boss-relic-upgrade-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.boss-relic-upgrade-stat {
    display: inline-flex;
    align-items: center;

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

    border: 1px solid
        rgba(213, 154, 92, 0.26);

    border-radius: 999px;

    background:
        rgba(213, 154, 92, 0.11);

    color: #F6E7DD;

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

.boss-relic-upgrade-stat strong {
    font-weight: 800;
}

.boss-relic-upgrade-stat span {
    color: #F7CDA9;

    font-weight: 900;
}

.boss-relic-upgrade-stat.is-muted {
    color: rgba(246, 231, 221, 0.66);
}

@media (max-width: 700px) {
    .relic-workshop-window {
        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.78) 0%,
                rgba(36, 38, 63, 0.74) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }
}

@media (max-width: 520px) {
    .legendary-relic-media-image {
        width: 46px;
        height: 46px;
    }

    .legendary-relic-assembly-requirements {
        grid-template-columns: 1fr;
    }

    .legendary-relic-assembly-requirement.is-gold {
        grid-column: auto;
    }

    .legendary-relic-assembly-requirement {
        min-height: 52px;
    }

    .boss-relic-upgrade-preview {
        padding: 10px;
    }
}

/* ==============================
   GLOBAL CHAT V1.6
   Desktop: original map viewport is
   preserved; chat overflows below
   Mobile: open/close overlay
   ============================== */

@media (min-width: 701px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.global-chat-launcher {
    position: fixed;
    left: 50%;
    bottom:
        max(
            14px,
            env(safe-area-inset-bottom)
        );

    z-index: 63;

    display: none;
    align-items: center;

    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;

    transform: translateX(-50%);

    border: 1px solid
        rgba(247, 205, 169, 0.38);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(52, 53, 88, 0.84),
            rgba(36, 38, 63, 0.78)
        );

    color: #F6E7DD;

    box-shadow:
        0 7px 22px
        rgba(23, 25, 46, 0.38),
        inset 0 1px 0
        rgba(246, 231, 221, 0.06);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;

    cursor: pointer;
}

.global-chat-launcher:hover,
.global-chat-launcher:focus-visible {
    border-color:
        rgba(247, 205, 169, 0.68);

    background:
        linear-gradient(
            135deg,
            rgba(67, 51, 86, 0.90),
            rgba(36, 38, 63, 0.84)
        );
}

.global-chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;

    display: grid;
    place-items: center;

    min-width: 18px;
    height: 18px;
    padding: 0 4px;

    border: 2px solid #343558;
    border-radius: 999px;

    background: #E7968E;
    color: #24263F;

    box-shadow:
        0 3px 9px
        rgba(23, 25, 46, 0.42);

    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric:
        tabular-nums;

    pointer-events: none;
}

.global-chat-unread-badge[hidden] {
    display: none !important;
}

.global-chat-launcher.has-unread,
.global-chat-map-button.has-unread {
    border-color:
        rgba(231, 150, 142, 0.82);

    box-shadow:
        0 0 0 2px
        rgba(231, 150, 142, 0.12),
        0 6px 18px
        rgba(23, 25, 46, 0.34);
}

.global-chat-map-button {
    position: absolute;
    left: 10px;
    bottom: 10px;

    z-index: 27;

    display: none;
    align-items: center;

    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;

    border: 1px solid
        rgba(246, 231, 221, 0.28);
    border-radius: 9px;

    background:
        rgba(52, 53, 88, 0.92);
    color: #F6E7DD;

    box-shadow:
        0 3px 10px
        rgba(23, 25, 46, 0.34);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    font: inherit;
    font-size: 0.58rem;
    font-weight: 800;

    cursor: pointer;
}

.global-chat-map-button:hover,
.global-chat-map-button:focus-visible {
    border-color:
        rgba(247, 205, 169, 0.68);

    background:
        rgba(67, 51, 86, 0.94);
}

.global-chat-back-to-map {
    display: none;
}

@media (min-width: 701px) {
    .global-chat-map-button {
        display: inline-flex;
    }
}

.global-chat-launcher[hidden] {
    display: none !important;
}

.global-chat-desktop-row {
    grid-area: chat;

    display: block;

    width: 100%;
    min-width: 0;

    padding:
        0
        0
        24px;
}

.global-chat-modal {
    position: static;

    display: block;

    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;

    pointer-events: auto;
}

.global-chat-modal[hidden] {
    display: none !important;
}

.global-chat-backdrop {
    display: none;
}

.global-chat-window {
    position: relative;

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

    width: 100%;
    height: 400px;

    overflow: hidden;

    border: 1px solid
        rgba(158, 98, 149, 0.52);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.76),
            rgba(36, 38, 63, 0.70)
        ),
        url("../assets/images/login-screen.png")
        center 66% / cover no-repeat;

    box-shadow:
        0 14px 44px
        rgba(23, 25, 46, 0.54),
        inset 0 1px 0
        rgba(246, 231, 221, 0.06);
}

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

    gap: 10px;
    padding: 9px 10px 8px;

    border-bottom: 1px solid
        rgba(158, 98, 149, 0.28);

    background:
        rgba(36, 38, 63, 0.72);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.global-chat-header h2 {
    margin: 0;

    font-size: 0.86rem;
}

.global-chat-heading {
    min-width: 0;
}

.global-chat-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px 7px;
    min-width: 0;
}

.global-chat-channel-tabs {
    display: inline-flex;
    align-items: center;

    gap: 2px;
    padding: 2px;

    border: 1px solid
        rgba(158, 98, 149, 0.28);
    border-radius: 999px;

    background:
        rgba(23, 25, 46, 0.32);
}

.global-chat-channel-tab {
    min-height: 22px;
    padding: 3px 7px;

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

    background: transparent;
    color:
        rgba(246, 231, 221, 0.68);

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

    cursor: pointer;
}

.global-chat-channel-tab.selected {
    border-color:
        rgba(247, 205, 169, 0.30);

    background:
        rgba(180, 139, 149, 0.22);
    color: #F6E7DD;
}

.global-chat-channel-tab:disabled {
    opacity: 0.38;

    cursor: default;
}

.private-message-header-alert {
    position: absolute;
    top: -7px;
    right: -5px;
    z-index: 20;

    display: inline-flex;
    align-items: center;
    gap: 3px;

    min-height: 24px;
    padding: 3px 6px;

    border: 1px solid rgba(231,150,142,0.68);
    border-radius: 999px;

    background: rgba(52,53,88,0.92);
    color: #F6E7DD;

    box-shadow:
        0 0 0 2px rgba(231,150,142,0.10),
        0 4px 14px rgba(23,25,46,0.30);

    font: inherit;
    font-size: 0.56rem;
    font-weight: 900;

    cursor: pointer;
}

.private-message-header-alert[hidden] {
    display: none !important;
}

.private-message-header-alert:hover,
.private-message-header-alert:focus-visible {
    border-color: #F7CDA9;
    background: rgba(67,51,86,0.96);
}

.private-message-header-alert strong {
    min-width: 16px;
    padding: 1px 4px;

    border-radius: 999px;

    background: #E7968E;
    color: #24263F;

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

.private-chat-tab-unread {
    display: inline-grid;
    place-items: center;

    min-width: 15px;
    height: 15px;
    margin-left: 3px;
    padding: 0 3px;

    border-radius: 999px;

    background: #E7968E;
    color: #24263F;

    font-size: 0.42rem;
    font-weight: 900;
    line-height: 1;
}

.private-chat-tab-unread[hidden] {
    display: none !important;
}

.private-chat-conversations {
    display: flex;
    gap: 5px;

    min-width: 0;
    overflow-x: auto;

    padding: 2px 1px 4px;
}

.private-chat-conversations[hidden] {
    display: none !important;
}

.private-chat-conversation {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    gap: 1px 6px;

    flex: 0 0 min(190px, 62vw);
    min-width: 0;
    padding: 5px 7px;

    border: 1px solid rgba(158,98,149,0.28);
    border-radius: 8px;

    background: rgba(36,38,63,0.44);
    color: #F6E7DD;

    text-align: left;
    font: inherit;

    cursor: pointer;
}

.private-chat-conversation:hover,
.private-chat-conversation.selected {
    border-color: rgba(247,205,169,0.52);
    background: rgba(96,73,143,0.34);
}

.private-chat-conversation strong {
    overflow: hidden;

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

    font-size: 0.56rem;
}

.private-chat-conversation small {
    grid-column: 1 / -1;

    overflow: hidden;

    color: rgba(246,231,221,0.58);

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

    font-size: 0.46rem;
}

.private-chat-conversation-unread {
    grid-column: 2;
    grid-row: 1;

    align-self: center;

    min-width: 16px;
    padding: 1px 4px;

    border-radius: 999px;

    background: #E7968E;
    color: #24263F;

    font-size: 0.43rem;
    font-weight: 900;
    text-align: center;
}

.private-chat-conversations-empty {
    padding: 5px 7px;

    color: rgba(246,231,221,0.54);

    font-size: 0.5rem;
}

.global-chat-player-name,
.player-name-button {
    appearance: none;

    max-width: 100%;
    padding: 0;

    border: 0;
    background: transparent;
    color: #F6E7DD;

    font: inherit;
    font-weight: 800;
    text-align: inherit;

    cursor: pointer;
}

.global-chat-player-name {
    font-size: 0.6rem;
}

.global-chat-player-name:hover,
.global-chat-player-name:focus-visible,
.player-name-button:hover,
.player-name-button:focus-visible {
    color: #F7CDA9;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.global-chat-message.is-party-invite {
    margin: 3px 0;

    border: 1px solid rgba(247,205,169,0.34);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(213,154,92,0.12),
            rgba(96,73,143,0.18)
        );
}

.private-party-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 4px;
}

.private-party-invite-actions button {
    min-height: 26px;
    margin: 0;
    padding: 4px 8px;

    font-size: 0.5rem;
}

.player-social-modal {
    position: fixed;
    inset: 0;

    z-index: 16000;

    display: grid;
    place-items: center;

    padding: 16px;
}

.player-social-modal[hidden] {
    display: none !important;
}

.player-social-backdrop {
    position: absolute;
    inset: 0;

    border: 0;

    background: rgba(23,25,46,0.78);

    backdrop-filter: blur(6px);

    cursor: pointer;
}

.player-social-window {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 0;

    width: min(430px, 94vw);
    overflow: hidden;

    border: 1px solid rgba(158,98,149,0.62);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(23,25,46,0.88),
            rgba(36,38,63,0.92)
        ),
        url("../assets/images/login-screen.png")
        center / cover no-repeat;

    box-shadow: 0 18px 50px rgba(23,25,46,0.58);
}

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

    gap: 10px;
    padding: 13px 14px 10px;

    border-bottom: 1px solid rgba(158,98,149,0.26);
    background: rgba(36,38,63,0.64);
}

.player-social-header h2,
.player-social-header p {
    margin: 0;
}

#player-social-title {
    margin-top: 3px;

    color: rgba(247,205,169,0.74);

    font-size: 0.58rem;
}

.player-social-content {
    display: grid;
    gap: 10px;

    padding: 14px;
}

.player-social-guild {
    margin: 0;

    color: rgba(246,231,221,0.72);

    font-size: 0.62rem;
}

.player-social-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 8px;
}

.player-social-stats > div {
    display: grid;
    gap: 3px;

    padding: 9px;

    border: 1px solid rgba(158,98,149,0.26);
    border-radius: 10px;

    background: rgba(36,38,63,0.48);
}

.player-social-stats span {
    color: rgba(246,231,221,0.56);

    font-size: 0.52rem;
}

.player-social-stats strong {
    color: #F7CDA9;

    font-size: 0.78rem;
}

.player-social-status {
    min-height: 1.1em;
    margin: 0;

    color: rgba(246,231,221,0.64);

    font-size: 0.56rem;
}

.player-social-status[data-tone="success"] {
    color: #9FE7B2;
}

.player-social-status[data-tone="error"] {
    color: #E7968E;
}

.player-social-actions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 7px;
}

.player-social-actions button {
    margin: 0;
}

.leaderboard-player-name {
    overflow: hidden;

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

    font-size: 0.72rem;
}

@media (max-width: 520px) {
    .player-social-actions {
        grid-template-columns: 1fr;
    }

    .private-chat-conversation {
        flex-basis: min(170px, 72vw);
    }
}

.global-chat-online {
    display: inline-flex;
    align-items: center;

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

    border: 1px solid
        rgba(158, 98, 149, 0.20);
    border-radius: 999px;

    background:
        rgba(23, 25, 46, 0.28);
    color:
        rgba(246, 231, 221, 0.58);

    font-size: 0.47rem;
    font-weight: 800;
    white-space: nowrap;
}

.global-chat-online-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        rgba(246, 231, 221, 0.28);
}

.global-chat-online.is-live {
    color:
        rgba(246, 231, 221, 0.82);
}

.global-chat-online.is-live
.global-chat-online-dot {
    background: #6EDB8F;

    box-shadow:
        0 0 6px
        rgba(110, 219, 143, 0.72);
}

.global-chat-header p.panel-label {
    margin-bottom: 1px;

    font-size: 0.5rem;
}

.global-chat-header-actions {
    display: flex;
    align-items: center;

    gap: 5px;
}

.global-chat-milestones-toggle,
.global-chat-collapse {
    border: 1px solid
        rgba(180, 139, 149, 0.34);

    background:
        rgba(36, 38, 63, 0.58);
    color: rgba(246, 231, 221, 0.88);

    font: inherit;

    cursor: pointer;
}

.global-chat-milestones-toggle {
    padding: 5px 7px;

    border-radius: 999px;

    font-size: 0.5rem;
    font-weight: 800;
    white-space: nowrap;
}

.global-chat-milestones-toggle.is-off {
    opacity: 0.58;
}

.global-chat-collapse {
    display: none;
    place-items: center;

    width: 28px;
    height: 28px;
    padding: 0;

    border-radius: 9px;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.global-chat-milestones-toggle:hover,
.global-chat-milestones-toggle:focus-visible,
.global-chat-collapse:hover,
.global-chat-collapse:focus-visible {
    border-color:
        rgba(247, 205, 169, 0.62);

    background:
        rgba(67, 51, 86, 0.76);
}

.global-chat-content {
    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto
        auto;

    min-height: 0;
    overflow: hidden;

    gap: 5px;
    padding: 7px;

    background:
        rgba(23, 25, 46, 0.12);
}

.private-chat-conversations {
    grid-row: 1;
}

.global-chat-load-older {
    grid-row: 2;
}

.global-chat-messages,
.global-chat-empty {
    grid-row: 3;
}

.global-chat-status {
    grid-row: 4;
}

.global-chat-form {
    grid-row: 5;
    min-height: 0;
}

.global-chat-load-older {
    width: 100%;
    min-height: 25px;
    margin: 0;
    padding: 4px 7px;

    font-size: 0.52rem;
}

.global-chat-messages {
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 5px 7px;

    border: 1px solid
        rgba(158, 98, 149, 0.24);
    border-radius: 10px;

    background:
        rgba(36, 38, 63, 0.43);

    scrollbar-color:
        rgba(180, 139, 149, 0.65)
        rgba(36, 38, 63, 0.24);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.global-chat-message {
    display: grid;

    gap: 2px;
    padding: 5px 6px;

    border-bottom: 1px solid
        rgba(158, 98, 149, 0.14);
}

.global-chat-message:last-child {
    border-bottom: 0;
}

.global-chat-message-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 6px;
}

.global-chat-message-identity {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 3px 5px;
    min-width: 0;
}

.global-chat-message-identity strong {
    color: #F6E7DD;

    font-size: 0.6rem;
}

.global-chat-guild-tag {
    color: #F3B6D2;

    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.global-chat-player-title,
.global-chat-system-source {
    color:
        rgba(247, 205, 169, 0.74);

    font-size: 0.48rem;
    font-weight: 700;
}

.global-chat-message time {
    flex: 0 0 auto;

    color:
        rgba(246, 231, 221, 0.42);

    font-size: 0.46rem;
}

.global-chat-message p {
    margin: 0;

    color:
        rgba(246, 231, 221, 0.90);

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

    overflow-wrap: anywhere;
}

.global-chat-message.is-system {
    margin: 2px 0;

    border: 1px solid
        rgba(247, 205, 169, 0.22);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(213, 154, 92, 0.12),
            rgba(158, 98, 149, 0.11)
        );
}

.global-chat-message.is-system p {
    color: #F7CDA9;

    font-weight: 700;
}

.global-chat-message.is-mastery-milestone {
    border-color:
        rgba(247, 205, 169, 0.36);

    box-shadow:
        inset 3px 0 0
        rgba(247, 205, 169, 0.54);
}

.global-chat-message.is-skill-milestone {
    box-shadow:
        inset 3px 0 0
        rgba(180, 139, 149, 0.60);
}

.global-chat-empty {
    align-self: center;

    margin: -26px 0 0;

    color:
        rgba(246, 231, 221, 0.50);

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

    pointer-events: none;
}

.global-chat-empty[hidden] {
    display: none;
}

.global-chat-status {
    min-height: 1.05em;
    margin: 0;

    color:
        rgba(246, 231, 221, 0.56);

    font-size: 0.48rem;
}

.global-chat-status[data-tone="success"] {
    color: #D59A5C;
}

.global-chat-status[data-tone="error"] {
    color: #E7968E;
}

.global-chat-form {
    display: grid;

    gap: 3px;
    padding: 5px 6px;

    border: 1px solid
        rgba(158, 98, 149, 0.24);
    border-radius: 9px;

    background:
        rgba(36, 38, 63, 0.50);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.global-chat-form label {
    display: none;
}

.global-chat-form textarea {
    width: 100%;
    min-height: 40px;
    max-height: 72px;

    resize: none;

    padding: 6px 7px;

    border: 1px solid
        rgba(158, 98, 149, 0.32);
    border-radius: 7px;

    outline: none;

    background:
        rgba(23, 25, 46, 0.42);
    color: #F6E7DD;

    font: inherit;
    font-size: 0.58rem;
    line-height: 1.35;
}

.global-chat-form textarea:focus {
    border-color:
        rgba(247, 205, 169, 0.60);

    box-shadow:
        0 0 0 2px
        rgba(247, 205, 169, 0.09);
}

.global-chat-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 7px;
}

.global-chat-counter {
    color:
        rgba(246, 231, 221, 0.44);

    font-size: 0.48rem;
    font-variant-numeric:
        tabular-nums;
}

.global-chat-counter.is-near-limit {
    color: #E7968E;
}

.global-chat-compose-footer button {
    width: auto;
    min-width: 72px;
    min-height: 27px;
    margin: 0;
    padding: 5px 9px;

    font-size: 0.55rem;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .game-main {
        grid-template-areas:
            "map map"
            "inventory activity"
            "chat chat";
        grid-template-rows:
            auto
            auto
            auto;
    }

    .global-chat-desktop-row {
        padding:
            2px
            0
            24px;
    }
}

@media (min-width: 1101px) {
    .game-main {
        grid-template-areas:
            "inventory map activity"
            ". chat .";
        grid-template-rows:
            100%
            auto;

        align-items: stretch;
        overflow: visible;
    }

    .inventory-sidebar,
    .activity-panel {
        height: 100%;
        max-height: 100%;

        overscroll-behavior: contain;
    }

    .global-chat-desktop-row {
        position: relative;

        padding:
            0
            0
            24px;
    }

    .global-chat-back-to-map {
        position: absolute;
        top: 10px;
        left: calc(100% + 10px);

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

        gap: 4px;
        min-width: 48px;
        min-height: 32px;
        padding: 5px 8px;

        border: 1px solid
            rgba(247, 205, 169, 0.38);
        border-radius: 10px;

        background:
            rgba(52, 53, 88, 0.76);
        color: #F6E7DD;

        box-shadow:
            0 5px 16px
            rgba(23, 25, 46, 0.28);

        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);

        font: inherit;
        font-size: 0.56rem;
        font-weight: 800;
        white-space: nowrap;

        cursor: pointer;
    }

    .global-chat-back-to-map:hover,
    .global-chat-back-to-map:focus-visible {
        border-color:
            rgba(247, 205, 169, 0.68);

        background:
            rgba(67, 51, 86, 0.90);
    }
}

@media (max-width: 700px) {
    .global-chat-map-button,
    .global-chat-back-to-map {
        display: none !important;
    }

    .global-chat-desktop-row {
        display: contents;
    }

    .global-chat-launcher {
        left: auto;
        right: 10px;
        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        display: inline-flex;

        transform: none;
    }

    .global-chat-modal {
        position: fixed;
        inset: 0;

        /* Mobile header/boost controls sit at 14000+, so chat must
           own the viewport while open. Player/social modals still
           remain above chat at 16000. */
        z-index: 15000;

        display: grid;
        place-items: center;

        padding:
            max(7px, env(safe-area-inset-top))
            7px
            max(7px, env(safe-area-inset-bottom));

        pointer-events: auto;
    }

    .global-chat-backdrop {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        padding: 0;

        border: 0;

        background:
            rgba(23, 25, 46, 0.82);

        cursor: default;
    }

    .global-chat-window {
        z-index: 1;

        width: 100%;
        height: min(760px, 96vh);
        height: min(760px, 96dvh);
        max-height: calc(100dvh - 14px);

        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.78),
                rgba(36, 38, 63, 0.74)
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    .global-chat-collapse {
        display: grid;
    }

    .global-chat-header {
        position: sticky;
        top: 0;
        z-index: 4;

        padding:
            10px
            10px
            8px;

        background:
            rgba(36, 38, 63, 0.96);
    }

    .global-chat-heading {
        min-width: 0;
        overflow: hidden;
    }

    .global-chat-title-row {
        min-width: 0;
    }

    .global-chat-channel-tabs {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .global-chat-channel-tabs::-webkit-scrollbar {
        display: none;
    }

    .global-chat-collapse {
        position: relative;
        z-index: 5;

        min-width: 36px;
        min-height: 36px;
        flex: 0 0 36px;
    }

    .global-chat-header-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
    }

    .global-chat-title-row {
        gap: 3px 5px;
    }

    .global-chat-channel-tab {
        min-height: 20px;
        padding: 3px 6px;

        font-size: 0.46rem;
    }

    .global-chat-online {
        padding: 3px 5px;

        font-size: 0.45rem;
    }

    .global-chat-content {
        gap: 7px;
        padding: 8px;
    }

    .global-chat-messages {
        padding: 7px;
    }

    .global-chat-message {
        padding: 7px;
    }

    .global-chat-message-identity strong {
        font-size: 0.66rem;
    }

    .global-chat-player-title,
    .global-chat-system-source {
        font-size: 0.52rem;
    }

    .global-chat-message p {
        font-size: 0.64rem;
    }

    .global-chat-form {
        padding: 7px;
    }

    .global-chat-form textarea {
        min-height: 56px;
        max-height: 110px;

        font-size: 0.64rem;
    }

    .global-chat-compose-footer button {
        min-width: 78px;
        min-height: 32px;

        font-size: 0.6rem;
    }
}




/* ==============================
   ACTIVE SKILL STATS
   Effective equipped / buffed
   modifiers shown per skill.
   ============================== */

.active-skill-stats {
    grid-column: 1 / -1;

    width: 100%;
    margin-top: 5px;

    border: 1px solid
        rgba(158, 98, 149, 0.22);
    border-radius: 9px;

    background:
        rgba(23, 25, 46, 0.28);
}

.active-skill-stats summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    color:
        rgba(246, 231, 221, 0.82);

    font-size: 0.53rem;
    font-weight: 800;

    cursor: pointer;
    list-style: none;
}

.active-skill-stats summary::-webkit-details-marker {
    display: none;
}

.active-skill-stats summary::after {
    content: "›";

    margin-left: 2px;

    transform: rotate(90deg);

    color:
        rgba(247, 205, 169, 0.72);

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

.active-skill-stats[open] summary::after {
    transform: rotate(-90deg);
}

.active-skill-stats-count {
    min-width: 19px;
    margin-left: auto;
    padding: 1px 5px;

    border-radius: 999px;

    background:
        rgba(158, 98, 149, 0.18);
    color:
        rgba(247, 205, 169, 0.82);

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

.active-skill-stats-list {
    display: grid;

    gap: 3px;
    padding: 0 7px 6px;
}

.active-skill-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
    min-width: 0;

    color:
        rgba(246, 231, 221, 0.65);

    font-size: 0.49rem;
}

.active-skill-stat-name {
    min-width: 0;
}

.active-skill-stat-value {
    flex: 0 0 auto;

    color: #F7CDA9;

    font-size: 0.49rem;
    font-weight: 800;
    text-align: right;
}

.active-skill-stat-source {
    margin-bottom: 2px;
    padding-bottom: 4px;

    border-bottom: 1px solid
        rgba(158, 98, 149, 0.16);

    color:
        rgba(246, 231, 221, 0.76);
}

.active-skill-stat-source
.active-skill-stat-value {
    max-width: 62%;

    overflow: hidden;

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

.active-skill-stats-empty {
    margin: 0;

    color:
        rgba(246, 231, 221, 0.46);

    font-size: 0.48rem;
}

@media (max-width: 700px) {
    .active-skill-stats summary {
        padding: 6px 8px;

        font-size: 0.58rem;
    }

    .active-skill-stat-row,
    .active-skill-stat-value,
    .active-skill-stats-empty {
        font-size: 0.54rem;
    }
}


/* ==============================
   SHARED SCENIC MODAL SHELL
   22 Sep 2026
   Recipe Book / Quest Book /
   Skills / Party / Apprentice /
   Player Account / Pantry
   ============================== */

:is(
    .recipe-book-window,
    .skills-window,
    .ssq-mail-dialog,
    .party-window,
    .apprentice-window,
    .account-window,
    .pantry-window:not(.relic-workshop-window)
) {
    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.74) 0%,
            rgba(36, 38, 63, 0.68) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat;

    box-shadow:
        0 18px 54px rgba(23, 25, 46, 0.50),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

:is(
    .recipe-book-header,
    .skills-header,
    .ssq-mail-heading,
    .party-header,
    .apprentice-header,
    .account-header,
    .pantry-modal:not(.relic-workshop-modal) .pantry-header
) {
    position: relative;
    isolation: isolate;

    min-height: 78px;

    align-items: center;

    border-bottom-color:
        rgba(158, 98, 149, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(23, 25, 46, 0.84) 0%,
            rgba(36, 38, 63, 0.60) 40%,
            rgba(36, 38, 63, 0.58) 62%,
            rgba(23, 25, 46, 0.84) 100%
        ),
        url("../assets/images/ui/top-scene-banner.png")
        center 46% / cover no-repeat;

    box-shadow:
        0 5px 18px rgba(23, 25, 46, 0.34),
        inset 0 -1px 0 rgba(247, 205, 169, 0.08);

    text-shadow:
        0 2px 5px rgba(23, 25, 46, 0.92),
        0 0 12px rgba(23, 25, 46, 0.72);
}

:is(
    .recipe-book-header,
    .skills-header,
    .ssq-mail-heading,
    .party-header,
    .apprentice-header,
    .account-header,
    .pantry-modal:not(.relic-workshop-modal) .pantry-header
) > * {
    position: relative;
    z-index: 1;
}

:is(
    .recipe-book-window,
    .skills-window,
    .ssq-mail-dialog,
    .party-window,
    .apprentice-window,
    .account-window,
    .pantry-window:not(.relic-workshop-window)
) :is(
    .recipe-book-card,
    .quest-book-card,
    .skills-card,
    .ssq-mail-item,
    .ssq-mail-preview,
    .party-card,
    .apprentice-overview-card,
    .apprentice-job-card,
    .apprentice-skill-card,
    .account-card,
    .pantry-item-card,
    .pantry-toolbar,
    .pantry-tab-manager
) {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.quest-book-card-completed {
    border-color:
        rgba(247, 205, 169, 0.52);

    background:
        linear-gradient(
            145deg,
            rgba(213, 154, 92, 0.18),
            rgba(52, 53, 88, 0.70)
        );

    box-shadow:
        0 6px 18px rgba(23, 25, 46, 0.18),
        inset 0 1px 0 rgba(247, 205, 169, 0.08);
}

.quest-book-card-completed
.quest-book-status-completed {
    box-shadow:
        inset 0 0 0 1px
        rgba(247, 205, 169, 0.08);
}

@media (max-width: 700px) {
    :is(
        .recipe-book-window,
        .skills-window,
        .ssq-mail-dialog,
        .party-window,
        .apprentice-window,
        .account-window,
        .pantry-window:not(.relic-workshop-window)
    ) {
        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.76) 0%,
                rgba(36, 38, 63, 0.70) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    :is(
        .recipe-book-header,
        .skills-header,
        .ssq-mail-heading,
        .party-header,
        .apprentice-header,
        .account-header,
        .pantry-modal:not(.relic-workshop-modal) .pantry-header
    ) {
        min-height: 70px;

        background-position:
            center 46%;
    }
}

/* Signed-out full-screen login remains its dedicated full-screen scene. */
.account-modal.login-screen .account-window {
    background: transparent;
    box-shadow: none;
}


/* ==============================
   SCENIC MODAL EXPANSION + QUEST PALETTE
   22 Sep 2026
   Settings and Relics join the scenic shell.
   Quest Book moves warm/orange accents to
   baby pink / lavender / moonlit blue.
   ============================== */

.settings-window,
.relic-workshop-window {
    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.74) 0%,
            rgba(36, 38, 63, 0.68) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat;

    box-shadow:
        0 18px 54px rgba(23, 25, 46, 0.50),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

.settings-header,
.relic-workshop-window > .pantry-header {
    position: relative;
    isolation: isolate;

    min-height: 78px;
    align-items: center;

    border-bottom-color:
        rgba(158, 98, 149, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(23, 25, 46, 0.84) 0%,
            rgba(36, 38, 63, 0.60) 40%,
            rgba(36, 38, 63, 0.58) 62%,
            rgba(23, 25, 46, 0.84) 100%
        ),
        url("../assets/images/ui/top-scene-banner.png")
        center 46% / cover no-repeat;

    box-shadow:
        0 5px 18px rgba(23, 25, 46, 0.34),
        inset 0 -1px 0 rgba(243, 182, 210, 0.08);

    text-shadow:
        0 2px 5px rgba(23, 25, 46, 0.92),
        0 0 12px rgba(23, 25, 46, 0.72);
}

.settings-header > *,
.relic-workshop-window > .pantry-header > * {
    position: relative;
    z-index: 1;
}

.settings-card,
.relic-workshop-panel,
.relic-workshop-scroll {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.quest-book-window {
    --quest-book-soft-pink: #F3B6D2;
    --quest-book-lavender: #B99AD8;
    --quest-book-blue: #7F8BC9;
}

.quest-book-id,
.quest-book-status-available,
.quest-book-status-active,
.quest-book-status-completed,
.quest-book-requirement.complete {
    color: var(--quest-book-soft-pink);
}

.quest-book-card-active {
    border-color:
        rgba(185, 154, 216, 0.58);

    background:
        linear-gradient(
            145deg,
            rgba(158, 98, 149, 0.18),
            rgba(59, 57, 131, 0.18)
        );
}

.quest-book-status-active {
    border-color:
        rgba(185, 154, 216, 0.62);

    background:
        rgba(158, 98, 149, 0.18);

    color:
        var(--quest-book-soft-pink);
}

.quest-book-card-completed {
    border-color:
        rgba(243, 182, 210, 0.58);

    background:
        linear-gradient(
            145deg,
            rgba(158, 98, 149, 0.30) 0%,
            rgba(59, 57, 131, 0.28) 58%,
            rgba(52, 53, 88, 0.72) 100%
        );

    box-shadow:
        0 6px 18px rgba(23, 25, 46, 0.20),
        inset 0 1px 0 rgba(243, 182, 210, 0.10);
}

.quest-book-status-completed {
    border-color:
        rgba(243, 182, 210, 0.56);

    background:
        rgba(127, 139, 201, 0.18);

    color:
        var(--quest-book-soft-pink);
}

@media (max-width: 700px) {
    .settings-window,
    .relic-workshop-window {
        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.76) 0%,
                rgba(36, 38, 63, 0.70) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    .settings-header,
    .relic-workshop-window > .pantry-header {
        min-height: 70px;
        background-position: center 46%;
    }
}


/* ==============================
   GUILD PROGRESSION V1
   ============================== */

.guild-progression-panel {
    margin: 12px 0;
    padding: 12px;

    border: 1px solid #C8B7E74A;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #C8B7E719,
            #3435588A
        );
}

.guild-progression-heading,
.guild-daily-heading-row,
.guild-contribution-heading,
.guild-reward-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.guild-progression-heading h3,
.guild-daily-heading-row h3 {
    margin: 0;
}

.guild-slot-count {
    color: #F3B6D2;

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

.guild-level-row {
    display: grid;

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

.guild-level-row > span {
    color: #F6E7DD;

    font-size: 0.61rem;
    font-weight: 800;
}

.guild-level-row small,
.guild-daily-heading-row small,
.guild-contribution-card small {
    color: #F6E7DD99;

    font-size: 0.5rem;
    line-height: 1.4;
}

.guild-progress-track {
    position: relative;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border: 1px solid #C8B7E738;
    border-radius: 999px;

    background: #20213D9A;
}

.guild-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #B9A7E8,
            #F3B6D2,
            #A8CEE8
        );

    transition: width 180ms ease;
}

.guild-daily-heading-row {
    margin-top: 14px;
    margin-bottom: 7px;
}

.guild-daily-list {
    display: grid;

    gap: 7px;
}

.guild-daily-card {
    display: grid;

    gap: 5px;
    padding: 9px 10px;

    border: 1px solid #9E62953D;
    border-radius: 10px;

    background: #34355857;
}

.guild-daily-card.is-complete {
    border-color: #A9D7BE5C;

    background: #6FAE8F16;
}

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

    gap: 8px;
}

.guild-daily-heading strong {
    color: #F6E7DD;

    font-size: 0.63rem;
}

.guild-daily-heading span {
    color: #DCCFF1;

    font-size: 0.55rem;
    font-weight: 900;
}

.guild-daily-card p {
    margin: 0;

    color: #F6E7DDB5;

    font-size: 0.52rem;
    line-height: 1.35;
}

.guild-contribution-card,
.guild-reward-card {
    margin-top: 10px;
    padding: 9px 10px;

    border: 1px solid #F3B6D236;
    border-radius: 10px;

    background: #F3B6D20E;
}

.guild-contribution-card {
    display: grid;

    gap: 6px;
}

.guild-contribution-heading strong {
    color: #F6E7DD;

    font-size: 0.6rem;
}

.guild-contribution-heading span {
    color: #F3B6D2;

    font-size: 0.54rem;
    font-weight: 900;
}

.guild-reward-card > div {
    min-width: 0;
}

.guild-reward-card p {
    margin: 2px 0 0;

    color: #F6E7DDC9;

    font-size: 0.54rem;
    line-height: 1.4;
}

.guild-reward-card .fishing-button {
    flex: 0 0 auto;

    min-width: 150px;
    margin: 0;
}

.guild-reward-card .fishing-button:disabled {
    opacity: 0.52;

    cursor: default;
}

@media (max-width: 600px) {
    .guild-progression-heading,
    .guild-daily-heading-row,
    .guild-contribution-heading,
    .guild-reward-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .guild-reward-card .fishing-button {
        width: 100%;
        min-width: 0;
    }
}


/* ==============================
   PET SYSTEM V1
   Dungeon companion collection +
   training. Uses the scenic Party shell.
   ============================== */

.pets-window {
    width: min(880px, 96vw);
    max-height: min(90vh, 920px);
}

.pets-content {
    display: grid;
    gap: 12px;
}

.pets-card {
    border-color: rgba(202, 170, 211, 0.34);
    background: rgba(35, 38, 63, 0.54);
}

.pets-section-heading,
.pet-training-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pets-section-heading h3,
.pet-training-heading h3,
.pet-detail-identity h3 {
    margin: 2px 0 0;
}

.pets-collection-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.pet-collection-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(205, 186, 222, 0.28);
    border-radius: 12px;
    background: rgba(23, 25, 46, 0.58);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pet-collection-card:hover:not(:disabled),
.pet-collection-card.is-active {
    border-color: rgba(242, 180, 214, 0.76);
    background: rgba(86, 64, 108, 0.52);
}

.pet-collection-card.is-active {
    box-shadow:
        inset 0 0 0 1px rgba(242, 180, 214, 0.26);
}

.pet-collection-card:disabled {
    cursor: default;
    opacity: 0.58;
}

.pet-collection-card img,
.pet-unknown-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 9px;
    background: rgba(15, 17, 32, 0.44);
}

.pet-unknown-image {
    display: block;
    position: relative;
}

.pet-unknown-image::before {
    content: "?";
}

.pet-collection-card strong,
.pet-collection-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-collection-card span {
    font-size: 0.76rem;
    opacity: 0.78;
}

.pet-detail-panel {
    display: grid;
    gap: 14px;
}

.pet-detail-hero {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.pet-detail-image-wrap {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 10px;
    border: 1px solid rgba(205, 186, 222, 0.28);
    border-radius: 16px;
    background: rgba(15, 17, 32, 0.42);
}

.pet-detail-image-wrap img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.pet-detail-identity {
    display: grid;
    gap: 7px;
}

.pet-detail-identity p,
.pet-detail-identity small {
    margin: 0;
}

.pet-xp-track {
    overflow: hidden;
    height: 9px;
    border-radius: 999px;
    background: rgba(11, 13, 27, 0.56);
}

.pet-xp-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(232, 164, 205, 0.88),
            rgba(176, 165, 239, 0.92)
        );
    transition: width 180ms ease;
}

.pet-nickname-form,
.pet-technique-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(205, 186, 222, 0.22);
    border-radius: 12px;
    background: rgba(22, 25, 47, 0.46);
}

.pet-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.pet-nickname-form input,
.pet-technique-card select {
    width: 100%;
    min-width: 0;
}

.pet-technique-card label {
    display: grid;
    gap: 5px;
}

.pet-training-heading {
    padding-top: 3px;
}

.pet-training-currency {
    display: grid;
    gap: 3px;
    text-align: right;
}

.pet-treat-balance {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.pet-treat-balance img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pet-training-currency span {
    font-size: 0.8rem;
    opacity: 0.78;
}

.pet-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pet-stat-card {
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(205, 186, 222, 0.24);
    border-radius: 12px;
    background: rgba(20, 22, 42, 0.52);
}

.pet-stat-card > strong {
    font-size: 1.28rem;
}

.pet-stat-card > small {
    opacity: 0.72;
}

.pet-respec-button {
    justify-self: start;
}

.pets-status {
    min-height: 1.2em;
}

#pet-detail-status[data-tone="warning"] {
    color: #f4d5a6;
}

#pet-detail-status[data-tone="success"] {
    color: #c8efda;
}

@media (max-width: 760px) {
    .pets-window {
        width: 100%;
        max-height: 94vh;
    }

    .pets-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pet-detail-hero {
        grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
        gap: 10px;
    }

    .pet-detail-image-wrap {
        min-height: 105px;
        padding: 6px;
    }

    .pet-stat-grid {
        grid-template-columns: 1fr;
    }

    .pets-section-heading,
    .pet-training-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .pet-training-currency {
        text-align: left;
    }

    .pet-treat-balance {
        justify-content: flex-start;
    }
}

@media (max-width: 430px) {
    .pets-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pet-detail-hero {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .pet-inline-form {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   PET COMBAT V1 — SOLO DUNGEONS
   Own companion lives on the left,
   dungeon creature remains right/centre.
   ============================== */

.combat-pet-stage {
    position: absolute;
    left: 12%;
    bottom: 19%;

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

    width: min(30%, 310px);
    height: 48%;

    pointer-events: none;

    z-index: 2;
}

.combat-pet-stage[hidden],
.combat-pet-card[hidden],
#pet-cast-row[hidden] {
    display: none !important;
}

.combat-pet-stage::after {
    position: absolute;
    right: 18%;
    bottom: 2%;
    left: 18%;

    height: 8%;

    border-radius: 50%;

    background: #3435583D;
    filter: blur(7px);

    content: "";

    transform: scaleY(0.45);

    z-index: -1;
}

.combat-pet-stage img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;

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

    filter: drop-shadow(0 8px 7px #24263F4C);
}

.combat-pet-card {
    position: absolute;
    left: 16px;
    bottom: 14px;

    display: grid;
    gap: 6px;

    width: min(28%, 280px);
    min-width: 210px;

    padding: 9px 10px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #343558E8,
            #343558A8
        );
    color: #F6E7DD;

    box-shadow: none;
    backdrop-filter: blur(5px);

    z-index: 6;
}

.combat-pet-card strong,
.combat-pet-card b,
.combat-pet-card span,
.combat-pet-card small {
    color: #F6E7DD;
}

.combat-pet-card .combat-board-heading small {
    color: #F6E7DDBD;
}

.combat-pet-hp-fill {
    background:
        linear-gradient(
            90deg,
            #D59A5C,
            #E8B8CD
        );
}

.combat-pet-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.combat-pet-stat-grid span {
    padding: 3px 5px;

    border-radius: 5px;

    background: #F6E7DD0F;

    font-size: 0.50rem;
}

.combat-pet-technique-status {
    min-height: 1.2em;

    color: #F6E7DDBD !important;

    font-size: 0.52rem;
}

.combat-pet-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}

.combat-pet-feed select,
.combat-pet-feed button {
    min-width: 0;
    min-height: 27px;

    padding: 4px 6px;

    border: 1px solid #F6E7DD47;
    border-radius: 6px;

    background: #F6E7DDF5;
    color: #513966;

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

.combat-pet-feed button {
    cursor: pointer;
    font-weight: bold;
}

.combat-pet-feed button:disabled,
.combat-pet-feed select:disabled {
    cursor: default;
    opacity: 0.55;
}

.combat-cast-fill.pet {
    background:
        linear-gradient(
            90deg,
            #E8B8CD,
            #B8A7E8
        );
}

.combat-viewport.pet-combat-active
    .combat-enemy-stage-world {
    right: 7%;
    left: auto;

    width: min(36%, 390px);

    transform: none;
}

.combat-viewport.pet-combat-active
    .combat-board-casts {
    width: min(42%, 500px);
}

@media (min-width: 621px) {
    .combat-pet-stage,
    .combat-viewport.pet-combat-active
        .combat-enemy-stage-world {
        bottom: 23%;
    }
}

@media (max-width: 620px) {
    .party-combat-pet-stage {
        left: 3%;
        bottom: 35%;

        width: 42%;
        height: 37%;
    }

    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-enemy-stage {
        right: 2%;
        bottom: 35%;
        left: auto;

        width: 47%;
        height: 39%;
    }

    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        width: min(58%, 360px);
        bottom: 10px;
    }

    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        width: min(38%, 210px);
    }

    .combat-pet-stage {
        left: 3%;
        bottom: 35%;

        width: 43%;
        height: 38%;
    }

    .combat-viewport.pet-combat-active
        .combat-enemy-stage-world {
        right: 2%;
        bottom: 35%;
        left: auto;

        width: 48%;
        height: 40%;

        transform: none;
    }

    .combat-pet-stage img,
    .combat-viewport.pet-combat-active
        .combat-enemy-stage-world img {
        max-width: 94%;
        max-height: 100%;
    }

    .combat-viewport.pet-combat-active
        .combat-board-player,
    .combat-viewport.pet-combat-active
        .combat-board-enemy {
        top: 34px;
        padding: 5px 6px;
        gap: 3px;
    }

    .combat-viewport.pet-combat-active
        .combat-board-heading {
        gap: 3px;
    }

    .combat-viewport.pet-combat-active
        .combat-board-heading strong {
        font-size: 0.60rem;
    }

    .combat-viewport.pet-combat-active
        .combat-board-heading small,
    .combat-viewport.pet-combat-active
        .combat-board-stat-grid span {
        font-size: 0.45rem;
    }

    .combat-pet-card {
        left: 7px;
        bottom: 78px;

        width: calc(48% - 9px);
        min-width: 0;

        padding: 5px 6px;
        gap: 3px;

        border-radius: 8px;
    }

    .combat-pet-card .combat-board-heading small,
    .combat-pet-stat-grid,
    .combat-pet-technique-status {
        display: none;
    }

    .combat-pet-card .combat-board-heading strong {
        font-size: 0.58rem;
    }

    .combat-pet-feed select,
    .combat-pet-feed button {
        font-size: 0.42rem;
    }

    .combat-pet-feed {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px;
    }

    .combat-pet-feed select,
    .combat-pet-feed button {
        min-height: 21px;
        padding: 2px 4px;
    }

    .combat-pet-feed button {
        min-width: 45px;
    }

    .combat-viewport.pet-combat-active
        .combat-board-casts {
        width: auto;
    }
}


.dungeon-pet-choice {
    display: grid;
    gap: 4px;

    margin-top: 7px;
    padding: 7px 8px;

    border: 1px solid #E8B8CD45;
    border-radius: 8px;

    background: #34355814;
}

.dungeon-pet-choice > span {
    color: #6C527B;

    font-size: 0.72rem;
    font-weight: 800;
}

.dungeon-pet-choice select {
    width: 100%;
    min-height: 31px;

    padding: 5px 7px;

    border: 1px solid #A98CB85E;
    border-radius: 7px;

    background: #FFF9F2;
    color: #513966;

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

.dungeon-pet-choice-note {
    color: #77647D;

    font-size: 0.66rem;
    line-height: 1.35;
}

.combat-float-result.pet {
    left: 17%;
    top: 43%;

    background: #B68AC5F5;
}

@media (max-width: 620px) {
    .dungeon-pet-choice {
        padding: 6px;
    }

    .dungeon-pet-choice > span,
    .dungeon-pet-choice select,
    .dungeon-pet-choice-note {
        font-size: 0.60rem;
    }

    .combat-float-result.pet {
        left: 12%;
        top: 50%;
    }
}


/* ==============================
   MULTIPLAYER LEADERBOARDS V1
   Skill boards + per-item Mastery.
   ============================== */

body.leaderboard-open {
    overflow: hidden;
}

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

    display: grid;
    place-items: center;

    padding: 28px;

    z-index: 260;
}

.leaderboard-modal[hidden] {
    display: none !important;
}

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

    border: 0;

    background:
        rgba(24, 22, 39, 0.76);
    backdrop-filter: blur(6px);

    cursor: pointer;
}

.leaderboard-window {
    position: relative;

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

    gap: 14px;

    width: min(1050px, 96vw);
    max-height: min(850px, 92vh);

    padding: 20px;

    border: 1px solid rgba(246, 231, 221, 0.22);
    border-radius: 20px;

    background:
        linear-gradient(
            rgba(38, 37, 66, 0.92),
            rgba(38, 37, 66, 0.96)
        ),
        url("../assets/images/login-background.png")
        center / cover;

    color: #F6E7DD;

    box-shadow:
        0 24px 70px rgba(15, 14, 26, 0.58);

    overflow: hidden;
}

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

    gap: 16px;
}

.leaderboard-header h2 {
    margin: 2px 0 4px;

    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
}

.leaderboard-summary {
    max-width: 760px;
    margin: 0;

    color: rgba(246, 231, 221, 0.74);

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

.leaderboard-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 10px;
}

.leaderboard-skill-control {
    display: grid;

    gap: 5px;

    min-width: min(330px, 100%);
}

.leaderboard-skill-control[hidden] {
    display: none !important;
}

.leaderboard-skill-control > span {
    color: rgba(246, 231, 221, 0.72);

    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#leaderboard-skill-select,
.leaderboard-refresh-button,
.leaderboard-page-button,
.mastery-leaderboard-button {
    border: 1px solid rgba(246, 231, 221, 0.2);
    border-radius: 9px;

    background: rgba(246, 231, 221, 0.08);
    color: #F6E7DD;

    font: inherit;
}

#leaderboard-skill-select {
    min-height: 36px;

    padding: 7px 10px;
}

#leaderboard-skill-select option {
    background: #343558;
    color: #F6E7DD;
}

.leaderboard-refresh-button,
.leaderboard-page-button,
.mastery-leaderboard-button {
    padding: 7px 11px;

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

    cursor: pointer;
}

.leaderboard-refresh-button:hover:not(:disabled),
.leaderboard-page-button:hover:not(:disabled),
.mastery-leaderboard-button:hover:not(:disabled) {
    border-color: rgba(247, 205, 169, 0.55);

    background: rgba(247, 205, 169, 0.13);
}

.leaderboard-refresh-button:disabled,
.leaderboard-page-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

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

    gap: 10px;
}

.leaderboard-podium[hidden] {
    display: none !important;
}

.leaderboard-podium-card {
    position: relative;

    display: grid;
    justify-items: center;

    gap: 4px;

    min-width: 0;

    padding: 14px 10px;

    border: 1px solid rgba(246, 231, 221, 0.16);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(246, 231, 221, 0.10),
            rgba(246, 231, 221, 0.035)
        );

    text-align: center;
}

.leaderboard-podium-card.rank-1 {
    border-color: rgba(246, 215, 74, 0.58);

    box-shadow:
        inset 0 0 0 1px rgba(246, 215, 74, 0.08),
        0 0 20px rgba(246, 215, 74, 0.08);
}

.leaderboard-podium-card.rank-2 {
    border-color: rgba(213, 219, 232, 0.42);
}

.leaderboard-podium-card.rank-3 {
    border-color: rgba(207, 144, 86, 0.46);
}

.leaderboard-podium-card.is-you,
.leaderboard-row.is-you {
    background:
        linear-gradient(
            90deg,
            rgba(184, 167, 232, 0.18),
            rgba(184, 167, 232, 0.06)
        );
}

.leaderboard-podium-medal {
    font-size: 1.6rem;
}

.leaderboard-podium-card > strong {
    overflow: hidden;

    width: 100%;

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

    font-size: 0.82rem;
}

.leaderboard-podium-card > span {
    color: #F7CDA9;

    font-size: 0.82rem;
    font-weight: 900;
}

.leaderboard-podium-card > small {
    color: rgba(246, 231, 221, 0.64);

    font-size: 0.58rem;
}

.leaderboard-rows {
    display: grid;
    align-content: start;

    gap: 5px;

    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding-right: 3px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns:
        54px minmax(0, 1fr) auto;

    gap: 10px;
    align-items: center;

    padding: 8px 10px;

    border: 1px solid rgba(246, 231, 221, 0.09);
    border-radius: 9px;

    background: rgba(24, 22, 39, 0.28);
}

.leaderboard-row-rank {
    color: #F7CDA9;

    font-size: 0.68rem;
}

.leaderboard-row-player,
.leaderboard-row-score {
    display: grid;

    gap: 1px;

    min-width: 0;
}

.leaderboard-row-player strong {
    overflow: hidden;

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

    font-size: 0.72rem;
}

.leaderboard-row-player small,
.leaderboard-row-score small {
    color: rgba(246, 231, 221, 0.56);

    font-size: 0.54rem;
}

.leaderboard-row-score {
    justify-items: end;

    text-align: right;
}

.leaderboard-row-score strong {
    color: #F7CDA9;

    font-size: 0.72rem;
}

.leaderboard-empty {
    margin: 0;
    padding: 24px;

    border: 1px dashed rgba(246, 231, 221, 0.16);
    border-radius: 12px;

    color: rgba(246, 231, 221, 0.62);

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

.leaderboard-footer {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;

    gap: 10px;
    align-items: center;
}

.leaderboard-footer-copy {
    display: grid;
    justify-items: center;

    gap: 2px;

    min-width: 0;

    text-align: center;
}

.leaderboard-footer-copy strong {
    font-size: 0.66rem;
}

.leaderboard-footer-copy small {
    color: rgba(246, 231, 221, 0.58);

    font-size: 0.54rem;
}

#leaderboard-status[data-tone="error"] {
    color: #F0A4A4;
}

.mastery-leaderboard-button {
    justify-self: start;

    margin-top: 2px;

    padding: 5px 8px;

    font-size: 0.56rem;
}

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

    .leaderboard-window {
        width: 100%;
        max-height: 96vh;

        gap: 9px;

        padding: 12px;

        border-radius: 14px;
    }

    .leaderboard-toolbar {
        align-items: stretch;
    }

    .leaderboard-skill-control {
        min-width: 0;
        flex: 1 1 auto;
    }

    .leaderboard-podium {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .leaderboard-podium-card {
        grid-template-columns:
            34px minmax(0, 1fr) auto;
        justify-items: stretch;
        align-items: center;

        gap: 7px;

        padding: 8px 10px;

        text-align: left;
    }

    .leaderboard-podium-card > small {
        grid-column: 2 / -1;
    }

    .leaderboard-podium-medal {
        grid-row: 1 / span 2;

        font-size: 1.25rem;
    }

    .leaderboard-podium-card > span {
        text-align: right;
    }

    .leaderboard-row {
        grid-template-columns:
            42px minmax(0, 1fr) auto;

        gap: 6px;

        padding: 7px;
    }

    .leaderboard-footer {
        grid-template-columns:
            1fr 1fr;

        gap: 6px;
    }

    .leaderboard-footer-copy {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .leaderboard-page-button {
        width: 100%;
    }

    .leaderboard-summary {
        font-size: 0.60rem;
    }
}


/* ==============================
   AUCTION HOUSE
   Server-owned player market.
   ============================== */

body.auction-house-open {
    overflow: hidden;
}

.auction-house-modal {
    position: fixed;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 22px;

    z-index: 275;
}

.auction-house-modal[hidden] {
    display: none !important;
}

.auction-house-backdrop {
    position: absolute;
    inset: 0;

    border: 0;

    background:
        rgba(20, 18, 35, 0.80);

    backdrop-filter:
        blur(7px);

    cursor: pointer;
}

.auction-house-window {
    position: relative;

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

    gap: 12px;

    width:
        min(
            1180px,
            97vw
        );

    max-height:
        min(
            900px,
            94vh
        );

    padding: 20px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.23
        );

    border-radius: 22px;

    background:
        linear-gradient(
            rgba(35, 34, 62, 0.91),
            rgba(28, 27, 50, 0.96)
        ),
        url(
            "../assets/images/login-background.png"
        )
        center / cover;

    color: #F6E7DD;

    box-shadow:
        0 26px 80px
            rgba(
                11,
                10,
                24,
                0.66
            ),
        inset 0 0 0 1px
            rgba(
                255,
                255,
                255,
                0.025
            );

    overflow: hidden;
}

.auction-house-window::before {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 82% 4%,
            rgba(
                247,
                205,
                169,
                0.10
            ),
            transparent 35%
        );

    pointer-events: none;

    content: "";
}

.auction-house-header,
.auction-house-wallet-strip,
.auction-house-tabs,
.auction-house-content,
.auction-house-status {
    position: relative;
    z-index: 1;
}

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

    gap: 16px;
}

.auction-house-header h2 {
    margin:
        2px 0 4px;

    font-size:
        clamp(
            1.35rem,
            2.4vw,
            2rem
        );
}

.auction-house-summary {
    max-width: 760px;

    margin: 0;

    color:
        rgba(
            246,
            231,
            221,
            0.70
        );

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

.auction-house-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.auction-house-wallet-strip {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                110px,
                1fr
            )
        )
        minmax(
            180px,
            1.25fr
        );

    gap: 8px;
}

.auction-house-wallet-strip > div {
    display: grid;

    gap: 3px;

    min-width: 0;

    padding: 9px 11px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.12
        );

    border-radius: 11px;

    background:
        rgba(
            20,
            18,
            35,
            0.36
        );
}

.auction-house-wallet-strip span {
    color:
        rgba(
            246,
            231,
            221,
            0.58
        );

    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auction-house-wallet-strip strong {
    font-size: 0.79rem;
}

.auction-house-rule-chip {
    align-content: center;

    border-color:
        rgba(
            247,
            205,
            169,
            0.28
        ) !important;

    background:
        linear-gradient(
            135deg,
            rgba(
                247,
                205,
                169,
                0.12
            ),
            rgba(
                184,
                167,
                232,
                0.08
            )
        ) !important;
}

.auction-house-rule-chip strong {
    color: #F7CDA9;
}

.auction-house-rule-chip small {
    color:
        rgba(
            246,
            231,
            221,
            0.59
        );

    font-size: 0.52rem;
}

.auction-house-tabs {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap: 6px;

    padding: 5px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.10
        );

    border-radius: 12px;

    background:
        rgba(
            20,
            18,
            35,
            0.25
        );
}

.auction-tab,
.auction-primary-button,
.auction-secondary-button,
.auction-house-window select,
.auction-house-window input {
    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.18
        );

    border-radius: 9px;

    background:
        rgba(
            246,
            231,
            221,
            0.07
        );

    color: #F6E7DD;

    font: inherit;
}

.auction-tab {
    min-height: 35px;

    padding: 7px 8px;

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

    cursor: pointer;
}

.auction-tab.active {
    border-color:
        rgba(
            247,
            205,
            169,
            0.46
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                247,
                205,
                169,
                0.17
            ),
            rgba(
                184,
                167,
                232,
                0.14
            )
        );

    color: #FCE7D1;
}

.auction-house-content {
    min-height: 0;

    overflow: hidden;
}

.auction-view {
    display: grid;
    grid-template-rows:
        auto minmax(
            0,
            1fr
        )
        auto;

    gap: 10px;

    height: 100%;
    min-height: 0;
}

.auction-view[hidden] {
    display: none !important;
}

.auction-view-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
}

.auction-view-heading h3,
.auction-form-intro h3,
.auction-subheading h3 {
    margin: 0;
}

.auction-view-heading small,
.auction-form-intro p,
.auction-subheading small {
    color:
        rgba(
            246,
            231,
            221,
            0.60
        );

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

.auction-filter-control {
    display: grid;

    gap: 4px;

    min-width:
        min(
            300px,
            42vw
        );
}

.auction-filter-control > span,
.auction-form-grid label > span {
    color:
        rgba(
            246,
            231,
            221,
            0.62
        );

    font-size: 0.52rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auction-house-window select,
.auction-house-window input {
    min-height: 35px;

    padding: 7px 9px;
}

.auction-house-window select option {
    background: #343558;
    color: #F6E7DD;
}

.auction-market-list {
    display: grid;
    align-content: start;

    gap: 7px;

    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding-right: 3px;
}

.auction-market-card {
    display: grid;
    grid-template-columns:
        64px
        minmax(
            0,
            1fr
        );

    gap: 11px;

    padding: 10px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.10
        );

    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            rgba(
                20,
                18,
                35,
                0.46
            ),
            rgba(
                72,
                66,
                103,
                0.18
            )
        );
}

.auction-market-card.is-own {
    border-color:
        rgba(
            184,
            167,
            232,
            0.34
        );

    background:
        linear-gradient(
            100deg,
            rgba(
                184,
                167,
                232,
                0.12
            ),
            rgba(
                20,
                18,
                35,
                0.38
            )
        );
}

.auction-item-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.11
        );

    border-radius: 11px;

    background:
        rgba(
            246,
            231,
            221,
            0.05
        );

    font-size: 1.55rem;

    overflow: hidden;
}

.auction-item-icon img {
    width: 90%;
    height: 90%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(
                11,
                10,
                24,
                0.38
            )
        );
}

.auction-market-copy {
    display: grid;

    gap: 5px;

    min-width: 0;
}

.auction-market-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 12px;
}

.auction-market-heading strong {
    overflow: hidden;

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

    font-size: 0.76rem;
}

.auction-market-heading span {
    flex: 0 0 auto;

    color: #F7CDA9;

    font-size: 0.70rem;
    font-weight: 900;
}

.auction-market-meta {
    color:
        rgba(
            246,
            231,
            221,
            0.57
        );

    font-size: 0.55rem;
}

.auction-roll-chips {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;
}

.auction-roll-chips span,
.auction-own-pill,
.auction-no-match {
    padding: 3px 6px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.12
        );

    border-radius: 999px;

    background:
        rgba(
            246,
            231,
            221,
            0.05
        );

    color:
        rgba(
            246,
            231,
            221,
            0.70
        );

    font-size: 0.49rem;
}

.auction-own-pill {
    border-color:
        rgba(
            184,
            167,
            232,
            0.34
        );

    color: #DCCEF8;
}

.auction-no-match {
    border-style: dashed;
}

.auction-market-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 2px;
}

.auction-inline-quantity {
    width: 76px;
}

.auction-fill-item-select {
    flex:
        1 1 230px;

    min-width: 0;
}

.auction-primary-button,
.auction-secondary-button {
    min-height: 33px;

    padding: 6px 10px;

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

    cursor: pointer;
}

.auction-primary-button {
    border-color:
        rgba(
            247,
            205,
            169,
            0.38
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                247,
                205,
                169,
                0.18
            ),
            rgba(
                184,
                167,
                232,
                0.11
            )
        );

    color: #FBE0C5;
}

.auction-primary-button:hover:not(:disabled),
.auction-secondary-button:hover:not(:disabled),
.auction-tab:hover {
    border-color:
        rgba(
            247,
            205,
            169,
            0.52
        );

    background:
        rgba(
            247,
            205,
            169,
            0.13
        );
}

.auction-primary-button:disabled,
.auction-secondary-button:disabled,
.auction-house-window select:disabled,
.auction-house-window input:disabled {
    cursor: not-allowed;
    opacity: 0.44;
}

.auction-pagination {
    display: grid;
    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    gap: 8px;
    align-items: center;

    color:
        rgba(
            246,
            231,
            221,
            0.62
        );

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

.auction-empty {
    margin: 0;

    padding: 25px 14px;

    border:
        1px dashed
        rgba(
            246,
            231,
            221,
            0.15
        );

    border-radius: 11px;

    color:
        rgba(
            246,
            231,
            221,
            0.54
        );

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

.auction-empty.compact {
    padding: 13px;
}

.auction-form-view {
    grid-template-rows:
        auto auto auto auto;

    align-content: start;

    overflow-y: auto;
}

.auction-form-intro {
    max-width: 760px;
}

.auction-form-intro p {
    margin:
        5px 0 0;
}

.auction-form-grid {
    display: grid;
    grid-template-columns:
        minmax(
            260px,
            2fr
        )
        minmax(
            110px,
            0.65fr
        )
        minmax(
            150px,
            0.85fr
        );

    gap: 8px;
}

.auction-form-grid label {
    display: grid;

    gap: 4px;
}

.auction-price-preview {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap: 6px;

    padding: 10px;

    border:
        1px solid
        rgba(
            247,
            205,
            169,
            0.17
        );

    border-radius: 11px;

    background:
        rgba(
            20,
            18,
            35,
            0.30
        );
}

.auction-price-preview > * {
    min-width: 0;
}

.auction-price-preview strong,
.auction-price-preview span {
    display: flex;
    align-items: center;

    font-size: 0.55rem;
}

.auction-price-preview strong {
    color: #F7CDA9;
}

.auction-form-submit {
    justify-self: start;

    min-width: 190px;
}

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

    gap: 8px;
}

.auction-collection-card {
    display: grid;
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap: 4px 10px;
    align-items: center;

    padding: 10px;

    border:
        1px solid
        rgba(
            247,
            205,
            169,
            0.18
        );

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(
                247,
                205,
                169,
                0.09
            ),
            rgba(
                184,
                167,
                232,
                0.06
            )
        );
}

.auction-collection-card > span {
    color:
        rgba(
            246,
            231,
            221,
            0.56
        );

    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
}

.auction-collection-card > strong {
    grid-column: 1;

    font-size: 0.66rem;
}

.auction-collection-card > button {
    grid-column: 2;
    grid-row: 1 / span 2;
}

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

    gap: 12px;

    min-height: 0;

    overflow-y: auto;
}

.auction-my-columns > section {
    min-width: 0;
}

.auction-subheading {
    display: grid;

    gap: 2px;

    margin-bottom: 6px;
}

.auction-my-list {
    display: grid;

    gap: 6px;
}

.auction-my-row {
    display: grid;
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap: 8px;
    align-items: center;

    padding: 8px 9px;

    border:
        1px solid
        rgba(
            246,
            231,
            221,
            0.10
        );

    border-radius: 9px;

    background:
        rgba(
            20,
            18,
            35,
            0.28
        );
}

.auction-my-row > div {
    display: grid;

    gap: 2px;

    min-width: 0;
}

.auction-my-row strong {
    overflow: hidden;

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

    font-size: 0.62rem;
}

.auction-my-row small {
    color:
        rgba(
            246,
            231,
            221,
            0.54
        );

    font-size: 0.49rem;
}

.auction-house-status {
    min-height: 16px;

    margin: 0;

    color:
        rgba(
            246,
            231,
            221,
            0.59
        );

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

.auction-house-status[data-tone="error"] {
    color: #F0A4A4;
}

.auction-house-status[data-tone="success"] {
    color: #BFE8C5;
}

@media (max-width: 780px) {
    .auction-house-modal {
        padding: 7px;
    }

    .auction-house-window {
        width: 100%;
        max-height: 97vh;

        gap: 8px;

        padding: 11px;

        border-radius: 14px;
    }

    .auction-house-header {
        gap: 8px;
    }

    .auction-house-summary {
        font-size: 0.57rem;
    }

    .auction-house-wallet-strip {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .auction-house-rule-chip {
        grid-column: 1 / -1;
    }

    .auction-house-wallet-strip > div {
        padding: 7px;
    }

    .auction-house-tabs {
        grid-template-columns:
            repeat(
                5,
                minmax(
                    88px,
                    1fr
                )
            );

        overflow-x: auto;

        padding-bottom: 7px;
    }

    .auction-tab {
        white-space: nowrap;
    }

    .auction-view-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .auction-filter-control {
        min-width: 0;
        width: 100%;
    }

    .auction-market-card {
        grid-template-columns:
            52px
            minmax(
                0,
                1fr
            );

        padding: 8px;
    }

    .auction-item-icon {
        width: 52px;
        height: 52px;
    }

    .auction-market-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    .auction-form-grid {
        grid-template-columns: 1fr;
    }

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

    .auction-price-preview > :first-child {
        grid-column: 1 / -1;
    }

    .auction-collection-grid,
    .auction-my-columns {
        grid-template-columns: 1fr;
    }

    .auction-pagination {
        grid-template-columns:
            1fr 1fr;
    }

    .auction-pagination span {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .auction-market-actions {
        align-items: stretch;
    }

    .auction-fill-item-select {
        flex-basis: 100%;
    }
}

@media (max-width: 480px) {
    .auction-house-header h2 {
        font-size: 1.14rem;
    }

    .auction-house-header-actions {
        gap: 4px;
    }

    #auction-house-refresh {
        padding:
            5px 7px;
    }

    .auction-house-wallet-strip span {
        font-size: 0.44rem;
    }

    .auction-house-wallet-strip strong {
        font-size: 0.64rem;
    }

    .auction-market-meta {
        font-size: 0.49rem;
    }

    .auction-inline-quantity {
        width: 66px;
    }
}


/* ==============================
   AUCTION HOUSE — POLISH PASS
   Scenic shell, responsive forms,
   compact Browse market cards.
   ============================== */

.auction-house-window {
    background:
        linear-gradient(
            180deg,
            rgba(23, 25, 46, 0.74) 0%,
            rgba(36, 38, 63, 0.68) 100%
        ),
        url("../assets/images/login-screen.png")
        center center / cover no-repeat;
}

.auction-house-window::before {
    background:
        radial-gradient(
            circle at 82% 4%,
            rgba(247, 205, 169, 0.08),
            transparent 35%
        );
}

.auction-house-tabs,
.auction-house-wallet-strip > div,
.auction-market-card,
.auction-price-preview,
.auction-collection-card,
.auction-my-row {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.auction-house-tabs {
    background: rgba(20, 18, 35, 0.22);
}

.auction-house-wallet-strip > div {
    background: rgba(20, 18, 35, 0.28);
}

.auction-market-card {
    background:
        linear-gradient(
            110deg,
            rgba(20, 18, 35, 0.34),
            rgba(72, 66, 103, 0.13)
        );
}

.auction-market-card.is-own {
    background:
        linear-gradient(
            110deg,
            rgba(184, 167, 232, 0.13),
            rgba(20, 18, 35, 0.30)
        );
}

.auction-price-preview,
.auction-my-row {
    background: rgba(20, 18, 35, 0.24);
}

.auction-collection-card {
    background:
        linear-gradient(
            135deg,
            rgba(247, 205, 169, 0.08),
            rgba(184, 167, 232, 0.05)
        );
}

.auction-house-window select,
.auction-house-window input {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

.auction-form-grid {
    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(120px, 0.62fr)
        minmax(140px, 0.78fr);

    gap: 10px;
}

.auction-form-grid label {
    min-width: 0;
}

.auction-price-preview {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(145px, 1fr)
        );

    gap: 7px;
}

.auction-price-preview > * {
    min-width: 0;

    overflow-wrap: anywhere;
}

.auction-market-actions {
    min-width: 0;
}

.auction-market-actions > * {
    min-width: 0;
}

.auction-inline-quantity {
    flex: 0 0 68px;

    width: 68px;
    min-width: 68px;
}


/* Browse is intentionally denser than Buy Orders.
   This is the high-volume market view. */
#auction-sell-listings {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(230px, 1fr)
        );

    gap: 8px;
}

#auction-sell-listings .auction-empty {
    grid-column: 1 / -1;
}

.auction-sell-card {
    position: relative;

    grid-template-columns:
        56px
        minmax(0, 1fr);

    align-items: start;

    min-height: 126px;

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

.auction-sell-card .auction-item-icon {
    width: 56px;
    height: 56px;

    border-radius: 9px;
}

.auction-sell-card .auction-market-copy {
    gap: 4px;

    padding-right: 66px;
}

.auction-sell-card .auction-market-heading {
    display: block;

    min-width: 0;
}

.auction-sell-card
.auction-market-heading strong {
    display: -webkit-box;

    overflow: hidden;

    white-space: normal;

    font-size: 0.68rem;
    line-height: 1.18;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.auction-sell-card .auction-market-meta {
    font-size: 0.49rem;
    line-height: 1.28;
}

.auction-sell-card .auction-roll-chips {
    gap: 3px;
}

.auction-sell-card
.auction-roll-chips span {
    padding: 2px 5px;

    font-size: 0.44rem;
}

.auction-price-corner,
.auction-quantity-corner {
    position: absolute;
    right: 8px;

    z-index: 2;

    max-width: 78px;

    overflow: hidden;

    padding: 3px 6px;

    border:
        1px solid
        rgba(246, 231, 221, 0.14);

    border-radius: 999px;

    background:
        rgba(20, 18, 35, 0.62);

    box-shadow:
        0 3px 10px
        rgba(11, 10, 24, 0.18);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    font-size: 0.47rem;
    font-weight: 900;
    line-height: 1.05;

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

.auction-price-corner {
    top: 8px;

    color: #F7CDA9;
}

.auction-quantity-corner {
    top: 31px;

    color: #DCCEF8;
}

.auction-sell-card
.auction-market-actions {
    position: absolute;
    right: 9px;
    bottom: 8px;
    left: 73px;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 5px;

    margin: 0;
}

.auction-sell-card
.auction-market-actions
.auction-primary-button {
    flex: 1 1 auto;

    min-width: 0;
}

.auction-sell-card
.auction-own-pill {
    overflow: hidden;

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


@media (max-width: 900px) {
    .auction-form-grid {
        grid-template-columns: 1fr;
    }

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


@media (max-width: 700px) {
    .auction-house-window {
        background:
            linear-gradient(
                180deg,
                rgba(23, 25, 46, 0.76) 0%,
                rgba(36, 38, 63, 0.70) 100%
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    #auction-sell-listings {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(205px, 1fr)
            );
    }
}


@media (max-width: 480px) {
    #auction-sell-listings {
        grid-template-columns: 1fr;
    }

    .auction-price-preview {
        grid-template-columns: 1fr;
    }

    .auction-sell-card {
        min-height: 122px;
    }
}


/* ==============================
   HEADER ACTION GRID
   Keep the activity / cast bar roomy:
   10 desktop actions = 5 per row.
   Currencies remain a separate block.
   ============================== */

@media (min-width: 901px) {
    .header-actions {
        display: grid;
        grid-template-columns:
            max-content
            repeat(
                6,
                minmax(78px, 1fr)
            );
        grid-template-rows:
            repeat(
                2,
                minmax(34px, auto)
            );
        align-items: stretch;
        justify-content: end;

        width:
            min(
                820px,
                68vw
            );

        column-gap: 5px;
        row-gap: 4px;
    }

    .header-currencies {
        grid-column: 1;
        grid-row: 1 / span 2;

        align-self: center;
        justify-self: end;
    }

    .header-actions
    > .header-action-button:not(.gardening-ready-button),
    .header-secondary-actions
    > .header-action-button {
        width: 100%;
        min-width: 0;
        min-height: 34px;

        justify-content: center;

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

        overflow: hidden;
    }

    .header-actions
    .header-action-text {
        display: block;

        min-width: 0;

        overflow: visible;

        font-size: 0.58rem;
        line-height: 1.02;

        text-align: center;
        white-space: normal;
        overflow-wrap: normal;
    }

    .header-actions
    .header-action-icon {
        flex: 0 0 auto;
    }

    /* Explicit permanent button order:
       Row 1 — Skills, Recipe Book, Quest Book, Pets, Apprentice
       Row 2 — Party, Guild, Leaderboard, Player, Settings. */
    #skills-button {
        grid-column: 2;
        grid-row: 1;
    }

    #recipe-book-button {
        grid-column: 3;
        grid-row: 1;
    }

    #quest-book-button {
        grid-column: 4;
        grid-row: 1;
    }

    #pets-button {
        grid-column: 5;
        grid-row: 1;
    }

    #apprentice-button {
        grid-column: 6;
        grid-row: 1;
    }

    #mobile-season-pass-open {
        grid-column: 7;
        grid-row: 1;
    }

    #party-button {
        grid-column: 2;
        grid-row: 2;
    }

    #guild-button {
        grid-column: 3;
        grid-row: 2;
    }

    #leaderboards-button {
        grid-column: 4;
        grid-row: 2;
    }

    #account-button {
        grid-column: 5;
        grid-row: 2;

        order: initial;
    }

    .header-secondary-actions
    #settings-button {
        grid-column: 6;
        grid-row: 2;

        order: initial;
    }

    .header-secondary-actions
    #game-shop-open,
    #game-shop-open.header-shop-button {
        grid-column: 7;
        grid-row: 2;

        order: initial;
    }

    /* Gardening is a conditional status action,
       not one of the ten permanent menu buttons. */
    .header-actions.gardening-ready-visible
    .header-currencies {
        grid-row: 1;

        align-self: end;
    }

    .header-actions.gardening-ready-visible
    .gardening-ready-button {
        grid-column: 1;
        grid-row: 2;

        width: auto;
        max-width: 100%;

        justify-self: end;
        align-self: start;
    }
}


@media (min-width: 901px) and (max-width: 1399px) {
    .header-actions {
        width:
            min(
                760px,
                66vw
            );

        grid-template-columns:
            max-content
            repeat(
                6,
                minmax(68px, 1fr)
            );
    }

    .header-actions
    > .header-action-button:not(.gardening-ready-button),
    .header-secondary-actions
    > .header-action-button {
        min-width: 0;
        min-height: 34px;

        padding: 4px 5px;
    }

    .header-actions
    .header-action-text {
        font-size: 0.53rem;
    }

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



/* ==============================
   WIDE ANDROID / COMPACT DESKTOP
   Google Play Games on PC can expose
   a desktop-shaped viewport inside the
   tablet CSS width tier. Keep the iPad
   portrait/tall-tablet treatment, but
   let wide landscape windows use the
   same compact header proportions as
   normal desktop and keep the world
   map itself at its native 3:2 shape.
   ============================== */

@media
    (min-width: 1101px)
    and (max-width: 1399px)
    and (min-aspect-ratio: 3 / 2) {

    .game-header {
        grid-template-columns:
            52px
            clamp(440px, 40vw, 520px)
            minmax(0, 1fr);
        grid-template-areas: none;

        min-height: 50px;

        column-gap: 12px;
        row-gap: 0;
        padding: 5px 12px;
    }

    .game-brand,
    .header-actions,
    .header-action-bar {
        grid-area: auto;
    }

    .game-brand {
        min-width: 0;

        gap: 0;
    }

    .game-brand h1 {
        display: none;
    }

    .header-actions {
        min-width: 0;
        width: 100%;

        column-gap: 5px;
        row-gap: 4px;
    }

    .header-actions
    .header-action-text {
        display: block;
    }

    .header-action-bar {
        width: 100%;
        max-width: none;

        justify-self: stretch;
    }

    /* Google Play Games on PC reports this mid-size CSS viewport even
       on a desktop monitor. Reserve a real desktop-like cast column first,
       then let the menu use the remaining width instead of squeezing the
       normal skill progress track down to a tablet-sized sliver. */
    .header-action-status {
        grid-template-columns:
            minmax(220px, 1fr)
            minmax(84px, 100px);
    }

    .header-action-feedback {
        width: 100px;
        max-width: 100px;
    }

    .header-action-progress-track {
        width: 100%;
        min-width: 0;
    }

    .map-viewport:not(.combat-mode) {
        width: 100%;
        max-width: 100%;
        height: auto;

        aspect-ratio: 3 / 2;
    }
}


/* ==============================
   COMBAT CAST TRACK STABILITY
   Keep every solo / pet / co-op cast
   track inside the shared HUD width.
   ============================== */

.combat-board-casts {
    min-width: 0;

    box-sizing: border-box;
}

.combat-board-casts
.combat-cast-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.combat-board-casts
.combat-cast-row > span {
    min-width: 0;

    overflow-wrap: anywhere;
}

.combat-board-casts
.combat-cast-track {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
    justify-self: stretch;
}


/* ==============================
   CO-OP COMBAT HUD POLISH
   Keep global boosts above combat,
   avoid return-button overlap, and
   float rewards beside the fight.
   ============================== */

/* The scenic top header intentionally sits above gameplay, but modal
   dialogs must sit above that header so their title/close controls
   never become trapped underneath it. */
body > [id$="-modal"],
#pantry-region-content {
    z-index: 15000;
}

.game-header {
    z-index: 1000;
}

.header-boost-menu {
    z-index: 1002;
}

.header-boost-dropdown {
    z-index: 1003;
}

.party-combat-return-button {
    right: 14px;
    top: 58px;
}

.party-combat-reward-panel {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 12;

    width: min(27%, 285px);
    margin: 0;
}

.party-combat-reward-items {
    justify-content: flex-start;
}

.party-combat-reward-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.party-combat-reward-item-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.party-combat-reward-item-chip b {
    font-size: 0.53rem;
}

@media (max-width: 980px) {
    .party-combat-reward-panel {
        right: 10px;
        bottom: 88px;

        width: min(34%, 245px);
    }
}

@media (max-width: 680px) {
    .game-header {
        z-index: 14000;
    }

    .header-boost-dropdown {
        z-index: 14002;
    }

    .party-combat-return-button {
        top: 48px;
        right: 8px;
    }

    .party-combat-reward-panel {
        right: 8px;
        bottom: 106px;
        left: 8px;

        width: auto;
        max-height: 112px;
        overflow-y: auto;

        padding: 6px 7px;
    }

    .party-combat-reward-heading small {
        display: none;
    }

    .party-combat-reward-items {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .party-combat-reward-items span {
        flex: 0 0 auto;
    }

    .party-combat-reward-item-chip img {
        width: 22px;
        height: 22px;
    }
}


/* ==============================
   CO-OP COMBAT SIDE DOCK + MOBILE PASS
   Keep supplies out of the centre HUD and
   preserve scene space on narrow screens.
   ============================== */

.party-combat-battle-side-actions {
    position: absolute;
    right: 12px;
    top: 39%;

    display: grid;
    justify-items: center;
    gap: 5px;

    width: 54px;

    z-index: 11;
}

.party-combat-battle-side-actions [hidden] {
    display: none !important;
}

.party-combat-battle-quick-heals {
    position: static;
    inset: auto;

    display: grid;
    justify-items: center;
    gap: 4px;

    width: 54px;
}

.party-combat-battle-quick-heals[hidden] {
    display: none !important;
}

.party-combat-quick-heal-cycle,
.party-combat-side-cycle {
    display: grid;
    place-items: center;

    width: 25px;
    height: 22px;
    min-height: 22px;

    padding: 0;

    border: 1px solid #F6E7DD3D;
    border-radius: 999px;

    background: #343558E8;
    color: #F6E7DD;

    font: inherit;
    font-size: 0.58rem;
    font-weight: 900;

    cursor: pointer;
}

.party-combat-quick-heal-preview,
.party-combat-side-button {
    display: grid;
    place-items: center;

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

    padding: 4px;

    border: 1px solid #F6E7DD3D;
    border-radius: 10px;

    background: #343558E8;
    color: #F6E7DD;

    box-shadow: 0 5px 14px #17192E45;
    backdrop-filter: blur(6px);
}

.party-combat-side-button {
    min-height: 36px;

    font: inherit;
    font-size: 0.48rem;
    font-weight: 850;
    line-height: 1.08;
    text-align: center;

    cursor: pointer;
}

.party-combat-side-button:disabled,
.party-combat-quick-heal-cycle:disabled,
.party-combat-side-cycle:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.party-combat-quick-heal-preview img,
.party-combat-quick-heal-preview > span {
    width: 29px;
    height: 29px;

    object-fit: contain;
}

.party-combat-quick-heal-preview small {
    margin-top: 1px;

    font-size: 0.40rem;
    line-height: 1;
    white-space: nowrap;
}

.party-combat-battle-pet-food {
    position: absolute !important;

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

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

/* The side dock owns supply actions now; centre HUD stays focused
   on participation / rest / abort. */
.party-combat-battle-actions {
    gap: 5px;
}

/* Desktop/tablet: leave physical room for roster + centre HUD + reward. */
@media (min-width: 681px) {
    .party-combat-battle-viewport
        .party-combat-battle-casts {
        width: min(36%, 455px);
    }

    .party-combat-battle-viewport
        .party-combat-battle-roster {
        width: min(25%, 285px);
    }

    .party-combat-battle-viewport
        .party-combat-reward-panel {
        right: 78px;
        width: min(22%, 245px);
    }
}

/* Phone layout: player/enemy cards stay at the top, party roster
   sits above a short centre HUD, and supplies live in a vertical
   dock on the right edge. */
@media (max-width: 680px) {
    .party-combat-battle-viewport {
        min-height: 560px;
    }

    .party-combat-battle-banner {
        top: 8px;

        max-width: calc(100% - 150px);

        padding: 4px 8px;
    }

    .party-combat-battle-banner span {
        font-size: 0.56rem;
    }

    .party-combat-battle-banner small {
        font-size: 0.41rem;
    }

    .party-combat-battle-top-actions {
        top: 8px;
        right: 7px;

        gap: 4px;
    }

    .party-combat-battle-top-actions .combat-view-toggle {
        min-height: 28px;
        padding: 4px 7px;

        font-size: 0.50rem;
    }

    .party-combat-battle-player,
    .party-combat-battle-enemy {
        top: 49px;

        width: calc(50% - 12px);
        min-width: 0;

        padding: 7px;
    }

    .party-combat-battle-player {
        left: 7px;
    }

    .party-combat-battle-enemy {
        right: 7px;
    }

    .party-combat-battle-player .combat-board-vital-heading,
    .party-combat-battle-enemy .combat-board-vital-heading,
    .party-combat-battle-resource,
    .party-combat-battle-presence {
        font-size: 0.45rem;
    }

    .party-combat-battle-player .combat-board-stats,
    .party-combat-battle-enemy .combat-board-stats {
        gap: 3px;
    }

    .party-combat-pet-stage {
        left: 4%;
        bottom: 31%;

        width: 38%;
        height: 41%;
    }

    .party-combat-enemy-stage,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-enemy-stage {
        right: 5%;
        bottom: 31%;

        width: 47%;
        height: 44%;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        left: 7px;
        bottom: 104px;

        width: calc(100% - 76px);
        max-height: 82px;

        gap: 3px;

        overflow-y: auto;
    }

    .party-combat-battle-member {
        padding: 4px 6px;

        gap: 5px;
    }

    .party-combat-battle-member strong {
        font-size: 0.50rem;
    }

    .party-combat-battle-member small,
    .party-combat-battle-member > span {
        font-size: 0.42rem;
    }

    .party-combat-member-pet-vital {
        margin-top: 1px;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        left: 7px;
        bottom: 7px;

        width: calc(100% - 76px);

        gap: 3px;
        padding: 6px 7px;

        border-radius: 10px;

        transform: none;
    }

    .party-combat-battle-casts .combat-cast-row,
    .party-combat-battle-viewport.party-pet-combat-active
        .combat-cast-row {
        grid-template-columns: 72px minmax(0,1fr);

        gap: 5px;

        font-size: 0.50rem;
    }

    .party-combat-battle-casts .combat-cast-track,
    .party-combat-battle-viewport.party-pet-combat-active
        .combat-cast-track {
        height: 5px;
    }

    .party-combat-battle-actions button {
        min-height: 24px;

        padding: 3px 6px;

        font-size: 0.48rem;
    }

    .party-combat-battle-status {
        font-size: 0.48rem;
        line-height: 1.2;
    }

    .party-combat-battle-last-event {
        min-height: 0;

        font-size: 0.43rem;
    }

    .party-combat-battle-side-actions {
        top: auto;
        right: 7px;
        bottom: 7px;

        width: 54px;
        gap: 4px;
    }

    .party-combat-quick-heal-preview,
    .party-combat-side-button {
        width: 50px;
    }

    .party-combat-reward-panel {
        top: 158px;
        right: 8px;
        bottom: auto;
        left: auto;

        width: min(55%, 225px);
        max-height: 88px;

        overflow-y: auto;

        padding: 5px 6px;
    }

    .party-combat-reward-heading {
        display: block;
    }

    .party-combat-reward-heading small {
        display: none;
    }

    .party-combat-reward-items {
        flex-wrap: nowrap;

        overflow-x: auto;
    }

    .party-combat-reward-items span {
        flex: 0 0 auto;
    }

    .party-combat-return-button {
        top: 42px;
        right: 7px;
    }
}


/* ==============================
   CO-OP MOBILE VIEWPORT FIT
   Keep the roster, Join/Pause controls and supply dock visible
   without increasing the combat scene beyond the phone viewport.
   ============================== */
@media (max-width: 680px) {
    .party-combat-battle-viewport {
        min-height: 560px;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        bottom: 14px;
    }

    .party-combat-battle-side-actions {
        bottom: 14px;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 118px;
    }

    .party-combat-pet-stage {
        bottom: 31%;
    }

    .party-combat-enemy-stage,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-enemy-stage {
        bottom: 31%;
    }

    .party-combat-battle-status {
        padding-bottom: 2px;
    }
}


/* ==============================
   CO-OP COMBAT RESPONSIVE TIERS
   Final launch overrides:
   small phone / phone / tablet / desktop.
   ============================== */

/* Phones: combat scene owns the parent map height.
   Never force the child taller than the clipped map viewport. */
@media (max-width: 680px) {
    .map-panel.combat-mode {
        height: clamp(500px, 68svh, 560px);
        aspect-ratio: auto;
    }

    .map-viewport.combat-mode {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .party-combat-battle-viewport {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        right: 68px;
        bottom: 96px;
        left: 7px;

        width: auto;
        max-height: 76px;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        right: 68px;
        bottom: 7px;
        left: 7px;

        width: auto;
        max-width: none;

        padding: 5px 6px;
        gap: 2px;
    }

    .party-combat-battle-side-actions {
        right: 7px;
        bottom: 7px;
    }

    .party-combat-battle-actions {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .party-combat-battle-actions button {
        min-width: 0;
        min-height: 22px;
        padding: 3px 5px;
    }

    .party-combat-battle-status {
        font-size: 0.44rem;
        line-height: 1.1;
    }

    .party-combat-battle-last-event {
        font-size: 0.40rem;
        line-height: 1.05;
    }

    .party-combat-pet-stage {
        bottom: 29%;
    }

    .party-combat-enemy-stage,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-enemy-stage {
        bottom: 29%;
    }
}

/* Small phones such as 360px Galaxy-class devices. */
@media (max-width: 374px) {
    .map-panel.combat-mode {
        height: clamp(480px, 66svh, 530px);
    }

    .party-combat-battle-banner {
        max-width: calc(100% - 136px);
        padding: 3px 6px;
    }

    .party-combat-battle-banner span {
        font-size: 0.52rem;
    }

    .party-combat-battle-banner small {
        font-size: 0.38rem;
    }

    .party-combat-battle-top-actions .combat-view-toggle {
        min-height: 25px;
        padding: 3px 6px;
        font-size: 0.46rem;
    }

    .party-combat-battle-player,
    .party-combat-battle-enemy {
        top: 46px;
        padding: 5px 6px;
    }

    .party-combat-battle-player .combat-board-vital-heading,
    .party-combat-battle-enemy .combat-board-vital-heading,
    .party-combat-battle-resource,
    .party-combat-battle-presence {
        font-size: 0.41rem;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 90px;
        max-height: 68px;
    }

    .party-combat-battle-member {
        padding: 3px 5px;
    }

    .party-combat-battle-member strong {
        font-size: 0.46rem;
    }

    .party-combat-battle-member small,
    .party-combat-battle-member > span {
        font-size: 0.38rem;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        padding: 4px 5px;
    }

    .party-combat-battle-casts .combat-cast-row,
    .party-combat-battle-viewport.party-pet-combat-active
        .combat-cast-row {
        grid-template-columns: 66px minmax(0,1fr);
        font-size: 0.45rem;
    }

    .party-combat-battle-side-actions {
        width: 50px;
    }

    .party-combat-battle-quick-heals {
        width: 50px;
    }

    .party-combat-quick-heal-preview,
    .party-combat-side-button {
        width: 46px;
    }
}

/* Portrait tablets and narrow desktop windows.
   Keep three non-overlapping bottom HUD zones. */
@media (min-width: 681px) and (max-width: 1100px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        left: 12px;
        bottom: 12px;

        width: 24%;
        max-height: 28%;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        left: 50%;
        bottom: 12px;

        width: 40%;
        max-width: 420px;

        transform: translateX(-50%);
    }

    .party-combat-battle-viewport
        .party-combat-reward-panel {
        right: 72px;
        bottom: 12px;

        width: 21%;
        max-width: 220px;
    }

    .party-combat-battle-side-actions {
        right: 12px;
        top: auto;
        bottom: 12px;
    }

    .party-combat-battle-member {
        padding: 5px 6px;
        gap: 5px;
    }

    .party-combat-battle-member strong {
        font-size: 0.52rem;
    }

    .party-combat-battle-member small,
    .party-combat-battle-member > span {
        font-size: 0.43rem;
    }
}


/* Landscape tablets (for example iPad Pro 13 at ~1366 x 1024).
   These are too wide for the portrait-tablet rules but too short
   for the full desktop HUD proportions. Keep each bottom HUD zone
   in its own lane. */
@media (min-width: 1101px) and (max-width: 1500px) and (max-height: 1100px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        left: 14px;
        bottom: 14px;

        width: 22%;
        max-height: 29%;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        left: 50%;
        bottom: 14px;

        width: 36%;
        max-width: 430px;

        transform: translateX(-50%);
    }

    .party-combat-battle-viewport
        .party-combat-reward-panel {
        right: 82px;
        bottom: 14px;

        width: 19%;
        max-width: 225px;
    }

    .party-combat-battle-side-actions {
        right: 14px;
        top: auto;
        bottom: 14px;
    }

    .party-combat-battle-member {
        padding: 5px 7px;
        gap: 6px;
    }

    .party-combat-battle-member strong {
        font-size: 0.54rem;
    }

    .party-combat-battle-member small,
    .party-combat-battle-member > span {
        font-size: 0.44rem;
    }
}


/* Final mobile co-op spacing: keep roster clear of cast/actions. */
@media (max-width: 680px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 126px;
    }

    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        bottom: 8px;
    }
}

@media (max-width: 374px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 116px;
    }
}


/* Tighten final mobile co-op bottom stack: roster should sit directly
   above the cast/actions card without covering the combat sprites. */
@media (max-width: 680px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 104px;
    }
}

@media (max-width: 374px) {
    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        bottom: 98px;
    }
}


/* ==============================
   FINAL MOBILE CO-OP BOTTOM HUD
   Cast/actions left, party/Pet vitals stacked right.
   ============================== */
@media (max-width: 680px) {
    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        left: 7px;
        right: 122px;
        bottom: 8px;

        width: auto;
        max-width: none;

        padding: 5px 6px;
        gap: 3px;

        transform: none;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        left: auto;
        right: 7px;
        bottom: 8px;

        width: 108px;
        max-height: none;

        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;

        overflow: visible;
    }

    .party-combat-battle-member {
        min-width: 0;
        min-height: 48px;

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

    .party-combat-battle-member > div:first-child {
        min-width: 0;
    }

    .party-combat-battle-member strong {
        display: block;

        max-width: 100%;

        overflow: hidden;

        font-size: 0.46rem;
        line-height: 1.05;

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

    .party-combat-battle-member small,
    .party-combat-battle-member > span,
    .party-combat-battle-pet-summary,
    .party-combat-member-pet-vital {
        max-width: 100%;

        overflow: hidden;

        font-size: 0.38rem;
        line-height: 1.05;

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

    .party-combat-member-pet-track {
        width: 100%;
    }

    .party-combat-battle-casts .combat-cast-row,
    .party-combat-battle-viewport.party-pet-combat-active
        .combat-cast-row {
        grid-template-columns: 66px minmax(0,1fr);

        gap: 4px;

        font-size: 0.45rem;
    }

    .party-combat-battle-actions {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .party-combat-battle-actions button {
        min-width: 0;
        min-height: 22px;

        padding: 3px 5px;

        font-size: 0.46rem;
    }

    .party-combat-battle-status {
        display: none;
    }

    .party-combat-pet-stage {
        left: 5%;
        bottom: 31%;

        width: 34%;
        height: 35%;
    }

    .party-combat-enemy-stage,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-enemy-stage {
        right: 6%;
        bottom: 31%;

        width: 42%;
        height: 39%;
    }

    .party-combat-battle-side-actions {
        right: 7px;
        bottom: 122px;
    }
}

@media (max-width: 374px) {
    .party-combat-battle-casts,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-casts {
        right: 110px;
    }

    .party-combat-battle-roster,
    .party-combat-battle-viewport.party-pet-combat-active
        .party-combat-battle-roster {
        width: 96px;
    }

    .party-combat-battle-member strong {
        font-size: 0.43rem;
    }

    .party-combat-battle-member small,
    .party-combat-battle-member > span,
    .party-combat-battle-pet-summary,
    .party-combat-member-pet-vital {
        font-size: 0.35rem;
    }

    .party-combat-battle-casts .combat-cast-row,
    .party-combat-battle-viewport.party-pet-combat-active
        .combat-cast-row {
        grid-template-columns: 58px minmax(0,1fr);

        font-size: 0.42rem;
    }

    .party-combat-battle-side-actions {
        bottom: 114px;
    }
}


/* ==============================
   SEASON PASS V1
   Player Profile modal
   ============================== */

#account-button {
    position: relative;
}

.season-pass-nav-alert {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border: 2px solid rgba(32, 20, 46, 0.94);
    border-radius: 999px;
    background: #ffb347;
    color: #2d1737;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1rem;
    text-align: center;
    box-shadow: 0 0 12px rgba(255, 179, 71, 0.5);
}

.account-season-pass-button {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0.8rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 183, 84, 0.42);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(83, 41, 99, 0.92),
            rgba(48, 28, 71, 0.94)
        );
    color: #fff4df;
    text-align: left;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px rgba(23, 13, 35, 0.2);
}

.account-season-pass-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 193, 105, 0.75);
}

.account-season-pass-button:disabled {
    cursor: default;
    opacity: 0.72;
}

.account-season-pass-icon {
    font-size: 1.4rem;
}

.account-season-pass-copy {
    display: grid;
    gap: 0.16rem;
}

.account-season-pass-copy strong {
    font-size: 0.9rem;
}

.account-season-pass-copy small {
    color: rgba(255, 244, 223, 0.74);
    font-size: 0.7rem;
}

.account-season-pass-arrow {
    font-size: 1.1rem;
    opacity: 0.7;
}

.season-pass-modal {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 1rem;
}

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

.season-pass-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(10, 7, 18, 0.72);
    backdrop-filter: blur(6px);
}

.season-pass-window {
    position: relative;
    width: min(1120px, calc(100vw - 2rem));
    max-height: min(92vh, 980px);
    overflow: auto;
    border: 1px solid rgba(255, 190, 96, 0.4);
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(35, 21, 51, 0.985),
            rgba(21, 15, 34, 0.985)
        );
    color: #f8f0ff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.season-pass-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(34, 22, 49, 0.97);
    backdrop-filter: blur(10px);
}

.season-pass-header h2 {
    margin: 0.1rem 0 0;
}

.season-pass-empty,
.season-pass-current {
    padding: 1rem;
}

.season-pass-empty {
    text-align: center;
}

.season-pass-empty > strong {
    display: block;
    margin-top: 1rem;
    font-size: 1.05rem;
}

.season-pass-empty p {
    max-width: 620px;
    margin: 0.55rem auto 1rem;
    color: rgba(244, 235, 252, 0.76);
    line-height: 1.5;
}

.season-pass-banner {
    display: block;
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255, 193, 105, 0.26);
    margin-bottom: 1rem;
}

.season-pass-summary-card,
.season-pass-section,
.season-pass-previous-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.season-pass-summary-card,
.season-pass-section {
    padding: 1rem;
    margin-bottom: 1rem;
}

.season-pass-summary-heading,
.season-pass-level-row,
.season-pass-section-heading,
.season-pass-week-heading,
.season-pass-login-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.season-pass-summary-heading h3,
.season-pass-section-heading h3 {
    margin: 0.1rem 0 0;
}

#season-pass-timer {
    color: #ffc97d;
    font-size: 0.78rem;
}

.season-pass-level-row {
    margin-top: 0.8rem;
    font-size: 0.8rem;
}

.season-pass-level-row span {
    color: rgba(244, 235, 252, 0.72);
}

.season-pass-xp-track {
    height: 9px;
    margin-top: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.season-pass-xp-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #ff9f43,
        #ffd166
    );
    transition: width 180ms ease;
}

.season-pass-premium-card {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.9rem;
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(142, 91, 189, 0.12);
    border: 1px solid rgba(185, 133, 229, 0.22);
}

.season-pass-premium-card strong[data-tone="active"] {
    color: #d8ffb5;
}

.season-pass-premium-card strong[data-tone="locked"] {
    color: #ffd9a1;
}

.season-pass-premium-card span,
.season-pass-premium-card small {
    color: rgba(244, 235, 252, 0.72);
    line-height: 1.4;
}

.season-pass-login-card {
    margin-top: 0.8rem;
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(255, 176, 71, 0.08);
    border: 1px solid rgba(255, 176, 71, 0.18);
}

.season-pass-login-card > div {
    display: grid;
    gap: 0.18rem;
}

.season-pass-login-card span {
    color: rgba(244, 235, 252, 0.72);
    font-size: 0.72rem;
}

.season-pass-secondary-button,
.season-pass-claim-all,
.season-pass-claim-button {
    border: 1px solid rgba(255, 193, 105, 0.38);
    border-radius: 10px;
    background: rgba(255, 163, 69, 0.14);
    color: #ffe5be;
    font-weight: 700;
    cursor: pointer;
}

.season-pass-secondary-button,
.season-pass-claim-all {
    padding: 0.55rem 0.8rem;
}

.season-pass-claim-button {
    width: 100%;
    padding: 0.45rem 0.6rem;
}

.season-pass-secondary-button:disabled,
.season-pass-claim-all:disabled,
.season-pass-claim-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.season-pass-rewards {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.season-pass-reward-card {
    display: grid;
    grid-template-rows: auto 76px auto auto auto;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.season-pass-reward-card[data-track="premium"] {
    border-color: rgba(185, 133, 229, 0.28);
    background: rgba(134, 77, 180, 0.08);
}

.season-pass-reward-card[data-state="claimable"] {
    border-color: rgba(255, 193, 105, 0.58);
    box-shadow: 0 0 0 1px rgba(255, 171, 73, 0.1);
}

.season-pass-reward-card[data-state="claimed"],
.season-pass-reward-card[data-state="locked"] {
    opacity: 0.68;
}

.season-pass-reward-top {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.65rem;
}

.season-pass-reward-level {
    color: #ffc46f;
    font-weight: 800;
}

.season-pass-reward-track {
    color: rgba(244, 235, 252, 0.7);
}

.season-pass-reward-image {
    display: grid;
    place-items: center;
    min-height: 76px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(8, 6, 14, 0.28);
    font-size: 1.8rem;
}

.season-pass-reward-image img {
    width: 100%;
    height: 76px;
    object-fit: contain;
}

.season-pass-reward-card > strong {
    font-size: 0.75rem;
}

.season-pass-reward-card > small {
    color: rgba(244, 235, 252, 0.68);
    font-size: 0.64rem;
}

.season-pass-task-note {
    margin: 0.35rem 0 0.8rem;
    color: rgba(244, 235, 252, 0.68);
    font-size: 0.72rem;
}

.season-pass-tasks {
    display: grid;
    gap: 0.75rem;
}

.season-pass-week {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.season-pass-week-heading span {
    color: #ffc46f;
    font-size: 0.66rem;
}

.season-pass-task-card {
    display: grid;
    gap: 0.22rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: rgba(9, 7, 15, 0.3);
}

.season-pass-task-card[data-state="complete"] {
    border-left: 3px solid #9edb76;
}

.season-pass-task-card[data-state="active"] {
    border-left: 3px solid #ffb65e;
}

.season-pass-task-card[data-state="locked"],
.season-pass-task-card[data-state="chainLocked"] {
    opacity: 0.58;
}

.season-pass-task-card strong {
    font-size: 0.75rem;
}

.season-pass-task-card span,
.season-pass-task-card small {
    color: rgba(244, 235, 252, 0.7);
    font-size: 0.66rem;
}

.season-pass-previous-card {
    display: grid;
    gap: 0.18rem;
    padding: 0.8rem;
}

.season-pass-previous-card span {
    color: rgba(244, 235, 252, 0.6);
    font-size: 0.68rem;
}

.season-pass-previous-card strong {
    font-size: 0.76rem;
}

.season-pass-status {
    margin: 0;
    padding: 0 1rem 1rem;
}

@media (max-width: 720px) {
    .season-pass-modal {
        padding: 0;
    }

    .season-pass-window {
        width: 100vw;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    .season-pass-summary-heading,
    .season-pass-level-row,
    .season-pass-section-heading,
    .season-pass-login-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .season-pass-claim-all,
    .season-pass-secondary-button {
        width: 100%;
    }

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


/* ==============================
   PROFILE COSMETICS V1
   Account-owned Season cosmetics
   ============================== */

.account-profile-card {
    position: relative;
    overflow: hidden;
}

.account-profile-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 3;
}

.account-profile-card > *:not(.account-profile-frame) {
    position: relative;
    z-index: 4;
}

.account-profile-cosmetics {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-profile-cosmetics-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.account-profile-cosmetics-heading > div {
    display: grid;
    gap: 0.1rem;
}

.account-profile-badge {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}

.account-profile-cosmetic-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.account-profile-cosmetic-grid label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.account-profile-cosmetic-grid label > span {
    color: rgba(244, 235, 252, 0.74);
    font-size: 0.68rem;
}

.account-profile-cosmetic-grid select {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(13, 10, 20, 0.64);
    color: #f5edfb;
}

.account-profile-cosmetic-hint {
    color: rgba(244, 235, 252, 0.62);
    line-height: 1.4;
}

#account-character-name .profile-name-core[data-name-appearance="spookyOrangeGlowName"] {
    color: #ff9b3d;
    text-shadow:
        0 0 7px rgba(255, 128, 32, 0.9),
        0 0 14px rgba(255, 97, 0, 0.55);
}

#account-profile-selected-title[data-title-appearance="spookyOrangeGlowTitle"],
#account-character-name .profile-title-prefix[data-title-appearance="spookyOrangeGlowTitle"] {
    color: #ff9b3d;
    text-shadow:
        0 0 7px rgba(255, 128, 32, 0.88),
        0 0 13px rgba(255, 92, 0, 0.5);
}

@keyframes spookySeasonNamePulse {
    0%,
    100% {
        text-shadow:
            0 0 6px rgba(255, 132, 44, 0.76),
            0 0 12px rgba(255, 86, 0, 0.34);
        transform: translateY(0);
    }

    50% {
        text-shadow:
            0 0 10px rgba(255, 171, 73, 1),
            0 0 20px rgba(255, 86, 0, 0.65);
        transform: translateY(-1px);
    }
}

#account-character-name .profile-name-core[data-name-effect="spookyAnimatedName"] {
    display: inline-block;
    animation:
        spookySeasonNamePulse
        1.8s ease-in-out
        infinite;
}

@media (prefers-reduced-motion: reduce) {
    #account-character-name .profile-name-core[data-name-effect="spookyAnimatedName"] {
        animation: none;
    }
}

@media (max-width: 720px) {
    .account-profile-cosmetic-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   TROPHY CABINET V1
   Account-owned Season trophies
   ============================== */

.account-trophy-cabinet {
    display: grid;
    gap: 0.7rem;
    margin: 0.8rem 0;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.account-trophy-cabinet-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.account-trophy-cabinet-heading h4 {
    margin: 0.08rem 0 0;
}

.account-trophy-cabinet-heading > strong {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 181, 78, 0.12);
    color: #ffc46f;
}

.account-trophy-cabinet-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.65rem;
}

.account-trophy-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(12, 9, 18, 0.34);
}

.account-trophy-card[data-tier="bronze"] {
    border-color: rgba(205, 127, 50, 0.38);
}

.account-trophy-card[data-tier="silver"] {
    border-color: rgba(200, 210, 220, 0.4);
}

.account-trophy-card[data-tier="gold"] {
    border-color: rgba(255, 199, 73, 0.52);
    box-shadow: 0 0 18px rgba(255, 183, 62, 0.08);
}

.account-trophy-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.account-trophy-card > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.account-trophy-card small,
.account-trophy-card span {
    color: rgba(244, 235, 252, 0.68);
    font-size: 0.67rem;
}

.account-trophy-card strong {
    font-size: 0.8rem;
}

.account-trophy-cabinet-empty {
    margin: 0;
    color: rgba(244, 235, 252, 0.62);
    font-size: 0.72rem;
}


/* ==============================
   SEASON HISTORY V1
   Read-only account archive
   ============================== */

.season-pass-history-section {
    margin: 0 1rem 1rem;
}

.season-pass-history {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.season-pass-history-card {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 0.8rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(9, 7, 15, 0.32);
}

.season-pass-history-card[data-complete="true"] {
    border-color: rgba(255, 197, 91, 0.44);
    box-shadow: 0 0 18px rgba(255, 177, 67, 0.07);
}

.season-pass-history-banner {
    min-height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    font-size: 2rem;
}

.season-pass-history-banner img {
    width: 100%;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
}

.season-pass-history-copy {
    display: grid;
    align-content: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem 0.75rem 0;
    min-width: 0;
}

.season-pass-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.season-pass-history-heading strong {
    font-size: 0.85rem;
}

.season-pass-history-heading span {
    color: #ffc46f;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.season-pass-history-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.season-pass-history-stats span {
    padding: 0.22rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(244, 235, 252, 0.72);
    font-size: 0.64rem;
}

@media (max-width: 720px) {
    .season-pass-history-card {
        grid-template-columns: 1fr;
    }

    .season-pass-history-copy {
        padding: 0 0.75rem 0.75rem;
    }

    .season-pass-history-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
}


/* ==============================
   SEASON QA HARNESS
   Allowlisted closed-alpha testers
   ============================== */

.season-pass-qa-panel {
    margin: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(116, 214, 187, 0.34);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(26, 70, 67, 0.26),
            rgba(46, 36, 69, 0.36)
        );
}

.season-pass-qa-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.season-pass-qa-heading h3 {
    margin: 0.08rem 0 0;
}

#season-pass-qa-state {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
}

#season-pass-qa-state[data-tone="active"] {
    background: rgba(116, 214, 187, 0.15);
    color: #b9f3df;
}

#season-pass-qa-state[data-tone="locked"] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(244, 235, 252, 0.68);
}

.season-pass-qa-warning {
    margin: 0.55rem 0 0.8rem;
    color: rgba(244, 235, 252, 0.72);
    font-size: 0.69rem;
    line-height: 1.45;
}

.season-pass-qa-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.season-pass-qa-grid > div {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem;
    border-radius: 10px;
    background: rgba(8, 12, 18, 0.2);
}

.season-pass-qa-grid > div > span {
    color: rgba(244, 235, 252, 0.68);
    font-size: 0.65rem;
    font-weight: 700;
}

.season-pass-qa-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.season-pass-qa-panel button {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(116, 214, 187, 0.28);
    border-radius: 9px;
    background: rgba(116, 214, 187, 0.08);
    color: #e7fff7;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
}

.season-pass-qa-panel button:hover:not(:disabled),
.season-pass-qa-panel button.active {
    border-color: rgba(116, 214, 187, 0.7);
    background: rgba(116, 214, 187, 0.19);
}

.season-pass-qa-panel button:disabled {
    opacity: 0.45;
    cursor: default;
}

.season-pass-qa-reset {
    margin-top: 0.7rem;
}

.season-pass-qa-panel > small {
    display: block;
    margin-top: 0.45rem;
    color: rgba(244, 235, 252, 0.58);
    line-height: 1.4;
}

@media (max-width: 720px) {
    .season-pass-qa-grid {
        grid-template-columns: 1fr;
    }

    .season-pass-qa-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==============================
   SEASON 1 LAUNCH POLISH
   ============================== */

.season-pass-launch-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0.7rem 0;
}

.season-pass-launch-facts span {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(244, 235, 252, 0.72);
    font-size: 0.64rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    .season-pass-launch-facts {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .season-pass-launch-facts span {
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .season-pass-launch-facts {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   PLAYER PROFILE V2
   Portraits, banners, trophies,
   public equipment + chat badge.
   ============================== */

.account-profile-banner-preview {
    position: relative;
    min-height: 74px;
    overflow: hidden;
    border: 1px solid rgba(158,98,149,0.28);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            rgba(67,51,86,0.7),
            rgba(36,38,63,0.85)
        ),
        url("../assets/images/login-screen.png")
        center / cover no-repeat;
}

.account-profile-banner-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-profile-portrait-editor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-profile-portrait-shell,
.player-social-portrait-shell {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
}

.account-profile-portrait-shell {
    width: 108px;
    height: 108px;
}

.account-profile-portrait,
.account-profile-portrait-fallback,
.player-social-portrait,
.player-social-portrait-fallback {
    position: absolute;
    inset: 9%;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    object-fit: cover;
}

.account-profile-portrait[hidden],
.account-profile-portrait-fallback[hidden],
.player-social-portrait[hidden],
.player-social-portrait-fallback[hidden] {
    display: none !important;
}

.account-profile-portrait-fallback,
.player-social-portrait-fallback {
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(247,205,169,0.19),
            rgba(52,53,88,0.92)
        );
    border: 1px solid rgba(246,231,221,0.28);
}

.account-profile-portrait-fallback {
    font-size: 2rem;
}

.account-profile-frame,
.player-social-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.account-profile-portrait-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.account-profile-portrait-actions .account-secondary-button {
    width: auto;
    margin: 0;
}

.account-profile-upload {
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}


.account-profile-portrait-input {
    position: fixed;
    left: -10000px;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.account-profile-portrait-actions small {
    flex-basis: 100%;
    color: rgba(246,231,221,0.62);
    font-size: 0.62rem;
}

.account-trophy-fallback {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    font-size: 2rem;
}

.account-trophy-mastery-progress {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    background: rgba(255,255,255,0.035);
    color: rgba(244,235,252,0.7);
    font-size: 0.68rem;
}

.account-trophy-mastery-progress strong {
    color: #ffc46f;
}

.account-trophy-showcase-controls {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 0.55rem;
    padding-top: 0.2rem;
}

.account-trophy-showcase-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(244,235,252,0.64);
    font-size: 0.66rem;
}

.account-trophy-showcase-controls label {
    display: grid;
    gap: 0.28rem;
    color: rgba(244,235,252,0.72);
    font-size: 0.64rem;
}

.account-trophy-showcase-controls select {
    min-width: 0;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid rgba(158,98,149,0.34);
    border-radius: 9px;
    background: rgba(36,38,63,0.82);
    color: #F6E7DD;
    font: inherit;
    font-size: 0.65rem;
}

.global-chat-profile-badge {
    width: 17px;
    height: 17px;
    object-fit: contain;
    align-self: center;
    flex: 0 0 17px;
}

.player-social-window {
    width: min(1080px, 96vw);
    max-height: min(920px, 94vh);
    overflow: auto;
}

.player-social-banner {
    min-height: 178px;
    align-items: flex-start;
    padding: 18px 20px;
    background:
        linear-gradient(
            rgba(23,25,46,0.35),
            rgba(23,25,46,0.84)
        ),
        url("../assets/images/login-screen.png")
        center / cover no-repeat;
    background-size: cover;
    background-position: center;
}

.player-social-identity {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

.player-social-portrait-shell {
    width: 126px;
    height: 126px;
}

.player-social-portrait-fallback {
    font-size: 2.5rem;
}

.player-social-identity-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.player-social-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.player-social-name-row h2 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-social-badge {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 30px;
}


.player-social-online-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.player-social-online-indicator[hidden] {
    display: none !important;
}

.player-social-online-dot {
    width: 10px;
    height: 10px;

    border: 2px solid
        rgba(25, 24, 45, 0.94);
    border-radius: 50%;

    background: #58d879;

    box-shadow:
        0 0 0 2px
            rgba(88, 216, 121, 0.18),
        0 0 8px
            rgba(88, 216, 121, 0.66);
}

.player-social-guild {
    margin-top: 5px;
    color: rgba(246,231,221,0.84);
    font-size: 0.72rem;
}

#player-social-title {
    color: #F7CDA9;
    font-size: 0.7rem;
}

.player-social-content {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    align-items: start;
    gap: 13px;
    padding: 16px 18px 18px;
}

.player-social-stats,
.player-social-trophies + .player-social-empty,
.player-social-content > .player-social-section:first-of-type,
.player-social-status,
.player-social-actions {
    grid-column: 1 / -1;
}

.player-social-stats {
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}

.player-social-stats span {
    font-size: 0.62rem;
}

.player-social-stats strong {
    font-size: 0.9rem;
}

.player-social-section {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(158,98,149,0.24);
    border-radius: 12px;
    background: rgba(36,38,63,0.35);
}

.player-social-section-heading h3,
.player-social-section-heading p {
    margin: 0;
}

.player-social-trophies {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 8px;
}

.player-social-trophy {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px;
    min-width: 0;
    border: 1px solid rgba(247,205,169,0.17);
    border-radius: 10px;
    background: rgba(23,25,46,0.42);
}

.player-social-trophy img,
.player-social-trophy-fallback {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.player-social-trophy-fallback {
    display: grid;
    place-items: center;
    font-size: 1.7rem;
}

.player-social-trophy > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.player-social-trophy strong {
    font-size: 0.68rem;
}

.player-social-trophy small {
    color: rgba(246,231,221,0.56);
    font-size: 0.55rem;
}

.player-social-item-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill,minmax(145px,1fr));
    gap: 7px;
}

.player-social-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(158,98,149,0.2);
    border-radius: 9px;
    background: rgba(23,25,46,0.35);
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

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

.player-social-item:hover,
.player-social-item:focus-visible {
    border-color: rgba(247,205,169,0.55);
    background: rgba(158,98,149,0.16);
    outline: none;
    transform: translateY(-1px);
}

.player-social-item img,
.player-social-item-fallback {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.player-social-item-fallback {
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

.player-social-item > div:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.player-social-item small {
    color: rgba(246,231,221,0.5);
    font-size: 0.5rem;
}

.player-social-item strong {
    overflow: hidden;
    color: #F6E7DD;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-social-item span {
    color: #F7CDA9;
    font-size: 0.52rem;
}

.player-social-empty {
    margin: 0;
    color: rgba(246,231,221,0.52);
    font-size: 0.62rem;
}


.player-social-item-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 17000;

    display: grid;
    place-items: center;

    padding: 16px;
}

.player-social-item-detail-modal[hidden] {
    display: none !important;
}

.player-social-item-detail-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: rgba(23,25,46,0.78);
    backdrop-filter: blur(5px);
}

.player-social-item-detail-window {
    position: relative;
    z-index: 1;

    width: min(520px,96vw);
    max-height: min(760px,92dvh);

    overflow-y: auto;

    border: 1px solid rgba(158,98,149,0.55);
    border-radius: 16px;

    background:
        linear-gradient(
            160deg,
            rgba(52,53,88,0.98),
            rgba(36,38,63,0.99)
        );

    box-shadow: 0 18px 54px rgba(0,0,0,0.42);
}

.player-social-item-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;

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

    gap: 10px;
    padding: 12px 13px;

    border-bottom: 1px solid rgba(158,98,149,0.25);

    background: rgba(36,38,63,0.97);
}

.player-social-item-detail-header h2,
.player-social-item-detail-header p {
    margin: 0;
}

.player-social-item-detail-content {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);

    gap: 13px;
    padding: 14px;
}

.player-social-item-detail-media {
    display: grid;
    place-items: center;

    width: 100px;
    height: 100px;

    border: 1px solid rgba(158,98,149,0.24);
    border-radius: 12px;

    background: rgba(23,25,46,0.34);
}

.player-social-item-detail-media img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.player-social-item-detail-fallback {
    font-size: 2rem;
}

.player-social-item-detail-copy,
.player-social-item-detail-stats,
.player-social-item-detail-enchant {
    display: grid;
    gap: 7px;
}

.player-social-item-detail-summary,
.player-social-item-detail-empty {
    margin: 0;

    color: rgba(246,231,221,0.62);
    font-size: 0.58rem;
}

.player-social-item-stat-row {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    align-items: center;

    gap: 3px 8px;
    padding: 7px 8px;

    border: 1px solid rgba(158,98,149,0.18);
    border-radius: 8px;

    background: rgba(23,25,46,0.28);
}

.player-social-item-stat-row span {
    color: rgba(246,231,221,0.72);
    font-size: 0.57rem;
}

.player-social-item-stat-row strong {
    color: #F7CDA9;
    font-size: 0.64rem;
}

.player-social-item-stat-row small {
    grid-column: 1 / -1;

    color: rgba(246,231,221,0.48);
    font-size: 0.48rem;
}

.player-social-item-detail-enchant {
    margin-top: 3px;
    padding: 9px;

    border: 1px solid rgba(200,183,231,0.26);
    border-radius: 9px;

    background: rgba(96,73,143,0.12);
}

.player-social-item-detail-enchant strong {
    color: #DDD1F3;
    font-size: 0.64rem;
}

.player-social-item-detail-enchant span {
    color: rgba(246,231,221,0.70);
    font-size: 0.56rem;
}

@media (max-width: 520px) {
    .player-social-item-detail-content {
        grid-template-columns: 1fr;
    }

    .player-social-item-detail-media {
        width: 92px;
        height: 92px;
    }
}

#player-social-name .player-social-name-core[data-name-appearance="spookyOrangeGlowName"],
.global-chat-player-name .global-chat-name-core[data-name-appearance="spookyOrangeGlowName"] {
    color: #ff9b3d;
    text-shadow:
        0 0 7px rgba(255,128,32,0.9),
        0 0 14px rgba(255,97,0,0.55);
}

#player-social-title[data-title-appearance="spookyOrangeGlowTitle"],
#player-social-name .player-social-title-prefix[data-title-appearance="spookyOrangeGlowTitle"],
.global-chat-player-name .global-chat-title-prefix[data-title-appearance="spookyOrangeGlowTitle"],
.global-chat-player-title[data-title-appearance="spookyOrangeGlowTitle"] {
    color: #ff9b3d;
    text-shadow:
        0 0 7px rgba(255,128,32,0.88),
        0 0 13px rgba(255,92,0,0.5);
}

#player-social-name .player-social-name-core[data-name-effect="spookyAnimatedName"],
.global-chat-player-name .global-chat-name-core[data-name-effect="spookyAnimatedName"] {
    display: inline-block;
    animation:
        spookySeasonNamePulse
        1.8s ease-in-out
        infinite;
}

@media (prefers-reduced-motion: reduce) {
    #player-social-name .player-social-name-core[data-name-effect="spookyAnimatedName"],
    .global-chat-player-name .global-chat-name-core[data-name-effect="spookyAnimatedName"] {
        animation: none;
    }
}

@media (max-width: 720px) {
    .account-profile-portrait-editor {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-trophy-showcase-controls {
        grid-template-columns: 1fr;
    }

    .player-social-window {
        width: min(96vw, 620px);
        max-height: 94vh;
    }

    .player-social-content {
        grid-template-columns: 1fr;
    }

    .player-social-content > * {
        grid-column: 1;
    }

    .player-social-banner {
        min-height: 210px;
        padding: 14px;
    }

    .player-social-identity {
        align-items: flex-start;
    }

    .player-social-portrait-shell {
        width: 96px;
        height: 96px;
    }

    .player-social-trophies {
        grid-template-columns: 1fr;
    }

    .player-social-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .player-social-identity {
        flex-direction: column;
    }

    .player-social-banner {
        min-height: 270px;
    }

    .player-social-stats {
        grid-template-columns: 1fr;
    }

    .player-social-item-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==============================
   LIMITED SUPPORT TEST TOOLS
   Hidden for normal players.
   ============================== */

.support-test-tools {
    display: grid;
    gap: 10px;

    margin-top: 12px;
    padding: 11px;

    border: 1px solid rgba(247, 205, 169, 0.28);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(213, 154, 92, 0.10),
            rgba(96, 73, 143, 0.14)
        );
}

.support-test-tools[hidden],
.support-test-player-grant[hidden] {
    display: none !important;
}

.support-test-tools-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.support-test-tools-heading small {
    display: block;

    margin-top: 3px;

    color: rgba(246, 231, 221, 0.62);

    font-size: 0.52rem;
    line-height: 1.4;
}

#support-test-role {
    flex: 0 0 auto;

    padding: 3px 7px;

    border: 1px solid rgba(247, 205, 169, 0.34);
    border-radius: 999px;

    color: #F7CDA9;

    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.support-test-self-actions {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;
}

.support-test-self-actions button {
    margin: 0;
}

.support-test-player-grant {
    display: grid;

    gap: 6px;
    padding-top: 9px;

    border-top: 1px solid rgba(158, 98, 149, 0.22);
}

.support-test-player-grant > strong {
    font-size: 0.62rem;
}

.support-test-player-grant > small {
    color: rgba(246, 231, 221, 0.54);

    font-size: 0.48rem;
}

.support-test-player-grant-row {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        minmax(80px, 110px)
        auto;

    gap: 6px;
}

.support-test-player-grant-row input {
    min-width: 0;
    padding: 7px 8px;

    border: 1px solid rgba(158, 98, 149, 0.34);
    border-radius: 8px;

    outline: none;

    background: rgba(23, 25, 46, 0.42);
    color: #F6E7DD;

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

.support-test-player-grant-row input:focus {
    border-color: rgba(247, 205, 169, 0.62);
}

@media (max-width: 600px) {
    .support-test-self-actions,
    .support-test-player-grant-row {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   MOBILE SEASON + PLAYER MENUS
   ============================== */

.mobile-player-menu-wrap {
    display: contents;
}

.mobile-player-menu {
    display: none;
}

.mobile-season-pass-button {
    position: relative;

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

    gap: 4px;

    border-color: rgba(255, 183, 84, 0.42);

    background:
        linear-gradient(
            135deg,
            rgba(83, 41, 99, 0.36),
            rgba(48, 28, 71, 0.52)
        );

    color: #fff4df;
}

.mobile-season-pass-icon {
    font-size: 0.82rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .mobile-season-pass-button {
        order: 18;

        position: relative;

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

        flex: 0 0 auto;

        min-width: 58px;
        min-height: 28px;

        gap: 4px;
        padding: 5px 7px;

        border: 1px solid rgba(255, 183, 84, 0.42);
        border-radius: 9px;

        background:
            linear-gradient(
                135deg,
                rgba(83, 41, 99, 0.72),
                rgba(48, 28, 71, 0.82)
            );
        color: #fff4df;

        font-size: 0.50rem;
        font-weight: 900;
    }

    .mobile-season-pass-button:disabled {
        opacity: 0.48;
    }

    .mobile-season-pass-icon {
        font-size: 0.76rem;
        line-height: 1;
    }

    .mobile-player-menu-wrap {
        order: 20;

        position: relative;

        display: block;

        flex: 0 0 auto;
    }

    .mobile-player-menu-wrap #account-button {
        order: initial;

        min-width: 58px;
    }

    .mobile-player-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 520;

        display: grid;

        width: min(240px, calc(100vw - 18px));
        gap: 6px;
        padding: 8px;

        border: 1px solid rgba(158, 98, 149, 0.44);
        border-radius: 12px;

        background:
            linear-gradient(
                180deg,
                rgba(52, 53, 88, 0.98),
                rgba(36, 38, 63, 0.99)
            );

        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.46);
    }

    .mobile-player-menu[hidden] {
        display: none !important;
    }

    .mobile-player-menu button {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;

        gap: 8px;
        width: 100%;
        padding: 8px;

        border: 1px solid rgba(158, 98, 149, 0.26);
        border-radius: 9px;

        background: rgba(36, 38, 63, 0.52);
        color: #F6E7DD;

        text-align: left;
        font: inherit;

        cursor: pointer;
    }

    .mobile-player-menu button:hover {
        border-color: rgba(247, 205, 169, 0.58);
        background: rgba(180, 139, 149, 0.18);
    }

    .mobile-player-menu img {
        width: 28px;
        height: 28px;

        object-fit: contain;
    }

    .mobile-player-menu span {
        display: grid;

        min-width: 0;

        gap: 2px;
    }

    .mobile-player-menu strong {
        font-size: 0.60rem;
    }

    .mobile-player-menu small {
        color: rgba(246, 231, 221, 0.58);

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


/* ==============================
   SPOOKS SHOP NAVIGATION
   ============================== */

.game-shop-tabs {
    display: flex;

    gap: 6px;
    overflow-x: auto;

    padding: 2px 1px 8px;

    scrollbar-width: thin;
}

.game-shop-tabs button {
    flex: 0 0 auto;

    min-height: 32px;
    padding: 6px 10px;

    border: 1px solid rgba(158, 98, 149, 0.30);
    border-radius: 999px;

    background: rgba(36, 38, 63, 0.45);
    color: rgba(246, 231, 221, 0.72);

    font: inherit;
    font-size: 0.56rem;
    font-weight: 800;

    cursor: pointer;
}

.game-shop-tabs button:hover,
.game-shop-tabs button.selected {
    border-color: rgba(247, 205, 169, 0.58);

    background:
        linear-gradient(
            135deg,
            rgba(213, 154, 92, 0.16),
            rgba(96, 73, 143, 0.22)
        );

    color: #F6E7DD;
}

.game-shop-cosmetic-placeholder {
    display: grid;

    gap: 8px;
    min-height: 250px;
    padding: 18px;

    border: 1px solid rgba(158, 98, 149, 0.30);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(52, 53, 88, 0.54),
            rgba(36, 38, 63, 0.54)
        ),
        url("../assets/images/login-screen.png")
        center 62% / cover no-repeat;
}

.game-shop-cosmetic-placeholder[hidden] {
    display: none !important;
}

.game-shop-cosmetic-placeholder h3,
.game-shop-cosmetic-placeholder p {
    margin: 0;
}

.game-shop-cosmetic-placeholder h3 {
    font-size: 1.05rem;
}

.game-shop-cosmetic-placeholder > p:not(.panel-label) {
    max-width: 620px;

    color: rgba(246, 231, 221, 0.76);

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

.game-shop-placeholder-preview {
    align-self: end;

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

    gap: 10px;
    padding: 10px 12px;

    border: 1px solid rgba(247, 205, 169, 0.22);
    border-radius: 10px;

    background: rgba(23, 25, 46, 0.55);
}

.game-shop-placeholder-preview span,
.game-shop-placeholder-preview strong {
    font-size: 0.56rem;
}

.spectral-gold-inline-icon,
.spectral-gold-price img {
    display: inline-block;

    width: 18px;
    height: 18px;

    object-fit: contain;
    vertical-align: middle;
}

.spectral-gold-balance,
.spectral-gold-price {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}

.account-product-heading .spectral-gold-price {
    color: #E7968E;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .game-shop-window {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
    }

    .game-shop-header {
        padding: 12px;
    }

    .game-shop-summary {
        max-width: 260px;

        font-size: 0.56rem;
        line-height: 1.35;
    }

    .game-shop-content {
        padding: 10px;
    }

    .game-shop-tabs {
        margin: 0 -2px;
        padding-bottom: 9px;
    }

    .game-shop-tabs button {
        min-height: 34px;

        font-size: 0.58rem;
    }

    .game-shop-cosmetic-placeholder {
        min-height: 300px;

        padding: 15px;

        background:
            linear-gradient(
                145deg,
                rgba(52, 53, 88, 0.54),
                rgba(36, 38, 63, 0.58)
            ),
            url("../assets/images/login-screen-mobile.png")
            center top / cover no-repeat;
    }

    .game-shop-placeholder-preview {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==============================
   HEADER SHOP
   ============================== */

.header-shop-button .header-action-icon img {
    filter:
        drop-shadow(
            0 0 5px
            rgba(188, 145, 255, 0.38)
        );
}

@media (max-width: 600px) {
    #game-shop-open.header-shop-button {
        display: none;
    }
}


/* ==============================
   DEVELOPER TOOLS
   ============================== */

.settings-dev-card {
    border-color:
        rgba(180, 126, 224, 0.34);

    background:
        linear-gradient(
            135deg,
            rgba(91, 54, 122, 0.16),
            rgba(36, 38, 63, 0.52)
        );
}

.settings-dev-card[hidden] {
    display: none !important;
}

.dev-tools-modal {
    position: fixed;
    inset: 0;

    z-index: 15020;

    display: grid;
    place-items: center;

    padding: 16px;
}

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

.dev-tools-backdrop {
    position: absolute;
    inset: 0;

    border: 0;

    background:
        rgba(17, 12, 29, 0.78);

    backdrop-filter:
        blur(7px);
}

.dev-tools-window {
    position: relative;
    z-index: 1;

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

    width:
        min(
            980px,
            calc(100vw - 24px)
        );

    max-height:
        min(
            900px,
            calc(100dvh - 24px)
        );

    overflow: hidden;

    border:
        1px solid
        rgba(180, 126, 224, 0.40);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(43, 31, 63, 0.99),
            rgba(25, 24, 45, 0.99)
        );

    color: #F6E7DD;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.50);
}

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

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

    border-bottom:
        1px solid
        rgba(180, 126, 224, 0.20);
}

.dev-tools-header h2,
.dev-tools-header p {
    margin:
        0;
}

.dev-tools-header h2 {
    margin-top: 3px;

    font-size: 1.08rem;
}

.dev-tools-header > div > p:last-child {
    margin-top: 5px;

    color:
        rgba(246, 231, 221, 0.64);

    font-size: 0.60rem;
    line-height: 1.4;
}

.dev-tools-header code {
    color: #F7CDA9;
}

.dev-tools-content {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
    padding: 12px;

    overflow-y: auto;
}

.dev-tools-card {
    display: grid;

    align-content: start;

    gap: 8px;
    padding: 11px;

    border:
        1px solid
        rgba(158, 98, 149, 0.28);

    border-radius: 13px;

    background:
        rgba(52, 53, 88, 0.42);
}

.dev-tools-card h3,
.dev-tools-card p {
    margin: 0;
}

.dev-tools-card h3 {
    margin-top: 2px;

    font-size: 0.76rem;
}

.dev-tools-card > p {
    color:
        rgba(246, 231, 221, 0.64);

    font-size: 0.56rem;
    line-height: 1.4;
}

.dev-tools-button-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;
}

.dev-tools-button-grid button {
    min-height: 34px;
    padding: 7px 8px;

    border:
        1px solid
        rgba(158, 98, 149, 0.36);

    border-radius: 9px;

    background:
        rgba(36, 38, 63, 0.70);

    color: #F6E7DD;

    font: inherit;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;
}

.dev-tools-button-grid button:hover:not(:disabled),
.dev-tools-button-grid button.selected {
    border-color:
        rgba(247, 205, 169, 0.66);

    background:
        rgba(180, 139, 149, 0.20);
}

.dev-tools-button-grid button:disabled {
    opacity: 0.46;
    cursor: wait;
}


.dev-premium-gift-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.dev-premium-gift-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.dev-premium-gift-options button {
    min-width: 0;
    width: 100%;
}

.dev-premium-gift-row input,
.dev-premium-gift-row button,
.dev-online-players-toggle,
.dev-online-player {
    min-height: 34px;
    padding: 7px 8px;

    border:
        1px solid
        rgba(158, 98, 149, 0.36);
    border-radius: 9px;

    background:
        rgba(36, 38, 63, 0.70);
    color: #F6E7DD;

    font: inherit;
    font-size: 0.56rem;
    font-weight: 800;
}

.dev-premium-gift-row input {
    min-width: 0;
    outline: none;
}

.dev-premium-gift-row input:focus {
    border-color:
        rgba(247, 205, 169, 0.72);
    box-shadow:
        0 0 0 2px
        rgba(247, 205, 169, 0.10);
}

.dev-premium-gift-row button,
.dev-online-players-toggle,
.dev-online-player {
    cursor: pointer;
}

.dev-premium-gift-row button:hover:not(:disabled),
.dev-online-players-toggle:hover,
.dev-online-player:hover {
    border-color:
        rgba(247, 205, 169, 0.66);
    background:
        rgba(180, 139, 149, 0.20);
}

.dev-premium-gift-row button:disabled {
    opacity: 0.46;
    cursor: wait;
}

.dev-tools-note {
    color:
        rgba(246, 231, 221, 0.58);
    font-size: 0.50rem;
    line-height: 1.4;
}


.dev-support-rank-qa {
    display: grid;
    gap: 6px;
    padding: 8px;

    border:
        1px solid
        rgba(181, 140, 255, 0.24);
    border-radius: 10px;

    background:
        rgba(23, 25, 46, 0.52);
}

.dev-support-rank-stepper {
    display: grid;
    grid-template-columns:
        minmax(34px, auto)
        minmax(82px, 1fr)
        minmax(34px, auto)
        minmax(112px, auto);
    gap: 6px;
    align-items: stretch;
}

.dev-support-rank-stepper button,
.dev-support-rank-target {
    min-height: 34px;
    padding: 7px 8px;

    border:
        1px solid
        rgba(158, 98, 149, 0.36);
    border-radius: 9px;

    background:
        rgba(36, 38, 63, 0.70);
    color: #F6E7DD;

    font: inherit;
    font-size: 0.56rem;
    font-weight: 800;
}

.dev-support-rank-stepper button {
    cursor: pointer;
}

.dev-support-rank-stepper button:hover:not(:disabled) {
    border-color:
        rgba(247, 205, 169, 0.66);
    background:
        rgba(180, 139, 149, 0.20);
}

.dev-support-rank-stepper button:disabled {
    opacity: 0.46;
    cursor: wait;
}

.dev-support-rank-target {
    display: grid;
    place-items: center;
    gap: 1px;
}

.dev-support-rank-target small {
    color:
        rgba(246, 231, 221, 0.56);
    font-size: 0.44rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dev-support-rank-target strong {
    color: #F7CDA9;
    font-size: 0.70rem;
}

@media (max-width: 650px) {
    .dev-support-rank-stepper {
        grid-template-columns:
            minmax(34px, auto)
            minmax(0, 1fr)
            minmax(34px, auto);
    }

    #dev-support-rank-apply {
        grid-column: 1 / -1;
    }
}

.dev-online-players-toggle {
    justify-self: start;
}

.dev-online-players-panel {
    display: grid;
    gap: 7px;
    padding: 8px;

    border:
        1px solid
        rgba(88, 216, 121, 0.20);
    border-radius: 10px;

    background:
        rgba(23, 25, 46, 0.58);
}

.dev-online-players-panel[hidden] {
    display: none !important;
}

.dev-online-players-summary,
.dev-online-player-empty {
    margin: 0;

    color:
        rgba(246, 231, 221, 0.68);
    font-size: 0.54rem;
    line-height: 1.4;
}

.dev-online-players-list {
    display: grid;
    gap: 5px;
}

.dev-online-player {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;

    width: 100%;
    text-align: left;
}

.dev-online-player-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;

    border-radius: 50%;
    background: #58d879;

    box-shadow:
        0 0 7px
        rgba(88, 216, 121, 0.60);
}

.dev-tools-helper-card {
    grid-column: 1 / -1;
}

.dev-tools-helper-list {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.dev-tools-helper-list code {
    padding: 4px 6px;

    border:
        1px solid
        rgba(158, 98, 149, 0.24);

    border-radius: 7px;

    background:
        rgba(23, 25, 46, 0.62);

    color:
        rgba(246, 231, 221, 0.74);

    font-size: 0.48rem;
}

.dev-tools-status {
    grid-column: 1 / -1;

    min-height: 1.1em;
    margin: 0;
    padding: 3px 2px;

    color:
        rgba(246, 231, 221, 0.72);

    font-size: 0.58rem;
}

.dev-tools-status[data-tone="success"] {
    color: #F7CDA9;
}

.dev-tools-status[data-tone="error"] {
    color: #E7968E;
}

@media (max-width: 700px) {
    .dev-tools-modal {
        padding: 7px;
    }

    .dev-tools-window {
        width:
            calc(100vw - 14px);

        max-height:
            calc(100dvh - 14px);
    }

    .dev-tools-content {
        grid-template-columns: 1fr;
    }

    .dev-tools-helper-card {
        grid-column: auto;
    }

    .dev-tools-button-grid {
        grid-template-columns: 1fr 1fr;
    }


    .dev-premium-gift-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .dev-tools-button-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   COSMETIC SHOP — BANNERS
   ============================== */

.game-shop-cosmetic-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 10px;
}

.game-shop-cosmetic-grid[hidden] {
    display: none !important;
}

.game-shop-cosmetic-card {
    overflow: hidden;

    border:
        1px solid
        rgba(158, 98, 149, 0.30);

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(52, 53, 88, 0.72),
            rgba(36, 38, 63, 0.76)
        );

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.16);
}

.game-shop-cosmetic-card.owned {
    border-color:
        rgba(247, 205, 169, 0.42);
}

.game-shop-banner-preview {
    position: relative;

    width: 100%;
    aspect-ratio: 3 / 1;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(158, 98, 149, 0.22);

    background:
        rgba(23, 25, 46, 0.76);
}

.game-shop-banner-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.game-shop-frame-preview {
    position: relative;

    width: min(100%, 220px);
    aspect-ratio: 1 / 1;

    margin: 12px auto 0;

    overflow: hidden;

    border:
        1px solid
        rgba(158, 98, 149, 0.22);

    border-radius: 14px;

    background:
        radial-gradient(
            circle at center,
            rgba(246, 231, 221, 0.12) 0 32%,
            rgba(52, 53, 88, 0.72) 33% 58%,
            rgba(23, 25, 46, 0.82) 59% 100%
        );
}

.game-shop-frame-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.game-shop-title-preview {
    display: grid;
    place-content: center;
    gap: 4px;

    min-height: 112px;
    padding: 18px 12px;

    border-bottom:
        1px solid
        rgba(158, 98, 149, 0.22);

    background:
        radial-gradient(
            circle at top,
            rgba(158, 98, 149, 0.22),
            rgba(23, 25, 46, 0.82) 68%
        );

    text-align: center;
}

.game-shop-title-preview strong {
    color: #F7CDA9;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.game-shop-title-preview span {
    color:
        rgba(246, 231, 221, 0.62);

    font-size: 0.55rem;
    font-weight: 800;
}

.game-shop-name-preview {
    display: grid;
    place-content: center;
    gap: 5px;

    min-height: 112px;
    padding: 18px 12px;

    border-bottom:
        1px solid
        rgba(158, 98, 149, 0.22);

    background:
        radial-gradient(
            circle at top,
            rgba(91, 126, 184, 0.18),
            rgba(23, 25, 46, 0.82) 70%
        );

    text-align: center;
}

.game-shop-name-preview strong {
    color: #F6E7DD;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.game-shop-name-preview span {
    color:
        rgba(246, 231, 221, 0.58);

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

/* Permanent shop name appearances. */
.profile-name-core[data-name-appearance="basicRedName"],
.player-social-name-core[data-name-appearance="basicRedName"],
.global-chat-name-core[data-name-appearance="basicRedName"],
.game-shop-name-preview strong[data-name-appearance="basicRedName"] {
    color: #ff5d67;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicYellowName"],
.player-social-name-core[data-name-appearance="basicYellowName"],
.global-chat-name-core[data-name-appearance="basicYellowName"],
.game-shop-name-preview strong[data-name-appearance="basicYellowName"] {
    color: #ffd95a;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicBlueName"],
.player-social-name-core[data-name-appearance="basicBlueName"],
.global-chat-name-core[data-name-appearance="basicBlueName"],
.game-shop-name-preview strong[data-name-appearance="basicBlueName"] {
    color: #68b7ff;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicOrangeName"],
.player-social-name-core[data-name-appearance="basicOrangeName"],
.global-chat-name-core[data-name-appearance="basicOrangeName"],
.game-shop-name-preview strong[data-name-appearance="basicOrangeName"] {
    color: #ff9b3d;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicGreenName"],
.player-social-name-core[data-name-appearance="basicGreenName"],
.global-chat-name-core[data-name-appearance="basicGreenName"],
.game-shop-name-preview strong[data-name-appearance="basicGreenName"] {
    color: #69d98a;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicPurpleName"],
.player-social-name-core[data-name-appearance="basicPurpleName"],
.global-chat-name-core[data-name-appearance="basicPurpleName"],
.game-shop-name-preview strong[data-name-appearance="basicPurpleName"] {
    color: #b58cff;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="basicPinkName"],
.player-social-name-core[data-name-appearance="basicPinkName"],
.global-chat-name-core[data-name-appearance="basicPinkName"],
.game-shop-name-preview strong[data-name-appearance="basicPinkName"] {
    color: #ff82c8;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="ghostlyBlueGlowName"],
.player-social-name-core[data-name-appearance="ghostlyBlueGlowName"],
.global-chat-name-core[data-name-appearance="ghostlyBlueGlowName"],
.game-shop-name-preview strong[data-name-appearance="ghostlyBlueGlowName"] {
    color: #b9f1ff;
    text-shadow:
        0 0 6px rgba(139, 226, 255, 0.92),
        0 0 14px rgba(90, 190, 255, 0.58);
}

.profile-name-core[data-name-appearance="hauntedPurpleGlowName"],
.player-social-name-core[data-name-appearance="hauntedPurpleGlowName"],
.global-chat-name-core[data-name-appearance="hauntedPurpleGlowName"],
.game-shop-name-preview strong[data-name-appearance="hauntedPurpleGlowName"] {
    color: #d2adff;
    text-shadow:
        0 0 6px rgba(187, 126, 255, 0.92),
        0 0 14px rgba(132, 73, 208, 0.62);
}

.profile-name-core[data-name-appearance="bloodMoonGlowName"],
.player-social-name-core[data-name-appearance="bloodMoonGlowName"],
.global-chat-name-core[data-name-appearance="bloodMoonGlowName"],
.game-shop-name-preview strong[data-name-appearance="bloodMoonGlowName"] {
    color: #ff6478;
    text-shadow:
        0 0 6px rgba(255, 74, 98, 0.9),
        0 0 14px rgba(160, 26, 54, 0.66);
}

.profile-name-core[data-name-appearance="moonlightGlowName"],
.player-social-name-core[data-name-appearance="moonlightGlowName"],
.global-chat-name-core[data-name-appearance="moonlightGlowName"],
.game-shop-name-preview strong[data-name-appearance="moonlightGlowName"] {
    color: #f1f3ff;
    text-shadow:
        0 0 6px rgba(220, 228, 255, 0.94),
        0 0 14px rgba(133, 159, 255, 0.58);
}

.profile-name-core[data-name-appearance="arcaneGlowName"],
.player-social-name-core[data-name-appearance="arcaneGlowName"],
.global-chat-name-core[data-name-appearance="arcaneGlowName"],
.game-shop-name-preview strong[data-name-appearance="arcaneGlowName"] {
    color: #99a8ff;
    text-shadow:
        0 0 6px rgba(113, 140, 255, 0.92),
        0 0 14px rgba(170, 91, 255, 0.62);
}

.profile-name-core[data-name-appearance="goldenGlowName"],
.player-social-name-core[data-name-appearance="goldenGlowName"],
.global-chat-name-core[data-name-appearance="goldenGlowName"],
.game-shop-name-preview strong[data-name-appearance="goldenGlowName"] {
    color: #ffd86b;
    text-shadow:
        0 0 6px rgba(255, 210, 89, 0.92),
        0 0 14px rgba(255, 159, 45, 0.58);
}


/* Permanent two-colour gradient name appearances. */
.profile-name-core[data-name-appearance="witchlightGradientName"],
.player-social-name-core[data-name-appearance="witchlightGradientName"],
.global-chat-name-core[data-name-appearance="witchlightGradientName"],
.game-shop-name-preview strong[data-name-appearance="witchlightGradientName"] {
    display: inline-block;
    background: linear-gradient(90deg, #B58CFF 0%, #FF82C8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="dreamwaveGradientName"],
.player-social-name-core[data-name-appearance="dreamwaveGradientName"],
.global-chat-name-core[data-name-appearance="dreamwaveGradientName"],
.game-shop-name-preview strong[data-name-appearance="dreamwaveGradientName"] {
    display: inline-block;
    background: linear-gradient(90deg, #FF82C8 0%, #68B7FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="spectralTideGradientName"],
.player-social-name-core[data-name-appearance="spectralTideGradientName"],
.global-chat-name-core[data-name-appearance="spectralTideGradientName"],
.game-shop-name-preview strong[data-name-appearance="spectralTideGradientName"] {
    display: inline-block;
    background: linear-gradient(90deg, #68B7FF 0%, #69D98A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.profile-name-core[data-name-appearance="emberbloodGradientName"],
.player-social-name-core[data-name-appearance="emberbloodGradientName"],
.global-chat-name-core[data-name-appearance="emberbloodGradientName"],
.game-shop-name-preview strong[data-name-appearance="emberbloodGradientName"] {
    display: inline-block;
    background: linear-gradient(90deg, #FF9B3D 0%, #FF5D67 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.game-shop-cosmetic-card-body {
    display: grid;

    gap: 7px;
    padding: 10px;
}

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

    gap: 8px;
}

.game-shop-cosmetic-card-heading > strong {
    min-width: 0;

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

.game-shop-cosmetic-card-heading
.spectral-gold-price {
    flex: 0 0 auto;

    color: #F7CDA9;

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

.game-shop-cosmetic-card-body > small {
    color:
        rgba(246, 231, 221, 0.62);

    font-size: 0.51rem;
    line-height: 1.4;
}

.game-shop-cosmetic-owned {
    flex: 0 0 auto;

    padding: 3px 7px;

    border:
        1px solid
        rgba(247, 205, 169, 0.34);

    border-radius: 999px;

    color: #F7CDA9;

    font-size: 0.50rem;
    font-weight: 900;
}

.game-shop-cosmetic-buy {
    width: 100%;
    margin: 0;
}

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

    .game-shop-cosmetic-card-heading > strong {
        font-size: 0.72rem;
    }
}


/* ==============================
   UGC SAFETY / COMMUNITY CONTROLS
   ============================== */
.ugc-safety-window,.ugc-report-window{max-width:720px}
.ugc-rules-content,.ugc-report-form{display:grid;gap:16px;padding:20px}
.ugc-rules-list{display:grid;gap:10px;margin:0;padding-left:22px}
.ugc-terms-accept{justify-self:start}
.ugc-report-form label{display:grid;gap:7px}
.ugc-report-form select,.ugc-report-form textarea,.dev-ugc-toolbar select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(12,9,25,.78);color:inherit;padding:10px 12px;font:inherit}
.ugc-blocked-section{display:grid;gap:10px;margin-top:16px}
.ugc-blocked-section h4{margin:0}
.ugc-blocked-list{display:grid;gap:8px}
.ugc-blocked-player{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.055)}
.ugc-blocked-empty{margin:0;opacity:.76}
.global-chat-message-safety{display:flex;justify-content:flex-end;margin-top:3px}
.global-chat-report-button{border:0;background:transparent;color:inherit;opacity:.58;padding:2px 4px;font:inherit;font-size:.74rem;cursor:pointer}
.global-chat-report-button:hover,.global-chat-report-button:focus-visible{opacity:1;text-decoration:underline}
.dev-ugc-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.dev-ugc-report-list{display:grid;gap:12px}
.dev-ugc-report{display:grid;gap:10px;padding:12px;border-radius:12px;background:rgba(10,7,20,.52);border:1px solid rgba(255,255,255,.1)}
.dev-ugc-report-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px}
.dev-ugc-report-header span,.dev-ugc-report small{opacity:.76}
.dev-ugc-report-snapshot{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.dev-ugc-report-actions{display:flex;flex-wrap:wrap;gap:8px}
.dev-ugc-empty{margin:0;opacity:.76}
.ugc-rules-page{min-height:100vh;margin:0;padding:28px 16px 56px;box-sizing:border-box;background:#160d21;color:#f7effb}
.ugc-rules-document{width:min(760px,100%);margin:0 auto;padding:28px;box-sizing:border-box;border-radius:18px;background:rgba(38,24,53,.96);box-shadow:0 18px 60px rgba(0,0,0,.34)}
.ugc-rules-document h1,.ugc-rules-document h2{margin-top:0}
.ugc-rules-document section{margin-top:24px}
.ugc-rules-version,.ugc-rules-footer{opacity:.78}
@media(max-width:700px){.dev-ugc-toolbar{grid-template-columns:1fr}.ugc-blocked-player{align-items:stretch;flex-direction:column}.ugc-rules-document{padding:20px;border-radius:14px}}


/* ==============================
   SUPPORT RANK V2 QOL CONTROLS
   ============================== */

.account-crafted-output-routing {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    padding: 10px;

    border: 1px solid #F7CDA938;
    border-radius: 11px;

    background: #24263F78;
}

.account-crafted-output-routing[hidden] {
    display: none;
}

.account-crafted-output-note {
    max-width: 620px;
    margin: 0;

    color: #F6E7DDA3;

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

.account-crafted-output-options {
    display: flex;
    flex: 0 0 auto;

    gap: 6px;
}

.account-crafted-output-options
.account-secondary-button {
    width: auto;
    min-width: 82px;
    margin: 0;
}

.account-crafted-output-options
.account-secondary-button.selected {
    border-color: #F7CDA9;
    background: #F7CDA926;
    color: #F7CDA9;
}

.account-support-rank-sg-reward {
    min-width: 90px;

    color: #E7968E !important;

    font-weight: 900;
}

@media (max-width: 650px) {
    .account-crafted-output-routing {
        align-items: stretch;
        flex-direction: column;
    }

    .account-crafted-output-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* ==============================
   SUPPORT RANK COSMETICS R1-R10
   ============================== */

/* R1 — Supporter Rose */
.profile-name-core[data-name-appearance="supporterRoseName"],
.player-social-name-core[data-name-appearance="supporterRoseName"],
.global-chat-name-core[data-name-appearance="supporterRoseName"] {
    color: #E7968E;
    text-shadow: none;
}

/* R5 — Supporter Gradient */
.profile-name-core[data-name-appearance="supporterGradientName"],
.player-social-name-core[data-name-appearance="supporterGradientName"],
.global-chat-name-core[data-name-appearance="supporterGradientName"] {
    display: inline-block;
    background:
        linear-gradient(
            90deg,
            #E7968E 0%,
            #F7CDA9 48%,
            #B58CFF 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* R6 — Spectral Supporter title appearance */
#account-profile-selected-title[data-title-appearance="supporterSpectralTitle"],
#account-character-name .profile-title-prefix[data-title-appearance="supporterSpectralTitle"],
#player-social-title[data-title-appearance="supporterSpectralTitle"],
#player-social-name .player-social-title-prefix[data-title-appearance="supporterSpectralTitle"],
.global-chat-player-name .global-chat-title-prefix[data-title-appearance="supporterSpectralTitle"],
.global-chat-player-title[data-title-appearance="supporterSpectralTitle"] {
    color: #D9C7FF;
    text-shadow:
        0 0 6px rgba(217, 199, 255, 0.92),
        0 0 13px rgba(158, 98, 149, 0.62);
}

/* R4 — Spectral Spark */
@keyframes supporterSpectralSparkPulse {
    0%,
    100% {
        text-shadow:
            0 0 4px rgba(247, 205, 169, 0.58),
            0 0 9px rgba(158, 98, 149, 0.42);
        filter: brightness(1);
    }

    45% {
        text-shadow:
            0 0 7px rgba(247, 205, 169, 0.96),
            0 0 15px rgba(185, 140, 255, 0.68);
        filter: brightness(1.14);
    }

    55% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.88),
            0 0 12px rgba(158, 98, 149, 0.58);
        filter: brightness(1.04);
    }
}

.profile-name-core[data-name-effect="supporterSpectralSpark"],
.player-social-name-core[data-name-effect="supporterSpectralSpark"],
.global-chat-name-core[data-name-effect="supporterSpectralSpark"] {
    display: inline-block;
    animation:
        supporterSpectralSparkPulse
        2.25s ease-in-out infinite;
}

/* R9 — Prestige Spectral */
@keyframes supporterPrestigeSpectralPulse {
    0%,
    100% {
        text-shadow:
            0 0 6px rgba(181, 140, 255, 0.74),
            0 0 13px rgba(158, 98, 149, 0.48),
            0 0 19px rgba(231, 150, 142, 0.24);
        filter:
            saturate(1)
            brightness(1);
    }

    50% {
        text-shadow:
            0 0 8px rgba(247, 205, 169, 0.92),
            0 0 17px rgba(181, 140, 255, 0.76),
            0 0 26px rgba(158, 98, 149, 0.48);
        filter:
            saturate(1.14)
            brightness(1.12);
    }
}

.profile-name-core[data-name-effect="supporterPrestigeSpectral"],
.player-social-name-core[data-name-effect="supporterPrestigeSpectral"],
.global-chat-name-core[data-name-effect="supporterPrestigeSpectral"] {
    display: inline-block;
    animation:
        supporterPrestigeSpectralPulse
        1.85s ease-in-out infinite;
}

/* R10 — Eternal Supporter */
@keyframes supporterEternalGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes supporterEternalGlowPulse {
    0%,
    100% {
        text-shadow:
            0 0 6px rgba(247, 205, 169, 0.82),
            0 0 14px rgba(181, 140, 255, 0.58),
            0 0 22px rgba(231, 150, 142, 0.28);
    }

    50% {
        text-shadow:
            0 0 9px rgba(255, 244, 215, 1),
            0 0 19px rgba(181, 140, 255, 0.82),
            0 0 30px rgba(231, 150, 142, 0.48);
    }
}

.profile-name-core[data-name-effect="supporterEternalName"],
.player-social-name-core[data-name-effect="supporterEternalName"],
.global-chat-name-core[data-name-effect="supporterEternalName"] {
    display: inline-block;
    background:
        linear-gradient(
            90deg,
            #F7CDA9,
            #E7968E,
            #B58CFF,
            #F6E7DD,
            #F7CDA9
        );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    animation:
        supporterEternalGradientShift
            3.1s linear infinite,
        supporterEternalGlowPulse
            1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .profile-name-core[data-name-effect="supporterSpectralSpark"],
    .player-social-name-core[data-name-effect="supporterSpectralSpark"],
    .global-chat-name-core[data-name-effect="supporterSpectralSpark"],
    .profile-name-core[data-name-effect="supporterPrestigeSpectral"],
    .player-social-name-core[data-name-effect="supporterPrestigeSpectral"],
    .global-chat-name-core[data-name-effect="supporterPrestigeSpectral"],
    .profile-name-core[data-name-effect="supporterEternalName"],
    .player-social-name-core[data-name-effect="supporterEternalName"],
    .global-chat-name-core[data-name-effect="supporterEternalName"] {
        animation: none;
    }
}


/* ==============================
   SUPPORT RANK COSMETIC PREVIEW GALLERY
   ============================== */

.account-support-rank-reward {
    display: grid;
    gap: 6px;
}

.account-support-rank-preview-button {
    width: fit-content;
    padding: 4px 8px;

    border: 1px solid #F7CDA95C;
    border-radius: 999px;

    background: #F7CDA914;
    color: #F7CDA9;

    font: inherit;
    font-size: 0.56rem;
    font-weight: 900;

    cursor: pointer;
}

.account-support-rank-preview-button:hover,
.account-support-rank-preview-button:focus-visible {
    border-color: #F7CDA9;
    background: #F7CDA926;
}

.account-support-rank-preview-button:focus-visible {
    outline: 2px solid #E7968E;
    outline-offset: 2px;
}

.account-support-rank-cosmetic-preview {
    display: grid;
    gap: 10px;

    padding: 10px;

    border: 1px solid #F7CDA94D;
    border-radius: 12px;

    background:
        linear-gradient(
            160deg,
            #343558C9,
            #17192EE8
        );
}

.account-support-rank-cosmetic-preview[hidden] {
    display: none;
}

.account-support-rank-preview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.account-support-rank-preview-heading > div {
    display: grid;
    gap: 3px;
}

.account-support-rank-preview-heading strong {
    color: #F7CDA9;

    font-size: 0.74rem;
}

.account-support-rank-preview-heading span {
    color: #F6E7DDA3;

    font-size: 0.58rem;
    line-height: 1.4;
}

.account-support-rank-preview-heading
.account-secondary-button {
    width: auto;
    min-width: 58px;
    margin: 0;
}

.account-support-rank-cosmetic-preview-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 9px;
}

.account-support-rank-preview-card {
    min-width: 0;
}

.account-support-rank-preview-card
.game-shop-frame-preview {
    width: min(100%, 190px);
}

.account-support-rank-preview-card[
    data-preview-category="profile_badge"
]
.game-shop-frame-preview img {
    padding: 15%;
    object-fit: contain;
}

.account-support-rank-preview-caption {
    display: grid;
    gap: 3px;

    padding: 9px 10px 10px;
}

.account-support-rank-preview-caption strong {
    color: #F6E7DD;

    font-size: 0.67rem;
}

.account-support-rank-preview-caption span {
    color: #F6E7DD8C;

    font-size: 0.54rem;
    font-weight: 800;
}

.account-support-rank-cosmetic-preview
.profile-title-prefix[
    data-title-appearance="supporterSpectralTitle"
] {
    color: #D9C7FF;
    text-shadow:
        0 0 6px rgba(217, 199, 255, 0.92),
        0 0 13px rgba(158, 98, 149, 0.62);
}

@media (max-width: 600px) {
    .account-support-rank-preview-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .account-support-rank-preview-heading
    .account-secondary-button {
        align-self: flex-end;
    }

    .account-support-rank-cosmetic-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================
   SHOP TAB VISIBILITY
   ============================== */

.game-shop-bag-section[hidden] {
    display: none !important;
}


/* ==============================
   APP UPDATE NOTICE
   ============================== */

.app-update-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;

    display: grid;
    place-items: center;

    padding: 18px;
}

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

.app-update-backdrop {
    position: absolute;
    inset: 0;

    border: 0;

    background: rgba(23, 25, 46, 0.78);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.app-update-dialog {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 12px;

    width: min(430px, 100%);
    padding: 18px;

    border: 1px solid #F7CDA94A;
    border-radius: 16px;

    background:
        linear-gradient(
            155deg,
            #343558F7,
            #24263FFA
        );

    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(246, 231, 221, 0.06);
}

.app-update-eyebrow {
    margin: 0;

    color: #E7968E;

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-update-title {
    margin: 0;

    color: #F7CDA9;

    font-size: 1.18rem;
}

.app-update-copy,
.app-update-version-copy {
    margin: 0;

    color: #F6E7DDC9;

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

.app-update-version-copy {
    color: #F6E7DD8F;
    font-size: 0.62rem;
}

.app-update-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.app-update-primary,
.app-update-later {
    min-height: 36px;
    padding: 8px 12px;

    border-radius: 9px;

    font: inherit;
    font-size: 0.68rem;
    font-weight: 900;

    cursor: pointer;
}

.app-update-primary {
    border: 1px solid #F7CDA986;

    background: #F7CDA92B;
    color: #F7CDA9;
}

.app-update-primary:hover,
.app-update-primary:focus-visible {
    background: #F7CDA945;
}

.app-update-later {
    border: 1px solid #F6E7DD36;

    background: #F6E7DD0D;
    color: #F6E7DDBD;
}

.app-update-later[hidden] {
    display: none;
}


/* ==============================
   PER-SKILL OUTPUT ROUTING
   R2 Support QoL
   ============================== */

.skill-output-routing {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    border: 1px solid #F7CDA938;
    border-radius: 10px;

    background: #24263F70;
}

.skill-output-routing[hidden] {
    display: none;
}

.skill-output-routing-copy {
    display: grid;
    min-width: 0;

    gap: 2px;
}

.skill-output-routing-copy strong {
    color: #F6E7DD;

    font-size: 0.52rem;
}

.skill-output-routing-copy small {
    color: #F6E7DDB8;

    font-size: 0.43rem;
    line-height: 1.35;
}

.skill-output-routing-options {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;

    gap: 4px;
}

.skill-output-routing-button {
    min-width: 72px;
    padding: 5px 7px;

    border: 1px solid #F6E7DD24;
    border-radius: 7px;

    background: #34355852;
    color: #F6E7DDC7;

    font: inherit;
    font-size: 0.46rem;
    font-weight: 800;

    cursor: pointer;
}

.skill-output-routing-button:hover {
    border-color: #F7CDA966;
    color: #F6E7DD;
}

.skill-output-routing-button.selected {
    border-color: #F7CDA9;
    background: #F7CDA926;
    color: #F7CDA9;
}

.skill-output-routing-gardening {
    margin-top: 10px;
}

@media (max-width: 600px) {
    .skill-output-routing {
        align-items: stretch;
        flex-direction: column;
    }

    .skill-output-routing-options {
        width: 100%;
    }

    .skill-output-routing-button {
        width: 100%;
    }
}


/* 8 OCT PLAYER POLISH FOLLOW-UP */

/* Personal Enchantment filters must stay readable on dark SSQ panels,
   including native Android/Chrome option menus. */
.enchant-filter select,
.enchant-filter input {
    background: #343558;
    color: #F6E7DD;
}

.enchant-filter input::placeholder {
    color: #F6E7DD78;
}

.enchant-filter select option,
.enchant-filter select optgroup {
    background: #343558;
    color: #F6E7DD;
}

/* Very narrow phones cannot fit currency values plus three labelled
   navigation buttons on one header row. Keep all actions, but make the
   Season / Player / Menu controls icon-only at this width. */
@media (max-width: 420px) {
    .game-header {
        grid-template-columns:
            30px minmax(0, 1fr);

        column-gap: 4px;
    }

    .header-actions {
        gap: 2px;
    }

    .header-currencies {
        min-width: 0;
        gap: 1px;
    }

    .header-currencies > span {
        gap: 1px;
        padding: 2px 3px;
    }

    .header-currencies > span > strong {
        font-size: 0.44rem;
    }

    .header-currency-icon {
        width: 12px;
        height: 12px;

        flex-basis: 12px;
    }

    .mobile-season-pass-button,
    .mobile-player-menu-wrap #account-button,
    .mobile-header-menu-toggle {
        width: 30px;
        min-width: 30px;
        min-height: 28px;

        gap: 0;
        padding: 4px;
    }

    .mobile-season-pass-button > span:nth-child(2),
    .mobile-player-text,
    .mobile-header-menu-toggle > span:last-child {
        display: none;
    }

    .mobile-player-menu-wrap #account-button
    .header-action-icon {
        width: 18px;
        height: 18px;
    }

    .mobile-season-pass-icon {
        font-size: 0.82rem;
    }
}


/* ==============================
   ENCHANTING HEADER CURRENCIES
   Keep Enchanting / Gold / Essence
   readable on narrow activity panes.
   ============================== */

#enchanting-region-content
.enchanting-skill-header {
    grid-template-columns:
        minmax(96px, 1fr)
        auto
        auto;

    gap: 4px;
}

#enchanting-region-content
.enchanting-currency-chip {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 3px;
    padding: 3px 5px;
}

.enchanting-currency-icon {
    display: block;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    object-fit: contain;
}

#enchanting-region-content
.enchanting-currency-chip strong {
    font-size: 0.58rem;
    line-height: 1;

    white-space: nowrap;
}

@media (max-width: 420px) {
    #enchanting-region-content
    .enchanting-skill-header {
        grid-template-columns:
            minmax(88px, 1fr)
            auto
            auto;

        gap: 3px;
    }

    .enchanting-currency-icon {
        width: 14px;
        height: 14px;

        flex-basis: 14px;
    }

    #enchanting-region-content
    .enchanting-currency-chip {
        gap: 2px;
        padding: 3px 4px;
    }

    #enchanting-region-content
    .enchanting-currency-chip strong {
        font-size: 0.54rem;
    }
}


/* Enchanted item aura: ✦ means enchanted; ✨ means natural god roll. */
:is(.inventory-slot,.equipment-slot,.tool-slot,.pantry-item-card,.gear-picker-option,.gear-picker-current-card,.auction-market-card,.auction-my-row,.player-social-item).ssq-enchanted-item {
  border-color: #c7a2f1;
  box-shadow: inset 0 0 0 1px #b480ed65, 0 0 10px #b07bec6b, 0 0 18px #a06cd835;
  background-image: linear-gradient(135deg,#bf92f51b,transparent 75%);
  animation: ssq-bound-enchant-glow 4s ease-in-out infinite;
}
:is(.inventory-slot,.equipment-slot,.tool-slot,.pantry-item-image-shell,.gear-picker-artwork,.auction-item-icon,.player-social-item-detail-media).ssq-enchanted-item img {
  filter: drop-shadow(0 0 5px #bb82f7b0);
}
:is(.pantry-item-image-shell,.auction-item-icon,.player-social-item-detail-media,.gear-picker-artwork).ssq-enchanted-item {
  position: relative;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #af7dea61,0 0 10px #ae74ec69;
}
.ssq-enchantment-mark {
  position: absolute;
  z-index: 7;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #c5a1f4b0;
  border-radius: 50%;
  background: #46255aec;
  color: #f7e9ff;
  box-shadow: 0 0 7px #b67ff6a8;
  font-size: .78rem;
  pointer-events: none;
}
.ssq-enchanted-name { color: #ebd0ff; text-shadow: 0 0 5px #ab77e663; }
.ssq-auction-enchant-detail { border-color: #b98cea8a !important; background: #6f48a83c; color: #ebd0ff; }
@keyframes ssq-bound-enchant-glow {
  0%,100% { box-shadow: inset 0 0 0 1px #b480ed65,0 0 10px #b07bec5b,0 0 18px #a06cd82b; }
  50% { box-shadow: inset 0 0 0 1px #d09ff79c,0 0 13px #b07bec99,0 0 22px #a06cd854; }
}
@media (prefers-reduced-motion: reduce) { .ssq-enchanted-item { animation: none !important; } }

/* Small item-detail preview and public card: keep enchant badge anchored. */
.player-social-item.ssq-enchanted-item { position: relative; }
.item-detail-image-shell.ssq-enchanted-item {
    position: relative;
    border: 1px solid #BD96EE88;
    box-shadow: 0 0 13px #AD72E877,inset 0 0 0 1px #AD72E855;
}
.item-detail-image-shell.ssq-enchanted-item img {
    filter: drop-shadow(0 0 6px #BA81F6B3);
}


/* Perfect natural roll in auction previews: kept separate from ✦ enchant. */
.auction-item-icon { position: relative; }
.auction-item-icon .ssq-perfect-item-mark {
    position: absolute;
    z-index: 8;
    top: 3px;
    left: 3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid #f7cda994;
    border-radius: 50%;
    background: #4b3358ed;
    color: #ffe8bc;
    box-shadow: 0 0 7px #e0b77e6a;
    font-size: .65rem;
    line-height: 1;
    pointer-events: none;
}
/* Keep natural stars and attached-enchant badge in opposite corners. */
.auction-item-icon .ssq-enchantment-mark { right: 3px; bottom: 3px; }


/* Disenchant preview: real Arcane Essence art. */
.disenchant-reward-preview .disenchant-essence-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 2px;
    vertical-align: -3px;
    object-fit: contain;
}

/* Small non-blocking loot notification INSIDE the world map panel. */
.skill-loot-toast {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 65;
    box-sizing: border-box;
    display: grid;
    gap: 5px;
    width: min(285px, calc(100% - 24px));
    max-height: min(175px, 48%);
    overflow: hidden;
    padding: 8px 10px;
    border: 1px solid #F7CDA952;
    border-radius: 10px;
    background: #343558ED;
    box-shadow: 0 8px 24px #24263F73;
    color: #F6E7DD;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.skill-loot-toast.visible {
    opacity: 1;
    transform: translateY(0);
}
.skill-loot-heading {
    color: #F7CDA9;
    font-size: .7rem;
}
.skill-loot-source {
    color: #F6E7DDBB;
    font-size: .65rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.skill-loot-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    overflow: auto;
}
.skill-loot-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 5px;
    border: 1px solid #F7CDA92F;
    border-radius: 7px;
    background: #F6E7DD12;
    font-size: .66rem;
}
.skill-loot-chip img {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.skill-loot-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.skill-loot-empty {
    color: #F6E7DDC9;
    font-size: .63rem;
}
@media (max-width: 680px) {
    .skill-loot-toast {
        right: 8px;
        bottom: 8px;
        width: min(240px, calc(100% - 16px));
        max-height: min(140px, 40%);
        padding: 6px 7px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .skill-loot-toast { transition: none; }
}

/* Bag targets stay visually separate from equipped gear. */
.gear-enchant-target-group-label{display:block;flex:1 0 100%;width:100%;margin:8px 0 3px;color:#F7CDA9;font-size:.71rem;font-weight:800}