@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:wght@400;600&display=swap');

/* ======================
   ALLMÄNNA STILAR
   ====================== */

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

body {
    font-family: 'Crimson Text', serif;
    background: #1a1a1a;
    background-image: 
        radial-gradient(circle at 25% 25%, #2d2d2d 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, #2d2d2d 0%, transparent 50%),
        linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    color: #d4af37;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
}

/* ======================
   LOGIN-SIDA STILAR
   ====================== */

/* Ornamental borders för login-sidan */
.login-page body::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 3px solid #8b4513;
    border-image: linear-gradient(45deg, #8b4513, #d4af37, #8b4513) 1;
    pointer-events: none;
    opacity: 0.3;
}

.login-page body::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 1px solid #d4af37;
    pointer-events: none;
    opacity: 0.2;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 700;
    color: #d4af37;
    text-shadow: 
        2px 2px 4px #000,
        0 0 20px #d4af37,
        0 0 40px #d4af37;
    margin-bottom: 10px;
    letter-spacing: 3px;
    position: relative;
}

.login-header h1::before,
.login-header h1::after {
    content: '⚔';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #8b4513;
}

.login-header h1::before {
    left: -60px;
}

.login-header h1::after {
    right: -60px;
}

.login-header p {
    font-size: 1.3rem;
    color: #b8860b;
    font-style: italic;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
    margin-top: 10px;
}

.login-box {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 50%, #2d2d2d 100%);
    border: 3px solid #8b4513;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(139, 69, 19, 0.1),
        0 0 60px rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
}

.login-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #8b4513, #d4af37, #8b4513, #d4af37);
    border-radius: 15px;
    z-index: -1;
    opacity: 0.3;
}

.login-box::after {
    content: '✦ ✦ ✦ ✦ ✦';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #d4af37;
    font-size: 1.2rem;
    opacity: 0.6;
}

.login-box h2 {
    font-family: 'Cinzel', serif;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
    font-size: 2rem;
    color: #d4af37;
    font-weight: 600;
    text-shadow: 2px 2px 4px #000;
    position: relative;
}

.login-box h2::before,
.login-box h2::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #8b4513;
    font-size: 1.2rem;
}

.login-box h2::before {
    left: -30px;
}

.login-box h2::after {
    right: -30px;
}

.login-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-button, .register-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 30px;
    border: 2px solid #8b4513;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    min-height: 60px;
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 50%, #2d2d2d 100%);
    text-shadow: 1px 1px 2px #000;
}

.login-button::before, .register-button::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #d4af37;
    border-radius: 4px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.login-button:hover::before, .register-button:hover::before {
    opacity: 0.8;
}

.login-button i, .register-button i {
    margin-right: 15px;
    font-size: 1.3rem;
}

.login-button.pocketid {
    color: #d4af37;
    border-color: #d4af37;
}

.login-button.pocketid:hover {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #1a1a1a;
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.login-button.google {
    color: #cd853f;
    border-color: #cd853f;
}

.login-button.google:hover {
    background: linear-gradient(135deg, #cd853f, #a0522d);
    color: #1a1a1a;
    border-color: #cd853f;
    box-shadow: 0 0 20px rgba(205, 133, 63, 0.5);
    transform: translateY(-2px);
}

.login-button.facebook {
    color: #4682b4;
    border-color: #4682b4;
}

.login-button.facebook:hover {
    background: linear-gradient(135deg, #4682b4, #36648b);
    color: #1a1a1a;
    border-color: #4682b4;
    box-shadow: 0 0 20px rgba(70, 130, 180, 0.5);
    transform: translateY(-2px);
}

.register-button.pocketid {
    color: #8b4513;
    border-color: #8b4513;
    background: linear-gradient(135deg, #3d3d3d 0%, #2a2a2a 50%, #3d3d3d 100%);
    margin-top: 15px;
}

.register-button.pocketid:hover {
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    border-color: #8b4513;
    box-shadow: 0 0 20px rgba(139, 69, 19, 0.5);
    transform: translateY(-2px);
}

.flash-messages {
    list-style: none;
    margin-top: 25px;
    padding: 0;
}

.flash-messages li {
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    padding: 15px 25px;
    border: 1px solid #d4af37;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
    position: relative;
}

.flash-messages li::before {
    content: '⚡';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.login-footer {
    text-align: center;
    margin-top: 50px;
    color: #8b4513;
    font-size: 1rem;
    font-style: italic;
    text-shadow: 1px 1px 2px #000;
}

/* Decorative elements */
.ornament {
    position: absolute;
    color: #8b4513;
    font-size: 2rem;
    opacity: 0.2;
    pointer-events: none;
}

.ornament.top-left {
    top: 20px;
    left: 20px;
}

.ornament.top-right {
    top: 20px;
    right: 20px;
}

.ornament.bottom-left {
    bottom: 20px;
    left: 20px;
}

.ornament.bottom-right {
    bottom: 20px;
    right: 20px;
}

.ornament.top-left::before { content: '◢'; }
.ornament.top-right::before { content: '◣'; }
.ornament.bottom-left::before { content: '◥'; }
.ornament.bottom-right::before { content: '◤'; }

/* ======================
   BEFINTLIGA GAME STILAR
   (Behåller dina ursprungliga stilar)
   ====================== */

/* Allmänna komponentstilar */
.button-primary {
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    padding: 10px 20px;
    border: 2px solid #d4af37;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s ease;
    display: inline-block;
}

.button-primary:hover {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    color: #fff8dc;
    border-color: #fff8dc;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
}

.button-secondary {
    background: #444;
    color: #d4af37;
    border: 1px solid #8b4513;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.button-secondary:hover {
    background: #555;
    border-color: #d4af37;
    color: #fff8dc;
}


/* Den gamla sidhuvudsregeln på elementet header är borttagen.
   Varje header i spelet har numera en egen klass — .hud, .sheet-head,
   .village-head, .creation-head och .barter-head — och ingen av dem
   ville ha den här bakgrunden. Den letade sig ändå in, eftersom
   klasserna bara satte layout och inte bakgrund. Resultatet syntes
   tydligast i stridsrapporten: rubrikraden fick en egen mörk yta med
   räta hörn som stack ut utanför rutans rundade hörn. */

#header-logo {
    height: 50px;
    width: auto;
    vertical-align: middle;
}

#header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#logo-link {
    
}

#auth-status {
    font-size: 0.9em;
    white-space: nowrap;
}

#auth-status a {
    color: #cd853f;
    text-decoration: none;
    margin: 0 5px;
    font-weight: bold;
}
#auth-status a:hover {
    color: #d4af37;
    text-decoration: underline;
}

#auth-status a.button {
    background: #444;
    color: #d4af37;
    border: 1px solid #8b4513;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    margin-left: 10px;
}

#auth-status a.button:hover {
    background: #555;
    border-color: #d4af37;
    color: #fff8dc;
}

main {
    flex-grow: 1;
    width: 90%;
    max-width: 1200px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hidden {
    display: none !important;
}

/* Flash meddelanden */
.flashes {
    list-style: none;
    margin: 15px 0;
    padding: 0;
}

.flashes li {
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    padding: 15px 25px;
    border: 1px solid #d4af37;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
}

/* Karaktärsskapande formulär */
#character-creation {
    width: 100%;
    max-width: 500px;
    margin-top: 20px;
}

#character-form {
    text-align: center;
}

#character-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: center;
}

input[type="text"],
select {
    width: 80%;
    max-width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    border: 2px solid #8b4513;
    background-color: #1a1a1a;
    color: #d4af37;
    border-radius: 4px;
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
}

input[type="text"]:focus,
select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

#character-form select {
    width: 80%;
    max-width: 300px;
}

.stat-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.stat-container label {
    margin: 0 10px;
    width: 80px;
    text-align: right;
}

.stat-container button {
    background: #d4af37;
    color: #2d2d2d;
    border: 1px solid #8b4513;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stat-container button:hover {
    background: #fff8dc;
    transform: scale(1.1);
}

.stat-container span {
    display: inline-block;
    width: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
}

#points-remaining {
    margin-top: 15px;
    font-weight: bold;
    color: #d4af37;
    text-shadow: 1px 1px 2px #000;
}

/* Huvudspelskärm */
#game-screen {
    width: 100%;
    flex-grow: 1; /* Make it fill vertical space */
    position: relative; /* Context for floating panels */
    margin-top: 20px;
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-box {
    background: rgba(30, 30, 30, 0.9);
    border: 2px solid #8b4513;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    padding: 0; /* Padding now handled by panel-header/panel-content */
}

.info-box:not(.floating-panel) .panel-content {
    padding: 20px;
}

.info-box h2 { /* This is now unused, replaced by panel-title */
    display: none;
}

.stats-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    margin-top: 10px;
}

#player-stats p {
    margin: 0;
}


#player-stats span {
    font-weight: bold;
    color: #eee;
}

#inventory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#inventory-list li {
    background-color: #444;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Generic button style for dynamically created buttons */
#inventory-list button {
    background: #444;
    color: #d4af37;
    border: 1px solid #8b4513;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    font-family: 'Crimson Text', serif;
}

#inventory-list button:hover {
    background: #555;
    border-color: #d4af37;
    color: #fff8dc;
}

/* Spelområde */
#game-area {
    /* This container is now just a placeholder for the map */
}

#map-container.floating-panel {
    min-width: 0;
    min-height: 0;
}

#map-container {
    /* Now a floating panel, its styling is handled by .floating-panel */
}

#map-container .panel-content {
    padding: 0;
    position: relative; /* Allow positioning of children like item-panel */
    overflow: hidden; /* Canvas should fill this */
}

#map-container h2 {
    color: #d4af37;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

#hexmap {
    background-color: #567656;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* Profilvy (ersätter kartan) */
#profile-view {
    background-color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.profile-back-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s ease;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.profile-back-btn:hover {
    background-color: #45a049;
}

.profile-iframe {
    flex-grow: 1;
    border: none;
    background-color: #2a2a2a; /* Matchar profilens bakgrund */
    border-radius: 4px;
}

#action-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make buttons fill width */
    justify-content: center;
    gap: 10px;
    width: 100%;
}


.action-btn {
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    padding: 10px 20px;
    border: 2px solid #d4af37;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}
.action-btn:last-child {
    margin-bottom: 0;
}
.action-btn:hover {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    color: #fff8dc;
    border-color: #fff8dc;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
}

/* Loggar och chatt */

.log-box {
    background-color: #1a1a1a;
    border: 1px solid #8b4513;
    height: 150px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.9em;
}

.log-box p {
    margin: 5px 0;
    word-wrap: break-word;
}

#send-chat-btn {
    background: #d4af37;
    color: #2d2d2d;
    padding: 8px 15px;
    border: 1px solid #8b4513;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
}

#send-chat-btn:hover {
    background: #fff8dc;
}

footer {
    width: 100%;
    background: linear-gradient(135deg, #1e1e1e, #111);
    border-top: 3px solid #8b4513;
    text-align: center;
    padding: 15px;
    margin-top: auto; /* Push to bottom */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.7);
    font-size: 0.9em;
    color: #8b4513;
}

/* ======================
   RESPONSIV DESIGN
   ====================== */

/* Login responsive */
@media (max-width: 768px) {
    .login-container {
        max-width: 95%;
        padding: 15px;
    }
    
    .login-header h1 {
        font-size: 3rem;
    }
    
    .login-header h1::before,
    .login-header h1::after {
        display: none;
    }
    
    .login-box {
        padding: 30px 25px;
    }
    
    .login-button, .register-button {
        padding: 15px 25px;
        font-size: 1.1rem;
    }
    
    /* Game responsive */
    #game-screen {
        grid-template-columns: 1fr;
    }
    
    #hexmap {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    #chat-input {
        width: calc(100% - 70px);
    }

    header {
        padding: 20px 15px;
    }

    #header-top-row {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Mobile-specific adjustments for floating panels */
    .info-box.floating-panel {
        min-width: 200px;
    }
    
    /* Ensure map container takes full available space on mobile */
    #map-container.floating-panel {
        width: 95vw;
        height: 60vh;
    }
}

@media (max-width: 480px) {
    .login-header h1 {
        font-size: 2.5rem;
    }
    
    .login-box {
        padding: 25px 20px;
    }
    
    .login-box h2 {
        font-size: 1.6rem;
    }
    
    .login-box h2::before,
    .login-box h2::after {
        display: none;
    }
}
#context-menu {
    position: absolute;
    z-index: 1000;
    background: #2d2d2d;
    border: 2px solid #8b4513;
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    padding: 4px 0;
    list-style: none;
    min-width: 220px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    border-radius: 8px;
}

#context-menu li {
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

#context-menu li:hover {
    background: #3a2f1c; /* mörkare brun/guld */
    color: #fff8dc;
}

.submenu {
    position: relative;
}

.submenu ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #2d2d2d;
    border: 2px solid #8b4513;
    border-radius: 8px;
    padding: 4px 0;
    list-style: none;
    min-width: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    /* Med grupprubriker blir listan lång. Utan tak växer den utanför
       skärmen och de sista föremålen går inte att nå. */
    max-height: 60vh;
    overflow-y: auto;
}

.submenu:hover ul {
    display: block;
}

.submenu:hover > ul {
  display: block;
}

.submenu::after {
  content: '▶';
  float: right;
  margin-left: 5px;
}

/* Rubrik i en undermeny: skiljer föremålsslagen åt utan att själv gå
   att klicka på. Pilen från .submenu ärvs inte hit. */
.submenu-group {
    margin-top: 4px;
    padding: 4px 12px 2px;
    border-top: 1px solid #4a4133;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9a7f2a;
    cursor: default;
    pointer-events: none;
}

/* Första rubriken behöver ingen linje ovanför sig. */
.submenu ul .submenu-group:first-child {
    margin-top: 0;
    border-top: none;
}
#item-panel.item-panel {
    /* No longer a separate box, just a container */
    color: #d4af37;
    font-size: 1.08rem;
    font-family: 'Crimson Text', serif;
    width: 100%;
    text-align: left;
    margin-bottom: 15px; /* Space between item list and action buttons */
}
#item-panel ul {
    margin: 6px 0 0 22px;
    padding-left: 0;
    font-size: 1rem;
}

#action-extra-info.action-extra-info {
    background: #222;
    color: #d4af37;
    border-radius: 8px;
    padding: 10px 18px 10px 18px;
    font-size: 1.08rem;
    font-family: 'Crimson Text', serif;
    margin-top: 8px;
    box-shadow: 0 2px 8px #0008;
    width: 100%;
    max-width: 320px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
#action-extra-info ul {
    margin: 6px 0 0 22px;
    padding-left: 0;
    font-size: 1rem;
}

.bar-container {
    position: relative;
    background: #222;
    border-radius: 8px;
    width: 100%;
    max-width: 200px;
    height: 22px;
    margin: 8px 0;
    border: 1px solid #000;
    overflow: hidden;
}

.bar {
    height: 100%;
    border-radius: 8px 0 0 8px;
    width: 0%;
    transition: width 0.3s cubic-bezier(.44,1.64,.53,.77), background 0.2s;
    box-shadow: 0 2px 10px rgba(20,10,0,0.07) inset;
    filter: brightness(0.95) contrast(0.92) saturate(0.9);
}

/* Specifika färger/effekter */
.hp-bar {
    /* HP-färgen/gradient sätts via JS */
}

.ap-bar {
    background: linear-gradient(180deg, #2d4ca0 0%, #497fc1 60%, #2e4e80 100%);
    box-shadow: 0 2px 8px rgba(20,20,50,0.12) inset;
    filter: brightness(0.93) contrast(0.93) saturate(0.92);
}

.bar-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    color: #f8f5e4;
    font-weight: bold;
    text-shadow: 0 1px 4px #111;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 15px;
    letter-spacing: 0.5px;
}


#latest-log-banner p {
    margin: 0;
}

#banner-panel .panel-content.log-highlight {
    background-color: #4a4a4a;
}

#banner-panel .panel-content {
    padding: 5px 15px;
    text-align: center;
    font-style: italic;
    color: #e0cda1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease;
}

.main-menu-btn {
    position: relative;
    background-color: #444;
    border: 1px solid #555;
    border-radius: 8px;
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-menu-btn:hover {
    background-color: #555;
}

.notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* ======================
   FLOATING PANELS
   ====================== */

.info-box.floating-panel {
    padding: 0;
    position: absolute;
    z-index: 100;
    border: 2px solid #8b4513;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    min-width: 300px;
    min-height: 42px; /* Header height */
    resize: both;
    overflow: hidden; /* Important for resize */
    display: flex;
    flex-direction: column;
}

.floating-panel.minimized .panel-content,
.floating-panel.minimized .chat-input-container {
    display: none;
}
.floating-panel.minimized {
    resize: none; /* Can't resize when minimized */
    height: auto !important; /* Override JS-set height */
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #8b4513, #654321);
    color: #d4af37;
    cursor: grab;
    user-select: none;
    border-bottom: 2px solid #8b4513;
    flex-shrink: 0;
}

.panel-header:active {
    cursor: grabbing;
}

.panel-header h2.panel-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: inherit;
    border: none;
    padding: 0;
    text-shadow: 1px 1px 2px #000;
    display: block;
}


.panel-controls {
    display: flex;
    gap: 5px;
}

.panel-controls button {
    background: #d4af37;
    color: #2d2d2d;
    border: 1px solid #8b4513;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-controls button:hover {
    background: #fff8dc;
}

.panel-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}


.floating-panel .log-box {
    height: 100%;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

.floating-panel #chat-input {
    width: 100%;
    margin-right: 0;
}

.panel-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    z-index: 10; /* Ensures it is on top of panel content */
}

.panel-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent rgba(212, 175, 55, 0.5) transparent;
    transition: border-color 0.2s ease;
}

.panel-resize-handle:hover::after {
    border-color: transparent transparent rgba(255, 248, 220, 0.8) transparent;
}

.panel-content-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    padding: 15px; /* Add padding to match other panel content */
}



/* ======================
   BERÄTTELSESYSTEM
   Uppdrag, utmärkelser, bestiarium, regioner och NPC-dialoger.
   ====================== */

/* --- Gemensamt --- */
.story-scroll {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}

.story-heading {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a7f2a;
    margin: 12px 0 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 3px;
}

.story-subhead {
    font-size: 0.78rem;
    color: #9c9080;
    margin-bottom: 8px;
}

.story-empty {
    font-size: 0.85rem;
    color: #9c9080;
    font-style: italic;
    padding: 12px 4px;
    line-height: 1.5;
}

/* --- Notiser --- */
.story-notices {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.story-notice {
    pointer-events: auto;
    background: linear-gradient(180deg, #241f18 0%, #1a1611 100%);
    border: 1px solid #3d3527;
    border-left: 3px solid #d4af37;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    animation: story-notice-in 0.35s ease-out;
}

.story-notice.is-leaving {
    animation: story-notice-out 0.4s ease-in forwards;
}

@keyframes story-notice-in {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes story-notice-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(28px); }
}

.story-notice-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.story-notice-icon { font-size: 1rem; }

.story-notice-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #d4af37;
    flex: 1;
}

.story-notice-close {
    background: none;
    border: none;
    color: #9c9080;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.story-notice-close:hover { color: #e8e0cc; }

.story-notice-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #d8d0bc;
    margin: 0;
}

.story-notice.notice-achievement { border-left-color: #d4af37; }
.story-notice.notice-levelup     { border-left-color: #6fbf5e; }
.story-notice.notice-region      { border-left-color: #3b7ea1; }
.story-notice.notice-warning     { border-left-color: #b04a3a; }
.story-notice.notice-quest       { border-left-color: #a0791f; }
.story-notice.notice-bestiary    { border-left-color: #8a6bb8; }
.story-notice.notice-combat      { border-left-color: #c07a3a; }

/* --- Uppdrag --- */
.quest-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #3d3527;
    border-radius: 5px;
    padding: 9px 10px;
    margin-bottom: 8px;
}

.quest-card.is-ready { border-color: #9a7f2a; }
.quest-card.is-available { opacity: 0.82; }

.quest-title {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: #d4af37;
    margin-bottom: 3px;
}

.quest-summary {
    font-size: 0.82rem;
    color: #b8b0a0;
    line-height: 1.45;
    margin: 0 0 6px;
}

.quest-hint {
    font-size: 0.75rem;
    color: #9c9080;
    font-style: italic;
    margin: 0 0 6px;
}

.quest-objectives { list-style: none; padding: 0; margin: 0 0 6px; }

.quest-objective {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    font-size: 0.8rem;
    color: #c8c0ae;
    margin-bottom: 5px;
}

.quest-objective.is-done { color: #7fae74; }

.quest-objective-count {
    font-variant-numeric: tabular-nums;
    color: #9c9080;
}

.quest-bar {
    grid-column: 1 / -1;
    display: block;
    height: 4px;
    background: #12100d;
    border: 1px solid #3d3527;
    border-radius: 999px;
    overflow: hidden;
}

.quest-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #9a7f2a, #d4af37);
}

.quest-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    cursor: pointer;
}

.quest-btn:hover { filter: brightness(1.3); }

.quest-btn-ghost {
    border-color: #3d3527;
    background: transparent;
    color: #9c9080;
}

/* --- Utmärkelser --- */
.achievement-card {
    display: flex;
    gap: 9px;
    padding: 8px;
    border: 1px solid #3d3527;
    border-radius: 5px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0.65;
}

.achievement-card.is-unlocked {
    opacity: 1;
    border-color: #9a7f2a;
    background: rgba(212, 175, 55, 0.07);
}

.achievement-icon { font-size: 1.3rem; line-height: 1.2; }
.achievement-body { flex: 1; min-width: 0; }

.achievement-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #d4af37;
}

.achievement-desc {
    font-size: 0.78rem;
    color: #b0a898;
    margin: 2px 0 4px;
    line-height: 1.4;
}

.achievement-done {
    font-size: 0.72rem;
    color: #7fae74;
}

.achievement-count {
    font-size: 0.7rem;
    color: #9c9080;
    display: block;
    margin-top: 2px;
}

/* --- Titlar --- */
.title-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.title-chip {
    font-size: 0.74rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #3d3527;
    background: transparent;
    color: #9c9080;
    cursor: pointer;
}

.title-chip:hover { border-color: #9a7f2a; color: #d4af37; }

.title-chip.is-active {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
}

/* --- Bestiarium --- */
.bestiary-card {
    border: 1px solid #3d3527;
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.bestiary-name {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    color: #d4af37;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.bestiary-knowledge { font-size: 0.72rem; color: #9a7f2a; letter-spacing: 1px; }

.bestiary-rows { display: flex; flex-direction: column; gap: 2px; }

.bestiary-rows span {
    font-size: 0.76rem;
    color: #b0a898;
}

.bestiary-locked { color: #7a7062 !important; font-style: italic; }

/* --- Regioner --- */
.region-current {
    border: 1px solid #9a7f2a;
    border-radius: 5px;
    padding: 9px 10px;
    margin-bottom: 10px;
    background: rgba(212, 175, 55, 0.07);
}

.region-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af37;
}

.region-desc {
    font-size: 0.82rem;
    color: #b8b0a0;
    margin: 3px 0;
    line-height: 1.45;
}

.region-meta { font-size: 0.74rem; color: #9c9080; margin: 0; }

.region-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #c0b8a6;
    padding: 3px 2px;
    border-bottom: 1px solid rgba(61, 53, 39, 0.5);
}

.region-visits { color: #9c9080; font-variant-numeric: tabular-nums; }

/* --- NPC:er --- */
.npc-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 3000;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90vw;
}

.npc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 5px;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #2e2719, #1c1811);
    color: #d4af37;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.npc-btn:hover { filter: brightness(1.3); }

.npc-btn-title {
    font-family: 'Crimson Text', serif;
    font-size: 0.68rem;
    color: #9c9080;
}

.npc-marker {
    color: #ffd84d;
    font-weight: bold;
    margin-right: 4px;
}

/* --- Dialogruta --- */
.npc-dialogue-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 20px;
}

.npc-dialogue-overlay.hidden { display: none; }

.npc-dialogue-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #221e17 0%, #171410 100%);
    border: 1px solid #9a7f2a;
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.75);
}

.npc-dialogue-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #9c9080;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.npc-dialogue-close:hover { color: #d4af37; }

.npc-dialogue-header { margin-bottom: 12px; }

.npc-dialogue-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: #d4af37;
    margin: 0;
}

.npc-dialogue-header p {
    font-size: 0.82rem;
    color: #9c9080;
    font-style: italic;
    margin: 2px 0 0;
}

.npc-dialogue-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #ddd5c2;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #3d3527;
}

.npc-message {
    font-size: 0.85rem;
    color: #b8d0a8;
    background: rgba(111, 191, 94, 0.08);
    border-left: 2px solid #6fbf5e;
    padding: 6px 10px;
    margin: 0 0 8px;
    border-radius: 3px;
    line-height: 1.5;
}

.npc-dialogue-options { display: flex; flex-direction: column; gap: 7px; }

.npc-option {
    text-align: left;
    font-family: 'Crimson Text', serif;
    font-size: 0.92rem;
    padding: 9px 13px;
    border-radius: 5px;
    border: 1px solid #3d3527;
    background: rgba(0, 0, 0, 0.3);
    color: #d8d0bc;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.npc-option:hover {
    border-color: #9a7f2a;
    background: rgba(212, 175, 55, 0.09);
    color: #d4af37;
}

.npc-option-ghost { color: #9c9080; font-style: italic; }

@media (max-width: 640px) {
    .story-notices { width: calc(100vw - 24px); right: 12px; top: 12px; }
    .npc-bar { bottom: 8px; }
    .npc-dialogue-box { padding: 18px 16px; }
}

/* ======================
   EP-MÄTARE
   ====================== */
.xp-bar {
    background: linear-gradient(180deg, #7a5fd6 0%, #5a44a8 60%, #3f2f7a 100%);
}

/* ======================
   FÖREMÅLSSTATS (tooltip)
   ====================== */
.inventory-item-name { cursor: help; }

.item-tooltip {
    position: fixed;
    z-index: 6000;
    width: 240px;
    pointer-events: none;
    background: linear-gradient(180deg, #241f18 0%, #171410 100%);
    border: 1px solid #9a7f2a;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
}

.item-tooltip.hidden { display: none; }

.item-tip-name {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: #d4af37;
    margin-bottom: 2px;
}

.item-tip-tags {
    font-size: 0.72rem;
    color: #9c9080;
    margin-bottom: 6px;
}

.item-tip-desc {
    font-size: 0.78rem;
    color: #b0a898;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 6px;
}

.item-tip-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #3d3527;
    padding-top: 6px;
}

.item-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.79rem;
}

.item-stat span:first-child { color: #9c9080; }
.item-stat span:last-child  { color: #ddd5c2; font-variant-numeric: tabular-nums; }

/* ======================
   BUTIK
   ====================== */
.shop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 20px;
}

.shop-overlay.hidden { display: none; }

.shop-box {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 84vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #221e17 0%, #171410 100%);
    border: 1px solid #9a7f2a;
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.75);
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3d3527;
}

.shop-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #d4af37;
    margin: 0;
}

.shop-meta { display: flex; gap: 14px; font-size: 0.82rem; color: #9c9080; }

.shop-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.shop-list { display: flex; flex-direction: column; gap: 4px; }

.shop-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #3d3527;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    cursor: help;
}

.shop-row:hover { border-color: #9a7f2a; }

.shop-item-name { font-size: 0.86rem; color: #ddd5c2; }
.shop-stock { font-size: 0.7rem; color: #9c9080; }

.shop-price {
    font-size: 0.82rem;
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}

.shop-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    cursor: pointer;
}

.shop-btn:hover:not(:disabled) { filter: brightness(1.3); }

.shop-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #3d3527;
    color: #9c9080;
}

.shop-btn-sell { border-color: #3f6b3c; color: #96c491; }

@media (max-width: 720px) {
    .shop-columns { grid-template-columns: 1fr; }
    .shop-box { padding: 18px 16px; }
}

/* ==========================================================================
   SPELSKALET
   --------------------------------------------------------------------------
   Ersätter de flytande fönstren. Uppbyggnad:

     .shell            rutnät: HUD överst, resten under
       .hud            tunn rad som alltid syns
       .shell-body     rutnät: docka | kartyta | ark
         .dock         knappar, en per vy
         .stage        kartan, fyller all yta som blir över
         .sheet        en vy åt gången

   Smal skärm: dockan hamnar längst ner, arket glider upp underifrån.
   Bred skärm: dockan blir en lodrät list, arket en kolumn till höger
   som kartan lämnar plats åt i stället för att skymmas av.
   ========================================================================== */

:root {
    --hud-height: 3.65rem;
    --dock-size: 4.15rem;
    --sheet-width: 23rem;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
}

/* body i style.css är flex-centrerad för inloggningssidan. Spelet
   behöver i stället fylla hela ytan, därav den egna klassen. */
/* Sidans canvas målas av html-elementet. Sätts bakgrunden bara på
   body är den beroende av propagering, vilket slutar gälla så fort
   body hamnar utanför flödet — då lyser webbläsarens vita default
   igenom i kanterna. */
html.game-root { background: #14120f; }

body.game-body {
    /* Basregeln sätter min-height: 100vh, och vh räknar in mobilens
       adressfält — därför hamnade dockan nedanför skärmkanten. svh är
       den minsta möjliga vyhöjden och ändras inte när adressfältet
       glider in och ut, så skalet ryms alltid. */
    display: block;
    align-items: stretch;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    height: 100svh;
    min-height: 0;
    max-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
}

body.game-body #game-screen {
    height: 100%;
    /* Basregeln ger #game-screen margin-top: 20px från den gamla
       layouten med flytande fönster. I skalet sköts all placering av
       rutnätet, så marginalen sköt bara ner allt 20px och lät
       bakgrunden lysa igenom överst. */
    margin: 0;
}

body.game-body #game-container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
    display: block;
}

.shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #14120f;
}

/* ---------------- HUD ---------------- */

.hud {
    position: relative;
    /* HUD:en är beständig ram och måste ligga överst av skalets lager.
       Den skapar en egen stapelkontext, så kontomenyns z-index: 60
       gäller bara inuti HUD:en — låg HUD:en på samma nivå som
       stadsvyn målades hela menyn över, eftersom stadsvyn kommer
       senare i dokumentet. Håll det här värdet högst av .hud,
       .village, .sheet och .dock. */
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 0.9rem;
    height: calc(var(--hud-height) + var(--safe-t));
    padding: var(--safe-t) calc(0.75rem + var(--safe-r)) 0 calc(0.75rem + var(--safe-l));
    background: linear-gradient(180deg, #221e17 0%, #1a1610 100%);
    border-bottom: 1px solid #3d3527;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hud-identity { min-width: 0; }

/* Namnet är numera knappen till karaktärsbladet. Det ska se ut som
   text, inte som en knapp — men bete sig som en. */
.hud-name {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #d4af37;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hud-name:hover { color: #f0d98a; }
.hud-name:hover .hud-title { color: #b9ad95; }
.hud-name:focus-visible { outline: 1px solid #9a7f2a; outline-offset: 2px; }

/* Öppet blad: samma markering som dockans aktiva knapp ger. */
.hud-name.is-active { color: #f0d98a; }

/* Olästprick på namnet, som på dockans knappar. */
.hud-name .notification-dot {
    position: static;
    align-self: center;
    flex-shrink: 0;
}

.hud-title {
    font-family: 'Crimson Text', serif;
    font-size: 0.72rem;
    color: #9c9080;
    font-style: italic;
}

.hud-sub {
    font-size: 0.72rem;
    color: #9c9080;
    white-space: nowrap;
}

.hud-dot { opacity: 0.5; margin: 0 0.15rem; }

/* Staplarna: HP, AP och EP bredvid varandra. */
.hud-vitals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 0;
}

.vital { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }

.vital-label {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: #9a7f2a;
    width: 1.5rem;
    flex-shrink: 0;
}

/* Överskriver de generösare måtten från den gamla panelen. */
.hud .bar-container {
    position: relative;
    flex: 1;
    height: 0.85rem;
    min-width: 0;
    margin: 0;
    border-radius: 999px;
    background: #12100d;
    border: 1px solid #3d3527;
    overflow: hidden;
}

.hud .bar { height: 100%; border-radius: 999px; transition: width .3s ease; }

.hud .bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    color: #f0e8d4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.hud-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.8rem;
    color: #c8c0ae;
    white-space: nowrap;
}

.hud-gold { color: #d4af37; font-variant-numeric: tabular-nums; }
.hud-coin { margin-right: 0.2rem; opacity: 0.8; }
.hud-pos { font-variant-numeric: tabular-nums; color: #9c9080; font-size: 0.75rem; }

.hud-menu-btn {
    background: none;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    color: #d4af37;
    font-size: 1rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.hud-menu-btn:hover { border-color: #9a7f2a; background: rgba(212,175,55,0.1); }

.account-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0.75rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.3rem;
    background: #1e1b16;
    border: 1px solid #9a7f2a;
    border-radius: 0.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.account-menu.hidden { display: none; }

.account-menu a {
    padding: 0.45rem 0.6rem;
    border-radius: 0.3rem;
    color: #d8d0bc;
    font-size: 0.86rem;
    text-decoration: none;
}

.account-menu a:hover { background: rgba(212,175,55,0.12); color: #d4af37; }

/* ---------------- Kropp: docka, karta, ark ---------------- */

.shell-body {
    position: relative;
    display: grid;
    grid-template-columns: var(--dock-size) minmax(0, 1fr) 0;
    min-height: 0;
    transition: grid-template-columns .28s ease;
}

/* När arket är öppet på bred skärm krymper kartan i stället för att
   döljas — man ska kunna läsa uppdraget och se kartan samtidigt. */
.shell-body.sheet-open { grid-template-columns: var(--dock-size) minmax(0, 1fr) var(--sheet-width); }

/* ---------------- Dockan ---------------- */

.dock {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.35rem calc(0.5rem + var(--safe-b));
    padding-left: calc(0.35rem + var(--safe-l));
    background: linear-gradient(180deg, #1c1913 0%, #171410 100%);
    border-right: 1px solid #3d3527;
    overflow-y: auto;
    z-index: 30;
}

.dock-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    padding: 0.45rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: transparent;
    color: #9c9080;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.dock-btn:hover { background: rgba(212,175,55,0.07); color: #d8d0bc; }

.dock-btn.is-active {
    background: rgba(212,175,55,0.14);
    border-color: #9a7f2a;
    color: #d4af37;
}

.dock-icon { font-size: 1.18rem; line-height: 1.1; }

.dock-label {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.15;
}

.dock-btn .notification-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
}

.dock-btn .notification-dot.hidden { display: none; }

/* ---------------- Kartytan ---------------- */

.stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, #1d1a15 0%, #100e0b 100%);
}

.stage #hexmap {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Överlägget släpper igenom klick utom där det finns knappar. */
.stage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.6rem;
    pointer-events: none;
}

.toast-line {
    /* Notisen måste synas även när staden ligger över kartan.
       position: fixed lyfter den ur kartans lager helt, så att inget
       som ritas inuti .stage kan täcka den — ett arenaresultat gick
       annars spårlöst förbi den som stod innanför murarna.
       z-index 45: ovanför staden (40), under HUD:en (50) så att
       kontomenyn fortfarande går att klicka på. */
    position: fixed;
    top: calc(var(--hud-height) + var(--safe-t) + 0.6rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 45;
    max-width: min(90%, 34rem);
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(20, 18, 15, 0.82);
    border: 1px solid #3d3527;
    color: #d8d0bc;
    font-size: 0.82rem;
    text-align: center;
    backdrop-filter: blur(3px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

/* Behåller translateX(-50%): utan den hoppar raden åt höger när den
   tonas in, eftersom transform skriver över hela egenskapen. */
.toast-line.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------------- Kontextraden ---------------- */

















/* NPC-raden ligger nu inuti kontextraden i stället för att sväva fritt. */


/* ---------------- Arket ---------------- */

.sheet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, #211d17 0%, #171410 100%);
    border-left: 1px solid #3d3527;
    z-index: 35;
    overflow: hidden;
}

.sheet.hidden { display: none; }

.sheet-grip { display: none; }

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #3d3527;
    flex-shrink: 0;
}

.sheet-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af37;
    margin: 0;
}

.sheet-close {
    background: none;
    border: none;
    color: #9c9080;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
}

.sheet-close:hover { color: #d4af37; }

.sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem 0.9rem calc(0.85rem + var(--safe-b));
    -webkit-overflow-scrolling: touch;
}

.sheet-view[hidden] { display: none; }

/* --- Ryggsäcken --- */

#inventory-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }

#inventory-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.3rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.85rem;
}

#inventory-list button {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    padding: 0.22rem 0.55rem;
    border-radius: 0.3rem;
    border: 1px solid #3d3527;
    background: linear-gradient(180deg, #2f2819, #221d14);
    color: #c8c0ae;
    cursor: pointer;
}

#inventory-list button:hover { border-color: #9a7f2a; color: #d4af37; }

.equip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.3rem;
}

.equip-slot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #3d3527;
    border-radius: 0.3rem;
    background: rgba(0, 0, 0, 0.18);
    font-size: 0.79rem;
}

.equip-slot span:first-child { color: #9c9080; }
.equip-slot span:last-child { color: #d8d0bc; text-align: right; }

/* --- Loggvyn --- */

.sheet-view-log { display: flex; flex-direction: column; height: 100%; }

.subtabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.subtab {
    position: relative;
    flex: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: transparent;
    color: #9c9080;
    cursor: pointer;
}

.subtab.is-active {
    border-color: #9a7f2a;
    background: rgba(212,175,55,0.12);
    color: #d4af37;
}

.subtab .notification-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.35rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #d4af37;
}

.subtab .notification-dot.hidden { display: none; }

.log-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.log-pane.hidden { display: none; }

.sheet .log-box {
    flex: 1;
    min-height: 8rem;
    max-height: none;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Världschatten är numera byggd som klanchatten: .chat-shell fyller
   loggrutans höjd, samtalet rullar i .letter-messages och .letter-reply
   ligger kvar i nederkanten. Skrivfältet ärver därmed .letter-input och
   behöver ingen egen uppsättning regler längre. */

.sheet #chat-input {
    width: 100%;
    resize: none;
}

.sheet #send-chat-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.35rem;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    cursor: pointer;
}

/* ==========================================================================
   SMAL SKÄRM
   Dockan flyttar ner, arket blir en låda som glider upp underifrån.
   ========================================================================== */

@media (max-width: 900px) {
    :root { --hud-height: 3.35rem; }

    .dock {
        grid-row: 2;
        flex-direction: row;
        justify-content: space-around;
        gap: 0.15rem;
        border-right: none;
        border-top: 1px solid #3d3527;
        padding: 0.3rem 0.25rem calc(0.3rem + var(--safe-b));
    }

    .sheet-grip {
        display: block;
        width: 2.4rem;
        height: 0.25rem;
        margin: 0.45rem auto 0;
        border-radius: 999px;
        background: #4a4133;
        flex-shrink: 0;
    }

    .sheet-head { padding: 0.5rem 0.9rem 0.6rem; }

    .hud {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 0.3rem 0.6rem;
        height: auto;
        padding-bottom: 0.4rem;
    }

    .hud-identity { grid-column: 1; grid-row: 1; }
    .hud-meta { grid-column: 2; grid-row: 1; }
    .hud-vitals { grid-column: 1 / -1; grid-row: 2; gap: 0.35rem; }
    .vital-label { width: 1.3rem; font-size: 0.58rem; }
    .hud .bar-container { height: 0.75rem; }

    
    .toast-line { font-size: 0.78rem; }
}

/* Riktigt smala telefoner: dölj etiketterna, ikonerna räcker. */
@media (max-width: 380px) {
    .dock-label { display: none; }
    .dock-btn { padding: 0.5rem 0.15rem; }
    .hud-pos { display: none; }
}

/* Lågt liggande fönster (mobil i liggande läge): ge kartan mer höjd. */
/* Låga skärmar hanteras längre ned, där arket ligger i rutnätet
   i stället för att sväva över kartan. */

/* ==========================================================================
   ZOOMKNAPPAR, MÖTESRUTA OCH PROFILVY
   ========================================================================== */

/* Raden överst på kartan: notistext i mitten, zoom till höger. */
.stage-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Notisraden är numera fixerad och ligger inte kvar här, så
   zoomknapparna får hela raden och ska stå till höger. */
.stage-top { justify-content: flex-end; }

.map-zoom {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.map-zoom button {
    width: 2rem;
    height: 2rem;
    border-radius: 0.35rem;
    border: 1px solid #3d3527;
    background: rgba(20, 18, 15, 0.82);
    color: #d4af37;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(3px);
}

.map-zoom button:hover { border-color: #9a7f2a; background: rgba(42,36,24,0.9); }

/* --- Mötesrutan --- */






















/* --- Profilvyn --- */

.pf-head { margin-bottom: 0.6rem; }

/* Namnet och klanen står bredvid varandra: klanen hör till vem man är,
   inte till en egen avdelning längre ner. Vapnet räcker som förklaring
   — en rad som sa "Öppna klanen" var en bruksanvisning, inte innehåll. */
.pf-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pf-headline-text { min-width: 0; }

.pf-clanless {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #9c9080;
    font-style: italic;
}

/* Brevknappen behöver luft. Den låg tätt intill hälsorutorna, och de
   två läste ihop till ett enda block. */
.pf-action-row {
    margin: 1.1rem 0 1.4rem;
}

.pf-action-row .sheet-action { margin-top: 0; }

/* En strid vars rapport inte är ens egen: raden syns, men den går inte
   att öppna och ska då inte se ut som en knapp. */
.pf-duel.is-sealed {
    cursor: default;
    opacity: 0.78;
}

.pf-name {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: #d4af37;
}

.pf-sub { font-size: 0.8rem; color: #9c9080; }

/* Klanraden på karaktärsbladet. Den är en knapp, men ska läsas som en
   rad: vapnet, namnet och en dämpad uppmaning. */
.pf-clan {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, #201b14 0%, #1a160f 100%);
    border: 1px solid #3d3527;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.pf-clan:hover { border-color: #6b5a2e; }

.pf-clan-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pf-clan-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #d4af37;
}

.pf-clan-sub { font-size: 0.75rem; color: #9c9080; }

.pf-bio {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #c0b8a6;
    font-style: italic;
    border-left: 2px solid #3d3527;
    padding-left: 0.7rem;
    margin: 0 0 0.8rem;
}

.pf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.pf-stat {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.6rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.2);
}

.pf-stat-label {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9c9080;
}

.pf-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}

.pf-stat-sub { font-size: 0.68rem; color: #7a7062; }

.pf-list { display: flex; flex-direction: column; gap: 0.15rem; }

.pf-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.32rem 0.5rem;
    border-bottom: 1px solid rgba(61, 53, 39, 0.6);
    font-size: 0.82rem;
}

.pf-row span:first-child { color: #9c9080; }
.pf-row span:last-child { color: #ddd5c2; text-align: right; }

/* ==========================================================================
   JUSTERINGAR: textstorlek, mötesrutans läge, kontomenyns knapp
   ========================================================================== */

/* All text 20% större. Skalet är byggt i rem, så rotens teckenstorlek
   räcker — och klassen sitter bara på spelsidan, så inloggning och
   adminpanel påverkas inte. */
html.game-root { font-size: 120%; }

/* Mötesrutan förankras i kartans nederkant i stället för att hamna
   där flex-utrymmet råkar ta slut. Då hamnar den lika lågt på mobil
   som på dator, oavsett om notisraden syns eller inte. */
.stage-overlay { display: block; padding: 0; }

.stage-top {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}







/* Kompaktare kort: åtgärderna ska synas utan att man scrollar. */







@media (max-width: 900px) {
    /* Något högre upp än dockan så att tummen inte skymmer kortet. */
    
    
}

/* "Min profil" är en knapp nu, men ska se ut som de andra raderna. */
.account-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0.3rem;
    background: none;
    color: #d8d0bc;
    font-family: 'Crimson Text', serif;
    font-size: 0.86rem;
    cursor: pointer;
}

.account-menu button:hover { background: rgba(212,175,55,0.12); color: #d4af37; }

/* ==========================================================================
   JUSTERINGAR: dockans etiketter, större vitalvärden
   ========================================================================== */

/* Etiketterna gick utanför den smala listen. Nu får de radbrytas och
   avstavas i stället för att spilla ut över kanten. */
.dock-btn {
    min-width: 0;
    overflow: hidden;
}

.dock-label {
    display: block;
    width: 100%;
    font-size: 0.5rem;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Bred skärm: listen behöver vara bred nog för de längsta orden. */
@media (min-width: 901px) {
    :root { --dock-size: 5.1rem; }
    .dock-btn { padding: 0.5rem 0.3rem; }
    .dock-label { font-size: 0.54rem; }
}

/* HP, AP och EP: större siffror och tjockare staplar. De är det man
   tittar mest på, så de tål att ta plats. */
.hud-vitals { gap: 0.65rem; }

.vital-label {
    font-size: 0.78rem;
    width: 2rem;
    color: #b8963a;
}

.hud .bar-container { height: 1.25rem; }

.hud .bar-text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {
    .vital-label { font-size: 0.72rem; width: 1.75rem; }
    .hud .bar-container { height: 1.15rem; }
    .hud .bar-text { font-size: 0.74rem; }
}

/* ==========================================================================
   OMARBETNINGAR: docka, mötesruta, utrustning, loggtext
   ========================================================================== */

/* --- Dockans etiketter ---
   overflow-wrap: anywhere bröt mitt i orden ("Utforsknin/g"). Bättre
   att aldrig bryta och i stället låta listen vara bred nog. */
.dock-label {
    white-space: nowrap;
    overflow-wrap: normal;
    hyphens: none;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.46rem;
    letter-spacing: 0;
}

@media (min-width: 901px) {
    :root { --dock-size: 6rem; }
    .dock-label { font-size: 0.5rem; }
}

/* --- Mötesrutan ---
   Samma formspråk som arket: rubrikrad, tunn avdelare, innehåll.
   Den ligger också högre upp än förut, med ordentlig luft ner till
   dockan i stället för att klistras mot kanten. */








/* Raderna blir plattare — kortet har redan en ram. */








@media (max-width: 900px) {
    
    
}

/* --- Utrustade platser --- */
.equip-slot { align-items: center; gap: 0.4rem; }

.equip-slot span:last-child { display: flex; align-items: center; gap: 0.4rem; }

.equip-name { cursor: help; }
.equip-slot .is-equipped .equip-name { color: #d4af37; }

.equip-off {
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid #3d3527;
    background: transparent;
    color: #9c9080;
    cursor: pointer;
}

.equip-off:hover { border-color: #b04a3a; color: #e5a394; }

/* --- Logg och chatt ---
   Raderna såg ut som lös brödtext. Nu får de samma radavstånd,
   tunna avdelare och en dämpad tidsstämpel som resten av panelerna. */
/* Klassificerade stridsrader undantas: de bär sin egen färg och sin
   egen form, och ska se likadana ut här som i arenans stridsrapport.
   Utan :not() vann den här regeln på specificitet och färgläggningen
   syntes bara i rapporten. */
.sheet .log-box p:not(.cl-line) {
    margin: 0;
    padding: 0.3rem 0.1rem;
    border-bottom: 1px solid rgba(61, 53, 39, 0.45);
    font-size: 0.82rem;
    line-height: 1.55;
    color: #cfc7b5;
}

.sheet .log-box p:not(.cl-line):last-child { border-bottom: none; }

/* Chattens brödtext. Gäller numera bubblornas .letter-msg-body. */
.sheet #chat-log p { color: #d8d0bc; }

.sheet .log-box { font-family: 'Crimson Text', serif; }

/* En tom logg ska säga att den är tom, inte vara ett hål. Chattloggen
   bytte från .log-box till .letter-messages när den fick klanchattens
   form, så den måste stå med här — annars möts man av tomrum. */
.sheet .log-box:empty::before,
.sheet #chat-log:empty::before {
    content: 'Inget att visa ännu.';
    display: block;
    padding: 0.6rem 0.1rem;
    color: #7a7062;
    font-style: italic;
    font-size: 0.82rem;
}

/* Loggraderna: tidsstämpel dämpad, avsändare i guld, texten läsbar. */
.sheet .log-box .log-line {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0 0.45rem;
    align-items: baseline;
}

.log-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    color: #6f6658;
    white-space: nowrap;
}

.log-who {
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    color: #b8963a;
    white-space: nowrap;
}

.log-who::after { content: ':'; color: #6f6658; }

.log-text { min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   MÖTESRUTAN
   --------------------------------------------------------------------------
   Byggd i ett stycke i stället för lager av lappar. Ett mått styr allt:
   --enc-pad. Rubrik, innehåll och åtgärder använder samma sidopadding
   och samma avdelare, så kortet får jämna avstånd hela vägen ner.

       ┌───────────────────────┐
       │ DU MÖTER              │  rubrik
       ├───────────────────────┤
       │ 👾 Varg      nivå 3   │  rad
       │    ▓▓▓▓░░░░  12/30    │  hälsa under namnet
       ├───────────────────────┤
       │ [Attackera] [Smyga]   │  åtgärder
       └───────────────────────┘
   ========================================================================== */







/* --- Rubrik --- */


/* --- Rader --- */













/* Hälsostapeln ligger under namnet, indragen i linje med det. */




/* Färgprickar i stället för kantlinjer: mindre visuellt brus. */




/* --- Åtgärder --- */








/* Föremål och NPC-knappar följer samma padding som allt annat. */




@media (max-width: 900px) {
    
    
}

/* ==========================================================================
   BREV, BIOGRAFI OCH KLICKBARA NAMN
   ========================================================================== */

/* Notisraden är klickbar när den leder någonstans. */
.toast-line { pointer-events: auto; }
.toast-line.is-clickable { cursor: pointer; }
.toast-line.is-clickable:hover { border-color: #9a7f2a; color: #e8e0cc; }

/* Avsändarnamnet i loggen är en knapp till profilen. */
button.log-who {
    padding: 0;
    border: none;
    background: none;
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    color: #b8963a;
    cursor: pointer;
    white-space: nowrap;
}

button.log-who:hover { color: #d4af37; text-decoration: underline; }

/* Genomgående knappstil i arket. */
.sheet-action {
    display: block;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.35rem;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    cursor: pointer;
}

.sheet-action:hover { filter: brightness(1.25); }
.sheet-action.hidden { display: none; }

/* --- Biografi --- */
.pf-bio-edit { margin-bottom: 0.8rem; }

.pf-bio-input,
.letter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: #12100d;
    color: #e8e0cc;
    font-family: 'Crimson Text', serif;
    font-size: 0.86rem;
    line-height: 1.55;
    resize: vertical;
}

.pf-bio-input:focus,
.letter-input:focus {
    outline: none;
    border-color: #9a7f2a;
}

.letter-input + .story-heading { margin-top: 0.7rem; }

/* --- Brevlistan --- */
.letter-row {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.4rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    cursor: pointer;
}

.letter-row:hover { border-color: #9a7f2a; }
.letter-row.is-unread { border-left: 3px solid #d4af37; }

.letter-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.letter-who {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #d4af37;
}

.letter-badge {
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #d4af37;
    color: #1a1610;
    font-weight: 600;
}

.letter-subject { font-size: 0.8rem; color: #c8c0ae; }
.letter-preview {
    font-size: 0.78rem;
    color: #9c9080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.letter-time { font-size: 0.68rem; color: #6f6658; }

/* --- Öppnad växling --- */
.letter-head {
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid #3d3527;
}

.letter-back {
    padding: 0;
    border: none;
    background: none;
    color: #9c9080;
    font-size: 0.78rem;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.letter-back:hover { color: #d4af37; }

.letter-head-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af37;
}

.letter-head-sub { font-size: 0.75rem; color: #9c9080; }

.letter-messages {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 22rem;
    overflow-y: auto;
    margin-bottom: 0.7rem;
}

.letter-msg {
    padding: 0.55rem 0.7rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
}

.letter-msg.is-own {
    border-color: #9a7f2a;
    background: rgba(212, 175, 55, 0.07);
}

.letter-msg-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Avsändaren är en knapp till profilen, men ska se ut som ett namn.
   Utan den här återställningen ritar webbläsaren sin egen grå ruta med
   kant runt texten, och brevet ser sönderklippt ut. Samma
   återställning som .hud-name och button.log-who gör. */
.letter-msg-from {
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: #b8963a;
}

.letter-msg-from:hover { color: #d4af37; text-decoration: underline; }
.letter-msg-from:focus-visible { outline: 1px solid #9a7f2a; }

.letter-msg-time { font-size: 0.68rem; color: #6f6658; }

.letter-msg-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ddd5c2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.letter-reply { display: flex; flex-direction: column; gap: 0.4rem; }

/* ==========================================================================
   MÖTESRUTAN
   --------------------------------------------------------------------------
   Ett mått styr allt: --enc-pad för sidor och --enc-gap mellan saker.
   Rubrik, rader och åtgärder använder samma sidopadding, så kortets
   vänsterkant är en rak linje hela vägen ner.

   Varje varelse får en ikonruta i stället för en lös emoji — det ger
   raderna en gemensam vänsterkolumn och gör typen läsbar på avstånd.
   Hälsan ligger under namnet så att raden inte trängs ihop.
   ========================================================================== */

.context-bar {
    --enc-pad: 0.8rem;
    --enc-gap: 0.6rem;

    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    width: min(calc(100% - 1.5rem), 24rem);

    pointer-events: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #9a7f2a;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #262117 0%, #1b1712 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7);
    animation: context-in .18s ease-out;
}

.context-bar.hidden { display: none; }

@keyframes context-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Rubrik --- */
.enc-head {
    padding: var(--enc-pad) var(--enc-pad) 0.55rem;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a7f2a;
}

/* --- Rader --- */
.enc-rows {
    display: flex;
    flex-direction: column;
    gap: var(--enc-gap);
    padding: 0 var(--enc-pad) var(--enc-pad);
    max-height: 10rem;
    overflow-y: auto;
}

.enc-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.2rem 0.6rem;
    padding: 0;
    border: none;
    background: none;
}

/* Ikonruta: ger raderna en gemensam vänsterkolumn. */
.enc-icon {
    grid-row: 1;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 0.35rem;
    border: 1px solid #3d3527;
    background: rgba(0, 0, 0, 0.3);
}

.enc-monster .enc-icon {
    border-color: rgba(176, 74, 58, 0.55);
    background: rgba(176, 74, 58, 0.16);
}
.enc-npc .enc-icon {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.14);
}
.enc-player .enc-icon {
    border-color: rgba(59, 126, 161, 0.55);
    background: rgba(59, 126, 161, 0.16);
}

.enc-name {
    grid-row: 1;
    font-size: 0.86rem;
    color: #e2dac6;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enc-name a { color: #8fbde2; text-decoration: none; }
.enc-name a:hover { text-decoration: underline; }

.enc-detail {
    grid-row: 1;
    font-size: 0.72rem;
    color: #9c9080;
    white-space: nowrap;
}

/* Hälsan under namnet, i linje med det. */
.enc-hp {
    grid-column: 2 / -1;
    grid-row: 2;
    display: block;
    height: 0.25rem;
    border-radius: 999px;
    background: #12100d;
    overflow: hidden;
}

.enc-hp-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8c4136, #c05a3a);
}

/* --- Åtgärder --- */
.context-bar #action-buttons {
    display: flex;
    gap: var(--enc-gap);
    padding: var(--enc-pad);
    border-top: 1px solid #3d3527;
}

.context-bar #action-buttons:empty { display: none; }

.context-bar .action-btn,
.context-bar #action-buttons button {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.35rem;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.context-bar .action-btn:hover,
.context-bar #action-buttons button:hover { filter: brightness(1.25); }

/* Föremåls- och NPC-knappar följer samma padding. */
.context-bar .item-panel,
.context-bar .npc-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--enc-gap);
    padding: 0 var(--enc-pad) var(--enc-pad);
    position: static;
    transform: none;
    max-width: none;
    box-shadow: none;
}

.context-bar .item-panel:empty,
.context-bar .npc-bar:empty { display: none; padding: 0; }

@media (max-width: 900px) {
    .context-bar { bottom: 1rem; width: calc(100% - 1.25rem); }
    .enc-rows { max-height: 7.5rem; }
}

/* --- Biografins läs- och redigeringsläge --- */
.pf-bio-block { margin-bottom: 0.9rem; }
.pf-bio-block [hidden] { display: none; }

.pf-bio-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.pf-bio-btn {
    padding: 0.35rem 0.8rem;
    border-radius: 0.35rem;
    border: 1px solid #3d3527;
    background: transparent;
    color: #9c9080;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    cursor: pointer;
}

.pf-bio-btn:hover { border-color: #9a7f2a; color: #d4af37; }

.pf-bio-btn.is-primary {
    border-color: #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
}

#bio-read .pf-bio-btn { margin-top: 0.4rem; }

/* ==========================================================================
   MÖTESRUTAN: neutralisera de gamla globala reglerna
   --------------------------------------------------------------------------
   #action-buttons, .action-btn och #action-extra-info är kvar från det
   gamla panelsystemet och gäller fortfarande överallt. Inuti kortet
   måste de bort helt, annars staplas knapparna lodrätt och infotexten
   får en egen mörk ruta inuti kortet — vilket är precis vad som hände.
   ========================================================================== */

.context-bar #action-buttons {
    flex-direction: row;
    align-items: stretch;
    width: auto;
    gap: var(--enc-gap);
}

/* Kortets innehåll ska inte ha någon egen ruta. */
.context-bar #action-extra-info,
.context-bar #action-extra-info.action-extra-info {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    font-size: inherit;
    font-family: inherit;
}

.context-bar #action-buttons-container {
    display: flex;
    flex-direction: column;
    background: none;
    padding: 0;
    margin: 0;
    width: auto;
}

/* Knapparna: samma mått som resten av kortet, inte den gamla
   brun-gradienten med 2px kant. */
.context-bar .action-btn {
    margin: 0;
    border-width: 1px;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    border-color: #9a7f2a;
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.5rem 0.6rem;
    text-shadow: none;
    box-shadow: none;
}

.context-bar .action-btn:hover {
    background: linear-gradient(180deg, #473c28, #332b1c);
    border-color: #d4af37;
    color: #f0e2b0;
    transform: none;
    box-shadow: none;
}

/* Föremålslistan ska inte lägga på extra marginal inuti kortet. */
.context-bar #item-panel.item-panel {
    width: auto;
    margin: 0;
    font-size: 0.82rem;
}

/* Smal skärm: två knappar får plats bredvid varandra, fler bryter rad. */
@media (max-width: 420px) {
    .context-bar #action-buttons { flex-wrap: wrap; }
    .context-bar .action-btn { flex: 1 1 45%; }
}

/* ==========================================================================
   MÖTESRUTAN: rader med åtgärd, och brevformulärets etiketter
   ========================================================================== */

/* Rader med en knapp till höger (föremål och NPC:er). Samma rutnät som
   övriga rader, men sista kolumnen rymmer knapparna. */
.enc-row {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
}

.enc-actions { display: flex; gap: 0.35rem; grid-row: 1; }

.enc-action {
    padding: 0.28rem 0.65rem;
    border-radius: 0.3rem;
    border: 1px solid #3d3527;
    background: rgba(0, 0, 0, 0.35);
    color: #c8c0ae;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    white-space: nowrap;
    cursor: pointer;
}

.enc-action:hover { border-color: #9a7f2a; color: #d4af37; }

.enc-item .enc-icon {
    border-color: rgba(106, 143, 60, 0.5);
    background: rgba(106, 143, 60, 0.15);
}

.enc-item .enc-name { cursor: help; }

/* Uppdragsmarkören sitter i hörnet av ikonrutan. */
.enc-icon { position: relative; }

.enc-marker {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 0.85rem;
    height: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d4af37;
    color: #1a1610;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

/* NPC- och föremålsraderna ligger i samma block som allt annat och ska
   inte ha egen padding ovanpå kortets. */
.context-bar #npc-list,
.context-bar #item-panel.item-panel {
    display: block;
    padding: 0;
    margin: 0;
    width: auto;
}

.context-bar #npc-list:empty,
.context-bar #item-panel:empty { display: none; }

/* Den gamla NPC-knappen används inte längre i kortet. */
.context-bar .npc-btn { display: none; }

/* --- Brevformulärets etiketter ---
   .story-heading är gjord för rubriker: inline-element med understryk-
   ning och egna marginaler. Som <label> gav det en underruten linje
   under bara ordet och ojämna hopp mellan fälten. */
.letter-label {
    display: block;
    margin: 0.7rem 0 0.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a7f2a;
    border: none;
    padding: 0;
}

.letter-label:first-child { margin-top: 0; }

/* Fälten får jämna avstånd i stället för att ärva rubrikmarginaler. */
#letter-compose .letter-input { margin: 0; }
#letter-compose .sheet-action { margin-top: 0.9rem; }

/* ==========================================================================
   MOBIL: dockan klipptes, och arket lade sig över kartan
   --------------------------------------------------------------------------
   Dockan hade overflow-y: hidden och ingen garanterad höjd, så
   etiketterna under ikonerna skars av. Och arket låg som overlay över
   kartans nedre del, vilket dolde spelaren mitt på skärmen.

   Nu är arket en egen rad i rutnätet: kartan krymper och flyttas upp
   i stället för att skymmas — samma beteende som på bred skärm.
   ========================================================================== */

@media (max-width: 900px) {
    /* Alla åtta knappar ska rymmas på bredden. Med min-width blev
       raden bredare än telefonen och sista knappen hamnade utanför,
       så den får krympa fritt i stället. */
    .dock {
        overflow: visible;
        min-height: 0;
        align-items: stretch;
        justify-content: space-between;
        gap: 0;
    }

    .dock-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
        min-height: 0;
        padding: 0.35rem 0.1rem calc(0.35rem);
    }

    .dock-icon { font-size: 1.15rem; }

    /* Två saker gör att orden får plats på en åttondels telefonbredd:
       Cinzel byts mot brödtextens typsnitt (Cinzel har bara versaler,
       och "BESTIARIUM" i versaler är hopplöst brett), och mallens
       mjuka bindestreck får bryta orden. Bindestrecken syns bara när
       raden faktiskt behöver brytas — på dator står orden hela. */
    .dock-label {
        font-family: 'Crimson Text', serif;
        font-size: 0.56rem;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        hyphens: manual;
        -webkit-hyphens: manual;
    }

    /* Knappen måste få växa till tre rader, annars klipps sista
       stavelsen bort igen. */
    .dock-btn { overflow: visible; }

    /* Tre rader: karta, ark, docka. Arket har noll höjd när det är
       stängt, så kartan får hela ytan. */
    .shell-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 0 auto;
        transition: grid-template-rows .26s ease;
    }

    .shell-body.sheet-open {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 55% auto;
    }

    .stage { grid-row: 1; }
    .dock  { grid-row: 3; }

    /* Arket ligger i flödet i stället för att sväva över kartan. */
    .sheet {
        grid-row: 2;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        height: auto;
        min-height: 0;
        transform: none;
        border-left: none;
        border-top: 1px solid #9a7f2a;
        border-radius: 0.9rem 0.9rem 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
        z-index: 20;
    }

    .sheet.hidden { display: none; transform: none; }

    .sheet-body { padding-bottom: 0.85rem; }
}

@media (max-height: 560px) and (max-width: 900px) {
    .shell-body.sheet-open {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 62% auto;
    }
    .dock-label { display: none; }
    .dock-btn { min-height: 2.4rem; }
    .dock { min-height: 2.8rem; }
}

/* ==========================================================================
   BÄRVIKT, FÖREMÅLSKATEGORI, NIVÅPOÄNG OCH KARAKTÄRSSKAPANDE
   ========================================================================== */

/* --- Bärvikt --- */
.carry-weight {
    margin-bottom: 0.9rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
}

.carry-weight.is-full { border-color: #b04a3a; }

.carry-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
}

.carry-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a7f2a;
}

.carry-value {
    font-size: 0.85rem;
    color: #ddd5c2;
    font-variant-numeric: tabular-nums;
}

.carry-bar {
    /* Relativ: de två fyllnaderna ligger ovanpå varandra från vänster
       kant, inte efter varandra. */
    position: relative;
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: #12100d;
    border: 1px solid #3d3527;
    overflow: hidden;
}

.carry-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #6a8f3c, #9a7f2a);
}

/* Den utrustade delen: samma stapel, mörkare, längst till vänster.
   Den går inte att lätta utan att ta av sig något. */
.carry-worn {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #4a5d2c;
}

.carry-weight.is-full .carry-fill {
    background: linear-gradient(90deg, #8c4136, #c05a3a);
}

.carry-weight.is-full .carry-worn {
    background: #6d3229;
}

.carry-note {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: #8d8271;
    line-height: 1.4;
}

.carry-warn {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    color: #e5a394;
    line-height: 1.4;
}

/* --- Föremålsrader: namn och kategori åtskilda --- */
.inventory-item-label {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    cursor: help;
}

.inventory-item-name { color: #ddd5c2; }

.inventory-item-cat {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8072;
}

/* --- Attributrader (används av både nivårutan och skapandet) --- */
.stat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.7rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(61, 53, 39, 0.6);
}

.stat-row:last-of-type { border-bottom: none; }

.stat-name {
    grid-row: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    color: #ddd5c2;
}

.stat-hint {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.72rem;
    color: #8a8072;
}

.stat-stepper {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
    color: #d4af37;
    font-size: 0.95rem;
}

.stat-btn {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.35rem;
    border: 1px solid #3d3527;
    background: rgba(0, 0, 0, 0.3);
    color: #d4af37;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.stat-btn:hover:not(:disabled) { border-color: #9a7f2a; }
.stat-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Nivåhöjningsrutan --- */
.levelup-overlay {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(0, 0, 0, 0.72);
}

.levelup-overlay.hidden { display: none; }

.levelup-box {
    width: 100%;
    max-width: 26rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid #9a7f2a;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #262117 0%, #1b1712 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
}

.levelup-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: #d4af37;
}

.levelup-sub {
    margin: 0.15rem 0 0.8rem;
    font-size: 0.82rem;
    color: #9c9080;
}

#levelup-remaining { color: #d4af37; font-variant-numeric: tabular-nums; }

.levelup-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1rem;
}

.levelup-actions .sheet-action { margin: 0; flex: 1; }

/* --- Karaktärsskapandet --- */
.creation {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1.2rem;
}

.creation.hidden { display: none; }

.creation-card {
    width: 100%;
    max-width: 30rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid #9a7f2a;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #262117 0%, #1a1712 100%);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
}

.creation-head {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #3d3527;
}

.creation-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    color: #d4af37;
}

.creation-sub {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
    color: #9c9080;
    font-style: italic;
}

.creation-label {
    display: block;
    margin: 0.9rem 0 0.3rem;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9a7f2a;
}

.creation-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: #12100d;
    color: #e8e0cc;
    font-family: 'Crimson Text', serif;
    font-size: 0.92rem;
}

.creation-input:focus { outline: none; border-color: #9a7f2a; }

.creation-blurb {
    margin: 0.45rem 0 0;
    padding: 0.55rem 0.7rem;
    border-left: 2px solid #3d3527;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #b0a898;
    font-style: italic;
    min-height: 2.6rem;
}

.creation-points {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 1.2rem 0 0.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid #3d3527;
}

.creation-points .creation-label { margin: 0; }

.creation-remaining {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}

.creation-submit {
    width: 100%;
    margin-top: 1.3rem;
    padding: 0.7rem 1rem;
    border-radius: 0.4rem;
    border: 1px solid #9a7f2a;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.creation-submit:hover { filter: brightness(1.25); }

/* ==========================================================================
   SIDAN /create_character
   --------------------------------------------------------------------------
   Egen mall, inte spelskalet — men samma visuella språk. Klasserna
   .creation* delas med skapandesektionen i index.html.
   ========================================================================== */

body.creation-body {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
}

/* Rullgardinen ska inte se ut som webbläsarens standardkontroll. */
select.creation-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #9a7f2a 50%),
        linear-gradient(135deg, #9a7f2a 50%, transparent 50%);
    background-position:
        calc(100% - 1.1rem) calc(50% + 0.1rem),
        calc(100% - 0.75rem) calc(50% + 0.1rem);
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

select.creation-input option {
    background: #1a1712;
    color: #e8e0cc;
}

/* Meddelanden från servern (t.ex. "Din karaktär är död"). */
.creation-flash {
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #7a4a3a;
    border-left-width: 3px;
    border-radius: 0.35rem;
    background: rgba(120, 60, 45, 0.16);
}

.creation-flash p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e5a394;
}

.creation-flash p + p { margin-top: 0.35rem; }

/* Valideringsfel precis ovanför knappen, där blicken redan är. */
.creation-error {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: #e5a394;
    text-align: center;
}

.creation-error.hidden { display: none; }

/* ==========================================================================
   STADEN
   --------------------------------------------------------------------------
   Staden ersätter kartan i stället för att samsas om ytan. Innanför
   murarna finns inget att rita på spelbrädet — spelaren är borta
   därifrån — så halva skärmen karta hade bara varit spilld plats.
   ========================================================================== */

.village {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Skenet i överkanten mäts mot skärmens *bredd*, inte mot ytans
       form, och sköts av --village-glow.

       Utan storleksangivelse mäts cirkeln mot ytans hörn. Då växer
       skenet med höjden, och på en hög och smal skärm tonade det ut
       mitt i topplistan — en rad såg halvbelyst ut medan nästa var
       mörk.

       Radien är ett fast mått i mobilskalet och följer bredden först
       på skrivbordet. En enda formel för alla bredder gick inte: den
       som såg rätt ut på 1200 px sköt ned skenet i topplistan igen
       runt 600–900 px, där staden fortfarande är smal men bredden
       hunnit växa. Brytpunkten är densamma som skalets egen, så
       skenet byter takt när layouten gör det.

       Stoppen mitt i gör övergången mjuk; med ett enda hopp till
       transparent syns en kant där skenet tar slut. */
    --village-glow: 15rem;
    background:
        radial-gradient(circle var(--village-glow) at 30% 0%,
                        rgba(154, 127, 42, 0.16) 0%,
                        rgba(154, 127, 42, 0.07) 45%,
                        rgba(154, 127, 42, 0.02) 75%,
                        transparent 100%),
        linear-gradient(180deg, #1d1913 0%, #14120f 100%);
}

/* På skrivbordet får skenet följa bredden igen. 55vw träffar det
   gamla hörnmåttet: 638 px blev 660 på 1200x800, 743 blev 792 på
   1440x900 och 921 blev 883 på 1920x1000. Taket hindrar att det
   skenar iväg på en 4K-skärm. */
@media (min-width: 900px) {
    .village { --village-glow: clamp(28rem, 55vw, 46rem); }
}

.village.hidden { display: none; }

.village-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem 0.7rem;
    border-bottom: 1px solid #3d3527;
    flex-shrink: 0;
}

.village-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: #d4af37;
}

.village-blurb {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #9c9080;
    font-style: italic;
    max-width: 46ch;
}

.village-leave {
    flex-shrink: 0;
    padding: 0.45rem 0.9rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
    color: #ddd5c2;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    cursor: pointer;
}

.village-leave:hover { border-color: #9a7f2a; color: #d4af37; }

/* Flikrader som inte får plats.

   Raden bröts inte utan scrollade i sidled. En flik som ligger utanför
   kanten går inte att se att den finns, och en scroll utan synlig kant
   ser ut som slutet på listan. Raden bryts därför i stället — det
   gäller både stadens fem flikar och klanens sex. */
.village-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    row-gap: 0.15rem;
    padding: 0.5rem 0.7rem 0.15rem;
    border-bottom: 1px solid #3d3527;
    flex-shrink: 0;
}

.village-tab {
    /* Flikarna delar på bredden så att en bruten rad ser avsiktlig ut
       i stället för som ett radfall. */
    flex: 1 1 auto;
    min-width: 5.5rem;
    text-align: center;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.4rem 0.4rem 0 0;
    background: transparent;
    color: #9c9080;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
}

.village-tab:hover { color: #ddd5c2; }

.village-tab.is-active {
    border-color: #3d3527;
    background: rgba(212, 175, 55, 0.09);
    color: #d4af37;
}

.village-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem 1rem 1.4rem;
}

.village-pane.hidden { display: none; }

.village-heading {
    margin: 1.1rem 0 0.45rem;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9a7f2a;
}

.village-pane > .village-heading:first-child { margin-top: 0; }

.village-note {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #8a8072;
    font-style: italic;
}

/* En anmärkning som förklarar varför något är släckt. */
.village-note.is-warning {
    margin-top: 0.5rem;
    color: #e5a394;
}

/* --- Arenans lag --- */
.duel-row { align-items: flex-start; }

.duel-sides {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.duel-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-left: 2px solid #3d3527;
    background: rgba(0, 0, 0, 0.18);
}

.duel-side-name {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #9a7f2a;
    white-space: nowrap;
}

.duel-side-slots {
    font-size: 0.75rem;
    color: #8a8072;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Namnen får ta det utrymme som blir över och brytas av vid behov. */
.duel-side-members {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    color: #ddd5c2;
    overflow-wrap: anywhere;
}

/* Skälet till att man inte kan anmäla sig. Det ska stå utskrivet, inte
   bara anas av att knappen är grå. */
.duel-reason {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: #e5a394;
}

.duel-waiting {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #9c9080;
    font-style: italic;
}

/* En avgjord kamp är en knapp till sin stridsrapport. */
.duel-past { cursor: pointer; }
.duel-past:hover { background: rgba(212, 175, 55, 0.07); }
.duel-past:focus-visible { outline: 1px solid #9a7f2a; }

/* --- Stridsrapporten --- */
.duel-report-outcome {
    margin: 0 0 0.2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #d4af37;
}

.duel-report-when {
    margin: 0 0 0.8rem;
    font-size: 0.75rem;
    color: #8a8072;
}

/* Loggen får växa och fylla rutan.

   .log-box har en fast höjd på 150 px sedan de flytande fönstrens tid.
   Ett max-height biter inte på den — height vinner — så rapporten blev
   en liten ruta med två rader synliga oavsett hur lång striden var.
   Här sätts höjden till auto, och rullningen sköts av rapportens
   kropp så att det bara finns en rullningslist. */
.duel-report-log {
    height: auto;
    min-height: 12rem;
    max-height: none;
    overflow: visible;
    margin-bottom: 0;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
}

/* --- Stridsloggens färger ---
   En strid är en lång rad likadana meningar. Färgen finns för att man
   ska kunna ögna ner och se var slagen gick in, inte för att pryda. */

/* Raden beskriver sig själv helt och hållet, så att den ser likadan ut
   i händelseloggen och i arenans stridsrapport. Tidsstämpeln får en
   egen kolumn; då hamnar texten i linje hela vägen ner. */
.cl-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.45rem;
    align-items: baseline;
    margin: 0;
    padding: 0.16rem 0.1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Utan tidsstämpel finns bara texten, och den ska ha hela bredden. */
.cl-line > .log-text { grid-column: span 2; }
.cl-line > .log-time + .log-text { grid-column: auto; }

/* Tomraden mellan rundorna. combat.py skickar den som ett mellanslag;
   utan höjd faller den ihop och rundorna klibbar samman. */
.cl-blank { display: block; height: 0.5rem; margin: 0; padding: 0; }

/* Vilka som möts. Står överst och ramar in resten. */
.cl-roster {
    color: #b9ad95;
    font-size: 0.82rem;
}

/* Rundrubriken är det man hoppar mellan när man skummar. */
.cl-round {
    margin: 0.55rem 0 0.2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a7f2a;
    border-top: 1px solid #2b251c;
    padding-top: 0.35rem;
}

/* Träff, parering och miss: tre tydligt skilda utfall. */
.cl-hit    { color: #d8d0bc; }
.cl-parry  { color: #7fa0b8; }
.cl-miss   { color: #6f665a; }

/* Skadesiffran är det man letar efter i en träffrad. */
.cl-damage {
    color: #e07a5f;
    font-weight: 600;
}

.cl-fatigue {
    color: #9c9080;
    font-style: italic;
}

.cl-victory { color: #d4af37; }
.cl-defeat  { color: #c05a3a; }

/* Rader som inte hör till en strid — förflyttningar, uppdrag, notiser
   — behåller loggens vanliga färg. */
.cl-plain { color: #b9ad95; }

/* --- Egna strider på karaktärsbladet --- */
.pf-duel {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid #2b251c;
    cursor: pointer;
}

.pf-duel:last-child { border-bottom: none; }
.pf-duel:hover { background: rgba(212, 175, 55, 0.07); }
.pf-duel:focus-visible { outline: 1px solid #9a7f2a; }

.pf-duel-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.pf-duel-name {
    font-size: 0.85rem;
    color: #ddd5c2;
    overflow-wrap: anywhere;
}

/* Var striden stod. Arenans kamper och vildmarkens ligger i samma
   lista, och utan märkningen går de inte att skilja åt. */
.pf-duel-where {
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid #3d3527;
    border-radius: 0.6rem;
    font-size: 0.68rem;
    color: #9c9080;
    white-space: nowrap;
}

/* Klanens visitkort: vapnet bredvid namnet. */
.clan-headline {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
}

.clan-headline-text { min-width: 0; }
.clan-headline-text .story-heading { margin-bottom: 0.15rem; }

.clan-back-row { margin-bottom: 0.6rem; }

/* Namnet i klanlistorna är en knapp, men ska läsas som en rubrik. */
.clan-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: middle;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Vapnet står *bredvid* namnet, inte ovanför det. Utan den här raden
   blev knappen ett block i en radlayout: skölden hamnade på egen rad
   ovanför, och namnet knuffades ur led. */
.clan-open-btn .crest {
    display: inline-block;
    vertical-align: middle;
}

.clan-open-btn:hover .village-row-name { color: #f0d98a; }

/* Klaner med hemvist i en annan stad: med i listan, men dämpade. */
.clan-row-away { opacity: 0.72; }


.pf-duel-sub { font-size: 0.76rem; color: #8a8072; }

/* Egna segrar får guldfärgad text — man ska kunna ögna listan. */
.pf-duel.is-win .pf-duel-sub { color: #d4af37; }

.pf-duel-when {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #6f665a;
    font-variant-numeric: tabular-nums;
}

.village-empty {
    margin: 0 0 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed #3d3527;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    color: #8a8072;
}

.village-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.village-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
}

.village-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.village-row-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #ddd5c2;
}

.village-row-sub {
    font-size: 0.75rem;
    color: #8a8072;
}

.village-title {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: #9a7f2a;
    font-style: italic;
}

.village-epitaph {
    margin-top: 0.25rem;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #9c9080;
    font-style: italic;
}

.village-row-side {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.village-price {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #d4af37;
}

.village-stock {
    font-size: 0.72rem;
    color: #8a8072;
    white-space: nowrap;
}

.village-btn {
    padding: 0.35rem 0.7rem;
    border: 1px solid #9a7f2a;
    border-radius: 0.35rem;
    background: linear-gradient(180deg, #3a3122, #2a2418);
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    cursor: pointer;
    white-space: nowrap;
}

.village-btn:hover { filter: brightness(1.25); }

.village-btn-quiet {
    border-color: #3d3527;
    background: rgba(0, 0, 0, 0.3);
    color: #9c9080;
}

/* En mindre variant, för knappar inne i en rad. */
.village-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
}

/* En släckt knapp ska se släckt ut, inte bara vara det. */
.village-btn:disabled,
.village-btn:disabled:hover {
    border-color: #3d3527;
    background: rgba(0, 0, 0, 0.25);
    color: #6f665a;
    cursor: not-allowed;
    filter: none;
}

.village-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.6rem 0 0.4rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.18);
}

.village-select,
.village-input {
    padding: 0.4rem 0.55rem;
    border: 1px solid #3d3527;
    border-radius: 0.35rem;
    background: #12100d;
    color: #e8e0cc;
    font-family: 'Crimson Text', serif;
    font-size: 0.85rem;
}

/* Rutan och listan ska stå på samma linje. En native <select> räknar
   sin höjd på sitt eget vis — den lägger till plats för pilen och har
   egna inbyggda marginaler — så utan en gemensam höjd hamnar den några
   bildpunkter fel mot det <input> som står bredvid. */
.village-select,
.village-input {
    box-sizing: border-box;
    height: 2.1rem;
    line-height: 1.3;
}

.village-select { flex: 1 1 10rem; min-width: 0; }
.village-input { width: 6rem; }

.village-select:focus,
.village-input:focus { outline: none; border-color: #9a7f2a; }

/* Kartans egna kontroller ska inte ligga kvar ovanpå staden. */
body.in-village .stage-overlay { display: none; }

@media (max-width: 900px) {
    .village-head { padding: 0.7rem 0.75rem 0.55rem; }
    .village-name { font-size: 1.1rem; }
    .village-blurb { font-size: 0.78rem; }
    .village-body { padding: 0.7rem 0.75rem 1.2rem; }

    /* Namn och pris under varandra: en rad blir för trång för både
       föremålsnamn, undertext och knapp på en telefon. */
    .village-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .village-row-side { justify-content: space-between; }
}

/* --- Klickbara namn i topplistan och på kyrkogården --- */
.village-namelink {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: #d4af37;
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.35);
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.village-namelink:hover {
    color: #e8c95a;
    text-decoration-color: currentColor;
}

/* Raden som beskriver ett föremål är hoverbar för statsrutan. */
.village-hoverable { cursor: help; }

/* Utrustningen på karaktärsbladet: samma statsruta som ryggsäcken,
   och samma tecken på att det finns något att se. */
.pf-hoverable { cursor: help; }
.pf-hoverable:hover { color: #e8e0cc; }

/* --- Den fallnas blad i profilvyn --- */
.pf-fallen { border-bottom-color: #4a4133; }

.pf-epitaph {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #8a8072;
    font-style: italic;
}

/* --- Kartan laddar --- */
.map-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(180deg, #1a1712 0%, #14120f 100%);
    color: #9a7f2a;
    pointer-events: none;
}

.map-loading.hidden { display: none; }

.map-loading p {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: #9c9080;
}

.map-loading-mark {
    font-size: 1.6rem;
    color: #d4af37;
    animation: map-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes map-loading-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* Har man bett om mindre rörelse ska märket stå still. */
@media (prefers-reduced-motion: reduce) {
    .map-loading-mark { animation: none; opacity: 0.8; }
}

/* ==========================================================================
   BYTESHANDEL
   --------------------------------------------------------------------------
   Samma form i stadsvyn och i rutan hos en handelsman ute i världen:
   det man lämnar till vänster, det man får till höger, och en pil
   emellan så att riktningen aldrig går att missförstå.
   ========================================================================== */

.barter-trade {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}

.barter-side {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 8rem;
}

.barter-label {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9a7f2a;
}

.barter-line {
    font-size: 0.82rem;
    color: #ddd5c2;
}

/* Det man saknar ska synas utan att man behöver räkna själv. */
.barter-line.is-short { color: #e5a394; }

.barter-have {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    color: #8a8072;
}

.barter-arrow {
    align-self: center;
    font-size: 1.1rem;
    color: #9a7f2a;
}

.barter-reason {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: #e5a394;
}

.barter-row { align-items: flex-start; }

/* --- Rutan hos en handelsman --- */
.barter-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(0, 0, 0, 0.72);
}

.barter-overlay.hidden { display: none; }

.barter-box {
    width: 100%;
    max-width: 32rem;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    border: 1px solid #9a7f2a;
    border-radius: 0.6rem;
    /* Klipper allt som ritas i rutan mot de rundade hörnen. Utan den
       kan ett barn med egen bakgrund måla ut i hörnen, och då ser
       rutan trasig ut i överkanten. */
    overflow: hidden;
    background: linear-gradient(180deg, #262117 0%, #1b1712 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
}

.barter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 1rem 0.6rem;
    /* Egen bakgrund, uttryckligen ingen: rubrikraden ska visa rutans
       gradient rakt igenom. */
    background: none;
    box-shadow: none;
    border-bottom: 1px solid #3d3527;
    flex-shrink: 0;
}

.barter-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #d4af37;
}

.barter-body {
    padding: 0.8rem 1rem 1rem;
    overflow-y: auto;
    min-height: 0;
}

.barter-offer {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(61, 53, 39, 0.7);
}

.barter-offer:last-child { border-bottom: none; }

.barter-name {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: #ddd5c2;
}

.barter-desc {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #9c9080;
    font-style: italic;
}

.barter-offer .sheet-action { margin-top: 0.6rem; }
.barter-offer .sheet-action:disabled { opacity: 0.4; cursor: not-allowed; }


/* =====================================================================
   KLANER
   ---------------------------------------------------------------------
   Klanvyn lånar stadsvyns radform, så att en lista ser likadan ut var
   man än läser den. Det som är nytt är vapnet och målarrutan.
   ===================================================================== */

/* Klanvyn ska fylla arket, inte växa ur det.
   ---------------------------------------------------------------
   .clan-shell bad om height: 100%, men procent räknas mot något —
   och sektionen ovanför var ett vanligt block utan bestämd höjd.
   Då blev 100% till "auto", skalet växte med sitt innehåll, och
   det var arket som fick rulla. Följden: flikraden och chattens
   skrivfält rullade bort tillsammans med samtalet.
   Värre än så: .clan-pane-chat frågade i sin tur efter 100% av
   .clan-body, vars höjd bestämdes av just det pane:t. En höjd som
   definieras av sig själv går inte att lösa, och webbläsaren
   svarar med noll — chattrutan blev tom.
   Loggvyn har alltid gjort det här rätt (.sheet-view-log); här är
   samma grepp. */
/* :not([hidden]) är inte prydnad. .sheet-view[hidden] { display: none }
   har exakt samma tyngd som .sheet-view[data-view="clan"], och den här
   regeln står längre ner i filen — utan spärren vann display: flex, och
   klanvyn låg kvar synlig ovanpå loggen och alla andra vyer. */
.sheet-view[data-view="clan"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Katalogen och visitkortet är egna vyer i samma sektion och ska
   rulla var för sig. .hidden slår ifrån dem, den är !important. */
.sheet-view[data-view="clan"]:not([hidden]) > #clan-body,
.sheet-view[data-view="clan"]:not([hidden]) > #clan-profile {
    flex: 1 1 auto;
    min-height: 0;
}

.clan-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.clan-shell.hidden { display: none; }

.clan-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 0.8rem;
}

.clan-pane.hidden { display: none; }

/* Rådet markeras när något väntar på svar. Siffran ligger i
   data-pending, så CSS kan visa den utan att markeringen behöver
   någon extra nod i mallen. */
.clan-tab.has-pending {
    border-color: #9a7f2a;
    color: #d4af37;
}

.clan-tab.has-pending::after {
    content: attr(data-pending);
    display: inline-block;
    margin-left: 0.35rem;
    min-width: 1.1em;
    padding: 0 0.25em;
    border-radius: 0.7em;
    background: #9a2a2a;
    color: #f0e6d2;
    font-size: 0.66rem;
    line-height: 1.5;
    text-align: center;
}

/* Chatten rullar i sin egen ruta. Låter man .clan-body rulla också
   får man två rullister i varandra, och den yttre drar bort både
   flikraden och skrivfältet. */
.clan-body.is-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0.2rem;
}

/* Chattfliken ska fylla höjden så att skrivfältet hamnar i nederkant.
   Höjden kommer från flexen och inte från en procent: en procent
   hade räknats mot .clan-body, vars egen höjd bestäms av det här
   pane:t — en höjd som definieras av sig själv blir noll. */
.clan-pane-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Samtalsrutan: loggen tar all höjd som blir över, skrivfältet står
   still längst ner. Utan detta hade meddelandelistan en fast höjd på
   22rem — på en hög skärm blev det ett litet fönster med tomrum under,
   och på en låg fick man rulla trots att det fanns plats. */
.chat-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.chat-shell .letter-messages {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0.6rem;
}

.chat-shell .letter-reply {
    flex: 0 0 auto;
    padding-top: 0.2rem;
}

/* En rad från spelet själv, inte från någon som talar. */
.chat-note {
    font-size: 0.78rem;
    color: #9c9080;
    font-style: italic;
    padding: 0.15rem 0.2rem;
}

/* --- Vapnet --- */

.crest { display: block; flex-shrink: 0; }

/* Vapnet plus märket, att sätta bredvid ett namn. */
.crest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: middle;
}

.crest-tag,
.clan-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: #9a7f2a;
    border: 1px solid #3d3527;
    border-radius: 0.25rem;
    padding: 0.05rem 0.28rem;
    white-space: nowrap;
}

.clan-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.clan-row-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.clan-blurb {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #9c9080;
    overflow-wrap: anywhere;
}

/* --- Översikten --- */

.clan-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #3d3527;
}

.clan-banner-text { min-width: 0; }

.clan-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: #d4af37;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.clan-home {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #9c9080;
}

.clan-badge {
    margin-left: 0.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d4af37;
}

.clan-treasury {
    margin: 0.2rem 0 0.6rem;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: #d4af37;
}

.clan-edit { margin-bottom: 0.5rem; }

/* --- Vapensmedjan --- */

.crest-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.crest-preview {
    flex-shrink: 0;
    padding: 0.5rem;
    border: 1px solid #3d3527;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.22);
}

.crest-controls {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* .village-select har flex: 1 1 10rem för radernas skull. Här står
   listorna i en kolumn, och då blir samma 10rem en *höjd* — varje
   meny blev en handhög ruta med sin text svävande i mitten. Basen
   nollställs, bredden tas av kolumnen. */
.crest-controls .village-select {
    flex: 0 0 auto;
    width: 100%;
}

.crest-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.crest-colours label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.crest-colours input[type="color"] {
    width: 3rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid #3d3527;
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
}

/* Målarrutan. */
.crest-paint {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-start;
}

.crest-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 7rem;
}

.crest-swatch {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid #3d3527;
    border-radius: 0.2rem;
    cursor: pointer;
}

.crest-swatch.is-active {
    border-color: #d4af37;
    box-shadow: 0 0 0 1px #d4af37;
}

.crest-swatch.is-eraser {
    background: rgba(0, 0, 0, 0.4);
    color: #9c9080;
    font-size: 0.7rem;
}

/* Rutnätet: kvadratiskt oavsett hur brett utrymmet är. */
.crest-grid {
    display: grid;
    gap: 1px;
    width: min(17rem, 100%);
    aspect-ratio: 1;
    padding: 2px;
    border: 1px solid #3d3527;
    border-radius: 0.3rem;
    background: #2b251c;
    /* Att dra över rutnätet ska måla, inte markera text. */
    user-select: none;
}

.crest-cell {
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    cursor: crosshair;
}

.crest-cell:hover { outline: 1px solid #9a7f2a; }

/* --- Rådet --- */

.clan-vote .village-btn.is-active {
    border-color: #d4af37;
    color: #f0d98a;
}

.clan-due { border-left: 2px solid #9a7f2a; }

/* Klanens egna anteckningar i chatten: beslut, insättningar, uttag.
   De ska se ut som noteringar, inte som att någon sagt dem. */
.clan-note {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0.3rem 0;
    padding: 0.25rem 0.1rem;
    font-size: 0.78rem;
    font-style: italic;
    color: #8a8072;
}

/* Märkesfältet i klanhallen är kort och ska se kort ut. */
.clan-tag-input {
    max-width: 5.5rem;
    text-transform: uppercase;
}

/* Mötesrutans förklaring till varför en ruta inte går att slåss om. */
.enc-note {
    margin: 0.5rem var(--enc-pad, 0.7rem) 0;
    font-size: 0.78rem;
    color: #9c9080;
    font-style: italic;
}