.palworld-shell {
    --palworld-radius: 8px;
    --palworld-border: var(--ink-soft);
    --palworld-gap: var(--space-md);
}

.palworld-shell [hidden] {
    display: none !important;
}

.palworld-shell main {
    min-width: 0;
}

.palworld-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    margin-block: var(--space-lg);
}

.palworld-panel {
    min-width: 0;
    padding: var(--space-md);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
    background: var(--panel);
}

.palworld-panel h2 {
    margin: 0 0 var(--space-md);
    font-size: var(--step-2);
}

.palworld-panel h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--step-1);
}

.palworld-controls {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.palworld-controls > section {
    min-width: 0;
}

.palworld-shell label {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 700;
}

.palworld-shell input:not([type="checkbox"]),
.palworld-shell select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
    background: var(--paper-strong);
    color: var(--ink);
    font: inherit;
    font-size: var(--step-0);
}

.palworld-shell input::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

.palworld-shell button {
    min-height: 44px;
    max-width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--accent);
    border-radius: var(--palworld-radius);
    background: var(--panel-solid);
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.palworld-shell button:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--accent);
}

.palworld-shell .palworld-primary {
    width: 100%;
    background: var(--accent);
    color: var(--paper);
}

.palworld-shell .palworld-primary:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}

.palworld-shell :is(button, input, select):disabled {
    opacity: 0.6;
    cursor: wait;
}

.palworld-shell :is(button, input, select, a, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.palworld-help,
.palworld-picker-count,
.palworld-credits {
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.6;
}

.palworld-help {
    margin: var(--space-xs) 0 var(--space-sm);
}

.palworld-notice {
    padding: var(--space-md);
    border-left: 3px solid var(--accent);
    border-radius: var(--palworld-radius);
    background: var(--panel-solid);
    color: var(--ink);
}

.palworld-error {
    border: 2px solid var(--ink);
}

.palworld-trait-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.palworld-picker {
    min-width: 0;
}

.palworld-picker > input {
    margin-top: var(--space-xs);
}

.palworld-picker-count {
    margin-block: var(--space-xs);
}

.palworld-picker-count:empty,
.palworld-picker-selected:empty {
    display: none;
}

.palworld-picker-matches {
    display: grid;
    gap: var(--space-xs);
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    margin: var(--space-xs) 0;
    padding: var(--space-xs);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
    background: var(--paper);
    list-style: none;
}

.palworld-picker-matches li {
    min-width: 0;
    margin: 0;
}

.palworld-picker-matches button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-xs);
    text-align: left;
    border-color: transparent;
}

.palworld-pal-identity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    overflow-wrap: anywhere;
}

.palworld-thumbnail {
    display: inline-block;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
}

.palworld-thumbnail-missing {
    display: inline-grid;
    place-items: center;
    border-radius: var(--palworld-radius);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--step-2);
}

.palworld-pal-number {
    flex-shrink: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.palworld-picker-selected {
    margin-top: var(--space-xs);
    padding: var(--space-xs);
    border-left: 3px solid var(--accent);
}

.palworld-picker-selected:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
}

/* Picker rows: the selection button fills the row, the location link sits beside it. */
.palworld-picker-matches .palworld-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.palworld-picker-row > button {
    flex: 1 1 auto;
    min-width: 0;
}

.palworld-location-link {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.15em 0.35em;
    color: var(--accent);
    font-size: var(--step--1);
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
    border-radius: 4px;
}

/* Each pal carries two location controls: the "Where to find" map trigger and the
   external "Info" link. */
.palworld-location {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

/* The trigger is a button that reads as a link; a dotted underline marks it as
   opening the map in place rather than leaving the page. */
.palworld-shell button.palworld-location-trigger {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 0.15em 0.35em;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--accent);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    white-space: nowrap;
    cursor: help;
}

.palworld-location-info::after {
    content: " \2197";
}

.palworld-location-link:hover,
.palworld-location-trigger[aria-expanded="true"] {
    text-decoration-thickness: 2px;
}

.palworld-location-fallback {
    font-style: italic;
}

.palworld-sources {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.palworld-source {
    display: grid;
    gap: var(--space-sm);
    min-width: 0;
    margin: 0;
    padding: var(--space-sm);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
}

.palworld-source > legend {
    padding-inline: var(--space-xs);
    color: var(--accent);
    font-weight: 700;
}

.palworld-source-traits {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.palworld-source-traits legend {
    margin-bottom: var(--space-xs);
    font-size: var(--step--1);
    font-weight: 700;
}

.palworld-trait-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.palworld-shell .palworld-checkbox {
    display: flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.palworld-checkbox input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

.palworld-remove {
    justify-self: start;
    margin-top: var(--space-xs);
}

#palworld-route-tree {
    --palworld-link: 1.75rem;
    --palworld-line: 2px;
    --palworld-card: 13rem;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
    padding: var(--space-md) var(--space-sm);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
    background: var(--paper);
}

#palworld-route-tree:empty {
    display: none;
}

.palworld-route-summary:not([hidden]) {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--palworld-border);
    color: var(--muted);
    font-size: 0.9rem;
}

/* Top-down family tree: each branch is a card with its two parents below,
   joined by a bracket connector and a decorative "×" pair marker. */
.palworld-tree,
.palworld-parents {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.palworld-tree-stage {
    position: relative;
    margin-inline: auto;
    overflow: hidden;
}

.palworld-tree {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    transform: scale(var(--palworld-tree-scale, 1));
    transform-origin: top left;
}

.palworld-tree-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-inline: var(--space-sm);
}

.palworld-tree > .palworld-tree-branch {
    padding-inline: 0;
}

.palworld-parents {
    position: relative;
    padding-top: var(--palworld-link);
}

/* Stem from the offspring card down to its parent pair. */
.palworld-parents::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: var(--palworld-link);
    margin-left: calc(var(--palworld-line) / -2);
    border-left: var(--palworld-line) solid var(--accent);
}

/* Pair marker where the stem meets the parents' bracket. */
.palworld-parents::after {
    content: "×";
    content: "×" / "";
    position: absolute;
    z-index: 1;
    top: var(--palworld-link);
    left: 50%;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border: var(--palworld-line) solid var(--accent);
    border-radius: 50%;
    background: var(--paper);
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.palworld-parents > .palworld-tree-branch {
    padding-top: var(--palworld-link);
}

.palworld-parents > .palworld-tree-branch::before,
.palworld-parents > .palworld-tree-branch::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: var(--palworld-link);
    box-sizing: border-box;
    border-top: var(--palworld-line) solid var(--accent);
}

.palworld-parents > .palworld-tree-branch::before {
    left: 0;
}

.palworld-parents > .palworld-tree-branch::after {
    left: 50%;
}

.palworld-parents > .palworld-tree-branch:first-child::before {
    border-top: 0;
}

.palworld-parents > .palworld-tree-branch:first-child::after {
    left: calc(50% - var(--palworld-line) / 2);
    width: calc(50% + var(--palworld-line) / 2);
    border-left: var(--palworld-line) solid var(--accent);
    border-top-left-radius: var(--palworld-radius);
}

.palworld-parents > .palworld-tree-branch:last-child::before {
    width: calc(50% + var(--palworld-line) / 2);
    border-right: var(--palworld-line) solid var(--accent);
    border-top-right-radius: var(--palworld-radius);
}

.palworld-parents > .palworld-tree-branch:last-child::after {
    border: 0;
}

.palworld-node {
    box-sizing: border-box;
    width: var(--palworld-card);
    padding: var(--space-sm);
    border: 1px solid var(--palworld-border);
    border-radius: var(--palworld-radius);
    background: var(--panel-solid);
    overflow-wrap: anywhere;
}

.palworld-node-breed {
    border-top: 3px solid var(--accent);
}

.palworld-node-helper {
    border-style: dashed;
}

.palworld-node-target {
    width: calc(var(--palworld-card) + 2rem);
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--accent);
}

.palworld-node-type {
    margin: 0 0 var(--space-xs);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 700;
}

.palworld-node-target .palworld-node-type {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.palworld-node-heading {
    margin: 0;
    font-size: var(--step-1);
}

.palworld-node .palworld-pal-identity {
    display: flex;
}

.palworld-node .palworld-location {
    margin-top: var(--space-xs);
}

.palworld-node button {
    width: 100%;
}

.palworld-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-sm) 0;
    padding: 0;
    list-style: none;
}

.palworld-chip {
    max-width: 100%;
    padding: 0.2rem var(--space-xs);
    border: 1px solid var(--accent);
    border-radius: var(--palworld-radius);
    color: var(--ink);
    font-size: var(--step--1);
    overflow-wrap: anywhere;
}

.palworld-chip-empty {
    border-color: var(--ink-soft);
    color: var(--ink-soft);
}

.palworld-eggs {
    margin-block: var(--space-xs) 0;
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 700;
}

.palworld-exclusions {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--palworld-border);
}

#palworld-excluded-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

#palworld-excluded-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.palworld-credits {
    margin-block: var(--space-lg);
    padding-block: var(--space-md);
    border-top: 1px solid var(--palworld-border);
}

.palworld-credits p {
    margin-block: var(--space-xs);
}

/* Spawn map popover: one shared element on <body>, fixed to the viewport and placed by
   the script, so the picker list, the tree stage and the scaled tree can neither clip
   nor scale it. It sits above the picker matches (z-index 30 inside the bar). */
.palworld-map-popover {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 2rem), max(12rem, calc(100vh - 9rem)));
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-sm);
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--panel-solid);
    color: var(--ink);
    font-size: var(--step--1);
    line-height: 1.4;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.palworld-map-popover[hidden] {
    display: none;
}

/* A pal found on both maps shows them side by side where the viewport allows. */
.palworld-map-popover-wide {
    width: min(36rem, calc(100vw - 2rem));
}

.palworld-map-popover-title {
    margin: 0;
    font-size: var(--step-0);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.palworld-map-popover-status {
    margin: 0.15em 0 0;
    color: var(--ink-soft);
}

.palworld-map-popover-error {
    color: var(--ink);
    font-weight: 700;
}

.palworld-map-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.palworld-map-figures:empty {
    display: none;
}

.palworld-map-figure {
    min-width: 0;
    margin: 0;
}

.palworld-map-figure figcaption {
    margin-top: 0.25em;
    color: var(--ink-soft);
}

.palworld-map-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--ink-soft);
    border-radius: 4px;
    background: var(--paper);
}

.palworld-map-stage img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Spawn zone: sized by the script as a share of the map width, never smaller than 7px. */
.palworld-map-dot {
    position: absolute;
    box-sizing: border-box;
    min-width: 7px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(226, 32, 92, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The planner is one continuous setup flow; every step remains visible while it is edited. */
.palworld-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.palworld-bar {
    width: min(64rem, 100%);
    box-sizing: border-box;
    margin-inline: auto;
}

.palworld-panel .palworld-bar-title {
    margin-bottom: var(--space-xs);
}

.palworld-plan-intro {
    max-width: 62ch;
    margin-bottom: var(--space-lg);
}

.palworld-controls {
    gap: 0;
}

.palworld-setup-step {
    min-width: 0;
    padding-block: var(--space-lg);
    border-top: 1px solid var(--palworld-border);
}

.palworld-setup-step:first-of-type {
    padding-top: var(--space-md);
}

.palworld-setup-step h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.palworld-step-number {
    display: inline-grid;
    flex: 0 0 2rem;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--paper);
    font-size: var(--step-0);
}

.palworld-optional {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 400;
}

#palworld-target-picker {
    max-width: 36rem;
}

#palworld-target-picker .palworld-picker {
    position: relative;
}

#palworld-target-picker .palworld-picker-matches {
    position: absolute;
    z-index: 30;
    right: 0;
    left: 0;
    max-width: min(36rem, calc(100vw - 2rem));
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#palworld-target-picker .palworld-picker-matches:empty::before {
    content: "No matching Pals. Try another name.";
    padding: var(--space-xs);
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.palworld-addons {
    display: block;
}

.palworld-addons-summary {
    margin: 0 0 var(--space-sm);
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 700;
}

.palworld-addons-panel {
    position: static;
    display: block;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.palworld-owned {
    padding-top: var(--space-lg);
}

.palworld-sources {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.palworld-source {
    align-content: start;
    background: var(--paper);
}

.palworld-remove {
    justify-self: end;
    margin-top: auto;
}

.palworld-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm) var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--accent);
}

.palworld-actions p {
    flex: 1 1 20rem;
    margin: 0;
    color: var(--ink-soft);
}

.palworld-shell .palworld-actions .palworld-primary {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
    padding-inline: var(--space-lg);
}

.palworld-results {
    scroll-margin-top: var(--space-lg);
}

.palworld-results > h2 {
    margin-bottom: var(--space-sm);
}

#palworld-route-status:not(:empty) {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm);
    border-left: 3px solid var(--accent);
    background: var(--paper);
    line-height: 1.5;
}

.palworld-results:is([data-route-state="stale"], [data-route-state="computing"]) #palworld-route-tree {
    opacity: 0.58;
}

.palworld-results[data-route-state="stale"] #palworld-route-status {
    border: 2px solid var(--accent);
    font-weight: 700;
}

@media (min-width: 800px) {
    .page-shell.palworld-shell {
        width: min(1360px, calc(100% - 40px));
    }

    .palworld-panel {
        padding: var(--space-lg);
    }

    .palworld-trait-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .palworld-panel {
        padding: var(--space-sm);
    }

    .palworld-trait-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .palworld-actions {
        align-items: stretch;
    }

    .palworld-shell .palworld-actions .palworld-primary {
        width: 100%;
    }

    #palworld-route-tree {
        --palworld-link: 1.5rem;
        --palworld-card: 11rem;
        padding-inline: var(--space-xs);
    }

    .palworld-tree-branch {
        padding-inline: var(--space-xs);
    }

    .palworld-node-target {
        width: calc(var(--palworld-card) + 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .palworld-results {
        scroll-behavior: auto;
    }
}