:root {
    --bg-deep: #0d0f14;
    --bg-panel: #151922;
    --bg-soft: #1d2330;
    --bg-soft-2: #232a3a;
    --text-main: #f2ede3;
    --text-muted: #a9a7a1;
    --line-subtle: #2b3342;
    --accent-gold: #d7a84f;
    --accent-coral: #e06a4f;
    --accent-cyan: #69c8d6;
    --success-green: #78c68a;
    --danger-red: #c95d5d;
    /* People are green, creatures are red. One glance at the map should answer
       "is anything in here that is not one of us", which was impossible while
       every dot on it was the same colour. */
    --npc: #2fd17a;
    --monster: #ff2b1f;
    --font-display: "Space Grotesk", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

* {
    box-sizing: border-box;
}
.hidden {
    display: none !important;
}
html,
body {
    margin: 0;
    height: 100%;
}
body {
    background: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top bar */
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line-subtle);
    background: var(--bg-panel);
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
}
.brand .sep {
    color: var(--text-muted);
    font-weight: 400;
}
.brand .world {
    color: var(--accent-gold);
}
.status {
    margin-left: auto;
    display: flex;
    gap: 16px;
    color: var(--text-muted);
    font-size: 12.5px;
}
.status b {
    color: var(--text-main);
}
.status a {
    color: var(--text-muted);
    text-decoration: none;
}
.status a:hover {
    color: var(--accent-gold);
}
.tick-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-green);
    display: inline-block;
    margin-right: 5px;
    box-shadow: 0 0 0 4px rgba(120, 198, 138, 0.15);
}
.pause-btn {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--text-main);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    cursor: pointer;
}
.pause-btn:hover {
    border-color: var(--accent-cyan);
}
body.paused .tick-dot {
    background: var(--accent-gold);
    box-shadow: 0 0 0 4px rgba(215, 168, 79, 0.15);
}
body.paused #live-indicator {
    color: var(--accent-gold);
}
body.paused .pause-btn {
    background: var(--accent-gold);
    color: #1a1305;
    border-color: transparent;
}

/* Layout */
.layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    padding: 16px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.panel-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-subtle);
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Map */
.map-panel {
    display: flex;
    flex-direction: column;
}
.map-stage {
    flex: 1;
    min-height: 460px;
    background: #0a0f18;
}
#map {
    display: block;
    width: 100%;
    height: 100%;
}
/* MapLibre markers (place + NPC) */
.mk-place,
.mk-npc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-3px);
}
.mk-ring {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-cyan);
    background: rgba(105, 200, 214, 0.15);
    flex: 0 0 auto;
}
.mk-label {
    font-size: 10px;
    color: var(--skin-place-label, var(--text-muted));
    text-shadow:
        0 1px 3px var(--skin-label-halo, #000),
        0 0 2px var(--skin-label-halo, #000);
}
.mk-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--npc);
    box-shadow: 0 0 9px 2px rgba(47, 209, 122, 0.7);
    flex: 0 0 auto;
    transition: opacity 0.4s;
}

/* Creatures. Same dot, different colour, and no name beside it — nobody in
   this world has a word for what these are. */
.mk-monster {
    display: inline-flex;
    align-items: center;
    pointer-events: none;
}
.mk-monster .mk-dot {
    width: 12px;
    height: 12px;
    background: var(--monster);
    box-shadow: 0 0 10px 3px rgba(255, 43, 31, 0.75);
}
/* Something that has picked people out and decided not to walk away from them.
   Reads at a glance across the whole map, which is the only warning the player
   gets before the encounter pass resolves. */
.mk-monster.hunting .mk-dot {
    animation: monster-pulse 1.1s ease-in-out infinite;
}
@keyframes monster-pulse {
    0%,
    100% {
        box-shadow: 0 0 10px 3px rgba(255, 43, 31, 0.75);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px 7px rgba(255, 43, 31, 0.95);
        transform: scale(1.35);
    }
}
@media (prefers-reduced-motion: reduce) {
    .mk-monster.hunting .mk-dot {
        animation: none;
        box-shadow: 0 0 18px 7px rgba(255, 43, 31, 0.95);
    }
}
.mk-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--skin-npc-label, #fff);
    text-shadow:
        0 1px 3px var(--skin-label-halo, #000),
        0 0 2px var(--skin-label-halo, #000);
}
.mk-zone {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    pointer-events: none;
    text-shadow:
        0 1px 4px var(--skin-label-halo, #000),
        0 0 3px var(--skin-label-halo, #000);
    white-space: nowrap;
}
/* keep MapLibre's own fonts from inheriting oddly */
.maplibregl-map {
    font-family: var(--font-body);
}
/* Color grade over the basemap. The active skin sets --skin-grade; the fallback
   is the original hardcoded value, so a world without a skin looks unchanged. */
.maplibregl-canvas {
    filter: var(
        --skin-grade,
        saturate(0.8) sepia(0.14) hue-rotate(-8deg) brightness(0.95)
    );
}

/* panel head with a right-aligned control */
.panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.overlay-btn {
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--line-subtle);
    border-radius: 20px;
    padding: 2px 10px;
    cursor: pointer;
}
.overlay-btn.on {
    color: var(--accent-gold);
    border-color: rgba(215, 168, 79, 0.5);
    background: rgba(215, 168, 79, 0.08);
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.roster {
    display: flex;
    flex-direction: column;
}
.npc-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-subtle);
}
.npc-row:last-child {
    border-bottom: 0;
}
.npc-row.selected {
    background: rgba(95, 214, 245, 0.08);
    border-radius: 10px;
}
.npc-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.npc-row .name {
    font-weight: 600;
}
.chip {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg-soft);
    color: var(--text-muted);
}
.chip.walking {
    color: var(--accent-gold);
    background: rgba(215, 168, 79, 0.12);
}
.chip.idle {
    color: var(--accent-cyan);
    background: rgba(105, 200, 214, 0.12);
}
.chip.asleep {
    color: #8fa3c8;
    background: rgba(105, 130, 200, 0.14);
}
#world-clock {
    color: var(--text-main);
}
/* subtle night tint on the map */
body.night .map-stage {
    box-shadow: inset 0 0 120px rgba(20, 40, 90, 0.5);
}
.npc-row .loc {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}
.progress {
    height: 4px;
    background: var(--bg-soft);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--npc);
    width: 0%;
    transition: width 0.4s linear;
}

/* Controls */
.controls {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.controls label {
    font-size: 11px;
    color: var(--text-muted);
}
select,
button {
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--bg-soft);
    color: var(--text-main);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
select {
    width: 100%;
}
button {
    cursor: pointer;
}
.btn-primary {
    background: var(--accent-gold);
    color: #1a1305;
    border: none;
    font-weight: 600;
}
.btn-primary:hover {
    filter: brightness(1.05);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover {
    color: var(--text-main);
    border-color: var(--accent-cyan);
}
.hint {
    font-size: 11.5px;
    color: var(--text-muted);
    min-height: 15px;
}
.hint.err {
    color: var(--danger-red);
}
.hint.ok {
    color: var(--success-green);
}

/* Chat */
.chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 2px;
}
.chat-msg {
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 11px;
    border-radius: 12px;
    max-width: 88%;
}
.chat-msg.you {
    align-self: flex-end;
    background: var(--bg-soft-2);
    border-bottom-right-radius: 3px;
}
.chat-msg.npc {
    align-self: flex-start;
    background: rgba(215, 168, 79, 0.12);
    border: 1px solid rgba(215, 168, 79, 0.25);
    border-bottom-left-radius: 3px;
}
.chat-msg .speaker {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.chat-msg .recalled {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    color: var(--accent-cyan);
    opacity: 0.85;
}
.chat-msg.thinking {
    color: var(--text-muted);
    font-style: italic;
}
.chat-input-row {
    display: flex;
    gap: 8px;
}
.chat-input-row input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--bg-soft);
    color: var(--text-main);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.chat-input-row button {
    flex: 0 0 auto;
}

/* Debug */
.debug-controls {
    gap: 9px;
}
.debug-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.debug-section h4 {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.debug-row {
    padding: 8px 9px;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 6px;
}
.debug-meta,
.debug-empty {
    color: var(--text-muted);
    font-size: 10.5px;
    margin-top: 3px;
}

/* Feed */
.feed {
    max-height: 240px;
    overflow-y: auto;
}
.feed-item {
    padding: 9px 16px;
    border-bottom: 1px solid var(--line-subtle);
    font-size: 12.5px;
}
.feed-item:last-child {
    border-bottom: none;
}
.feed-item .when {
    color: var(--text-muted);
    font-size: 10.5px;
}
/* --- Weather over the map ---------------------------------------------------

   Everything here is driven by CSS variables the client sets from the live
   weather. Heavy rain falls in steady curtains and throws surface ripples;
   thunderstorms drive rain diagonally and flash; fog has its own slow horizontal
   banks and pale distance veil.

   Composited properties only — background-position, opacity and transform. The
   marker animation already owns requestAnimationFrame, and weather that fought
   it for main-thread time would show up as stuttering NPCs. */
.god-map-wrap {
    position: relative;
}
.storm-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 2.5s ease;
    z-index: 2;
    border-radius: inherit;
}
.storm-layer.on {
    opacity: 1;
}
/* The light going out. Keyed to visibility, so fog and a downpour both dim the
   island without either needing its own rule. */
.storm-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 40%,
        rgba(18, 26, 38, 0.15),
        rgba(10, 16, 26, 0.75)
    );
    opacity: var(--storm-dark, 0);
    transition: opacity 2.5s ease;
}
.storm-rain {
    position: absolute;
    /* Oversized and rotated, so the leaning streaks never reveal an edge. */
    inset: -40%;
    transform: rotate(var(--storm-angle, 12deg));
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0 9px,
        rgba(198, 222, 244, 0.75) 9px 11px,
        rgba(255, 255, 255, 0) 11px 26px
    );
    background-size: 3px 26px;
    opacity: var(--storm-rain-opacity, 0.4);
    animation: storm-fall var(--storm-speed, 0.6s) linear infinite;
    will-change: background-position;
}
/* Second sheet, slower and fainter — parallax is most of what sells depth. */
.storm-rain.far {
    background-size: 2px 34px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0 14px,
        rgba(186, 210, 236, 0.45) 14px 15px,
        rgba(255, 255, 255, 0) 15px 34px
    );
    opacity: calc(var(--storm-rain-opacity, 0.4) * 0.6);
    animation-duration: calc(var(--storm-speed, 0.6s) * 1.9);
}
@keyframes storm-fall {
    to {
        background-position: 0 260px;
    }
}

/* Heavy rain is a sustained wall of water, not the thunderstorm minus a flash.
   Its streaks are finer and nearly vertical; broad curtains pass through them,
   and repeated impacts spread across the lower map like puddle rings. */
.rain-curtain,
.rain-ripples {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.storm-layer.heavy-rain .storm-rain {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 5px,
        rgba(204, 225, 236, 0.68) 5px 7px,
        transparent 7px 18px
    );
    background-size: 4px 18px;
}
.storm-layer.heavy-rain .storm-rain.far {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 8px,
        rgba(188, 214, 226, 0.48) 8px 9px,
        transparent 9px 23px
    );
    background-size: 3px 23px;
}
.storm-layer.heavy-rain .rain-curtain {
    inset: -8% -20%;
    opacity: 0.5;
    background: repeating-linear-gradient(
        90deg,
        rgba(176, 204, 217, 0.04) 0 5%,
        rgba(202, 222, 230, 0.28) 9% 17%,
        rgba(157, 188, 204, 0.08) 23% 29%,
        transparent 34% 43%
    );
    animation: rain-curtains 7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.storm-layer.heavy-rain .rain-ripples {
    top: 55%;
    opacity: 0.55;
    background-image: radial-gradient(
        ellipse at center,
        transparent 0 42%,
        rgba(205, 229, 237, 0.58) 44% 47%,
        transparent 49%
    );
    background-size: 86px 28px;
    animation: rain-ripples 2.4s linear infinite;
    will-change: background-position, opacity;
}
@keyframes rain-curtains {
    from {
        transform: translate3d(-7%, 0, 0);
        opacity: 0.34;
    }
    to {
        transform: translate3d(7%, 0, 0);
        opacity: 0.58;
    }
}
@keyframes rain-ripples {
    from {
        background-position: 0 0;
        opacity: 0.28;
    }
    50% {
        opacity: 0.62;
    }
    to {
        background-position: 43px 28px;
        opacity: 0.28;
    }
}
.storm-flash {
    position: absolute;
    inset: 0;
    background: #e8f3ff;
    opacity: 0;
}
/* A strike is two flashes, not one — the second is what makes it read as
   lightning rather than a screen glitch. */
.storm-layer.strike .storm-flash {
    animation: storm-strike 0.85s ease-out;
}
@keyframes storm-strike {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 0.8;
    }
    10% {
        opacity: 0.08;
    }
    16% {
        opacity: 0.55;
    }
    26% {
        opacity: 0.03;
    }
    100% {
        opacity: 0;
    }
}

/* Dense fog is not dimmed rain. A cool veil takes the color and distance out of
   the map while three broad banks cross at different speeds. Their soft edges
   come from gradients rather than animated blur, keeping map markers smooth. */
.fog-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 5s ease;
    z-index: 3;
    border-radius: inherit;
}
.fog-layer.on {
    opacity: var(--fog-opacity, 0.82);
}
.fog-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(218, 228, 226, 0.38), rgba(180, 196, 197, 0.78)),
        linear-gradient(rgba(190, 204, 203, 0.54), rgba(209, 217, 211, 0.68));
}
.fog-bank {
    position: absolute;
    left: -35%;
    width: 170%;
    height: 58%;
    background:
        radial-gradient(ellipse at 15% 55%, rgba(240, 244, 238, 0.92) 0 12%, transparent 38%),
        radial-gradient(ellipse at 48% 42%, rgba(224, 233, 229, 0.9) 0 16%, transparent 43%),
        radial-gradient(ellipse at 80% 60%, rgba(239, 242, 233, 0.86) 0 13%, transparent 40%);
    will-change: transform;
    animation: fog-drift var(--fog-speed, 42s) ease-in-out infinite alternate;
}
.fog-bank-far {
    top: -18%;
    opacity: 0.5;
    transform: translate3d(-7%, 0, 0) scale(1.04);
    animation-duration: calc(var(--fog-speed, 42s) * 1.35);
}
.fog-bank-mid {
    top: 22%;
    opacity: 0.72;
    transform: translate3d(5%, 0, 0) scale(1.12);
    animation-direction: alternate-reverse;
}
.fog-bank-near {
    top: 55%;
    opacity: 0.82;
    transform: translate3d(-4%, 0, 0) scale(1.18);
    animation-duration: calc(var(--fog-speed, 42s) * 0.78);
}
@keyframes fog-drift {
    0% {
        transform: translate3d(-8%, -2%, 0) scale(1.06);
    }
    52% {
        transform: translate3d(1%, 2%, 0) scale(1.13);
    }
    100% {
        transform: translate3d(8%, -1%, 0) scale(1.08);
    }
}
@media (prefers-reduced-motion: reduce) {
    .storm-rain,
    .storm-layer.strike .storm-flash,
    .rain-curtain,
    .rain-ripples,
    .fog-bank {
        animation: none;
    }
    /* Every condition still reads without falling, drifting or flashing. */
    .storm-rain {
        opacity: calc(var(--storm-rain-opacity, 0.4) * 0.5);
    }
    .fog-layer {
        transition: none;
    }
    .fog-bank {
        transform: none;
    }
}

/* The DM's account. Styled as an aside rather than a second headline: the
   villagers' sentence is what happened as far as the world is concerned, and
   this is the god looking behind it. */
.feed-reveal {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    cursor: pointer;
    opacity: 0.75;
}
.feed-reveal:hover,
.feed-reveal:focus-visible {
    opacity: 1;
    text-decoration: underline;
}
.feed-narration {
    margin: 6px 0 2px;
    padding: 7px 10px;
    border-left: 2px solid var(--accent-cyan);
    background: rgba(105, 200, 214, 0.07);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-soft, #cfd6e2);
}
.feed-narration[hidden] {
    display: none;
}
.feed-narration-inline {
    border-left-color: var(--accent-coral);
    background: rgba(255, 130, 110, 0.08);
}

.feed-item.enter {
    border-left: 2px solid var(--accent-coral);
}
.feed-item.depart {
    border-left: 2px solid var(--line-subtle);
}
.feed-item.weather {
    border-left: 2px solid var(--accent-coral);
}
.feed-item.talk {
    border-left: 2px solid var(--accent-gold);
}

/* Footer */
.foot {
    padding: 10px 20px;
    border-top: 1px solid var(--line-subtle);
    color: var(--text-muted);
    font-size: 11px;
}
.foot a {
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .map-stage {
        min-height: 320px;
    }
}

/* God-game homepage ------------------------------------------------------- */
.god-home {
    --god-line: rgba(105, 200, 214, 0.18);
    --god-glow: rgba(0, 235, 229, 0.55);
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0, 110, 150, 0.13),
            transparent 42%
        ),
        linear-gradient(180deg, #03080b 0%, #071014 48%, #030608 100%);
    overflow: hidden;
}
.god-topbar {
    position: relative;
    height: 108px;
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: stretch;
    border: 1px solid var(--god-line);
    border-left: none;
    border-right: none;
    background: rgba(1, 9, 12, 0.88);
    box-shadow:
        0 0 24px rgba(0, 0, 0, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}
.god-brand {
    padding: 18px 20px;
    border-right: 1px solid var(--god-line);
}
.god-logo {
    font-family: var(--font-display);
    font-size: 32px;
    letter-spacing: 0.18em;
    font-weight: 700;
    line-height: 0.9;
}
.god-tagline {
    margin-top: 14px;
    color: #ff3d2d;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.god-menu {
    position: relative;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 0 22px 0 0;
    background: rgba(1, 9, 12, 0.92);
    min-width: 0;
}
.god-menu a,
.god-menu-popover button {
    display: block;
    width: 100%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 11px 14px;
}
.god-menu a:hover,
.god-menu-popover button:hover {
    color: var(--accent-gold);
    background: rgba(215, 168, 79, 0.08);
}
.god-menu-btn {
    width: 54px;
    height: 54px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0;
    padding: 0;
}
.god-menu-btn::before {
    content: "☰";
    font-size: 34px;
    line-height: 1;
}
.god-menu-popover {
    display: none;
    position: absolute;
    z-index: 20;
    right: 18px;
    top: 78px;
    min-width: 170px;
    border: 1px solid var(--god-line);
    background: rgba(1, 9, 12, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.god-menu.open .god-menu-popover,
.god-menu:focus-within .god-menu-popover {
    display: block;
}

/* --- account / auth dropdown -------------------------------------------- */

.god-account {
    position: relative;
}

#god-account-btn {
    width: auto;
    font-size: 12px;
    padding: 0 14px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    border: 1px solid var(--god-line);
    border-radius: 4px;
    height: 34px;
    cursor: pointer;
}

#god-account-btn::before {
    content: none;
}

#god-account-btn:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.god-account-popover {
    display: none;
    position: absolute;
    z-index: 21;
    right: 0;
    top: 44px;
    min-width: 240px;
    border: 1px solid var(--god-line);
    background: rgba(1, 9, 12, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    padding: 14px;
}

.god-account.open .god-account-popover {
    display: block;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form .god-text-input {
    margin-bottom: 4px;
}

.auth-buttons {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.auth-buttons .god-action {
    flex: 1;
    justify-content: center;
    font-size: 12px;
}
.god-layout {
    height: calc(100vh - 108px);
    display: grid;
    grid-template-columns: 330px 1fr 280px;
    border-left: 1px solid var(--god-line);
    border-right: 1px solid var(--god-line);
}
.god-left,
.god-right {
    min-width: 0;
    min-height: 0;
    background: rgba(0, 8, 11, 0.72);
    border-right: 1px solid var(--god-line);
    display: flex;
    flex-direction: column;
    /* Panels can outgrow the fixed-height layout (methods + intents +
       message); without this the overflow was simply clipped. */
    overflow-y: auto;
}
.god-right {
    border-right: none;
    border-left: 1px solid var(--god-line);
}
.god-center {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr 196px;
    padding: 15px;
}
.god-panel {
    background: linear-gradient(
        180deg,
        rgba(3, 18, 24, 0.72),
        rgba(2, 10, 13, 0.86)
    );
    border-bottom: 1px solid var(--god-line);
    box-shadow: inset 0 0 30px rgba(0, 180, 220, 0.035);
}
.god-panel-title {
    padding: 18px 16px 12px;
    color: var(--text-main);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 15px;
}
.god-panel-title small {
    color: var(--text-muted);
    font-size: 11px;
}
.god-panel-title.small {
    font-size: 13px;
    padding-top: 22px;
}

/* Sidebar sections collapse without being rebuilt, so open intervention drafts
   and event confirmations remain exactly where the player left them. */
.collapsible-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.collapsible-toggle::after {
    content: "−";
    flex: 0 0 auto;
    color: var(--accent-cyan);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.18s ease;
}
.collapsible-toggle:hover,
.collapsible-toggle:focus-visible {
    color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.025);
    outline: none;
}
.collapsible-toggle:focus-visible {
    box-shadow: inset 0 0 0 1px var(--accent-cyan);
}
.collapsible-panel.is-collapsed {
    padding-bottom: 0;
}
.collapsible-panel.is-collapsed > :not(.collapsible-toggle) {
    display: none !important;
}
.collapsible-panel.is-collapsed > .collapsible-toggle::after {
    content: "+";
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .collapsible-toggle::after {
        transition: none;
    }
}
.god-control-label {
    display: block;
    margin: 4px 0 6px;
    color: #91a6bd;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#god-message {
    width: 100%;
    margin: 10px 0 8px;
    padding: 10px;
    border: 1px solid rgba(130, 169, 203, 0.22);
    border-radius: 12px;
    background: rgba(6, 13, 25, 0.72);
    color: #dcecff;
    resize: vertical;
}
.god-action {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 11px 22px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.god-action i {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(145, 90, 255, 0.35);
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #b07cff;
    font-style: normal;
    font-size: 24px;
    background: rgba(145, 90, 255, 0.06);
}
.god-action.cyan i {
    color: #5fd6f5;
    border-color: rgba(95, 214, 245, 0.35);
    background: rgba(95, 214, 245, 0.06);
}
.god-action.gold i {
    color: var(--accent-gold);
    border-color: rgba(215, 168, 79, 0.4);
    background: rgba(215, 168, 79, 0.06);
}
.god-action.red i {
    color: #ff3d2d;
    border-color: rgba(255, 61, 45, 0.38);
    background: rgba(255, 61, 45, 0.06);
}
.god-action b {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.god-action small {
    display: block;
    color: var(--text-muted);
    margin-top: 4px;
    font-size: 11px;
}
.god-action:hover {
    background: rgba(255, 255, 255, 0.035);
}
.god-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.god-action span {
    color: #d6c4f9;
    font-size: 12px;
    text-align: right;
}
.god-wide-btn {
    margin: 18px 16px;
    display: block;
    text-align: center;
    padding: 11px;
    border: 1px solid var(--god-line);
    color: var(--text-main);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.025);
}
.god-wide-btn:hover {
    border-color: rgba(215, 168, 79, 0.5);
    color: var(--accent-gold);
}
.influence-panel {
    padding-bottom: 18px;
}
.god-ledger,
.god-subledger {
    display: flex;
    justify-content: space-between;
    padding: 4px 16px;
    font-size: 12px;
}
.god-ledger {
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.god-subledger {
    color: var(--text-muted);
}
.cyan-text,
.god-subledger b {
    color: #00e6df;
}
.god-ledger.spend b {
    color: #ff3d2d;
}
.god-progress {
    position: relative;
    margin: 14px 16px 8px;
    height: 25px;
    border: 1px solid var(--god-line);
    background: rgba(255, 255, 255, 0.025);
}
.god-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6334c4, #9e53ff);
}
.god-progress em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.god-next {
    text-align: center;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.god-map-wrap {
    position: relative;
    min-height: 0;
    border-bottom: 1px solid var(--god-line);
}
.god-map-wrap #map {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.god-map-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 40%,
            transparent 30%,
            rgba(0, 0, 0, 0.2) 75%
        ),
        linear-gradient(
            90deg,
            rgba(0, 216, 230, 0.08),
            transparent 18%,
            transparent 80%,
            rgba(0, 216, 230, 0.07)
        );
}
.god-map-title {
    position: absolute;
    z-index: 5;
    top: 18px;
    left: 24px;
    color: var(--text-main);
    text-shadow: 0 2px 8px #000;
}
.god-map-title h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 24px;
}
.god-map-title p {
    margin: 4px 0;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.god-map-title #live-indicator,
.god-moving {
    display: inline-block;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
/* Sits beside "traveling" and reads in the creatures' colour, so the number and
   the dots on the map are obviously the same thing. */
.god-monsters {
    display: inline-block;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 12px;
    color: var(--monster);
}
.god-monsters[hidden] {
    display: none;
}
.god-map-title .overlay-btn {
    margin-left: 6px;
    background: rgba(0, 0, 0, 0.35);
}
.god-bottom {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
}
.feed-panel {
    border-right: 0;
}
.god-feed {
    max-height: 138px;
}
.god-feed .feed-item {
    display: grid;
    grid-template-columns: 1fr auto;
    color: var(--text-muted);
}

.selected-panel {
    height: 100%;
    padding-bottom: 14px;
}
.selected-panel .god-panel-title b {
    color: #9fe8ff;
    font-weight: 400;
    font-size: 20px;
}
.portrait {
    height: 210px;
    margin: 0 16px;
    border-bottom: 1px solid var(--god-line);
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(255, 255, 255, 0.08),
            transparent 24%
        ),
        linear-gradient(160deg, #111922, #05090c);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(220, 236, 255, 0.86);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 54px;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}
.portrait.has-image {
    color: transparent;
}
.selected-place {
    padding: 14px 16px 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.selected-activity {
    padding: 0 16px 12px;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
}
.selected-latest-line {
    margin: 0 16px 14px;
    padding: 10px 11px;
    border: 1px solid rgba(105, 200, 214, 0.22);
    border-radius: 10px;
    background: rgba(105, 200, 214, 0.06);
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.35;
}
.selected-latest-line.empty {
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.selected-latest-line b {
    color: var(--accent-cyan);
    margin-right: 7px;
}
.selected-latest-line span {
    color: var(--text-muted);
    font-size: 10px;
}
.selected-latest-line p {
    margin: 5px 0 0;
}
.convo-monitor {
    max-height: 265px;
    overflow-y: auto;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--god-line);
}
.convo-empty {
    margin: 0 4px 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}
.convo-empty.err {
    color: var(--danger-red);
}
.convo-room-label {
    margin: 8px 4px 6px;
    color: var(--accent-gold);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.convo-line {
    margin: 6px 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}
.convo-line.self {
    border-color: rgba(159, 232, 255, 0.28);
    background: rgba(105, 200, 214, 0.08);
}
.convo-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 10.5px;
    margin-bottom: 4px;
}
.convo-meta b {
    color: #9fe8ff;
    font-weight: 700;
}
.convo-line p {
    margin: 0;
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.35;
}
.memory-list {
    list-style: none;
    padding: 0 16px;
    margin: 0;
}
.memory-list li {
    position: relative;
    padding: 8px 0 8px 18px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}
.memory-list li span {
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb65c;
}
.memory-list li span.green {
    background: #91d57b;
}
.memory-list li span.blue {
    background: #63b6df;
}
.memory-list em {
    float: right;
    margin-left: 8px;
    color: #7e858c;
    font-style: normal;
}
body.god-home .mk-place .mk-label,
body.god-home .mk-zone {
    opacity: 0.75;
}
/* The god view brightens the markers. It must not undo the colour split —
   before this it forced every dot on the map red, creature or not. */
body.god-home .mk-dot {
    background: #35f08c;
    box-shadow: 0 0 10px rgba(53, 240, 140, 0.95);
}
body.god-home .mk-monster .mk-dot {
    background: #ff1f1a;
    box-shadow: 0 0 12px 3px rgba(255, 31, 26, 0.95);
}
@media (max-width: 1200px) {
    .god-topbar {
        grid-template-columns: 1fr;
        height: auto;
    }
    .god-brand,
    .god-menu {
        border-right: none;
        border-bottom: 1px solid var(--god-line);
    }
    /* Stacked mobile layout: let the page scroll normally instead of
       clamping to viewport height. Without this, .god-layout (a grid item
       with overflow:auto) gets its automatic min-height forced to 0 per
       spec, collapses to whatever space is left below the topbar, and its
       rows (still sized to full content height) overlap/paint over each
       other instead of stacking. */
    .god-home {
        overflow: visible;
    }
    .god-layout {
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
        gap: 18px;
    }
    .god-left,
    .god-right {
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--god-line);
    }
    .god-center {
        grid-template-rows: 70vh auto;
        border-bottom: 1px solid var(--god-line);
    }
    .god-bottom {
        grid-template-columns: 1fr;
    }
}

/* --- six-god divine interventions ---------------------------------------- */
/* Target → Method → Intent → Message. Locked methods stay dimmed but visible;
   the active method/intent glow red per the design doc. */

/* The panels below use display:flex/grid classes, which would silently defeat
   the hidden attribute (author styles beat the UA [hidden] rule). */
[hidden] {
    display: none !important;
}

.divine-god-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 16px 8px;
}
.divine-god-name {
    color: var(--accent-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.divine-god-switch {
    padding: 4px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.god-action.locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.god-action.selected {
    border-left: 2px solid #ff3b3b;
    background: rgba(255, 59, 59, 0.06);
    box-shadow: inset 0 0 16px rgba(255, 59, 59, 0.15);
}

/* Guided-flow breadcrumb: Method › Intent › Message. Chips name the pick
   once made and step back on click; unreachable steps are dimmed. */
.divine-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 16px 6px;
}
.divine-steps:empty {
    display: none;
}
.divine-step {
    padding: 4px 9px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(6, 13, 25, 0.72);
    border: 1px solid rgba(130, 169, 203, 0.22);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.divine-step:hover:not(:disabled) {
    border-color: rgba(255, 59, 59, 0.4);
    color: var(--text-main);
}
.divine-step.current {
    color: #ff8f8f;
    border-color: #ff3b3b;
    background: rgba(255, 59, 59, 0.08);
}
.divine-step.locked {
    opacity: 0.4;
    cursor: default;
}
.divine-step-sep {
    color: var(--text-muted);
    font-size: 11px;
}

.divine-intents {
    margin: 0 16px 12px;
    display: grid;
    gap: 8px;
}
.intent-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 1px solid rgba(130, 169, 203, 0.22);
    border-radius: var(--radius-sm);
    background: rgba(6, 13, 25, 0.72);
}
.intent-card b {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.intent-card small {
    display: block;
    color: var(--text-muted);
    margin-top: 3px;
    font-size: 11px;
}
.intent-card:hover {
    border-color: rgba(255, 59, 59, 0.4);
}
.intent-card.selected {
    border-color: #ff3b3b;
    box-shadow: 0 0 16px rgba(255, 59, 59, 0.35);
}

/* Group-target picker: checkbox list for choosing several NPCs. */
#divine-target-list-wrap {
    margin: 0 16px 10px;
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.divine-target-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-main);
    border: 1px solid rgba(130, 169, 203, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(6, 13, 25, 0.55);
    cursor: pointer;
}
.divine-target-check:hover {
    border-color: rgba(255, 59, 59, 0.35);
}
.divine-target-check input {
    accent-color: #ff3b3b;
}
#divine-target-npc,
#divine-target-place,
#divine-target-zone {
    margin: 6px 16px 0;
}
#divine-target-all {
    margin: 6px 16px 0;
}

#divine-message-block,
#divine-intent-block {
    margin: 0 0 4px;
}
#divine-cost {
    margin: 0 16px 8px;
}
#divine-error {
    margin: 6px 16px;
}
.god-action.divine-send {
    border-top: 1px solid rgba(255, 59, 59, 0.25);
}
.god-action.divine-send i {
    color: #ff3b3b;
    border-color: rgba(255, 59, 59, 0.38);
    background: rgba(255, 59, 59, 0.06);
}

/* God selection / switch overlay */
.divine-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(0, 4, 6, 0.82);
    backdrop-filter: blur(4px);
}
.divine-select-card {
    width: min(680px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--god-line);
    border-radius: 12px;
    background: linear-gradient(
        180deg,
        rgba(3, 18, 24, 0.96),
        rgba(2, 10, 13, 0.98)
    );
    box-shadow: 0 0 60px rgba(0, 180, 220, 0.08);
}
.divine-select-card h2 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 18px;
}
.divine-select-sub {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 12px;
}
.divine-god-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.divine-god-choice {
    display: block;
    text-align: left;
    padding: 12px;
    border: 1px solid rgba(130, 169, 203, 0.22);
    border-radius: var(--radius-sm);
    background: rgba(6, 13, 25, 0.72);
}
.divine-god-choice b {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.divine-god-choice em {
    display: block;
    font-style: normal;
    font-size: 10px;
    margin-top: 2px;
    letter-spacing: 0.08em;
}
.divine-god-choice.good em {
    color: var(--accent-gold);
}
.divine-god-choice.evil em {
    color: #ff3d2d;
}
.divine-god-choice small {
    display: block;
    color: var(--text-muted);
    margin-top: 5px;
    font-size: 11px;
}
.divine-god-choice .divine-god-intents {
    color: #91a6bd;
}
.divine-god-choice:hover {
    border-color: rgba(255, 59, 59, 0.45);
    box-shadow: 0 0 16px rgba(255, 59, 59, 0.2);
}
.divine-select-cancel {
    margin-top: 14px;
}

/* --- Natural Events -------------------------------------------------------
   Matches the divine panel deliberately: same god-action rows, same locked
   treatment. This is another way of reaching into the world, not a new mode. */
.nat-filters {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
}
.nat-filter {
  flex: 1;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8b9a;
  background: transparent;
  border: 1px solid #1e2a36;
  border-radius: 4px;
  cursor: pointer;
}
.nat-filter.on {
  color: #d8e6f2;
  border-color: #3a5a78;
  background: #101c27;
}
.nat-confirm {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #2a3f52;
  border-radius: 6px;
  background: #0d1620;
}
.nat-disclaimer {
  margin: 6px 0 8px;
  font-style: italic;
  opacity: 0.75;
}
.nat-cancel {
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c7d8c;
  background: transparent;
  border: 1px solid #1e2a36;
  border-radius: 4px;
  cursor: pointer;
}
.nat-cancel:hover {
  color: #b8c9d8;
}

/* Monster Incursions reuses the Natural Events chrome deliberately — it is
   another way of reaching into the world, not a different mode. */
.mon-attrib {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #16212c;
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.55;
}

/* --- chronology panel (DM hourly / daily record) ------------------------- */

.chron-toggles {
  display: flex;
  gap: 6px;
  margin: 8px 16px 10px;
}

.chron-toggle {
  flex: 1;
  padding: 5px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b8b9a;
  background: transparent;
  border: 1px solid #1e2a36;
  border-radius: 4px;
  cursor: pointer;
}

.chron-toggle.on {
  color: #d8e6f2;
  border-color: #3a5a78;
  background: #101c27;
}

.chron-toggle:hover {
  color: #b0bec5;
  border-color: #2c465a;
}

.chron-tz {
  flex: 0 0 auto;
  align-self: center;
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 0.05em;
  margin-left: auto;
}

.chron-feed {
  padding: 0 16px 10px;
  max-height: 320px;
  overflow-y: auto;
}

.chron-entry {
  padding: 10px 0;
  border-bottom: 1px solid rgba(36, 52, 68, 0.35);
}

.chron-entry:last-child {
  border-bottom: none;
}

.chron-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.chron-entry-time {
  font-size: 10px;
  color: var(--accent-cyan);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chron-entry-date {
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.6;
}

.chron-entry-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-main);
}

.chron-view-all {
  display: block;
  width: calc(100% - 32px);
  margin: 0 auto 14px;
  padding: 8px 0;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  background: rgba(0, 180, 220, 0.06);
  border: 1px solid rgba(0, 180, 220, 0.15);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
}

.chron-view-all:hover {
  opacity: 1;
  background: rgba(0, 180, 220, 0.12);
}

/* --- create NPC panel ---------------------------------------------------- */

.npc-create-form {
  padding: 0 16px 14px;
}

.npc-create-send {
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npc-abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  margin-bottom: 8px;
}

.npc-abilities label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9fe8ff;
  letter-spacing: 0.05em;
}

.npc-abilities select {
  width: 100%;
  padding: 3px 2px;
  font: inherit;
  font-size: 12px;
  background: #101c27;
  color: #d8e6f2;
  border: 1px solid #2a3a48;
  border-radius: 3px;
}