:root {
    color-scheme: dark;
    font-family: "Segoe UI Variable", "Malgun Gothic", system-ui, sans-serif;
    font-synthesis: none;
    --ink: #f5f7ed;
    --muted: #a9b3a6;
    --faint: #78847b;
    --night: #080d0b;
    --panel: #101713;
    --panel-strong: #151f19;
    --panel-glass: rgba(13, 20, 16, 0.88);
    --line: rgba(226, 238, 219, 0.13);
    --line-strong: rgba(226, 238, 219, 0.25);
    --moss: #8dab57;
    --lime: #cae56f;
    --lime-bright: #e6f7a7;
    --amber: #efbd64;
    --danger: #ed9278;
    background: var(--night);
    color: var(--ink);
}

.overflow-text-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(34rem, calc(100vw - 24px));
    padding: 9px 11px;
    border: 1px solid rgba(205, 239, 151, 0.42);
    border-radius: 8px;
    background: rgba(8, 14, 11, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    color: #f3f6e9;
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    pointer-events: none;
    white-space: normal;
}

.overflow-text-tooltip[hidden] {
    display: none;
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html,
body,
#app {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(119, 151, 88, 0.14), transparent 32rem),
        linear-gradient(150deg, #0b120e, #070b09 68%);
}

button,
input,
select {
    font: inherit;
}

button,
select {
    color: inherit;
}

button {
    border: 0;
}

button:not(:disabled),
select:not(:disabled) {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--lime-bright);
    outline-offset: 2px;
}

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

a {
    color: var(--lime-bright);
    text-underline-offset: 0.2em;
}

.world-app {
    position: relative;
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) 176px;
    width: min(100%, 1720px);
    height: 100vh;
    height: 100dvh;
    min-height: 620px;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(5, 9, 7, 0.64);
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.4);
}

.world-header {
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto minmax(280px, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 12, 9, 0.95);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.brand-lockup,
.header-session,
.header-location,
.deck-heading,
.choice-navigation,
.communications-heading,
.peer-identity,
.peer-actions,
.coop-heading,
.coop-actions {
    display: flex;
    align-items: center;
}

.brand-lockup {
    min-width: 0;
    gap: 11px;
}

.brand-symbol {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.48);
    border-radius: 10px 2px 10px 2px;
    color: var(--lime-bright);
    background: linear-gradient(145deg, rgba(103, 132, 70, 0.55), rgba(31, 52, 36, 0.34));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.eyebrow {
    margin: 0 0 2px;
    color: var(--moss);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.brand-lockup h1 {
    margin: 0;
    overflow: hidden;
    font-size: clamp(1rem, 1.45vw, 1.26rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-lockup h1 span {
    margin-left: 0.35em;
    color: var(--muted);
    font-size: 0.72em;
    font-weight: 600;
}

.header-location {
    flex-direction: column;
    min-width: 170px;
    text-align: center;
}

.header-location span,
.header-session > span:not(.connection-dot) {
    color: var(--muted);
    font-size: 0.72rem;
}

.header-location strong {
    max-width: 260px;
    overflow: hidden;
    color: var(--lime-bright);
    font-size: 0.94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-session {
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.connection-dot,
.presence {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6d756e;
    box-shadow: 0 0 0 3px rgba(109, 117, 110, 0.13);
}

.connection-dot.online,
.presence.online {
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(202, 229, 111, 0.15), 0 0 12px rgba(202, 229, 111, 0.35);
}

.world-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(330px, 27vw, 410px);
    min-height: 0;
    border-bottom: 1px solid var(--line);
}

.world-layout.knowledge-expanded {
    grid-template-columns: minmax(0, 1fr) clamp(600px, 48vw, 760px);
}

.play-column {
    display: grid;
    grid-template-rows: minmax(245px, 1fr) auto;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line);
}

.scene-frame {
    position: relative;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 70% 42%, rgba(164, 184, 112, 0.14), transparent 28%),
        linear-gradient(145deg, #1b2a20, #0f1712 70%);
}

.scene-art,
.scene-layer,
.scene-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scene-art {
    overflow: hidden;
}

.scene-layer {
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
}

.scene-background {
    z-index: 0;
    object-fit: cover;
}

.scene-facility {
    z-index: 1;
    inset: auto 2% 1% auto;
    width: min(39%, 470px);
    height: min(78%, 430px);
    object-position: right bottom;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.34));
}

.scene-player {
    z-index: 3;
    inset: auto auto -2% 6%;
    width: min(28%, 330px);
    height: min(88%, 490px);
    object-position: left bottom;
    filter: drop-shadow(0 15px 16px rgba(0, 0, 0, 0.45));
}

.scene-companion {
    z-index: 4;
    inset: auto auto 1% 27%;
    width: min(20%, 230px);
    height: min(42%, 235px);
    object-position: left bottom;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4));
}

.scene-vignette {
    z-index: 5;
    background:
        linear-gradient(90deg, rgba(5, 9, 7, 0.72), transparent 36%, transparent 72%, rgba(5, 9, 7, 0.28)),
        linear-gradient(0deg, rgba(5, 9, 7, 0.68), transparent 39%, rgba(5, 9, 7, 0.08));
    pointer-events: none;
}

.combat-active .scene-vignette {
    background:
        linear-gradient(90deg, rgba(5, 9, 7, 0.72), transparent 31%, transparent 78%, rgba(5, 9, 7, 0.38)),
        linear-gradient(0deg, rgba(5, 9, 7, 0.72), transparent 46%, rgba(5, 9, 7, 0.22));
}

.profile-mode {
    padding: 3px 7px;
    border: 1px solid rgba(202, 229, 111, 0.34);
    border-radius: 999px;
    color: var(--lime);
    background: rgba(202, 229, 111, 0.08);
    font-size: 0.61rem;
    font-weight: 800;
    white-space: nowrap;
}

.profile-mode.test {
    border-color: rgba(235, 184, 94, 0.44);
    color: var(--amber);
    background: rgba(235, 184, 94, 0.1);
}

.combat-active .scene-facility,
.combat-active .scene-companion {
    display: none;
}

.combat-active .scene-player {
    left: 3%;
    width: min(30%, 340px);
    height: min(91%, 510px);
    opacity: 0.88;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.58));
}

.combat-stage {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
}

.combat-target-panel,
.combat-player-panel,
.combat-metrics {
    position: absolute;
    z-index: 9;
    border: 1px solid rgba(226, 238, 219, 0.2);
    background: rgba(8, 13, 10, 0.82);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(9px);
}

.combat-target-panel {
    top: 13px;
    right: 15px;
    display: grid;
    width: min(56%, 510px);
    gap: 6px;
    padding: 8px 10px 9px;
    border-color: rgba(237, 146, 120, 0.42);
    border-radius: 12px 3px 12px 3px;
}

.combat-identity {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.combat-identity .eyebrow {
    position: absolute;
    top: -15px;
    right: 2px;
    color: rgba(245, 247, 237, 0.76);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.combat-identity h2 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.48rem);
    letter-spacing: -0.04em;
}

.combat-identity > span {
    color: var(--amber);
    font-size: 0.62rem;
    font-weight: 750;
    white-space: nowrap;
}

.combat-health {
    --health-color: var(--lime);
}

.combat-health.warning {
    --health-color: var(--amber);
}

.combat-health.critical,
.combat-health.enemy {
    --health-color: var(--danger);
}

.combat-health > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.combat-health span {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 750;
}

.combat-health strong {
    color: var(--ink);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.combat-health progress {
    display: block;
    width: 100%;
    height: 11px;
    overflow: hidden;
    appearance: none;
    border: 1px solid rgba(226, 238, 219, 0.18);
    border-radius: 999px;
    background: rgba(1, 4, 2, 0.78);
}

.combat-health progress::-webkit-progress-bar {
    background: rgba(1, 4, 2, 0.78);
}

.combat-health progress::-webkit-progress-value {
    background: linear-gradient(90deg, color-mix(in srgb, var(--health-color) 70%, #5d321f), var(--health-color));
}

.combat-health progress::-moz-progress-bar {
    background: linear-gradient(90deg, color-mix(in srgb, var(--health-color) 70%, #5d321f), var(--health-color));
}

.combat-creature-frame {
    position: absolute;
    z-index: 8;
    top: 3px;
    right: 1%;
    bottom: 3px;
    display: grid;
    width: 62%;
    margin: 0;
    place-items: center;
}

.combat-creature-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.combat-creature-frame.cutout img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 18px 19px rgba(0, 0, 0, 0.63));
}

.combat-creature-frame.thumbnail {
    top: 82px;
    right: 5%;
    bottom: 20px;
    width: 47%;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(202, 229, 111, 0.28);
    border-radius: 18px 4px 18px 4px;
    background: rgba(12, 20, 15, 0.7);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(7px);
}

.combat-creature-frame.thumbnail img {
    width: min(100%, 310px);
    aspect-ratio: 1;
    border-radius: 12px 2px 12px 2px;
    object-fit: cover;
}

.combat-creature-frame figcaption {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: var(--muted);
    font-size: 0.55rem;
}

.combat-art-missing {
    display: grid;
    width: 148px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px dashed var(--line-strong);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(8, 13, 10, 0.7);
    font-size: 2rem;
}

.combat-player-panel {
    bottom: 12px;
    left: 14px;
    width: min(37%, 315px);
    padding: 8px 10px 9px;
    border-color: rgba(202, 229, 111, 0.38);
    border-radius: 3px 12px 3px 12px;
}

.combat-player-panel .eyebrow {
    margin-bottom: 4px;
    color: var(--lime-bright);
}

.combat-weapon-status {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(202, 229, 111, 0.2);
    font-size: 0.58rem;
}

.combat-weapon-status span {
    color: var(--lime-bright);
    font-weight: 800;
}

.combat-weapon-status strong {
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.combat-metrics {
    top: 14px;
    left: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(62px, 1fr));
    width: min(29%, 218px);
    margin: 0;
    padding: 5px;
    border-radius: 10px 3px 10px 3px;
}

.combat-metrics div {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    padding: 4px 5px;
}

.combat-metrics dt {
    color: var(--muted);
    font-size: 0.55rem;
}

.combat-metrics dd {
    margin: 0;
    color: var(--lime-bright);
    font-size: 0.62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.scene-heading,
.survival-hud,
.scene-outcomes,
.destination-rail {
    position: absolute;
    z-index: 7;
}

.scene-heading {
    top: 18px;
    left: 20px;
    max-width: 58%;
    text-shadow: 0 2px 13px rgba(0, 0, 0, 0.7);
}

.scene-heading p {
    margin: 0 0 3px;
    color: var(--lime);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.scene-heading h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3.1vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.scene-heading > span {
    display: block;
    margin-top: 7px;
    color: rgba(245, 247, 237, 0.82);
    font-size: clamp(0.7rem, 1vw, 0.84rem);
}

.survival-hud {
    top: 15px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(75px, 1fr));
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(8, 13, 10, 0.73);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(9px);
}

.survival-hud div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 80px;
}

.survival-hud span {
    color: var(--muted);
    font-size: 0.62rem;
}

.survival-hud strong {
    color: var(--lime-bright);
    font-size: 0.73rem;
}

.scene-outcomes {
    top: 102px;
    right: 16px;
    display: grid;
    width: min(220px, 34%);
    gap: 5px;
}

.outcome-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px 6px 6px;
    border: 1px solid rgba(202, 229, 111, 0.35);
    border-radius: 10px 3px 10px 3px;
    background: rgba(8, 14, 10, 0.82);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(9px);
}

.outcome-card .item-art {
    width: 44px;
    height: 44px;
}

.outcome-card span {
    min-width: 0;
}

.outcome-card small,
.outcome-card strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outcome-card small {
    color: var(--amber);
    font-size: 0.51rem;
}

.outcome-card strong {
    margin-top: 2px;
    font-size: 0.65rem;
}

.outcome-card b {
    color: var(--lime-bright);
    font-size: 0.78rem;
}

.outcome-card.creature {
    border-color: rgba(104, 190, 206, 0.55);
}

.destination-rail {
    right: 14px;
    bottom: 12px;
    left: 14px;
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.rail-label {
    display: grid;
    flex: 0 0 43px;
    min-height: 43px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.36);
    border-radius: 8px 2px 8px 2px;
    color: var(--lime-bright);
    background: rgba(30, 49, 34, 0.84);
    font-size: 0.68rem;
    font-weight: 900;
}

.destination-button {
    display: flex;
    flex: 0 1 190px;
    min-width: 116px;
    min-height: 43px;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    text-align: left;
    background: rgba(10, 16, 12, 0.82);
    backdrop-filter: blur(8px);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.destination-button:not(:disabled):hover {
    border-color: rgba(202, 229, 111, 0.62);
    background: rgba(31, 48, 34, 0.94);
    box-shadow: inset 0 0 0 1px rgba(202, 229, 111, 0.15), 0 7px 14px rgba(0, 0, 0, 0.22);
}

.destination-button:focus-visible,
.action-card:focus-visible {
    outline-offset: -2px;
}

.destination-button span {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destination-button small {
    color: var(--muted);
    font-size: 0.58rem;
}

.action-deck {
    min-height: 145px;
    max-height: 185px;
    padding: 11px 14px 12px;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(44, 63, 42, 0.16), transparent 36%),
        var(--panel);
}

.action-deck.quick-route-open {
    max-height: 245px;
}

.quick-play-route {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0 0 7px;
    padding: 7px 9px;
    border: 1px solid rgba(235, 184, 94, 0.35);
    border-radius: 9px;
    background:
        linear-gradient(105deg, rgba(235, 184, 94, 0.12), transparent 48%),
        rgba(18, 28, 21, 0.9);
}

.quick-play-copy {
    min-width: 0;
}

.quick-play-copy span,
.quick-play-copy strong {
    display: block;
}

.quick-play-copy span {
    margin-bottom: 2px;
    color: var(--amber);
    font-size: 0.59rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.quick-play-copy strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-play-steps {
    display: flex;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

.quick-play-steps li {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 1px solid rgba(202, 229, 111, 0.17);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(8, 14, 10, 0.64);
    font-size: 0.58rem;
    white-space: nowrap;
}

.quick-play-steps b {
    color: var(--lime-bright);
}

.quick-play-button,
.quick-play-ready {
    flex: 0 0 auto;
    border-radius: 7px;
    font-size: 0.64rem;
    font-weight: 850;
    white-space: nowrap;
}

.quick-play-button {
    padding: 7px 10px;
    border: 1px solid rgba(235, 184, 94, 0.64);
    color: #171109;
    background: var(--amber);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.quick-play-button:hover {
    border-color: #ffe1a7;
    background: #f5c978;
}

.quick-play-ready {
    padding: 6px 9px;
    border: 1px solid rgba(202, 229, 111, 0.3);
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.08);
}

.deck-heading {
    justify-content: space-between;
    gap: 12px;
    min-height: 31px;
    margin-bottom: 8px;
}

.deck-heading h2 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: -0.025em;
}

.choice-navigation {
    gap: 5px;
}

.action-grid {
    display: grid;
    grid-auto-columns: minmax(174px, 1fr);
    grid-auto-flow: column;
    gap: 7px;
    padding: 4px 0;
    overflow-x: auto;
    scrollbar-color: rgba(202, 229, 111, 0.25) transparent;
    scrollbar-width: thin;
}

.action-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 70px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    text-align: left;
    background: rgba(23, 33, 26, 0.88);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.action-card:hover {
    border-color: rgba(202, 229, 111, 0.45);
    background: #1d2b20;
    box-shadow: inset 0 0 0 1px rgba(202, 229, 111, 0.13), 0 8px 17px rgba(0, 0, 0, 0.2);
}

.action-card.choice {
    border-left-color: rgba(239, 189, 100, 0.72);
}

.action-card.choice.unavailable {
    border-color: rgba(237, 146, 120, 0.28);
    opacity: 0.72;
    background: rgba(35, 30, 25, 0.82);
}

.action-card.choice.unavailable .action-icon {
    color: var(--amber);
    border-color: rgba(237, 146, 120, 0.32);
}

.action-card.choice.unavailable small {
    color: rgba(247, 216, 178, 0.78);
    overflow: visible;
    line-height: 1.28;
    text-overflow: clip;
    white-space: normal;
}

.action-card.hub {
    min-height: 76px;
    border-top-color: rgba(202, 229, 111, 0.34);
    background:
        linear-gradient(135deg, rgba(202, 229, 111, 0.08), transparent 64%),
        rgba(23, 33, 26, 0.9);
}

.action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.26);
    border-radius: 8px 2px 8px 2px;
    color: var(--lime-bright);
    background: rgba(113, 143, 76, 0.14);
    font-size: 1rem;
    font-weight: 900;
}

.action-card > span:last-child {
    min-width: 0;
}

.action-card strong,
.action-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-card strong {
    margin-bottom: 3px;
    font-size: 0.76rem;
}

.action-card small {
    color: var(--muted);
    font-size: 0.6rem;
}

.game-inspector {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: var(--panel);
}

.inspector-tabs {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: #0d1410;
}

.inspector-tabs button {
    position: relative;
    min-width: 0;
    padding: 11px 2px 9px;
    color: var(--muted);
    background: transparent;
    font-size: 0.63rem;
    font-weight: 700;
}

.inspector-tabs button::after {
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 2px;
    content: "";
    background: transparent;
}

.inspector-tabs button:hover,
.inspector-tabs button.selected {
    color: var(--ink);
    background: rgba(202, 229, 111, 0.05);
}

.inspector-tabs button.selected::after {
    background: var(--lime);
}

.inspector-content {
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    scrollbar-color: rgba(202, 229, 111, 0.2) transparent;
    scrollbar-width: thin;
}

.panel-section {
    margin: 0 0 12px;
}

.panel-section h2 {
    margin: 0 0 11px;
    font-size: 1rem;
    letter-spacing: -0.025em;
}

.panel-section h3 {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.catalog-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 10px 0;
}

.knowledge-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 9px 0 10px;
}

.knowledge-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.knowledge-view-tabs button {
    min-width: 0;
    padding: 8px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(13, 20, 15, 0.82);
    font-size: 0.6rem;
    font-weight: 800;
}

.knowledge-view-tabs button:hover,
.knowledge-view-tabs button.selected {
    border-color: rgba(202, 229, 111, 0.48);
    color: var(--ink);
    background: rgba(39, 54, 33, 0.9);
}

.knowledge-expand {
    white-space: nowrap;
}

.knowledge-search {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.knowledge-search span {
    color: var(--muted);
    font-size: 0.5rem;
}

.knowledge-search input {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: rgba(10, 16, 12, 0.94);
    font: inherit;
    font-size: 0.58rem;
}

.catalog-boundary b {
    color: var(--lime-bright);
}

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

.catalog-tabs button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(13, 20, 15, 0.82);
    font-size: 0.59rem;
}

.catalog-tabs button:hover,
.catalog-tabs button.selected {
    border-color: rgba(202, 229, 111, 0.42);
    color: var(--ink);
    background: rgba(39, 54, 33, 0.9);
}

.catalog-tabs button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-tabs button b {
    color: var(--lime-bright);
    font-size: 0.55rem;
}

.catalog-boundary {
    margin: 0 0 9px;
    padding: 8px;
    border-left: 2px solid var(--moss);
    color: var(--muted);
    background: rgba(141, 171, 87, 0.06);
    font-size: 0.58rem;
    line-height: 1.45;
}

.catalog-grid {
    display: grid;
    gap: 6px;
}

.catalog-entry {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(18, 27, 21, 0.9);
}

.catalog-entry.current,
.catalog-entry.complete {
    border-color: rgba(202, 229, 111, 0.38);
}

.catalog-entry.boundary {
    border-color: rgba(239, 189, 100, 0.28);
}

.catalog-entry.missing {
    border-color: rgba(237, 146, 120, 0.42);
}

.catalog-entry .item-art {
    width: 48px;
    height: 48px;
}

.catalog-copy,
.catalog-title {
    min-width: 0;
}

.catalog-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.catalog-title span {
    flex: 0 0 auto;
    color: var(--moss);
    font-size: 0.52rem;
    font-weight: 800;
}

.catalog-title strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-copy small,
.catalog-copy p,
.catalog-copy > b {
    display: block;
    margin: 2px 0 0;
    font-size: 0.56rem;
    line-height: 1.35;
}

.catalog-copy small,
.catalog-copy p {
    color: var(--muted);
}

.catalog-copy > b {
    color: var(--lime-bright);
}

.catalog-entry.boundary .catalog-copy > b {
    color: var(--amber);
}

.catalog-entry.missing .catalog-copy > b {
    color: var(--danger);
}

.management-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.management-heading h2,
.management-heading h3 {
    margin: 0;
}

.management-heading > span {
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.06);
    font-size: 0.61rem;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.inventory-load {
    display: grid;
    gap: 0.45rem;
    margin: 0.8rem 0 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(186, 216, 112, 0.26);
    border-radius: 0.8rem;
    background: rgba(12, 25, 19, 0.7);
}

.inventory-load.blocked {
    border-color: rgba(242, 139, 99, 0.66);
}

.inventory-load-copy {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.inventory-load-copy span,
.inventory-load small {
    color: var(--muted);
}

.inventory-load-meter {
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.inventory-load-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9ec85e, #e7b44c, #dc795d);
}

.inventory-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(18, 27, 21, 0.9);
}

.inventory-item.equipped {
    border-color: rgba(202, 229, 111, 0.4);
    box-shadow: inset 0 0 0 1px rgba(202, 229, 111, 0.06);
}

.item-art {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(202, 229, 111, 0.2);
    border-radius: 8px 2px 8px 2px;
    color: var(--lime-bright);
    background:
        radial-gradient(circle at 50% 34%, rgba(202, 229, 111, 0.13), transparent 58%),
        #101811;
    font-size: 0.9rem;
    font-weight: 900;
}

.item-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.item-copy strong,
.item-copy span,
.item-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.item-copy span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.59rem;
}

.item-copy small {
    margin-top: 2px;
    color: var(--amber);
    font-size: 0.55rem;
}

.inventory-item-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.inventory-item-actions > button {
    width: 100%;
}

.inventory-item > .item-effect-list {
    grid-column: 1 / -1;
}

.item-effect-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 5px;
    min-width: 0;
}

.item-effect-list.compact {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.item-effect {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(153, 181, 119, 0.2);
    border-radius: 6px;
    background: rgba(7, 14, 10, 0.46);
}

.item-effect.better {
    border-color: rgba(202, 229, 111, 0.48);
    background: rgba(202, 229, 111, 0.07);
}

.item-effect.worse {
    border-color: rgba(237, 146, 120, 0.45);
    background: rgba(237, 146, 120, 0.06);
}

.item-effect > span {
    color: var(--muted);
    font-size: 0.47rem;
}

.item-effect > strong {
    overflow-wrap: anywhere;
    color: #eef5df;
    font-size: 0.58rem;
}

.item-effect > small {
    color: var(--muted);
    font-size: 0.46rem;
    line-height: 1.35;
}

.item-effect.better > small { color: var(--lime-bright); }
.item-effect.worse > small { color: #f2a18b; }

.equipment-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.equipment-slot {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 48px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    text-align: left;
    background: rgba(17, 26, 20, 0.9);
}

.equipment-slot:hover,
.equipment-slot.selected {
    border-color: rgba(202, 229, 111, 0.5);
    background: rgba(37, 54, 39, 0.94);
}

.slot-glyph {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.2);
    border-radius: 7px 2px 7px 2px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.06);
}

.equipment-slot small,
.equipment-slot strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-slot small {
    color: var(--muted);
    font-size: 0.52rem;
}

.equipment-slot strong {
    margin-top: 2px;
    font-size: 0.61rem;
}

.explorer-figure {
    position: relative;
    display: grid;
    place-items: center;
    color: #98ad72;
}

.explorer-figure svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.figure-ground {
    fill: rgba(0, 0, 0, 0.34);
}

.figure-halo {
    fill: rgba(202, 229, 111, 0.035);
    stroke: rgba(202, 229, 111, 0.12);
    stroke-width: 2;
}

.explorer-figure.warning .figure-halo {
    fill: rgba(239, 189, 100, 0.045);
    stroke: rgba(239, 189, 100, 0.25);
}

.explorer-figure.danger .figure-halo {
    fill: rgba(237, 146, 120, 0.05);
    stroke: rgba(237, 146, 120, 0.28);
}

.figure-head,
.figure-neck,
.figure-arm,
.figure-leg {
    fill: #829066;
    stroke: rgba(220, 234, 182, 0.34);
    stroke-width: 1.2;
}

.figure-hair,
.figure-glove,
.figure-boot {
    fill: #26362a;
    stroke: rgba(202, 229, 111, 0.28);
    stroke-width: 1.2;
}

.figure-body {
    fill: #42563f;
    stroke: rgba(220, 234, 182, 0.36);
    stroke-width: 1.4;
}

.figure-jacket {
    fill: #304334;
    stroke: rgba(202, 229, 111, 0.25);
    stroke-width: 1.2;
}

.figure-strap,
.figure-belt {
    fill: none;
    stroke: rgba(225, 235, 194, 0.55);
    stroke-width: 2.2;
}

.figure-label {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: max-content;
    max-width: 100%;
    padding: 3px 7px;
    transform: translateX(-50%);
    border: 1px solid rgba(202, 229, 111, 0.25);
    border-radius: 999px;
    color: var(--lime-bright);
    background: rgba(8, 14, 10, 0.9);
    font-size: 0.5rem;
    font-weight: 900;
}

.equipment-body-map {
    position: relative;
    height: 356px;
    margin-top: 9px;
    padding-top: 1px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 41%, rgba(202, 229, 111, 0.09), transparent 31%),
        linear-gradient(180deg, rgba(28, 41, 30, 0.95), rgba(10, 16, 12, 0.96));
}

.equipment-body-map::before {
    position: absolute;
    top: 8px;
    bottom: 35px;
    left: 50%;
    width: 1px;
    content: "";
    background: linear-gradient(transparent, rgba(202, 229, 111, 0.14), transparent);
}

.equipment-body-map > .explorer-figure {
    position: absolute;
    z-index: 0;
    top: 18px;
    left: 50%;
    width: clamp(108px, 38%, 150px);
    height: 278px;
    transform: translateX(-50%);
}

.equipment-map-slot {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    width: clamp(84px, 29%, 132px);
    min-width: 0;
    min-height: 38px;
    padding: 5px;
    border: 1px solid rgba(202, 229, 111, 0.16);
    border-radius: 7px;
    color: var(--ink);
    text-align: left;
    background: rgba(8, 14, 10, 0.9);
}

.equipment-map-slot:hover,
.equipment-map-slot.selected {
    z-index: 3;
    border-color: rgba(202, 229, 111, 0.64);
    background: rgba(39, 55, 37, 0.97);
    box-shadow: 0 0 16px rgba(202, 229, 111, 0.12);
}

.equipment-map-slot.equipped {
    border-color: rgba(202, 229, 111, 0.38);
}

.equipment-map-slot[class*="clothing-"],
.equipment-map-slot.bag,
.equipment-map-slot.main-hand,
.equipment-map-slot.combat-tool-1,
.equipment-map-slot.combat-tool-2 {
    left: 6px;
    border-left: 2px solid #9bcbd2;
}

.equipment-map-slot[class*="armor-"],
.equipment-map-slot.off-hand {
    right: 6px;
    border-right: 2px solid var(--amber);
}

.equipment-map-slot.clothing-head,
.equipment-map-slot.armor-head { top: 7px; }
.equipment-map-slot.clothing-body,
.equipment-map-slot.armor-torso { top: 55px; }
.equipment-map-slot.bag,
.equipment-map-slot.armor-hands { top: 103px; }
.equipment-map-slot.main-hand,
.equipment-map-slot.off-hand { top: 151px; }
.equipment-map-slot.combat-tool-1,
.equipment-map-slot.armor-legs { top: 199px; }
.equipment-map-slot.combat-tool-2 { top: 247px; }
.equipment-map-slot.clothing-feet,
.equipment-map-slot.armor-feet { top: 295px; }

.map-slot-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.2);
    border-radius: 6px 2px 6px 2px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.06);
}

.map-slot-icon .item-art {
    width: 23px;
    height: 23px;
    border: 0;
    border-radius: 5px;
}

.map-slot-copy,
.map-slot-copy small,
.map-slot-copy strong {
    display: block;
    min-width: 0;
}

.map-slot-copy small,
.map-slot-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-slot-copy small {
    color: var(--muted);
    font-size: 0.44rem;
}

.map-slot-copy strong {
    margin-top: 2px;
    font-size: 0.5rem;
}

.equipment-map-legend {
    position: absolute;
    right: 6px;
    bottom: 5px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.45rem;
}

.equipment-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.equipment-map-legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.equipment-map-legend .inner { background: #9bcbd2; }
.equipment-map-legend .outer { background: var(--amber); }

.equipment-candidate-row {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(13, 20, 15, 0.9);
}

.equipment-candidate-row:hover {
    border-color: rgba(202, 229, 111, 0.42);
    background: rgba(24, 35, 26, 0.94);
}

.status-dashboard {
    display: grid;
    gap: 9px;
}

.condition-pill.safe {
    color: var(--lime-bright);
    border-color: rgba(202, 229, 111, 0.36);
}

.condition-pill.warning {
    color: var(--amber);
    border-color: rgba(239, 189, 100, 0.38);
}

.condition-pill.danger {
    color: #f2a18b;
    border-color: rgba(237, 146, 120, 0.44);
}

.status-hero {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    min-height: 174px;
    padding: 8px 10px 8px 2px;
    border: 1px solid rgba(202, 229, 111, 0.24);
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 44%, rgba(202, 229, 111, 0.11), transparent 32%),
        linear-gradient(135deg, rgba(34, 50, 35, 0.96), rgba(13, 21, 16, 0.96));
}

.status-hero.warning {
    border-color: rgba(239, 189, 100, 0.3);
}

.status-hero.danger {
    border-color: rgba(237, 146, 120, 0.36);
}

.status-hero .explorer-figure {
    width: 104px;
    height: 166px;
}

.status-hero-copy {
    min-width: 0;
}

.status-hero-copy span,
.status-hero-copy strong {
    display: block;
}

.status-hero-copy > span {
    color: var(--muted);
    font-size: 0.5rem;
}

.status-hero-copy strong {
    margin-top: 3px;
    font-size: 0.9rem;
}

.status-hero-copy p {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.56rem;
    line-height: 1.55;
}

.status-meter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.status-meter {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(17, 26, 20, 0.92);
}

.status-meter.warning {
    border-color: rgba(239, 189, 100, 0.3);
}

.status-meter.danger {
    border-color: rgba(237, 146, 120, 0.38);
}

.status-meter-heading {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.status-meter-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 5px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.08);
    font-size: 0.55rem;
}

.status-meter-heading strong,
.status-meter-heading b {
    font-size: 0.54rem;
}

.status-meter-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-meter-heading b {
    color: var(--lime-bright);
}

.status-meter.warning .status-meter-heading b,
.status-meter.warning .status-meter-icon {
    color: var(--amber);
}

.status-meter.danger .status-meter-heading b,
.status-meter.danger .status-meter-icon {
    color: #f2a18b;
}

.status-meter-track {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(116, 132, 120, 0.2);
}

.status-meter-track i {
    display: block;
    width: var(--meter-value);
    height: 100%;
    border-radius: inherit;
    background: var(--lime);
}

.status-meter.warning .status-meter-track i { background: var(--amber); }
.status-meter.danger .status-meter-track i { background: var(--danger); }

.status-meter small {
    color: var(--muted);
    font-size: 0.46rem;
    line-height: 1.4;
}

.status-recovery-section {
    display: grid;
    gap: 7px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.status-recovery-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
}

.status-recovery-heading span,
.status-recovery-heading small {
    color: var(--muted);
    font-size: 0.48rem;
}

.status-recovery-heading h3 {
    margin: 2px 0 0;
    font-size: 0.7rem;
}

.status-recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.status-recovery-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 24, 18, 0.92);
}

.status-recovery-card.warning {
    border-color: rgba(239, 189, 100, 0.32);
}

.status-recovery-card.danger,
.status-recovery-card.unconnected {
    border-color: rgba(237, 146, 120, 0.38);
}

.status-recovery-card > header {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.recovery-glyph {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 7px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.09);
}

.status-recovery-card > header strong,
.status-recovery-card > header small {
    display: block;
}

.status-recovery-card > header strong {
    font-size: 0.61rem;
}

.status-recovery-card > header small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.45rem;
}

.status-recovery-card.unconnected > header small {
    color: #f2a18b;
}

.status-recovery-card > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.5rem;
    line-height: 1.48;
}

.recovery-options {
    display: grid;
    gap: 5px;
}

.recovery-option {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(153, 181, 119, 0.16);
    border-radius: 7px;
    background: rgba(7, 13, 9, 0.44);
}

.recovery-option.active,
.recovery-option.ready {
    border-color: rgba(202, 229, 111, 0.35);
}

.recovery-option.blocked {
    border-color: rgba(237, 146, 120, 0.28);
}

.recovery-option-main {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.recovery-option-main .item-art {
    width: 35px;
    height: 35px;
}

.recovery-option-main strong,
.recovery-option-main small,
.recovery-state {
    display: block;
}

.recovery-state {
    color: var(--lime-bright);
    font-size: 0.43rem;
    font-weight: 800;
}

.recovery-option.missing .recovery-state,
.recovery-option.blocked .recovery-state {
    color: var(--amber);
}

.recovery-option-main strong {
    margin-top: 1px;
    font-size: 0.57rem;
}

.recovery-option-main small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.45rem;
    line-height: 1.4;
}

.recovery-option-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.recovery-option-actions > button:only-child {
    grid-column: 1 / -1;
}

.recovery-empty {
    padding: 7px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.48rem;
}

.status-context-grid,
.status-progress-grid {
    display: grid;
    gap: 6px;
}

.status-context-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(14, 22, 16, 0.9);
}

.context-glyph {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(202, 229, 111, 0.2);
    border-radius: 9px 3px 9px 3px;
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.06);
    font-size: 1rem;
}

.status-context-card small,
.status-context-card strong,
.status-context-card div > span {
    display: block;
}

.status-context-card small {
    color: var(--muted);
    font-size: 0.47rem;
}

.status-context-card strong {
    margin-top: 2px;
    font-size: 0.64rem;
}

.status-context-card div > span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.49rem;
    line-height: 1.35;
}

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

.status-progress-card {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(18, 27, 21, 0.9);
}

.status-progress-card > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
}

.status-progress-card small {
    color: var(--muted);
    font-size: 0.47rem;
}

.status-progress-card strong {
    color: var(--lime-bright);
    font-size: 0.62rem;
}

.status-progress-card > i {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(116, 132, 120, 0.2);
}

.status-progress-card > i b {
    display: block;
    width: var(--progress-value);
    height: 100%;
    border-radius: inherit;
    background: var(--lime);
}

.status-progress-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.47rem;
    line-height: 1.4;
}

.slot-detail {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.slot-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.slot-detail-heading span,
.slot-detail-heading strong {
    display: block;
}

.slot-detail-heading span {
    color: var(--muted);
    font-size: 0.56rem;
}

.slot-detail-heading strong {
    margin-top: 2px;
    font-size: 0.72rem;
}

.equipped-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid rgba(202, 229, 111, 0.2);
    border-radius: 7px;
    background: rgba(202, 229, 111, 0.04);
}

.equipped-summary + .item-effect-list {
    margin: -4px 0 10px;
}

.equipped-summary strong,
.equipped-summary span {
    display: block;
}

.equipped-summary strong {
    font-size: 0.69rem;
}

.equipped-summary span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
}

.equipped-summary .equipped-ammunition {
    color: var(--amber);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.equipment-candidates {
    display: grid;
    gap: 6px;
}

.equipment-candidate {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    color: var(--ink);
    text-align: left;
    background: transparent;
}

.equipment-candidate .item-art {
    width: 38px;
    height: 38px;
}

.equipment-candidate strong,
.equipment-candidate small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-candidate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.equipment-candidate-actions > button {
    width: 100%;
}

.panel-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.panel-heading-row h2 {
    margin-bottom: 0;
}

.farm-availability {
    padding: 4px 7px;
    border: 1px solid rgba(226, 171, 80, 0.32);
    border-radius: 999px;
    color: var(--amber);
    background: rgba(226, 171, 80, 0.06);
    font-size: 0.55rem;
    white-space: nowrap;
}

.farm-availability.ready {
    border-color: rgba(202, 229, 111, 0.35);
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.06);
}

.farm-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.farm-summary div {
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(16, 25, 18, 0.8);
}

.farm-summary span,
.farm-summary strong {
    display: block;
}

.farm-summary span {
    color: var(--muted);
    font-size: 0.54rem;
}

.farm-summary strong {
    margin-top: 3px;
    color: var(--lime-bright);
    font-size: 0.67rem;
}

.panel-note {
    margin: 0 0 10px;
    padding: 8px;
    border-left: 2px solid var(--amber);
    color: var(--muted);
    background: rgba(226, 171, 80, 0.05);
    font-size: 0.61rem;
    line-height: 1.55;
}

.farm-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 9px;
}

.farm-mode-tabs button {
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: rgba(17, 26, 19, 0.9);
    font-size: 0.62rem;
    font-weight: 800;
}

.farm-mode-tabs button:hover,
.farm-mode-tabs button.selected {
    border-color: rgba(202, 229, 111, 0.48);
    color: var(--ink);
    background: rgba(202, 229, 111, 0.09);
}

.farm-module-tabs {
    display: grid;
    grid-auto-columns: minmax(142px, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    margin-bottom: 8px;
    padding: 2px 1px 5px;
    overflow-x: auto;
}

.farm-module-tabs button {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    text-align: left;
    background: rgba(15, 23, 17, 0.92);
}

.farm-module-tabs button:hover,
.farm-module-tabs button.selected {
    border-color: rgba(202, 229, 111, 0.5);
    color: var(--ink);
    background: rgba(42, 58, 38, 0.96);
}

.farm-module-tabs strong,
.farm-module-tabs small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.farm-module-tabs strong {
    font-size: 0.62rem;
}

.farm-module-tabs small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.5rem;
}

.seed-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 144px;
    margin-bottom: 9px;
    overflow-y: auto;
}

.seed-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    text-align: left;
    background: rgba(15, 23, 17, 0.9);
}

.seed-card:hover,
.seed-card.selected {
    border-color: rgba(202, 229, 111, 0.48);
    background: rgba(38, 54, 39, 0.94);
}

.seed-card .item-art {
    width: 36px;
    height: 36px;
}

.seed-card strong,
.seed-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seed-card strong {
    font-size: 0.62rem;
}

.seed-card small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.53rem;
}

.farm-selection-tools {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.farm-selection-tools p {
    max-width: 54%;
    margin: 0;
    color: var(--muted);
    font-size: 0.57rem;
    line-height: 1.45;
}

.farm-selection-tools > div {
    display: flex;
    gap: 4px;
}

.farm-plot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.farm-plot {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 5px 7px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px 3px 9px 3px;
    color: var(--ink);
    background:
        linear-gradient(155deg, rgba(60, 44, 25, 0.85), rgba(26, 29, 20, 0.95));
}

.farm-plot.eligible:hover,
.farm-plot.selected {
    border-color: rgba(202, 229, 111, 0.62);
    box-shadow: inset 0 0 0 1px rgba(202, 229, 111, 0.08);
}

.farm-plot.selected {
    background:
        linear-gradient(155deg, rgba(82, 77, 38, 0.9), rgba(34, 46, 29, 0.97));
}

.farm-plot.unavailable {
    opacity: 0.55;
}

.farm-plot .item-art {
    width: 54px;
    height: 54px;
    border-color: rgba(211, 187, 112, 0.25);
    background:
        radial-gradient(ellipse at 50% 45%, rgba(126, 105, 58, 0.22), transparent 62%),
        rgba(29, 29, 20, 0.8);
}

.plot-number {
    position: absolute;
    top: 4px;
    left: 5px;
    z-index: 1;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #10150f;
    background: var(--lime);
    font-size: 0.51rem;
    font-weight: 900;
}

.plot-copy {
    display: block;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.plot-copy strong,
.plot-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plot-copy strong {
    font-size: 0.59rem;
}

.plot-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.5rem;
}

.growth-track {
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.growth-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6f913f, var(--lime-bright));
}

.farm-batch-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 9px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-strong);
}

.farm-batch-preview span {
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.4;
}

.farm-batch-preview button {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 5px;
    color: #11170f;
    background: var(--lime);
    font-size: 0.58rem;
    font-weight: 900;
}

.farm-batch-preview button:disabled {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.08);
}

.base-management-grid {
    display: grid;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.base-management-card {
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(10, 17, 13, 0.72);
}

.subsection-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.subsection-heading h3,
.power-management h4 {
    margin: 0;
}

.subsection-heading h3 {
    font-size: 0.75rem;
}

.subsection-heading > span {
    color: var(--muted);
    font-size: 0.51rem;
}

.facility-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.facility-option {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(18, 27, 20, 0.88);
}

.facility-option.available {
    border-color: rgba(202, 229, 111, 0.3);
}

.facility-option strong,
.facility-option small {
    display: block;
}

.facility-option strong {
    color: var(--ink);
    font-size: 0.62rem;
}

.facility-option small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.49rem;
}

.facility-option > button,
.home-install-item > button {
    padding: 6px 8px;
    border: 1px solid rgba(202, 229, 111, 0.34);
    border-radius: 5px;
    color: #11170f;
    background: var(--lime);
    font-size: 0.55rem;
    font-weight: 900;
}

.material-cost-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.material-cost-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--danger);
    font-size: 0.49rem;
}

.material-cost-list li.met {
    color: var(--lime-bright);
}

.material-cost-list .item-art {
    width: 24px;
    height: 24px;
}

.material-cost-list span,
.material-cost-list small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-guide {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(202, 229, 111, 0.28);
    border-radius: 50%;
    color: var(--lime-bright);
    background: rgba(8, 14, 10, 0.72);
    font-size: 0.55rem;
    font-weight: 900;
}

.catalog-guide {
    margin-top: 5px;
    width: 100%;
}

.equipment-guide {
    width: 100%;
}

.acquisition-guide {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.acquisition-heading h3 {
    font-size: 0.86rem;
}

.acquisition-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.acquisition-overview > div {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(18, 27, 21, 0.9);
}

.acquisition-overview span {
    color: var(--muted);
    font-size: 0.5rem;
}

.acquisition-overview strong {
    color: var(--lime-bright);
    font-size: 0.75rem;
}

.acquisition-search {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
    gap: 6px;
}

.acquisition-search label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.acquisition-search label > span {
    color: var(--muted);
    font-size: 0.49rem;
}

.acquisition-search input,
.acquisition-search select {
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: rgba(10, 16, 12, 0.94);
    font: inherit;
    font-size: 0.56rem;
}

.acquisition-guide.compact .acquisition-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acquisition-guide.compact .acquisition-search label:first-child {
    grid-column: 1 / -1;
}

.acquisition-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
}

.acquisition-workspace.wide {
    grid-template-columns: minmax(190px, 0.82fr) minmax(0, 1.42fr);
    align-items: start;
}

.acquisition-list-column {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.acquisition-target-list {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.acquisition-pagination {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.acquisition-pagination span {
    color: var(--muted);
    font-size: 0.53rem;
    text-align: center;
}

.acquisition-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.acquisition-detail-nav span {
    color: var(--muted);
    font-size: 0.52rem;
}

.acquisition-target {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    text-align: left;
    background: rgba(14, 22, 16, 0.9);
}

.acquisition-target:hover,
.acquisition-target.selected {
    border-color: rgba(202, 229, 111, 0.48);
    background: rgba(31, 45, 33, 0.95);
}

.acquisition-target .item-art {
    width: 36px;
    height: 36px;
}

.acquisition-target > span,
.acquisition-target small,
.acquisition-target strong {
    display: block;
    min-width: 0;
}

.acquisition-target small {
    color: var(--muted);
    font-size: 0.46rem;
}

.acquisition-target strong {
    margin: 2px 0 4px;
    overflow: hidden;
    font-size: 0.59rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-state {
    display: inline-flex;
    width: fit-content;
    padding: 2px 5px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(120, 135, 124, 0.14);
    font-size: 0.45rem;
}

.guide-state.ready {
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.12);
}

.guide-state.preparation {
    color: var(--amber);
    background: rgba(239, 189, 100, 0.11);
}

.guide-state.discovery {
    color: #9bcbd2;
    background: rgba(91, 178, 191, 0.11);
}

.guide-state.unlinked {
    color: #ef9a83;
    background: rgba(237, 146, 120, 0.11);
}

.acquisition-detail {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.acquisition-workspace.wide .acquisition-detail {
    position: sticky;
    top: 0;
}

.acquisition-detail-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(202, 229, 111, 0.26);
    border-radius: 9px;
    background: linear-gradient(
        135deg,
        rgba(34, 50, 35, 0.96),
        rgba(13, 21, 16, 0.96));
}

.acquisition-detail-header .item-art {
    width: 58px;
    height: 58px;
}

.acquisition-detail-header small,
.acquisition-detail-header span {
    color: var(--muted);
    font-size: 0.51rem;
}

.acquisition-detail-header h4 {
    margin: 2px 0 4px;
    font-size: 0.82rem;
}

.acquisition-detail-header p {
    margin: 0 0 4px;
    color: var(--ink-soft);
    font-size: 0.55rem;
    line-height: 1.5;
}

.next-action-card {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid rgba(202, 229, 111, 0.28);
    border-radius: 8px;
    background: rgba(24, 36, 25, 0.94);
}

.next-action-card.preparation {
    border-color: rgba(239, 189, 100, 0.26);
}

.next-action-card.discovery {
    border-color: rgba(91, 178, 191, 0.25);
}

.next-action-card.unlinked {
    border-color: rgba(237, 146, 120, 0.3);
}

.next-action-card > span {
    color: var(--lime-bright);
    font-size: 0.49rem;
    font-weight: 800;
}

.next-action-card strong {
    font-size: 0.66rem;
}

.next-action-card p,
.acquisition-route p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.53rem;
    line-height: 1.55;
}

.next-action-card button,
.route-action {
    margin-top: 3px;
    padding: 7px 9px;
    border: 1px solid rgba(202, 229, 111, 0.38);
    border-radius: 6px;
    color: #11170f;
    background: var(--lime);
    font-size: 0.55rem;
    font-weight: 900;
}

.acquisition-route-list {
    display: grid;
    gap: 7px;
}

.acquisition-route {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--line);
    border-left: 3px solid rgba(120, 135, 124, 0.4);
    border-radius: 7px;
    background: rgba(14, 22, 16, 0.92);
}

.acquisition-route.ready {
    border-left-color: var(--lime);
}

.acquisition-route.preparation {
    border-left-color: var(--amber);
}

.acquisition-route.discovery {
    border-left-color: #65aab5;
}

.acquisition-route.unlinked {
    border-left-color: var(--danger);
}

.route-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.route-heading > span {
    color: var(--muted);
    font-size: 0.48rem;
    font-weight: 800;
}

.acquisition-route h5,
.acquisition-ingredients h6 {
    margin: 0;
}

.acquisition-route h5 {
    font-size: 0.64rem;
}

.acquisition-ingredients {
    display: grid;
    gap: 4px;
}

.acquisition-ingredients h6 {
    color: var(--muted);
    font-size: 0.49rem;
}

.acquisition-ingredients > button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px;
    border: 1px solid rgba(237, 146, 120, 0.26);
    border-radius: 6px;
    color: var(--ink);
    text-align: left;
    background: rgba(10, 16, 12, 0.82);
}

.acquisition-ingredients > button.met {
    border-color: rgba(202, 229, 111, 0.26);
}

.acquisition-ingredients .item-art {
    width: 30px;
    height: 30px;
}

.acquisition-ingredients strong,
.acquisition-ingredients small {
    display: block;
}

.acquisition-ingredients strong {
    font-size: 0.56rem;
}

.acquisition-ingredients small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.48rem;
}

.acquisition-ingredients b {
    color: var(--lime-bright);
    font-size: 0.48rem;
}

.acquisition-conditions {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.5rem;
    line-height: 1.45;
    list-style: none;
}

.acquisition-conditions li::before {
    margin-right: 5px;
    color: var(--lime-bright);
    content: "·";
}

.home-install-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.home-install-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(17, 26, 19, 0.88);
}

.home-install-item.installed {
    border-color: rgba(202, 229, 111, 0.28);
    background: rgba(38, 53, 35, 0.72);
}

.home-install-item .item-art {
    width: 34px;
    height: 34px;
}

.home-install-item strong,
.home-install-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-install-item strong {
    font-size: 0.58rem;
}

.home-install-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.49rem;
}

.power-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 10px;
}

.power-summary div {
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(17, 26, 19, 0.88);
}

.power-summary span,
.power-summary strong {
    display: block;
}

.power-summary span {
    color: var(--muted);
    font-size: 0.49rem;
}

.power-summary strong {
    margin-top: 2px;
    color: var(--lime-bright);
    font-size: 0.57rem;
}

.power-management h4 {
    margin: 9px 0 6px;
    color: var(--ink);
    font-size: 0.61rem;
}

.power-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.power-source-grid button {
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: rgba(18, 27, 20, 0.9);
    font-size: 0.52rem;
}

.power-source-grid button.selected {
    border-color: rgba(202, 229, 111, 0.54);
    color: var(--lime-bright);
    background: rgba(54, 71, 41, 0.9);
}

.power-fuel-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.53rem;
}

.power-fuel-row > span {
    margin-right: auto;
}

.compact-note {
    padding: 5px 7px;
    font-size: 0.52rem;
}

.power-priority-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.power-priority-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: rgba(17, 26, 19, 0.8);
    font-size: 0.53rem;
}

.power-priority-list li > span:last-child {
    display: flex;
    gap: 3px;
}

.power-priority-list strong {
    display: inline-grid;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    place-items: center;
    border-radius: 50%;
    color: #11170f;
    background: var(--lime);
    font-size: 0.48rem;
}

.powered-consumers {
    margin: 7px 0 0;
    color: var(--lime-bright);
    font-size: 0.52rem;
}

.equipment-candidate strong {
    font-size: 0.66rem;
}

.equipment-candidate small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.55rem;
}

.equipment-candidate b {
    color: var(--lime-bright);
    font-size: 0.58rem;
}

.text-panel + .text-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.text-panel pre {
    margin: 0;
    overflow: visible;
    color: #dce3d8;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.68rem;
    line-height: 1.58;
    white-space: pre-wrap;
    word-break: break-word;
}

.text-panel.compact pre {
    color: var(--muted);
    font-size: 0.64rem;
}

.info-group {
    margin-bottom: 13px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.info-group ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-group li {
    position: relative;
    padding-left: 12px;
    color: #d8dfd4;
    font-size: 0.69rem;
    line-height: 1.4;
}

.info-group li::before {
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    content: "";
    background: var(--moss);
}

.digest-card,
.party-summary,
.coop-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel-strong);
}

.digest-card span,
.digest-card code,
.digest-card small {
    display: block;
}

.digest-card span {
    color: var(--muted);
    font-size: 0.64rem;
}

.digest-card code {
    margin: 4px 0 7px;
    color: var(--lime-bright);
    font-size: 0.78rem;
}

.digest-card small {
    color: var(--faint);
    font-size: 0.61rem;
}

.panel-note,
.empty-line,
.warning-line,
.coop-card > p,
.coop-status,
.party-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.48;
}

.panel-note {
    margin: -5px 0 11px;
}

.empty-line {
    color: var(--faint);
}

.warning-line {
    margin: 8px 0;
    color: var(--amber);
}

.social-connect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 10px;
}

.social-connect label {
    color: var(--muted);
    font-size: 0.61rem;
}

.social-connect input,
.chat-entry input,
.chat-entry select {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: #0c120e;
}

.social-connect input {
    display: block;
    margin-top: 4px;
    padding: 7px 8px;
    font-size: 0.68rem;
}

.social-connect > button {
    grid-column: 1 / -1;
}

.social-panel button,
.online-account-panel button,
.coop-actions button,
.chat-entry button {
    min-height: 31px;
    padding: 6px 10px;
    border: 1px solid rgba(202, 229, 111, 0.31);
    border-radius: 6px;
    color: #eff7da;
    background: #34492c;
    font-size: 0.65rem;
    font-weight: 750;
}

.social-panel button:hover,
.online-account-panel button:hover,
.coop-actions button:hover,
.chat-entry button:hover {
    border-color: rgba(202, 229, 111, 0.68);
    background: #425d36;
}

.online-account-panel {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.online-heading,
.online-account-summary,
.online-save-card,
.online-room-card,
.online-button-row {
    display: flex;
    align-items: center;
}

.online-heading {
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.online-heading .panel-note {
    margin-bottom: 10px;
}

.online-server-state {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--faint);
    font-size: 0.54rem;
    font-weight: 800;
}

.online-server-state.available {
    border-color: rgba(202, 229, 111, 0.42);
    color: var(--lime-bright);
    background: rgba(202, 229, 111, 0.08);
}

.online-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.online-auth-grid .wide {
    grid-column: 1 / -1;
}

.online-auth-grid label,
.online-room-form label {
    color: var(--muted);
    font-size: 0.61rem;
}

.online-auth-grid input,
.online-room-form input,
.online-room-form select,
.online-join-form input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: #0c120e;
    font-size: 0.68rem;
}

.online-button-row {
    flex-wrap: wrap;
    gap: 5px;
}

.online-account-summary {
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(19, 28, 22, 0.86);
}

.online-account-summary small,
.online-account-summary strong,
.online-account-summary code {
    display: block;
}

.online-account-summary small,
.online-save-card small,
.online-room-card small,
.online-invite-code small {
    color: var(--muted);
    font-size: 0.58rem;
}

.online-account-summary strong {
    margin-top: 2px;
    font-size: 0.75rem;
}

.online-account-summary code {
    margin-top: 2px;
    color: var(--lime-bright);
    font-size: 0.61rem;
}

.online-save-card {
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(8, 14, 10, 0.55);
}

.online-save-card small,
.online-save-card strong {
    display: block;
}

.online-save-card strong {
    margin-top: 2px;
    font-size: 0.67rem;
}

.online-room-controls,
.online-room-list {
    margin-top: 12px;
}

.online-room-controls h3,
.online-room-list h3 {
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 0.72rem;
}

.online-room-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 7px;
}

.online-room-form > button {
    grid-column: 1 / -1;
}

.online-join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 7px;
}

.online-join-form input {
    margin-top: 0;
}

.online-invite-code {
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(239, 189, 100, 0.35);
    border-radius: 7px;
    background: rgba(239, 189, 100, 0.07);
}

.online-invite-code code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 4px;
    color: var(--amber);
    font-size: 0.62rem;
    user-select: all;
}

.online-room-list {
    display: grid;
    gap: 7px;
}

.online-room-list h3 {
    margin-bottom: 0;
}

.online-room-card {
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(19, 28, 22, 0.72);
}

.online-room-card.active {
    border-color: rgba(202, 229, 111, 0.54);
    background: rgba(202, 229, 111, 0.08);
}

.online-room-card strong,
.online-room-card small {
    display: block;
}

.online-room-card strong {
    font-size: 0.69rem;
}

.online-room-card small {
    margin-top: 3px;
}

.online-room-card button {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 0.59rem;
}

.online-status {
    margin: 9px 0 0;
    padding: 7px 8px;
    border-left: 2px solid var(--lime);
    color: var(--muted);
    background: rgba(202, 229, 111, 0.05);
    font-size: 0.62rem;
    line-height: 1.45;
}

button.accent {
    color: #151b0d;
    background: var(--lime);
}

button.accent:hover {
    background: var(--lime-bright);
}

.ghost {
    border: 1px solid var(--line-strong) !important;
    color: var(--muted) !important;
    background: rgba(10, 16, 12, 0.56) !important;
}

.ghost:hover {
    color: var(--ink) !important;
    background: rgba(32, 44, 35, 0.88) !important;
}

.compact {
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: 0.61rem !important;
}

.party-summary {
    margin: 10px 0;
}

.party-summary h3,
.peer-list h3 {
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 0.72rem;
}

.party-summary button {
    margin-top: 8px;
}

.peer-list {
    display: grid;
    gap: 7px;
}

.peer-card {
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(19, 28, 22, 0.86);
}

.peer-identity {
    gap: 8px;
    margin-bottom: 8px;
}

.peer-identity div {
    min-width: 0;
}

.peer-identity strong,
.peer-identity small {
    display: block;
}

.peer-identity strong {
    overflow: hidden;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peer-identity small {
    color: var(--muted);
    font-size: 0.59rem;
}

.peer-actions {
    flex-wrap: wrap;
    gap: 5px;
}

.peer-actions button {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 0.59rem;
}

.coop-card {
    margin-bottom: 13px;
    border-color: rgba(239, 189, 100, 0.24);
    background:
        linear-gradient(135deg, rgba(239, 189, 100, 0.08), transparent 58%),
        var(--panel-strong);
}

.coop-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.quest-kind {
    color: var(--amber);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.coop-heading strong {
    font-size: 0.78rem;
}

.quest-route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

.quest-route li {
    position: relative;
    padding: 7px 5px;
    border: 1px solid var(--line);
    border-radius: 7px;
    text-align: center;
    background: rgba(6, 11, 8, 0.44);
}

.quest-route li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -13px;
    width: 12px;
    content: "→";
    color: var(--faint);
    transform: translateY(-50%);
}

.quest-route li.current {
    border-color: rgba(239, 189, 100, 0.65);
    background: rgba(239, 189, 100, 0.1);
}

.quest-route li.complete {
    border-color: rgba(202, 229, 111, 0.45);
}

.quest-route span,
.quest-route strong {
    display: block;
}

.quest-route span {
    color: var(--amber);
    font-size: 0.5rem;
}

.quest-route strong {
    margin-top: 2px;
    font-size: 0.57rem;
}

.quest-guidance {
    margin: 0 0 9px !important;
    padding: 8px;
    border-left: 2px solid var(--amber);
    background: rgba(239, 189, 100, 0.05);
}

.quest-gates {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin: 8px 0;
}

.quest-gates div {
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
    background: rgba(6, 11, 8, 0.42);
}

.quest-gates div.complete {
    border-color: rgba(202, 229, 111, 0.43);
    background: rgba(202, 229, 111, 0.05);
}

.quest-gates span,
.quest-gates strong {
    display: block;
}

.quest-gates span {
    color: var(--muted);
    font-size: 0.49rem;
}

.quest-gates strong {
    margin-top: 2px;
    color: var(--lime-bright);
    font-size: 0.58rem;
}

.story-scene {
    margin: 9px 0;
    padding: 10px;
    border: 1px solid rgba(104, 190, 206, 0.26);
    border-radius: 8px;
    background:
        radial-gradient(circle at 90% 15%, rgba(104, 190, 206, 0.08), transparent 34%),
        rgba(7, 14, 14, 0.72);
}

.story-scene span {
    color: #8fd2dd;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.story-scene p {
    margin: 5px 0 0;
    color: #e0e9e5;
    font-size: 0.66rem;
    line-height: 1.58;
}

.quest-next-action,
.quest-choice-list button {
    width: 100%;
    min-height: 33px;
    padding: 7px 9px;
    border: 1px solid rgba(202, 229, 111, 0.36);
    border-radius: 6px;
    color: #eff7da;
    text-align: left;
    background: #34492c;
    font-size: 0.63rem;
    font-weight: 800;
}

.quest-next-action:hover,
.quest-choice-list button:hover {
    border-color: rgba(202, 229, 111, 0.68);
    background: #425d36;
}

.quest-next-action {
    text-align: center;
}

.quest-choice-list {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.quest-choice-list button span,
.quest-choice-list button strong {
    display: block;
}

.quest-choice-list button span {
    color: var(--amber);
    font-size: 0.48rem;
}

.quest-choice-list button strong {
    margin-top: 3px;
    font-size: 0.61rem;
    line-height: 1.4;
}

.quest-complete-note {
    margin: 9px 0 0 !important;
    color: var(--lime-bright) !important;
}

.coop-roster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 10px 0;
}

.coop-roster div {
    padding: 7px 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
    background: rgba(6, 11, 8, 0.42);
}

.coop-roster span,
.coop-roster strong {
    display: block;
}

.coop-roster span {
    color: var(--muted);
    font-size: 0.55rem;
}

.coop-roster strong {
    margin-top: 2px;
    color: var(--lime-bright);
    font-size: 0.67rem;
}

.coop-status {
    margin: 8px 0;
    color: var(--amber);
}

.coop-actions {
    gap: 6px;
    margin-top: 9px;
}

.communications {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    min-height: 0;
    background: #0a100c;
}

.game-transcript,
.chat-console {
    display: grid;
    grid-template-rows: 29px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 8px 12px 9px;
}

.game-transcript {
    border-right: 1px solid var(--line);
}

.chat-console {
    grid-template-rows: 29px minmax(0, 1fr) 34px;
}

.communications-heading {
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    border-bottom: 1px solid var(--line);
}

.communications-heading strong {
    font-size: 0.69rem;
}

.communications-heading span {
    overflow: hidden;
    color: var(--faint);
    font-size: 0.59rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-stream,
.chat-stream {
    min-height: 0;
    padding: 6px 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.log-line {
    display: grid;
    grid-template-columns: minmax(90px, 0.28fr) minmax(0, 1fr);
    gap: 9px;
    padding: 3px 5px;
    border-left: 2px solid rgba(141, 171, 87, 0.34);
    color: var(--muted);
    font-size: 0.61rem;
    line-height: 1.35;
}

.log-line + .log-line {
    margin-top: 3px;
}

.log-line strong {
    overflow: hidden;
    color: #dfe6d8;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-line.success {
    border-left-color: var(--lime);
}

.log-line.warning {
    border-left-color: var(--amber);
}

.log-line.error {
    border-left-color: var(--danger);
}

.chat-line {
    margin: 0 0 5px;
    color: #d4dcd1;
    font-size: 0.62rem;
    line-height: 1.35;
}

.chat-line > span {
    margin-right: 5px;
    color: var(--moss);
}

.chat-line strong {
    margin-right: 5px;
    color: var(--lime-bright);
}

.chat-line.system {
    color: var(--amber);
}

.chat-entry {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 52px;
    gap: 5px;
}

.chat-entry input,
.chat-entry select {
    min-width: 0;
    height: 31px;
    padding: 5px 7px;
    font-size: 0.65rem;
}

.chat-entry input::placeholder {
    color: #667068;
}

.chat-entry button {
    height: 31px;
    padding: 5px 7px;
}

.toast {
    position: fixed;
    z-index: 100;
    right: 18px;
    bottom: 188px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(500px, calc(100vw - 36px));
    padding: 10px 12px;
    border: 1px solid rgba(237, 146, 120, 0.55);
    border-radius: 8px;
    background: rgba(53, 24, 19, 0.96);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.42);
    font-size: 0.69rem;
}

.loading-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    height: 8rem;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.loading-progress circle {
    fill: none;
    stroke: #263228;
    stroke-width: 0.55rem;
}

.loading-progress circle:last-child {
    stroke: var(--lime);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    top: calc(50% + 5rem);
    left: 50%;
    color: var(--muted);
    transform: translateX(-50%);
    font-size: 0.74rem;
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 0.8rem 1.25rem;
    color: #2c160f;
    background: #f2c6a9;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.25);
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

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

    .world-app {
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .world-header {
        grid-template-columns: minmax(260px, 1fr) auto;
    }

    .header-location {
        display: none;
    }

    .world-layout,
    .world-layout.knowledge-expanded {
        grid-template-columns: 1fr;
    }

    .play-column {
        grid-template-rows: 430px auto;
        border-right: 0;
    }

    .game-inspector {
        min-height: 440px;
        border-top: 1px solid var(--line);
    }

    .acquisition-workspace.wide {
        grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
    }

    .action-deck {
        max-height: none;
    }

    .quick-play-route {
        grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr) auto;
    }

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

    .game-transcript,
    .chat-console {
        min-height: 170px;
    }

    .game-transcript {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .toast {
        bottom: 18px;
    }
}

@media (max-width: 640px) {
    .world-header {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 12px;
    }

    .header-session {
        justify-content: flex-start;
    }

    .play-column {
        grid-template-rows: 380px auto;
    }

    .scene-heading {
        top: 14px;
        left: 14px;
        max-width: calc(100% - 28px);
    }

    .scene-heading > span {
        display: none;
    }

    .survival-hud {
        top: 86px;
        right: 10px;
    }

    .scene-outcomes {
        top: 157px;
        right: 10px;
        width: min(205px, 61%);
    }

    .scene-outcomes .outcome-card:nth-child(n + 3) {
        display: none;
    }

    .scene-player {
        left: -2%;
        width: 43%;
    }

    .scene-companion {
        left: 31%;
        width: 30%;
    }

    .scene-facility {
        right: -8%;
        width: 53%;
    }

    .combat-active .scene-player {
        left: -7%;
        width: 46%;
        opacity: 0.54;
    }

    .combat-target-panel {
        top: 12px;
        right: 10px;
        left: 10px;
        width: auto;
    }

    .combat-identity .eyebrow {
        display: none;
    }

    .combat-creature-frame.cutout {
        top: 78px;
        right: -6%;
        bottom: 69px;
        width: 83%;
    }

    .combat-creature-frame.thumbnail {
        top: 86px;
        right: 8%;
        bottom: 73px;
        width: 62%;
    }

    .combat-player-panel {
        bottom: 8px;
        left: 8px;
        width: 53%;
    }

    .combat-metrics {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: auto;
        width: 42%;
    }

    .destination-rail {
        right: 8px;
        bottom: 8px;
        left: 8px;
    }

    .action-grid {
        grid-auto-columns: minmax(160px, 82vw);
    }

    .quick-play-route {
        grid-template-columns: 1fr auto;
    }

    .quick-play-steps {
        grid-column: 1 / -1;
        grid-row: 2;
    }

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

    .inspector-tabs button {
        border-bottom: 1px solid var(--line);
    }

    .inventory-grid,
    .status-recovery-grid {
        grid-template-columns: 1fr;
    }

    .status-recovery-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .communications {
        min-width: 0;
    }

    .farm-summary,
    .facility-option-grid,
    .home-install-grid,
    .power-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acquisition-search,
    .acquisition-workspace,
    .acquisition-workspace.wide {
        grid-template-columns: 1fr;
    }

    .acquisition-guide.compact .acquisition-search {
        grid-template-columns: 1fr;
    }

    .acquisition-guide.compact .acquisition-search label:first-child {
        grid-column: auto;
    }

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

    .acquisition-detail-header {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .acquisition-detail-header > .guide-state {
        grid-column: 1 / -1;
    }

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

    .log-line {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .social-connect {
        grid-template-columns: 1fr;
    }

    .social-connect > button {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}