/* ========================================
   REALMFORGE - Fantasy Map Generator
   Cartographic Theme
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --parchment-light: #f0e6d6;
    --parchment: #e8dcc8;
    --parchment-mid: #d4c4a8;
    --parchment-dark: #c4b393;
    
    --ink: #3a2a1a;
    --ink-medium: #5a4a3a;
    --ink-light: #7a6a5a;
    --ink-faded: #9a8a7a;
    
    --accent: #8b0000;
    
    --font-body: 'Times New Roman', Georgia, serif;
    --font-display: 'Cinzel', Georgia, serif;
    --font-mono: 'Courier New', monospace;
}

html, body { height: 100%; overflow: hidden; }

body {
    font-family: var(--font-body);
    font-size: 14px;
    background: #1a1a1a;
    color: var(--ink);
}

/* ========================================
   LOADING SCREEN - Detailed Cartographic Theme
   ======================================== */

.loading-screen {
    position: fixed;
    inset: 0;
    background: #1a1510;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-bg { position: absolute; inset: 0; overflow: hidden; }

.parchment-base {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(245,235,220,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(245,235,220,0.2) 0%, transparent 50%),
        radial-gradient(ellipse at center, #e8dcc8 0%, #d4c4a8 30%, #c4b393 60%, #8a7a5a 90%, #5a4a3a 100%);
}

.parchment-texture {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

.parchment-noise {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.film-grain {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='4' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    animation: grain-shift 0.5s steps(4) infinite, grain-fade 0.15s ease-in-out infinite alternate;
}

.film-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' seed='42' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E");
    opacity: 0.5;
    animation: grain-shift-alt 0.3s steps(3) infinite reverse;
}

@keyframes grain-shift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -5%); }
    50% { transform: translate(5%, 5%); }
    75% { transform: translate(-2%, 3%); }
    100% { transform: translate(0, 0); }
}

@keyframes grain-shift-alt {
    0% { transform: translate(0, 0) scale(1.1); }
    33% { transform: translate(3%, -4%) scale(1.1); }
    66% { transform: translate(-4%, 2%) scale(1.1); }
    100% { transform: translate(0, 0) scale(1.1); }
}

@keyframes grain-fade {
    0% { opacity: 0.10; }
    100% { opacity: 0.14; }
}

.parchment-fibers {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02,0.4' numOctaves='2' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fiber)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.scanlines {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
}

.parchment-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 250px 100px rgba(26,21,16,0.85);
}

/* Decorative Map Border */
.map-border {
    position: absolute;
    inset: 30px;
    border: 4px double #6a5a4a;
    pointer-events: none;
}

.map-border::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid #8a7a6a;
}

.border-corner {
    position: absolute;
    width: 40px;
    height: 40px;
}

.border-corner::before,
.border-corner::after {
    content: '';
    position: absolute;
    background: #6a5a4a;
}

.border-corner.tl { top: -4px; left: -4px; }
.border-corner.tr { top: -4px; right: -4px; }
.border-corner.bl { bottom: -4px; left: -4px; }
.border-corner.br { bottom: -4px; right: -4px; }

.border-corner.tl::before, .border-corner.br::before { width: 40px; height: 3px; top: 0; left: 0; }
.border-corner.tl::after, .border-corner.br::after { width: 3px; height: 40px; top: 0; left: 0; }
.border-corner.tr::before, .border-corner.bl::before { width: 40px; height: 3px; top: 0; right: 0; }
.border-corner.tr::after, .border-corner.bl::after { width: 3px; height: 40px; top: 0; right: 0; }

/* Corner Flourishes */
.corner-flourish {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.6;
}

.corner-flourish.tl { top: 50px; left: 50px; }
.corner-flourish.tr { top: 50px; right: 50px; transform: scaleX(-1); }
.corner-flourish.bl { bottom: 50px; left: 50px; transform: scaleY(-1); }
.corner-flourish.br { bottom: 50px; right: 50px; transform: scale(-1, -1); }

/* Loading Content */
.loading-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1;
    max-width: 500px;
    padding: 40px;
}

/* Decorative Header */
.loading-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.header-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7a6a5a;
    font-size: 12px;
}

.header-ornament .line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #7a6a5a, transparent);
}

/* Compass Container */
.compass-container {
    width: 160px;
    height: 160px;
    /* No animation — compass is a fixed atlas reference, not a spinner. */
    filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4));
}

.compass-rose { width: 100%; height: 100%; }

/* ============================================
   COMPASS ARROWS — slow rotation with subtle wobble
   ============================================
   
   The 16 arrow polygons (4 cardinals + 4 diagonals + 8 minor) are wrapped
   in two nested <g> elements. SVG transforms compose, so layering two
   animations gives "needle hunting for north while drifting around the
   compass":
   
       outer .compass-arrows-rotate  → continuous rotation (30s/turn)
       inner .compass-arrows-wobble  → small back-and-forth (3s cycle)
   
   The cardinal letters (N/S/E/W), degree marks, and outer rings stay
   fixed because they're outside both wrappers. */

.compass-arrows-rotate {
    transform-origin: 100px 100px;
    animation: compass-rotate 30s linear infinite;
}

.compass-arrows-wobble {
    transform-origin: 100px 100px;
    /* Combined wobble + glow on the same element */
    animation: compass-wobble 3s ease-in-out infinite,
               compass-glow   3.5s ease-in-out infinite;
}

/* Slow continuous rotation — full revolution every 30 seconds */
@keyframes compass-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Subtle wobble — like a magnetic needle settling. ±6° feels alive
   without looking jittery. ease-in-out keeps the motion organic. */
@keyframes compass-wobble {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg); }
}

@keyframes compass-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 3px rgba(160, 30, 30, 0.45)); }
}

/* ============================================
   CONSTELLATIONS — appear progressively, twinkle
   ============================================ */

.constellation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;  /* behind content but above parchment */
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Stars fade in one at a time. We use staggered animation-delay so each
   constellation appears in sequence, then a subtle twinkle continues. */
.con-star {
    fill: #2a1a0a;
    opacity: 0;
    animation: star-appear 0.8s ease-out forwards, star-twinkle 4s ease-in-out infinite;
}

.con-line {
    stroke: #6a5a4a;
    stroke-width: 0.6;
    stroke-dasharray: 1, 2;
    fill: none;
    opacity: 0;
    animation: line-appear 1.2s ease-out forwards;
}

.amb-star {
    fill: #4a3a2a;
    opacity: 0;
    animation: star-appear 0.6s ease-out forwards, star-twinkle 5s ease-in-out infinite;
}

@keyframes star-appear {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 0.85; transform: scale(1); }
}

@keyframes line-appear {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 0.45; }
}

/* Stagger the constellations — each appears about 1.5s after the previous */
.constellation.c1 .con-star { animation-delay: 0.5s,  0s; }
.constellation.c1 .con-line { animation-delay: 1.5s; }

.constellation.c2 .con-star { animation-delay: 2.0s,  0s; }
.constellation.c2 .con-line { animation-delay: 3.0s; }

.constellation.c3 .con-star { animation-delay: 3.5s,  0s; }
.constellation.c3 .con-line { animation-delay: 4.5s; }

.constellation.c4 .con-star { animation-delay: 5.0s,  0s; }
.constellation.c4 .con-line { animation-delay: 6.0s; }

/* Ambient stars appear later, scattered timing */
.amb-star:nth-child(1)  { animation-delay: 1.0s, 0s; }
.amb-star:nth-child(2)  { animation-delay: 1.4s, 0s; }
.amb-star:nth-child(3)  { animation-delay: 2.2s, 0s; }
.amb-star:nth-child(4)  { animation-delay: 2.8s, 0s; }
.amb-star:nth-child(5)  { animation-delay: 3.4s, 0s; }
.amb-star:nth-child(6)  { animation-delay: 3.8s, 0s; }
.amb-star:nth-child(7)  { animation-delay: 4.4s, 0s; }
.amb-star:nth-child(8)  { animation-delay: 5.0s, 0s; }
.amb-star:nth-child(9)  { animation-delay: 5.4s, 0s; }
.amb-star:nth-child(10) { animation-delay: 6.0s, 0s; }
.amb-star:nth-child(11) { animation-delay: 6.4s, 0s; }
.amb-star:nth-child(12) { animation-delay: 6.8s, 0s; }

.cardinal-letter {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    fill: #3a2a1a;
    text-anchor: middle;
}

/* Title Area */
.title-area { 
    text-align: center;
    margin-top: 8px;
}

.title-ornament {
    font-size: 12px;
    color: #8a7a6a;
    letter-spacing: 6px;
}

.loading-title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    letter-spacing: 8px;
    color: #3a2a1a;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.3), -1px -1px 0 rgba(0,0,0,0.1);
    margin: 8px 0;
}

.loading-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 10px;
    color: #6a5a4a;
    font-style: italic;
}

/* Progress Area */
.loading-progress { 
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scale-mark {
    font-size: 10px;
    color: #6a5a4a;
    font-family: var(--font-mono);
    min-width: 50px;
}

.scale-mark:last-child {
    text-align: right;
}

.progress-track {
    flex: 1;
    height: 14px;
    background: linear-gradient(180deg, #c4b393 0%, #b8a883 50%, #c4b393 100%);
    border: 2px solid #6a5a4a;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
}

.progress-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,0.05) 8px,
        rgba(0,0,0,0.05) 16px
    );
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(180deg, 
        #8b5a2b 0%, 
        #6b4423 30%,
        #5a3a1d 50%,
        #6b4423 70%,
        #8b5a2b 100%
    );
    transition: width 0.4s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.2));
}

.loading-status {
    font-family: var(--font-body);
    font-style: italic;
    color: #5a4a3a;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    min-height: 20px;
}

/* Scale bar labels */
.scale-bar-label {
    text-align: center;
    font-size: 9px;
    letter-spacing: 3px;
    color: #7a6a5a;
    margin-bottom: 6px;
    font-weight: 600;
}

.scale-units {
    text-align: center;
    font-size: 8px;
    letter-spacing: 2px;
    color: #8a7a6a;
    margin-top: 4px;
}

.progress-notches {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    pointer-events: none;
}

.progress-notches span {
    width: 1px;
    background: rgba(0,0,0,0.15);
}

/* Title Ornaments */
.title-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8a7a6a;
}

.ornament-wing {
    color: #9a8a7a;
    font-size: 10px;
}

.ornament-center {
    font-size: 16px;
    color: #7a6a5a;
}

/* Loading Divider */
.loading-divider {
    width: 200px;
    height: 20px;
    margin: 8px 0;
}

.divider-svg {
    width: 100%;
    height: 100%;
}

/* Decorative Elements */
.sea-monster {
    position: absolute;
    width: 120px;
    height: 60px;
    opacity: 0.4;
    animation: sea-monster-swim 8s ease-in-out infinite;
}

.sea-monster.left {
    bottom: 80px;
    left: 60px;
}

@keyframes sea-monster-swim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(5px) rotate(-2deg); }
}

.sailing-ship {
    position: absolute;
    width: 80px;
    height: 60px;
    opacity: 0.4;
    animation: ship-bob 6s ease-in-out infinite;
}

.sailing-ship.right {
    bottom: 80px;
    right: 60px;
}

@keyframes ship-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

/* Flavor Text */
.loading-flavor {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.flavor-deco { 
    font-size: 14px; 
    color: #9a8a7a;
}

.flavor-text {
    font-family: var(--font-body);
    font-style: italic;
    color: #7a6a5a;
    letter-spacing: 2px;
    font-size: 13px;
    animation: flavor-pulse 3s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

@keyframes flavor-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Decorative Footer */
.loading-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.footer-illustration {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tool-icon {
    width: 20px;
    height: 20px;
    color: #8a7a6a;
    opacity: 0.6;
}

.footer-text {
    font-size: 9px;
    color: #9a8a7a;
    letter-spacing: 4px;
    font-family: var(--font-display);
}

.footer-illustration svg {
    width: 24px;
    height: 24px;
    fill: #6a5a4a;
}

.footer-text {
    font-size: 10px;
    color: #8a7a6a;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ========================================
   APP LAYOUT
   ======================================== */

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ========================================
   TOP BAR
   ======================================== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-mid) 100%);
    border-bottom: 3px double var(--ink-medium);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 32px;
    height: 32px;
    color: var(--ink-medium);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--ink);
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

select {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 28px 8px 10px;
    background: var(--parchment-light);
    border: 2px solid var(--ink-medium);
    border-radius: 3px;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235a4a3a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

select:hover { border-color: var(--ink); }
select:focus { outline: none; border-color: var(--accent); }

.zoom-widget {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--parchment-light);
    border: 2px solid var(--ink-medium);
    border-radius: 3px;
}

.zoom-display {
    font-family: var(--font-mono);
    font-size: 11px;
    min-width: 44px;
    text-align: center;
    color: var(--ink);
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--ink-medium);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--parchment-mid);
    color: var(--ink);
}

.icon-btn svg { width: 16px; height: 16px; }

.action-btn {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 14px;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment) 100%);
    border: 2px solid var(--ink-medium);
    border-radius: 3px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-btn:hover {
    background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-mid) 100%);
    border-color: var(--ink);
}

.action-btn svg { width: 16px; height: 16px; }

.action-btn.primary {
    background: linear-gradient(180deg, #a52a2a 0%, var(--accent) 100%);
    border-color: #5a0000;
    color: var(--parchment-light);
}

.action-btn.primary:hover {
    background: linear-gradient(180deg, #b53a3a 0%, #a52a2a 100%);
}

.action-btn.secondary {
    background: transparent;
    border-style: dashed;
}

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

.main-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ========================================
   SIDEBAR - Dark Theme
   ======================================== */

.sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f5ebe0 0%, #e8dcc8 30%, #d9cab4 100%);
    border-right: 4px double #8b7355;
    color: #3a2a1a;
    font-size: 11px;
    position: relative;
    z-index: 100;
    box-shadow: inset -3px 0 8px rgba(0,0,0,0.1);
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
}

.sidebar-header {
    padding: 12px 14px;
    background: linear-gradient(180deg, #e8dcc8 0%, #d4c4a8 100%);
    border-bottom: 3px double #8b7355;
    position: relative;
}

.sidebar-header::after {
    content: '⚜';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #8b7355;
    background: #d4c4a8;
    padding: 0 8px;
}

/* Preset selector below the main "New World" button */
.preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.preset-row .preset-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6a5a4a;
    flex-shrink: 0;
}

.preset-row .ctrl-select {
    flex: 1;
}

.generate-main-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #8b4513 0%, #6b3410 50%, #5a2d0d 100%);
    border: 2px solid #3a1a08;
    border-radius: 4px;
    color: #f5ebe0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.generate-main-btn:hover {
    background: linear-gradient(180deg, #9b5523 0%, #7b4418 50%, #6a3d15 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.generate-main-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.2);
}

.generate-main-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #d4c4a8;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #a89070;
    border-radius: 4px;
    border: 1px solid #8b7355;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #8b7355;
}

.sidebar-footer {
    padding: 10px 14px;
    background: linear-gradient(180deg, #d4c4a8 0%, #c4b498 100%);
    border-top: 2px solid #8b7355;
}

.stats-bar {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #6a5a4a;
    font-style: italic;
}

.stats-bar b {
    color: #4a3a2a;
    font-weight: 600;
}

/* Control Group (no header) */
.ctrl-group {
    padding: 12px 14px;
    border-bottom: 1px solid #c4b498;
}

/* Control Section */
.ctrl-section {
    border-bottom: 1px solid #c4b498;
}

/* Collapsible heads — clickable, with chevron and icon */
.ctrl-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(180deg, #e0d4c0 0%, #d4c4a8 100%);
    border-bottom: 1px solid #b8a888;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #5a4a3a;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.ctrl-section-head:hover {
    background: linear-gradient(180deg, #e8dcc8 0%, #dccbb0 100%);
}

/* Section icon — leading symbol that visually flags each section. We use
   Unicode symbols rather than icon fonts to avoid extra HTTP requests. */
.ctrl-section-head .sec-icon {
    display: inline-block;
    width: 14px;
    margin-right: 6px;
    text-align: center;
    color: #7a6a5a;
    font-size: 12px;
}

/* Chevron on the right indicates expand/collapse state */
.ctrl-section-head .sec-chevron {
    display: inline-block;
    width: 10px;
    margin-left: 6px;
    color: #8a7a6a;
    font-size: 10px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.ctrl-section.collapsed .ctrl-section-head .sec-chevron {
    transform: rotate(-90deg);
}

/* Hide everything in a collapsed section except the head */
.ctrl-section.collapsed > *:not(.ctrl-section-head) {
    display: none;
}

/* Slight visual indication that the head is "different" when collapsed */
.ctrl-section.collapsed .ctrl-section-head {
    border-bottom-color: #c4b498;
    opacity: 0.85;
}

/* ============================================
   TOOLTIPS — pure-CSS via [data-tooltip] attribute
   ============================================ */

/* Any element with data-tooltip="..." gets a tooltip on hover */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 28, 18, 0.95);
    color: #f0e6d6;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    max-width: 240px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 1000;
    animation: tooltip-fade 0.15s ease-out;
}

[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(40, 28, 18, 0.95);
    pointer-events: none;
    z-index: 1000;
    animation: tooltip-fade 0.15s ease-out;
}

@keyframes tooltip-fade {
    from { opacity: 0; transform: translateX(-50%) translateY(2px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* For sliders that wrap in .ctrl-slider, position tooltip on the row not the slider thumb */
.ctrl-slider[data-tooltip]:hover::after {
    bottom: calc(100% - 4px);
}

/* Don't show tooltips inside collapsed sections (they'd overflow) */
.ctrl-section.collapsed [data-tooltip]:hover::after,
.ctrl-section.collapsed [data-tooltip]:hover::before {
    display: none;
}

.ctrl-section-head + .ctrl-row,
.ctrl-section-head + .ctrl-slider,
.ctrl-section-head + .ctrl-checks {
    margin-top: 0;
}

.ctrl-section > .ctrl-row,
.ctrl-section > .ctrl-slider,
.ctrl-section > .ctrl-check,
.ctrl-section > .ctrl-checks {
    padding: 0 14px;
    margin: 8px 0;
}

.ctrl-section > .ctrl-row:last-child,
.ctrl-section > .ctrl-slider:last-child,
.ctrl-section > .ctrl-check:last-child,
.ctrl-section > .ctrl-checks:last-child {
    margin-bottom: 12px;
}

/* Action buttons in header */
.ctrl-action-btn {
    padding: 4px 10px;
    background: linear-gradient(180deg, #a89070 0%, #8b7355 100%);
    border: 1px solid #6a5340;
    border-radius: 3px;
    color: #f5ebe0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.ctrl-action-btn:hover {
    background: linear-gradient(180deg, #b8a080 0%, #9b8365 100%);
    border-color: #7a6350;
}

.ctrl-action-group {
    display: flex;
    gap: 4px;
}

/* Control Row */
.ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.ctrl-group .ctrl-row {
    margin: 6px 0;
}

.ctrl-label {
    flex: 0 0 55px;
    font-size: 10px;
    color: #6a5a4a;
    font-weight: 500;
}

/* Inputs */
.ctrl-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: #f5ebe0;
    border: 1px solid #a89070;
    border-radius: 3px;
    color: #3a2a1a;
    font-family: var(--font-mono);
    font-size: 11px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.ctrl-input:focus {
    outline: none;
    border-color: #8b7355;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 2px rgba(139,115,85,0.2);
}

.ctrl-input-wrap {
    flex: 1;
    display: flex;
    gap: 4px;
}

.ctrl-input-wrap .ctrl-input {
    flex: 1;
}

.ctrl-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #f5ebe0 0%, #e8dcc8 100%);
    border: 1px solid #a89070;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.ctrl-icon-btn:hover {
    background: linear-gradient(180deg, #fff 0%, #f5ebe0 100%);
    border-color: #8b7355;
}

.ctrl-icon-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #6a5a4a;
    stroke-width: 2;
}

.ctrl-icon-btn:hover svg {
    stroke: #3a2a1a;
}

/* Select */
.ctrl-select {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    background: #f5ebe0;
    border: 1px solid #a89070;
    border-radius: 3px;
    color: #3a2a1a;
    font-size: 11px;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.ctrl-select:focus {
    outline: none;
    border-color: #8b7355;
}

/* Slider */
.ctrl-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.ctrl-slider > span:first-child {
    flex: 0 0 55px;
    font-size: 10px;
    color: #6a5a4a;
    font-weight: 500;
}

.ctrl-slider input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: linear-gradient(180deg, #c4b498 0%, #b8a888 100%);
    border-radius: 3px;
    border: 1px solid #a89070;
}

.ctrl-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: linear-gradient(180deg, #f5ebe0 0%, #d4c4a8 100%);
    border: 2px solid #8b7355;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ctrl-slider input[type="range"]::-webkit-slider-thumb:hover {
    background: linear-gradient(180deg, #fff 0%, #e8dcc8 100%);
}

.ctrl-val {
    flex: 0 0 32px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #5a4a3a;
    font-weight: 600;
}

/* Checkbox */
.ctrl-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 10px;
    color: #5a4a3a;
}

.ctrl-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #8b7355;
    cursor: pointer;
}

.ctrl-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ctrl-check:hover span {
    color: #3a2a1a;
}

/* Export */
.ctrl-export-row {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
}

.ctrl-export-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #aaa;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ctrl-export-btn:hover {
    background: #333;
    border-color: #444;
    color: #fff;
}

.ctrl-export-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.suggested-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    background: var(--parchment-light);
    border: 2px solid var(--ink-medium);
    border-radius: 3px;
    text-align: center;
}

/* ========================================
   CANVAS AREA
   ======================================== */

.canvas-area {
    flex: 1;
    min-width: 0;
    position: relative;
    background: #0c0c0e;
    overflow: hidden;
    z-index: 1;
}

#voronoi-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    will-change: transform;
    transform-origin: 0 0;
    position: relative;
    z-index: 1;
}

#voronoi-canvas:active {
    cursor: grabbing;
}

/* SVG overlay layers */
.map-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

.map-svg > g {
    will-change: transform;
}

/* Heightmap overlay canvas */
#heightmap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: hard-light;
    transition: opacity 0.3s ease;
    z-index: 5;
    will-change: transform;
    transform-origin: 0 0;
}

#heightmap-overlay.active {
    opacity: 0.8;
}

/* Sea-depth overlay sits in the same z-stack as the heightmap
   overlay but uses a different blend mode tuned for water cells.
   Multiply works well over the pale ocean fills — it deepens the
   blue progressively as the sample height drops. */
#depth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
    z-index: 5;
    will-change: transform;
    transform-origin: 0 0;
}

#depth-overlay.active {
    opacity: 0.85;
}

/* Overlay toggle buttons */
.overlay-toggles {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.overlay-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--parchment);
    border: 2px solid var(--ink-medium);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

.overlay-toggle-btn:hover {
    background: var(--parchment-light);
    border-color: var(--ink);
}

.overlay-toggle-btn.active {
    background: var(--ink);
    color: var(--parchment-light);
    border-color: var(--ink);
}

.overlay-toggle-btn svg {
    width: 18px;
    height: 18px;
}

/* Kingdom fills and borders */
#kingdom-svg .kingdom-fill {
    stroke: none;
}

#kingdom-svg .kingdom-border {
    fill: none;
    stroke: rgb(86, 86, 109);
    stroke-width: 1px;
    stroke-dasharray: 2px;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* Sea Routes */
#sea-route-svg .sea-route {
    fill: none;
    stroke-linecap: round;
}

/* Rivers */
/* Coastline */
#coastline-svg path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#river-svg path {
    fill: rgb(93, 151, 187);
    stroke: none;
}

/* Roads. Trade routes are the visual backbone — solid line in a warm
   brown, more prominent than the dashed local roads. Local roads stay
   subtle so they don't overwhelm the political-color fills. */
#road-svg path {
    fill: none;
    stroke: rgb(96, 78, 60);
    stroke-linecap: butt;
    stroke-linejoin: miter;
}
#road-svg .road-trade {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cities - natural marker style */
#city-svg .city-icon {
    /* Styles defined inline in SVG */
}

#city-svg .capitol-icon {
    /* Styles defined inline in SVG */
}

/* Labels */
#label-svg text {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    fill: rgba(60, 45, 30, 0.9);
    pointer-events: none;
}

#label-svg .kingdom-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    font-weight: 600;
    /* Parchment-colored stroke painted UNDER the fill so the dark text is
       legible even where it sits on busy terrain, river lines, or
       similar-colored kingdom fills. paint-order makes the stroke render
       behind the fill so letterforms still look clean. */
    fill: #2C2416;
    stroke: rgba(232, 220, 200, 0.85);
    stroke-width: 3px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

#label-svg .city-label {
    font-family: 'IM Fell English', 'Times New Roman', serif;
    font-style: italic;
}

#label-svg .capitol-label {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 500;
}

/* Lake labels follow real-map cartographic convention: italic, in a
   slightly muted blue that reads as "this is water" without competing
   with the kingdom names. Letter-spacing is loose so the name visually
   spans the lake's width. */
#label-svg .lake-label {
    font-family: 'IM Fell English', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.15em;
    fill: #2A4458;
    stroke: rgba(232, 220, 200, 0.7);
    stroke-width: 2px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

/* ========================================
   TOOLTIP
   ======================================== */

.cell-tooltip {
    position: fixed;
    padding: 12px 16px;
    background: var(--parchment);
    border: 2px solid var(--ink-medium);
    border-radius: 3px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 1000;
    max-width: 250px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.15s;
}

.cell-tooltip.visible { opacity: 1; }

.cell-tooltip strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ink-medium);
    padding-bottom: 4px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.tooltip-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ink-light);
}

.tooltip-value {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Tooltip content classes */
.tt-content {
    min-width: 120px;
}

.tt-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-dark);
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink-medium);
}

.tt-subtitle {
    font-size: 11px;
    color: var(--ink-light);
    margin-bottom: 8px;
    font-style: italic;
}

.tt-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}

.tt-stat {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.tt-stat .tt-label {
    color: var(--ink-light);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-terrain {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.tt-icon {
    font-size: 14px;
}

.tt-info {
    font-size: 12px;
    color: var(--ink);
}

.tt-lake .tt-info { color: #2D6B9F; }
.tt-land .tt-info { color: #5D4E37; }
.tt-ocean .tt-info { color: #3D7A9E; }

/* ========================================
   SCROLLBAR
   ======================================== */

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--parchment-mid); }
::-webkit-scrollbar-thumb {
    background: var(--parchment-dark);
    border: 2px solid var(--ink-medium);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--parchment); }

/* ========================================
   INFO PANEL (Click to show)
   ======================================== */

.info-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 280px;
    background: var(--parchment);
    border: 2px solid var(--ink-medium);
    border-radius: 4px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.info-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.info-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--ink-light);
    border-radius: 3px;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.info-panel-close:hover {
    background: var(--ink);
    color: var(--parchment-light);
    border-color: var(--ink);
}

.info-panel-content {
    padding: 16px 20px;
}

.info-panel-content .ip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink-medium);
}

.info-panel-content .ip-icon {
    font-size: 24px;
}

.info-panel-content .ip-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-dark);
    line-height: 1.2;
}

.info-panel-content .ip-subtitle {
    font-size: 12px;
    color: var(--ink-light);
    font-style: italic;
    margin-top: 2px;
}

.info-panel-content .ip-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-panel-content .ip-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--parchment-dark);
}

.info-panel-content .ip-stat:last-child {
    border-bottom: none;
}

.info-panel-content .ip-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-light);
}

.info-panel-content .ip-stat-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-dark);
}

.info-panel-content .ip-divider {
    height: 1px;
    background: var(--ink-medium);
    margin: 12px 0;
}

.info-panel-content .ip-section-title {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-medium);
    margin-bottom: 8px;
}

/* ============================================================
   KINGDOM POPUP — coat of arms + summary + tables
   
   Used only when the info panel is showing a kingdom (the panel
   widens to give the table room, and the header gains a coat-of-
   arms slot on the left). City and capital popups still use the
   compact 280px layout above.
   ============================================================ */

.info-panel:has(.ip-kingdom-header) {
    width: 360px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

/* When the kingdom panel is too short for the viewport, let the
   inner content scroll as a whole — independent of the per-table
   scroll above. The two scroll regions cooperate: each table caps
   at a sensible row count (so the structure stays readable), and
   if the SUM of sections still overflows, the outer content scrolls. */
.info-panel:has(.ip-kingdom-header) .info-panel-content {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.info-panel-content .ip-kingdom-header {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink-medium);
}

/* Coat of arms slot. The Armoria API returns an SVG sized to the
   slot. If the request fails, the slot stays empty rather than
   showing a tinted placeholder background. */
.info-panel-content .ip-coat {
    flex: 0 0 72px;
    width: 72px;
    height: 88px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.info-panel-content .ip-coat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.info-panel-content .ip-kingdom-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-panel-content .ip-culture {
    font-size: 11px;
    color: var(--ink-light);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Summary block — couple of high-level stat rows shown directly
   under the header. Quieter than the old ip-stat layout. */
.info-panel-content .ip-kingdom-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.info-panel-content .ip-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    padding: 3px 0;
}

.info-panel-content .ip-summary-label {
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 10.5px;
}

.info-panel-content .ip-summary-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink-dark);
    font-size: 12.5px;
}

.info-panel-content .ip-summary-aside {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink-light);
    font-style: italic;
    font-size: 11px;
}

/* Section block (Settlements / Ports) — title above a table. */
.info-panel-content .ip-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--parchment-dark);
}

.info-panel-content .ip-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Settlements / ports table */
.info-panel-content .ip-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 12px;
}

/* Scrollable wrapper around each table. Caps the visible row count
   per table so a kingdom with 30 cities doesn't push the popup past
   the viewport. The header stays pinned via position:sticky on the
   <th> elements (sticky on <thead> doesn't work cross-browser). */
.info-panel-content .ip-table-scroll {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
    /* Subtle inner shadow at the top/bottom hints there's more
       content when the table is mid-scroll. */
    background:
        linear-gradient(var(--parchment) 30%, rgba(232, 220, 200, 0)),
        linear-gradient(rgba(232, 220, 200, 0), var(--parchment) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(58, 42, 26, 0.15), rgba(58, 42, 26, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(58, 42, 26, 0.15), rgba(58, 42, 26, 0)) 0 100%;
    background-color: var(--parchment);
    background-repeat: no-repeat;
    background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
    background-attachment: local, local, scroll, scroll;
}

/* Slim parchment-coloured scrollbar */
.info-panel-content .ip-table-scroll::-webkit-scrollbar {
    width: 6px;
}
.info-panel-content .ip-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.info-panel-content .ip-table-scroll::-webkit-scrollbar-thumb {
    background: var(--parchment-dark);
    border-radius: 3px;
}
.info-panel-content .ip-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ink-faded);
}

.info-panel-content .ip-table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faded);
    font-weight: 500;
    padding: 4px 6px 6px;
    border-bottom: 1px solid var(--parchment-dark);
    /* Keep headers visible while the table body scrolls. Sticky
       lives on each <th>; a sticky <thead> isn't reliable across
       browsers when the table is the scrolling container. */
    position: sticky;
    top: 0;
    background: var(--parchment);
    z-index: 1;
}

.info-panel-content .ip-table tbody td {
    padding: 5px 6px;
    border-bottom: 1px dotted var(--parchment-dark);
    vertical-align: middle;
}

.info-panel-content .ip-table tbody tr:last-child td {
    border-bottom: none;
}

.info-panel-content .ip-table tbody tr:hover {
    background: var(--parchment-light);
}

.info-panel-content .ip-tbl-name {
    color: var(--ink-dark);
    font-weight: 500;
    width: auto;
}

.info-panel-content .ip-tbl-pop {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink);
    width: 80px;
    white-space: nowrap;
}

.info-panel-content .ip-tbl-tag {
    text-align: right;
    width: 88px;
    white-space: nowrap;
}

/* Inline pill tags ("Capital", "Port") used in the settlements
   table to mark special entries. */
.info-panel-content .ip-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid currentColor;
}

.info-panel-content .ip-tag-capital {
    color: #8b6914;
}

.info-panel-content .ip-tag-port {
    color: var(--ink-medium);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 800px) {
    .sidebar { width: 220px; }
    .brand-name { display: none; }
}