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

body {
    overflow: hidden;
    background: #1a1a1a;
    font-family: Segoe UI,system-ui,-apple-system,sans-serif
}

.hidden {
    display: none!important
}

.icon-img {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain
}

#title-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    overflow: hidden
}

.title-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%,rgba(139,90,43,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(59,41,21,.3) 0%,transparent 40%),radial-gradient(ellipse at 20% 90%,rgba(79,51,26,.2) 0%,transparent 35%),linear-gradient(180deg,#0d0d0d,#1a1510 40%,#0d0d0d);
    z-index: 0
}

.title-background:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);
    pointer-events: none
}

.title-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 40px
}

.title-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.title-emblem {
    font-size: 64px;
    filter: drop-shadow(0 0 20px rgba(212,168,75,.4));
    animation: emblem-glow 3s ease-in-out infinite
}

@keyframes emblem-glow {
    0%,to {
        filter: drop-shadow(0 0 20px rgba(212,168,75,.4))
    }

    50% {
        filter: drop-shadow(0 0 35px rgba(212,168,75,.7))
    }
}

.title-main {
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(180deg,#f4e4c4,#d4a84b,#8b5a2b);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(212,168,75,.3),0 4px 8px rgba(0,0,0,.5);
    font-family: Times New Roman,Georgia,serif;
    text-align: center;
    line-height: 1.1
}

.title-divider {
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg,transparent 0%,#d4a84b 50%,transparent 100%);
    margin: 8px 0
}

.title-tagline {
    font-size: 18px;
    color: #a09080;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 300
}

.title-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 280px
}

.title-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden
}

.title-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition: left .5s ease
}

.title-btn:hover:before {
    left: 100%
}

.title-btn .btn-icon {
    font-size: 20px
}

.title-btn-primary {
    background: linear-gradient(180deg,#5a7a4a,#3a5a30);
    color: #e0d0c0;
    border: 1px solid #6a8a5a;
    box-shadow: 0 4px 15px #0000004d,inset 0 1px #ffffff1a
}

.title-btn-primary:hover {
    background: linear-gradient(180deg,#6a8a5a,#4a6a40);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #0006,inset 0 1px #ffffff26
}

.title-btn-secondary {
    background: linear-gradient(180deg,#4a6a7a,#2a4a5a);
    color: #d0e0e0;
    border: 1px solid #5a7a8a;
    box-shadow: 0 4px 15px #0000004d,inset 0 1px #ffffff1a
}

.title-btn-secondary:hover {
    background: linear-gradient(180deg,#5a7a8a,#3a5a6a);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #0006,inset 0 1px #ffffff26
}

.title-btn-tertiary {
    background: linear-gradient(180deg,#3a3a3a,#2a2a2a);
    color: #a0a0a0;
    border: 1px solid #4a4a4a;
    box-shadow: 0 4px 15px #0000004d
}

.title-btn-tertiary:hover {
    background: linear-gradient(180deg,#4a4a4a,#3a3a3a);
    color: silver;
    transform: translateY(-2px)
}

.title-footer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%)
}

.title-version {
    font-size: 12px;
    color: #505050;
    letter-spacing: 2px
}

.back-btn {
    position: absolute;
    top: 12px;
    left: 16px;
    padding: 6px 12px;
    background: #0000004d;
    border: 1px solid #4a4a4a;
    color: #a0a0a0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s ease
}

.back-btn:hover {
    background: #00000080;
    color: #d0d0d0;
    border-color: #6a6a6a
}

#main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,#1a1a1a,#2a2520,#1a1a1a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    overflow: auto
}

#lexicon-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,#1a1a2e,#16213e,#1a1a2e);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden
}

.lexicon-screen-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 0 20px 20px;
    gap: 20px
}

.lexicon-categories-panel {
    width: 220px;
    flex-shrink: 0;
    background: #0000004d;
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto
}

.lexicon-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #ffffff0d;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all .2s;
    text-align: left
}

.lexicon-category-btn:hover {
    background: #ffd7001a;
    border-color: #ffd7004d
}

.lexicon-category-btn.active {
    background: #ffd70026;
    border-color: gold;
    color: gold
}

.lexicon-category-icon {
    font-size: 18px
}

.lexicon-category-name {
    flex: 1
}

.lexicon-category-count {
    font-size: 11px;
    color: #888;
    background: #0000004d;
    padding: 2px 6px;
    border-radius: 10px
}

.lexicon-entries-panel {
    width: 280px;
    flex-shrink: 0;
    background: #0000004d;
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto
}

.lexicon-entry-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: #ffffff08;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all .2s;
    text-align: left
}

.lexicon-entry-btn:hover {
    background: #ffd70014;
    border-color: #ffd70033
}

.lexicon-entry-btn.active {
    background: #ffd7001f;
    border-color: gold;
    color: gold
}

.lexicon-detail-panel {
    flex: 1;
    background: #0000004d;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto
}

.lexicon-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,215,0,.3)
}

.lexicon-detail-icon {
    font-size: 36px
}

.lexicon-detail-title {
    font-size: 22px;
    color: gold;
    margin: 0
}

.lexicon-detail-content {
    line-height: 1.7;
    color: #ddd;
    white-space: pre-line
}

.lexicon-detail-content strong {
    color: gold
}

.lexicon-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    text-align: center
}

.lexicon-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: .5
}

.menu-header {
    text-align: center;
    padding: 10px 20px 8px
}

.menu-layout {
    display: flex;
    gap: 24px;
    padding: 0 30px 20px;
    max-width: 1400px;
    width: 96vw;
    max-height: calc(100vh - 80px);
    flex: 1
}

.map-panel {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column
}

.map-preview-container {
    flex: 1;
    background: #1a1a1a;
    border-bottom: 1px solid #3d3d3d;
    min-height: 320px;
    position: relative;
    overflow: hidden
}

#map-preview {
    width: 100%;
    height: 100%;
    display: block
}

.map-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #2a2a2a
}

.seed-display {
    font-size: 12px;
    color: #908070;
    display: flex;
    align-items: center;
    gap: 6px
}

.seed-label {
    margin-right: 2px
}

.seed-input {
    font-family: monospace;
    color: #d4a84b;
    font-weight: 600;
    font-size: 12px;
    background: #252525;
    border: 1px solid #404040;
    border-radius: 3px;
    padding: 4px 8px;
    width: 100px
}

.seed-input:focus {
    outline: none;
    border-color: #d4a84b
}

.seed-btn {
    padding: 4px 8px;
    font-size: 11px;
    color: #90c090;
    background: #303030;
    border: 1px solid #404040;
    border-radius: 3px;
    cursor: pointer
}

.seed-btn:hover {
    background: #404040;
    color: #b0e0b0
}

.reroll-btn {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#404040,#353535);
    border: 1px solid #505050;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.reroll-btn:hover {
    background: linear-gradient(180deg,#4a4a4a,#404040);
    color: #e0d0c0;
    border-color: #606060
}

.char-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.char-columns {
    display: flex;
    gap: 0;
    flex: 1;
    overflow-y: auto
}

.char-columns::-webkit-scrollbar {
    width: 8px
}

.char-columns::-webkit-scrollbar-track {
    background: #1a1a1a
}

.char-columns::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 4px
}

.char-column {
    flex: 1;
    display: flex;
    flex-direction: column
}

.char-column:first-child {
    border-right: 1px solid #3d3d3d
}

.char-column:last-child {
    display: flex;
    flex-direction: column
}

.char-column:last-child .menu-section:last-of-type {
    flex: 1;
    display: flex;
    flex-direction: column
}

.game-title {
    font-size: 24px;
    font-weight: 700;
    color: #d4a84b;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    margin-bottom: 4px;
    letter-spacing: 2px
}

.game-subtitle {
    font-size: 12px;
    color: #806040;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase
}

.menu-panel {
    background: #2d2d2d;
    border: 2px solid #3d3d3d;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    height: 100%
}

.menu-panel .panel-header {
    background: linear-gradient(180deg,#5c3a3a,#4a2e2e);
    color: #e8d4c4;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #3d2a2a
}

.menu-section {
    padding: 16px 20px;
    border-bottom: 1px solid #3d3d3d
}

.menu-section:last-of-type {
    border-bottom: none
}

.menu-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #a08060;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.points-remaining {
    color: #d4a84b;
    text-transform: none
}

.menu-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: #e8d4c4;
    background: #222;
    border: 1px solid #444;
    border-radius: 3px;
    outline: none;
    transition: border-color .15s
}

.menu-input:focus {
    border-color: #5c3a3a
}

.menu-input.invalid {
    border-color: #8b4040;
    background: #2a2222
}

.menu-input::placeholder {
    color: #605040
}

.debug-section {
    padding: 8px 20px;
    background: #503c2833;
    border: 1px dashed rgba(180,140,60,.3);
    border-radius: 4px;
    margin: 8px 0
}

.debug-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.debug-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #b4a040
}

.debug-checkbox-text {
    font-size: 11px;
    color: #a08060;
    font-style: italic
}

.race-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.race-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: linear-gradient(180deg,#353535,#2a2a2a);
    border: 2px solid #404040;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.race-btn:hover {
    background: linear-gradient(180deg,#404040,#353535);
    border-color: #505050
}

.race-btn.selected {
    background: linear-gradient(180deg,#4a3535,#3d2a2a);
    border-color: #6a4a4a
}

.race-icon {
    font-size: 24px;
    margin-bottom: 4px
}

.race-name {
    font-size: 10px;
    color: #a09080;
    text-align: center
}

.race-btn.selected .race-name {
    color: #d0c0b0
}

.class-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 6px
}

.class-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: linear-gradient(180deg,#353535,#2a2a2a);
    border: 2px solid #404040;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.class-btn:hover {
    background: linear-gradient(180deg,#404040,#353535);
    border-color: #505050
}

.class-btn.selected {
    background: linear-gradient(180deg,#3a4a3a,#2a3a2a);
    border-color: #4a6a4a
}

.class-icon {
    font-size: 18px;
    margin-bottom: 2px
}

.class-name {
    font-size: 9px;
    font-weight: 600;
    color: #b0a090;
    text-align: center
}

.class-btn.selected .class-name {
    color: #d0e0c0
}

.class-desc {
    font-size: 9px;
    color: #706050;
    text-align: center;
    margin-top: 2px
}

.spawn-grid {
    display: flex;
    gap: 8px
}

.spawn-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: #2a2a28;
    border: 1px solid #4a4a48;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s
}

.spawn-btn:hover {
    background: #3a3a38;
    border-color: #6a6a68
}

.spawn-btn.selected {
    background: linear-gradient(135deg,#3a4a3a,#2a3a2a);
    border-color: #6a8a6a;
    box-shadow: 0 0 8px #64b4644d
}

.spawn-icon {
    font-size: 20px;
    margin-bottom: 4px
}

.spawn-name {
    font-size: 11px;
    font-weight: 600;
    color: #b0a090
}

.spawn-btn.selected .spawn-name {
    color: #d0e0c0
}

.stats-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px
}

.stat-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: #333;
    border-radius: 2px;
    font-size: 12px
}

.stat-preview-row span:first-child {
    color: #908070
}

.stat-preview-row span:last-child {
    color: #d4a84b;
    font-weight: 600
}

.menu-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: #e8d4c4;
    background: #222;
    border: 1px solid #444;
    border-radius: 3px;
    outline: none;
    cursor: pointer
}

.menu-select option {
    background: #2a2a2a;
    color: #e8d4c4
}

.class-perks-section {
    padding-bottom: 12px!important
}

.class-perks {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.perk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(90deg,#2a3a2a,#2d2d2d);
    border-left: 3px solid #4a6a4a;
    border-radius: 2px
}

.perk-icon {
    font-size: 14px;
    flex-shrink: 0
}

.perk-text {
    font-size: 11px;
    color: #b0c0a0;
    line-height: 1.3
}

.start-btn {
    width: 100%;
    padding: 16px;
    margin-top: auto;
    font-size: 16px;
    font-weight: 600;
    color: #e8d4c4;
    background: linear-gradient(180deg,#5c3a3a,#4a2e2e);
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all .15s
}

.start-btn:hover {
    background: linear-gradient(180deg,#6c4a4a,#5a3e3e)
}

.start-btn:active {
    background: linear-gradient(180deg,#4a2e2e,#5c3a3a)
}

.start-btn:disabled {
    background: linear-gradient(180deg,#3a3a3a,#2d2d2d);
    color: #606060;
    cursor: not-allowed
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto
}

.continue-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #c4d8e8;
    background: linear-gradient(180deg,#3a4a5c,#2e3a4a);
    border: 1px solid #4a5a6c;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all .15s
}

.continue-btn:hover {
    background: linear-gradient(180deg,#4a5a6c,#3e4e5e)
}

.continue-btn:active {
    background: linear-gradient(180deg,#2e3a4a,#3a4a5c)
}

.continue-btn .save-info {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .5px;
    color: #8a9aa8;
    margin-top: 4px;
    text-transform: none
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

#game-ui-left,#game-ui-right {
    position: fixed;
    top: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden
}

#game-ui-left {
    left: 10px;
    width: 240px
}

#game-ui-right {
    right: 10px;
    width: 260px
}

#game-ui-left::-webkit-scrollbar,#game-ui-right::-webkit-scrollbar {
    width: 5px
}

#game-ui-left::-webkit-scrollbar-track,#game-ui-right::-webkit-scrollbar-track {
    background: transparent
}

#game-ui-left::-webkit-scrollbar-thumb,#game-ui-right::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 3px
}

.ui-panel {
    background: #2d2d2d;
    border: 2px solid #3d3d3d;
    border-radius: 4px;
    overflow: hidden
}

.ui-panel.hidden {
    display: none
}

.panel-header {
    background: linear-gradient(180deg,#5c3a3a,#4a2e2e);
    color: #e8d4c4;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #3d2a2a
}

.panel-content {
    padding: 10px
}

#time-panel .panel-content {
    text-align: center;
    padding: 8px
}

#time-display {
    font-size: 17px;
    font-weight: 600;
    color: #e8d4c4
}

#time-period {
    font-size: 10px;
    color: #a89080;
    margin-top: 2px
}

#time-period.night {
    color: #8090c0
}

.player-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px 2px;
    background: #363636
}

#player-name {
    font-size: 13px;
    font-weight: 600;
    color: #e8d4c4
}

.player-level {
    font-size: 11px;
    font-weight: 600;
    color: #80c0a0;
    background: #2a3530;
    padding: 2px 6px;
    border-radius: 3px
}

#player-race {
    font-size: 10px;
    color: #908070;
    text-align: center;
    padding: 0 8px 6px;
    background: #363636;
    border-bottom: 1px solid #444;
    text-transform: capitalize
}

#player-location {
    font-size: 10px;
    color: #a89080;
    text-align: center;
    padding: 5px;
    background: #333;
    cursor: pointer;
    transition: all .15s
}

#player-location:hover {
    background: #3a3a3a;
    color: #c8b8a8
}

#player-status {
    font-size: 10px;
    color: #807060;
    text-align: center;
    padding: 3px;
    background: #2a2a2a;
    border-bottom: 1px solid #3d3d3d
}

#player-status.traveling {
    color: #80a0c0
}

.conditions-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
    background: #252525;
    min-height: 0;
    border-bottom: 1px solid #3d3d3d
}

.conditions-display:empty {
    display: none
}

.condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    color: #fff;
    background: #0006;
    border: 1px solid currentColor;
    animation: condition-pulse 2s ease-in-out infinite
}

.condition-badge .condition-icon {
    font-size: 11px
}

.condition-badge .condition-name {
    font-weight: 500
}

.condition-badge .condition-timer {
    font-size: 9px;
    opacity: .8
}

@keyframes condition-pulse {
    0%,to {
        opacity: .9
    }

    50% {
        opacity: 1
    }
}

.stat-bars {
    display: flex;
    flex-direction: column
}

.stat-row {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: #333;
    border-bottom: 1px solid #3d3d3d
}

.stat-row:nth-child(odd) {
    background: #2d2d2d
}

.stat-label {
    font-size: 10px;
    font-weight: 500;
    color: #a89080;
    flex: 1
}

.stat-bar {
    width: 80px;
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 8px
}

.stat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .2s
}

.stat-fill.health {
    background: linear-gradient(90deg,#8b4040,#a05050)
}

.stat-fill.stamina {
    background: linear-gradient(90deg,#8b7040,#a08050)
}

.stat-fill.ether {
    background: linear-gradient(90deg,#6060a0,#8080c0)
}

.survival-stats-divider {
    height: 1px;
    background: #6464644d;
    margin: 4px 0
}

.survival-row {
    opacity: .9
}

.survival-row .stat-label {
    font-size: .75em
}

.survival-bar {
    height: 6px!important
}

.stat-fill.hunger {
    background: linear-gradient(90deg,#c08040,#e0a060)
}

.stat-fill.thirst {
    background: linear-gradient(90deg,#4080c0,#60a0e0)
}

.stat-fill.energy {
    background: linear-gradient(90deg,#80a040,#a0c060)
}

.survival-value {
    font-size: .75em;
    min-width: 25px
}

.survival-row.warning .stat-bar {
    box-shadow: 0 0 3px #c8b43280
}

.survival-row.low .stat-bar {
    box-shadow: 0 0 4px #c86432b3
}

.survival-row.critical .stat-bar {
    box-shadow: 0 0 5px #c83232e6;
    animation: survival-pulse 1s ease-in-out infinite
}

@keyframes survival-pulse {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .7
    }
}

.stat-fill.xp {
    background: linear-gradient(90deg,#40a080,#60c0a0)
}

.xp-row {
    background: #2a2a35!important
}

.xp-row .stat-label {
    color: #80c0a0
}

.attribute-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #3d3d3d;
    border-top: 1px solid #3d3d3d
}

.attr-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #2d2d2d;
    cursor: pointer;
    transition: background .15s
}

.attr-item:hover {
    background: #383838
}

.attr-item:nth-child(odd) {
    background: #333
}

.attr-item:nth-child(odd):hover {
    background: #3d3d3d
}

.attr-icon {
    font-size: 12px;
    opacity: .8
}

.attr-label {
    font-size: 10px;
    color: #908070;
    flex: 1
}

.attr-value {
    font-size: 12px;
    font-weight: 600;
    color: #d4a84b;
    min-width: 20px;
    text-align: right
}

.stat-fill.travel {
    background: linear-gradient(90deg,#406080,#507090)
}

.stat-value {
    font-size: 11px;
    color: #c0b0a0;
    width: 55px;
    text-align: right;
    font-weight: 500
}

#player-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 14px;
    color: #d4a84b;
    font-weight: 600;
    background: #2a2a2a
}

#actions-panel {
    flex-shrink: 0
}

#actions-panel .panel-content,.actions-panel-content {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.actions-panel-content:empty:after {
    content: "No actions available";
    color: #666;
    font-size: 11px;
    font-style: italic;
    text-align: center;
    padding: 10px
}

.actions-panel-content .location-btn {
    margin-top: 0;
    padding: 9px 10px;
    font-size: 11px
}

#action-buttons {
    display: flex;
    gap: 4px
}

.action-btn {
    flex: 1;
    padding: 9px 11px;
    font-size: 13px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#404040,#353535);
    border: 1px solid #505050;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.action-btn:hover {
    background: linear-gradient(180deg,#4a4a4a,#404040);
    color: #e0d0c0;
    border-color: #707060;
    box-shadow: 0 0 10px #b4a07833
}

.action-btn:active {
    background: linear-gradient(180deg,#353535,#404040)
}

.action-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

#wait-btn.stopped {
    background: linear-gradient(180deg,#4a6b3a,#3d5a2f);
    border-color: #5a8b4a
}

#wait-btn.stopped:hover {
    background: linear-gradient(180deg,#5a8b4a,#4a6b3a)
}

#location-actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3d3d3d
}

#location-actions:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: none
}

.location-btn {
    width: 100%;
    margin-top: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #d0c0b0;
    background: linear-gradient(180deg,#4a4040,#3d3535);
    border: 1px solid #5a4a4a;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.location-btn:first-child {
    margin-top: 0
}

.location-btn:hover {
    background: linear-gradient(180deg,#5a4a4a,#4a4040);
    color: #e8d8c8;
    border-color: #6a5a5a
}

.location-btn.gather,.location-btn.resource-action-direct {
    background: linear-gradient(180deg,#405040,#354535);
    border-color: #4a5a4a;
    color: #c0d0b0
}

.location-btn.gather:hover,.location-btn.resource-action-direct:hover:not(:disabled) {
    background: linear-gradient(180deg,#4a5a4a,#405040);
    color: #d0e0c0;
    box-shadow: 0 0 8px #78a06440
}

.location-btn.resource-action-direct {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.location-btn.resource-action-direct .resource-count {
    font-size: 12px;
    opacity: .8;
    background: #0003;
    padding: 2px 7px;
    border-radius: 8px
}

.location-btn.resource-action-direct:disabled {
    opacity: .5;
    cursor: not-allowed
}

.location-btn.water {
    background: linear-gradient(180deg,#405060,#354555);
    border-color: #4a6070;
    color: #b0d0e0
}

.location-btn.water:hover {
    background: linear-gradient(180deg,#4a6070,#405060);
    color: #c0e0f0
}

.location-btn.chest {
    background: linear-gradient(180deg,#6a5020,#5a4018);
    border-color: #8a6828;
    color: #e8d8a0
}

.location-btn.chest:hover {
    background: linear-gradient(180deg,#7a6028,#6a5020);
    color: #f8e8b0;
    box-shadow: 0 0 8px #e8d8a04d
}

.action-progress {
    padding: 10px;
    background: #252525;
    border-radius: 4px;
    margin-bottom: 10px
}

.action-progress.hidden {
    display: none
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #a09080;
    margin-bottom: 6px
}

#progress-action-name {
    font-weight: 600;
    color: #c0b0a0
}

#progress-percent {
    color: #d4a84b
}

.progress-bar {
    height: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#5c8a5c,#7ab07a);
    border-radius: 4px;
    transition: width .05s linear
}

.cancel-btn {
    width: 100%;
    padding: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #a08080;
    background: linear-gradient(180deg,#3a3030,#302828);
    border: 1px solid #4a3a3a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.cancel-btn:hover {
    background: linear-gradient(180deg,#4a3a3a,#3a3030);
    color: #c0a0a0
}

.action-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px
}

.town-actions {
    border-top: 1px solid #3d3d3d;
    padding-top: 6px
}

.town-actions.hidden {
    display: none
}

.action-category {
    margin-bottom: 6px
}

.action-category:last-child {
    margin-bottom: 0
}

.category-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #706050;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4px
}

.town-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    font-size: 9px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#383838,#2d2d2d);
    border: 1px solid #484848;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.town-btn:hover {
    background: linear-gradient(180deg,#424242,#383838);
    color: #e0d0c0;
    border-color: #686858;
    box-shadow: 0 0 10px #b4a07833
}

.town-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.town-btn .btn-icon {
    font-size: 12px;
    margin-bottom: 2px
}

.town-btn .btn-label {
    text-align: center;
    font-size: 8px
}

.town-btn.work {
    background: linear-gradient(180deg,#404838,#353d30);
    border-color: #505840
}

.town-btn.work:hover {
    background: linear-gradient(180deg,#4a5240,#404838)
}

.town-btn.volunteer {
    background: linear-gradient(180deg,#384048,#303540);
    border-color: #405058
}

.town-btn.volunteer:hover {
    background: linear-gradient(180deg,#404a52,#384048)
}

#inventory-panel {
    flex-shrink: 0
}

#inventory-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.crafting-btn {
    background: linear-gradient(180deg,#504030,#403020);
    border: 1px solid #605040;
    border-radius: 3px;
    color: #d0b080;
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 8px
}

.crafting-btn:hover {
    background: linear-gradient(180deg,#605040,#504030);
    color: #e0c090
}

.inventory-weight {
    font-size: 10px;
    color: #a08060;
    font-weight: 400
}

.inventory-weight.over-weight {
    color: #c06050
}

.crafting-content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.crafting-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #404040
}

.crafting-tab {
    padding: 5px 10px;
    font-size: 11px;
    background: #32302d99;
    border: 1px solid rgba(70,65,60,.5);
    border-radius: 4px;
    color: #a09080;
    cursor: pointer;
    transition: all .15s ease
}

.crafting-tab:hover {
    background: #3c3732b3;
    color: #c0b090;
    border-color: #5a504699
}

.crafting-tab.active {
    background: linear-gradient(180deg,#464137cc,#37322acc);
    color: #d4c4a0;
    border-color: #786e5099;
    box-shadow: 0 0 8px #b4a06433
}

.crafting-recipes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto
}

.recipe-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #2d2a2899;
    border: 1px solid rgba(65,60,55,.5);
    border-radius: 5px;
    transition: all .15s ease
}

.recipe-item:hover {
    background: #37322db3;
    border-color: #504b4199
}

.recipe-item.craftable {
    border-color: #50645099;
    background: #2a373099
}

.recipe-icon {
    font-size: 20px;
    width: 32px;
    text-align: center
}

.recipe-info {
    flex: 1
}

.recipe-name {
    font-weight: 600;
    color: #d0c0a0;
    font-size: 12px
}

.recipe-ingredients {
    font-size: 10px;
    color: #908070;
    margin-top: 2px
}

.recipe-ingredients .has {
    color: #80a080
}

.recipe-ingredients .missing {
    color: #a06060
}

.recipe-station {
    font-size: 9px;
    color: #707080;
    margin-top: 2px
}

.craft-btn {
    padding: 4px 12px;
    background: linear-gradient(180deg,#405040,#354535);
    border: 1px solid #506050;
    border-radius: 3px;
    color: #c0d0b0;
    font-size: 11px;
    cursor: pointer
}

.craft-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#4a5a4a,#405040)
}

.craft-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.chest-content {
    padding: 15px
}

.chest-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #454535
}

.chest-icon {
    font-size: 32px
}

.chest-title {
    font-size: 16px;
    font-weight: 600;
    color: #e8d8a0
}

.chest-loot {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.chest-gold {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg,#4a4020,#3a3018);
    border: 1px solid #6a5028;
    border-radius: 4px;
    font-size: 14px;
    color: #f0d870
}

.chest-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto
}

.chest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #303030;
    border: 1px solid #404040;
    border-radius: 4px
}

.chest-item-icon {
    font-size: 18px;
    width: 28px;
    text-align: center
}

.chest-item-name {
    flex: 1;
    color: #c0b090;
    font-size: 12px
}

.chest-item-qty {
    color: #90a090;
    font-size: 11px
}

.chest-recipe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg,#352050,#2a1840);
    border: 1px solid #503870;
    border-radius: 4px;
    font-size: 12px;
    color: #c0a0e0
}

.chest-take-all {
    margin-top: 15px;
    padding: 10px 20px;
    width: 100%;
    background: linear-gradient(180deg,#4a5040,#3a4030);
    border: 1px solid #5a6050;
    border-radius: 4px;
    color: #d0c0a0;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease
}

.chest-take-all:hover {
    background: linear-gradient(180deg,#5a6050,#4a5040);
    color: #e0d0b0
}

.inventory-items {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px
}

.inventory-items::-webkit-scrollbar {
    width: 5px
}

.inventory-items::-webkit-scrollbar-track {
    background: #252525
}

.inventory-items::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 3px
}

.inventory-empty {
    color: #606060;
    font-size: 9px;
    text-align: center;
    padding: 12px;
    font-style: italic
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: #32302d99;
    border: 1px solid rgba(70,65,60,.4);
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s ease
}

.inventory-item:hover {
    background: #413c37b3;
    border-color: #5a504680;
    box-shadow: 0 0 8px #b4a07826
}

.inventory-item:last-child {
    margin-bottom: 0
}

.inv-icon {
    font-size: 16px;
    width: 22px;
    text-align: center
}

.inv-name {
    flex: 1;
    font-size: 13px;
    color: #c0b0a0
}

.inv-quantity {
    font-size: 12px;
    color: #a08060;
    font-weight: 600
}

.inv-weight {
    font-size: 11px;
    color: #707070
}

.inventory-item.tool .inv-name {
    color: #8090c0
}

.inventory-item.consumable .inv-name {
    color: #90b080
}

.inventory-item.food .inv-name {
    color: #c0a070
}

.inventory-item.material .inv-name {
    color: #a09080
}

.inventory-item.trade .inv-name {
    color: #c0a050
}

.inventory-item.equipment .inv-name {
    color: #c09070
}

.inventory-item.usable .inv-name {
    color: #80b0a0
}

.torch-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: linear-gradient(135deg,#2a2520,#1a1815);
    border: 1px solid #3d3530;
    border-radius: 4px;
    margin-bottom: 6px
}

.torch-status .torch-icon {
    font-size: 14px
}

.torch-status .torch-count {
    font-size: 12px;
    color: #908070;
    min-width: 28px
}

.torch-status .torch-lit {
    font-size: 10px;
    color: #f0a040;
    font-weight: 600;
    flex: 1
}

.torch-status .torch-unlit {
    font-size: 10px;
    color: #606060;
    flex: 1
}

.torch-status .torch-btn {
    padding: 3px 8px;
    font-size: 9px;
    background: #3d3530;
    border: 1px solid #504540;
    border-radius: 3px;
    color: #d0b090;
    cursor: pointer;
    transition: all .15s
}

.torch-status .torch-btn:hover {
    background: #504540;
    border-color: #706050
}

.ui-panel.collapsible .panel-header:hover {
    background: linear-gradient(180deg,#6a4a4a,#5a3e3e)
}

.ui-panel.collapsible .panel-body.collapsed {
    display: none
}

.panel-count {
    font-size: 9px;
    color: #a08060;
    font-weight: 400
}

.panel-empty {
    color: #606060;
    font-size: 9px;
    text-align: center;
    padding: 8px;
    font-style: italic
}

.panel-btn {
    width: 100%;
    padding: 5px;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#404040,#353535);
    border: 1px solid #505050;
    border-radius: 3px;
    cursor: pointer
}

.section-label {
    font-size: 8px;
    font-weight: 600;
    color: #706050;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 6px 0 4px;
    padding-top: 4px;
    border-top: 1px solid #3d3d3d
}

.citizens-list {
    max-height: 80px;
    overflow-y: auto
}

.citizen-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #333;
    border-radius: 4px;
    cursor: pointer
}

.citizen-item:hover {
    background: #3d3d3d
}

.citizen-icon {
    font-size: 16px
}

.citizen-info {
    flex: 1;
    min-width: 0
}

.citizen-name {
    font-size: 13px;
    color: #c0b0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.citizen-role {
    font-size: 11px;
    color: #808070;
    text-transform: capitalize
}

.citizen-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #2a2a2a;
    color: #707060
}

.citizen-status.working,.citizen-status.gathering {
    background: #2a3a2a;
    color: #70a070
}

.citizen-status.idle {
    background: #3a3a2a;
    color: #a0a060
}

.citizen-status.traveling_to_resource,.citizen-status.traveling_to_storage {
    background: #2a2a3a;
    color: #7070a0
}

.citizen-status.depositing {
    background: #3a2a2a;
    color: #a08060
}

.mini-bar.carry {
    background: #2a2520
}

.mini-fill.carry {
    background: linear-gradient(90deg,#6a5a4a,#8a6a4a)
}

.guilds-list {
    max-height: 60px;
    overflow-y: auto
}

.guild-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 3px;
    background: #32302d99;
    border: 1px solid rgba(70,65,60,.4);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s ease
}

.guild-item:hover {
    background: #413c37b3;
    border-color: #5a504680;
    box-shadow: 0 0 8px #b4a07826
}

.guild-icon {
    font-size: 12px
}

.guild-info {
    flex: 1
}

.guild-name {
    font-size: 9px;
    color: #c0b0a0
}

.guild-rank {
    font-size: 8px;
    color: #808070
}

.guild-rep {
    font-size: 8px;
    color: #a08060
}

.contracts-list {
    max-height: 50px;
    overflow-y: auto
}

.contract-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    margin-bottom: 2px;
    background: #2d2d2d;
    border-radius: 2px;
    border-left: 2px solid #505050
}

.contract-name {
    flex: 1;
    font-size: 8px;
    color: #a09080
}

.contract-reward {
    font-size: 8px;
    color: #c4a84b
}

.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto
}

.game-modal.hidden {
    display: none
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000b3;
    animation: backdropFadeIn .2s ease-out forwards
}

.game-modal.closing .modal-backdrop {
    animation: backdropFadeOut .2s ease-in forwards
}

@keyframes backdropFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes backdropFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.modal-content {
    position: relative;
    background: linear-gradient(180deg,#2d2a28,#252320);
    border: 2px solid #4a4540;
    border-radius: 10px;
    min-width: 380px;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 10px 40px #0009,0 4px 12px #000c,inset 0 1px #ffffff0d,inset 0 -1px #0000004d;
    animation: modalSlideIn .25s cubic-bezier(.34,1.56,.64,1) forwards;
    transform-origin: center center
}

.game-modal.closing .modal-content {
    animation: modalSlideOut .2s cubic-bezier(.55,0,1,.45) forwards
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(.8) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes modalSlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }

    to {
        opacity: 0;
        transform: scale(.85) translateY(15px)
    }
}

.game-modal.no-animate .modal-content,.game-modal.no-animate .modal-backdrop {
    animation: none
}

.game-modal:has(.location-actions-modal) .modal-content {
    max-width: 600px;
    transform: scale(1.15);
    transition: transform .2s ease
}

.town-modal-stats-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    padding: 10px 20px;
    margin-bottom: 14px;
    background: linear-gradient(135deg,#1a1815,#252220);
    border: 1px solid #3a3530;
    border-radius: 6px
}

.town-modal-stats-header .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #0003;
    border-radius: 4px
}

.town-modal-stats-header .stat-icon {
    font-size: 16px
}

.town-modal-stats-header .stat-value {
    font-size: 15px;
    font-weight: 600;
    min-width: 32px
}

.town-modal-stats-header .stat-item.gold .stat-value {
    color: #d4af37
}

.town-modal-stats-header .stat-item.prestige .stat-value {
    color: #c090d0
}

.town-modal-stats-header .stat-item.trust .stat-value {
    color: #90c0a0
}

.town-modal-stats-header .stat-item.influence .stat-value {
    color: #a0b0d0
}

.town-name-display {
    font-size: 15px;
    font-weight: 600;
    color: #e8d4c4;
    letter-spacing: .5px;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,.1);
    margin-right: 8px
}

.town-attributes-bar {
    display: flex;
    justify-content: center;
    padding: 8px;
    background: #19171599;
    border-radius: 4px
}

.radar-chart-container {
    position: relative;
    width: 260px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center
}

.radar-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.radar-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.radar-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: auto;
    cursor: pointer;
    transition: transform .15s ease
}

.radar-label:hover {
    transform: scale(1.05)
}

.radar-label[data-position="0"] {
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.radar-label[data-position="1"] {
    top: 18%;
    right: 0;
    align-items: flex-start
}

.radar-label[data-position="2"] {
    top: 52%;
    right: 0;
    align-items: flex-start
}

.radar-label[data-position="3"] {
    bottom: 5%;
    right: 12%;
    align-items: flex-start
}

.radar-label[data-position="4"] {
    bottom: 5%;
    left: 12%;
    align-items: flex-end
}

.radar-label[data-position="5"] {
    top: 52%;
    left: 0;
    align-items: flex-end
}

.radar-label[data-position="6"] {
    top: 18%;
    left: 0;
    align-items: flex-end
}

.radar-label[data-position="0"]:hover {
    transform: translate(-50%) scale(1.05)
}

.radar-label-name {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap
}

.radar-label-icon {
    font-size: 12px
}

.radar-label-text {
    font-size: 10px;
    font-weight: 500;
    color: #c0b0a0;
    text-transform: capitalize
}

.radar-label-text.dormant {
    color: #666;
    opacity: .6
}

.radar-dots {
    display: flex;
    gap: 1px
}

.radar-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transition: transform .1s ease
}

.radar-label:hover .radar-dot {
    transform: scale(1.2)
}

.radar-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%);
    background: linear-gradient(135deg,#23201cfa,#191612fa);
    border: 1px solid rgba(120,100,80,.5);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 140px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease,visibility .2s ease;
    box-shadow: 0 4px 20px #00000080
}

.radar-tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border: 5px solid transparent;
    border-top-color: #78645080
}

.radar-label:hover .radar-tooltip {
    opacity: 1;
    visibility: visible
}

.radar-label[data-position="1"] .radar-tooltip,.radar-label[data-position="2"] .radar-tooltip,.radar-label[data-position="3"] .radar-tooltip {
    left: auto;
    right: 100%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px
}

.radar-label[data-position="1"] .radar-tooltip:after,.radar-label[data-position="2"] .radar-tooltip:after,.radar-label[data-position="3"] .radar-tooltip:after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #78645080
}

.radar-label[data-position="0"] .radar-tooltip {
    bottom: auto;
    top: calc(100% + 8px)
}

.radar-label[data-position="0"] .radar-tooltip:after {
    top: auto;
    bottom: 100%;
    border: 5px solid transparent;
    border-top-color: transparent;
    border-bottom-color: #78645080
}

.radar-label[data-position="4"] .radar-tooltip,.radar-label[data-position="5"] .radar-tooltip,.radar-label[data-position="6"] .radar-tooltip {
    left: 100%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px
}

.radar-label[data-position="4"] .radar-tooltip:after,.radar-label[data-position="5"] .radar-tooltip:after,.radar-label[data-position="6"] .radar-tooltip:after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #78645080
}

.attr-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%);
    background: linear-gradient(135deg,#23201cfa,#191612fa);
    border: 1px solid rgba(120,100,80,.5);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 180px;
    max-width: 240px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease,visibility .2s ease,transform .2s ease;
    box-shadow: 0 4px 20px #00000080,0 0 1px #ffdcb41a
}

.attr-tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border: 6px solid transparent;
    border-top-color: #78645080
}

.town-attr-item:hover .attr-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%) translateY(-4px)
}

.tooltip-title {
    font-size: 11px;
    font-weight: 600;
    color: #e8d8c0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px
}

.tooltip-level {
    font-size: 10px;
    color: #c8b898;
    margin-bottom: 6px;
    font-weight: 500
}

.tooltip-status {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px
}

.tooltip-status.dormant {
    background: #50463c99;
    color: #888
}

.tooltip-xp-bar {
    height: 4px;
    background: #3c3732cc;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px
}

.tooltip-xp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease
}

.tooltip-xp-text {
    font-size: 9px;
    color: #a09080;
    margin-bottom: 4px
}

.tooltip-desc {
    font-size: 10px;
    color: #908878;
    line-height: 1.4;
    border-top: 1px solid rgba(100,85,70,.3);
    padding-top: 8px;
    margin-top: 4px
}

.citizen-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
    background: linear-gradient(135deg,#23201cfa,#191612fa);
    border: 1px solid rgba(120,100,80,.5);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 200px;
    max-width: 280px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease,visibility .2s ease,transform .2s ease;
    box-shadow: 0 4px 20px #00000080
}

.citizen-tooltip:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #78645080
}

.citizen-row:hover .citizen-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translate(4px)
}

.tooltip-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px
}

.tooltip-skill-tag {
    font-size: 9px;
    padding: 2px 6px;
    background: #463c3299;
    border-radius: 3px;
    color: #c8b898
}

.tooltip-skill-tag.primary {
    background: #645546cc;
    color: #e8d8c0;
    font-weight: 500
}

.tooltip-yield {
    font-size: 10px;
    color: #a0c080;
    padding: 4px 8px;
    background: #3c50324d;
    border-radius: 4px;
    margin-bottom: 6px
}

.tooltip-attr-contrib {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.tooltip-attr-icon {
    font-size: 12px;
    padding: 2px 4px;
    background: #322d2899;
    border-radius: 3px
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
    gap: 8px;
    padding: 8px
}

.facility-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: #322d2899;
    border-radius: 6px;
    border: 1px solid rgba(70,60,55,.4);
    cursor: pointer;
    transition: all .2s ease
}

.facility-item:hover {
    background: #3c3730cc;
    border-color: #64554699
}

.facility-icon {
    font-size: 20px;
    margin-bottom: 4px
}

.facility-name {
    font-size: 10px;
    color: #b8a888;
    text-align: center;
    line-height: 1.2
}

.facilities-header {
    font-size: 14px;
    font-weight: 600;
    color: #d4c4a8;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(100,85,70,.4)
}

.facilities-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0
}

.facility-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #322d28b3;
    border-radius: 8px;
    border: 1px solid rgba(70,60,55,.5);
    transition: all .2s ease
}

.facility-card:hover {
    background: #3c3730cc;
    border-color: #64554699
}

.facility-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.facility-icon-large {
    font-size: 28px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1c1a80;
    border-radius: 6px
}

.facility-title-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0
}

.facility-info .facility-name,.facility-card .facility-name {
    font-size: 13px;
    font-weight: 600;
    color: #d4c4a8;
    text-align: left
}

.facility-desc {
    font-size: 10px;
    color: #908070;
    margin-top: 2px
}

.facility-effects-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px
}

.facility-effect-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: #648c5033;
    border-radius: 3px;
    color: #8a9a70;
    border: 1px solid rgba(100,140,80,.3)
}

.facility-effect-badge.boolean {
    background: #5078a033;
    border-color: #5078a04d;
    color: #7a9ab0
}

.facility-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(70,60,55,.3)
}

.facility-task-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 11px;
    background: linear-gradient(180deg,#504637cc,#3c3228cc);
    border: 1px solid rgba(100,85,70,.5);
    border-radius: 4px;
    color: #d4c4a8;
    cursor: pointer;
    transition: all .15s ease
}

.facility-task-btn:hover {
    background: linear-gradient(180deg,#645a46e6,#504637e6);
    border-color: #826e5a99
}

.facility-task-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.facility-task-cost {
    font-size: 10px;
    color: #e8a945
}

.facility-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: #28262399;
    border-radius: 5px;
    border: 1px solid rgba(60,55,50,.4)
}

.facility-task-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0
}

.facility-task-icon {
    font-size: 16px;
    flex-shrink: 0
}

.facility-task-name {
    font-size: 11px;
    font-weight: 500;
    color: #d4c4a8;
    white-space: nowrap
}

.facility-task-meta {
    font-size: 10px;
    color: #908070;
    white-space: nowrap
}

.facility-task-assign {
    flex-shrink: 0
}

.facility-citizen-select {
    padding: 4px 8px;
    font-size: 10px;
    background: #322d28cc;
    border: 1px solid rgba(80,70,60,.5);
    border-radius: 4px;
    color: #d4c4a8;
    cursor: pointer;
    min-width: 120px
}

.facility-citizen-select:hover:not(:disabled) {
    border-color: #78645099;
    background: #3c3730e6
}

.facility-citizen-select:disabled {
    opacity: .5;
    cursor: not-allowed
}

.facility-citizen-select option {
    background: #2a2622;
    color: #d4c4a8
}

.facility-item-detailed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #322d2899;
    border-radius: 6px;
    border: 1px solid rgba(70,60,55,.4)
}

.facility-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.facility-effects {
    font-size: 10px;
    color: #8a9a70;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.facilities-unlock-header {
    font-size: 11px;
    color: #a08060;
    margin-top: 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.facilities-unlock-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.facility-unlock-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #3c372d66;
    border-radius: 4px;
    border: 1px dashed rgba(100,85,70,.3)
}

.facility-unlock-item .facility-icon {
    font-size: 14px
}

.facility-unlock-item .facility-name {
    font-size: 10px;
    color: #908070
}

.economy-summary-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg,#2d3c3799,#23322d99);
    border-radius: 8px;
    border: 1px solid rgba(80,100,90,.4);
    margin-bottom: 16px
}

.eco-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.eco-stat {
    font-size: 12px;
    color: #c4d4b8;
    padding: 4px 8px;
    background: #28322d80;
    border-radius: 4px
}

.eco-positive {
    color: #7aaf6a
}

.eco-negative {
    color: #cf6a6a
}

.eco-warning {
    font-size: 11px;
    color: #e8a945;
    padding: 6px 10px;
    background: #64461e4d;
    border-radius: 4px;
    border: 1px solid rgba(180,130,60,.4)
}

.economy-details-btn {
    align-self: flex-end;
    padding: 6px 12px;
    font-size: 11px;
    background: #3c504699;
    border: 1px solid rgba(100,130,110,.4);
    border-radius: 4px;
    color: #b4c4a8;
    cursor: pointer;
    transition: all .2s ease
}

.economy-details-btn:hover {
    background: #465f50cc;
    border-color: #78968299
}

.economy-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px
}

.eco-section {
    background: #28262399;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(60,55,50,.4)
}

.eco-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #a08060;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(80,70,60,.3)
}

.eco-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.eco-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: #32302d99;
    border-radius: 6px;
    border: 1px solid rgba(70,65,58,.4)
}

.eco-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #d4c4a8
}

.eco-stat-label {
    font-size: 10px;
    color: #908070;
    text-transform: uppercase;
    letter-spacing: .5px
}

.eco-row {
    font-size: 12px;
    color: #b4a488;
    padding: 4px 0
}

.eco-muted {
    color: #706050;
    font-style: italic
}

.eco-balance {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.eco-balance-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #b4a488;
    padding: 4px 8px
}

.eco-balance-total {
    font-weight: 600;
    border-top: 1px solid rgba(80,70,60,.4);
    margin-top: 4px;
    padding-top: 8px
}

.eco-deficit-warning {
    background: linear-gradient(135deg,#783c2866,#64322366);
    border: 1px solid rgba(180,100,70,.5);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.eco-deficit-title {
    font-size: 13px;
    font-weight: 600;
    color: #e8a945
}

.eco-deficit-consequence {
    font-size: 11px;
    color: #cf8060
}

.eco-import-btn {
    align-self: flex-start;
    padding: 8px 16px;
    font-size: 11px;
    background: #46644699;
    border: 1px solid rgba(100,140,100,.5);
    border-radius: 4px;
    color: #a8c4a8;
    cursor: pointer;
    transition: all .2s ease
}

.eco-import-btn:hover {
    background: #507850cc;
    border-color: #78a078b3
}

.eco-history {
    font-size: 11px;
    color: #908070
}

.eco-history .eco-row {
    font-size: 11px;
    padding: 2px 0
}

.yield-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto
}

.yield-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #32302d80;
    border-radius: 4px;
    font-size: 11px
}

.yield-icon {
    font-size: 16px;
    width: 24px;
    text-align: center
}

.yield-name {
    flex: 1;
    color: #c4b49c
}

.yield-qty {
    color: #a08880;
    font-weight: 500;
    min-width: 30px;
    text-align: right
}

.yield-value {
    color: #e8b84a;
    font-weight: 500;
    min-width: 35px;
    text-align: right
}

.yield-sell-btn {
    padding: 3px 8px;
    font-size: 10px;
    background: #64503c99;
    border: 1px solid rgba(140,110,80,.5);
    border-radius: 3px;
    color: #c4a888;
    cursor: pointer;
    transition: all .2s ease
}

.yield-sell-btn:hover {
    background: #786446cc;
    border-color: #a08264b3
}

.yield-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(80,70,60,.4);
    font-size: 11px;
    color: #a89880
}

.yield-sell-all-btn {
    padding: 6px 12px;
    font-size: 11px;
    background: linear-gradient(135deg,#78643cb3,#645032b3);
    border: 1px solid rgba(160,130,90,.6);
    border-radius: 4px;
    color: #e8c888;
    cursor: pointer;
    font-weight: 500;
    transition: all .2s ease
}

.yield-sell-all-btn:hover {
    background: linear-gradient(135deg,#8c7846cc,#78643ccc);
    border-color: #b49664cc
}

.game-modal:has(.town-modal-grid) .modal-content {
    max-width: 100vw;
    min-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    border-radius: 0
}

.game-modal:has(.town-modal-grid) .modal-body {
    max-height: calc(100vh - 28px);
    height: calc(100vh - 28px);
    overflow: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column
}

.game-modal:has(.town-modal-grid) .modal-header {
    padding: 4px 12px
}

.game-modal:has(.town-modal-grid) #modal-title {
    font-size: 11px;
    opacity: .7
}

.game-modal:has(.town-modal-grid) .modal-close {
    font-size: 18px
}

.town-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 0;
    flex: 1;
    min-height: 0
}

.town-panel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,#2a2624f2,#23201ef2);
    border-radius: 8px;
    border: 1px solid rgba(70,60,55,.6);
    overflow: hidden;
    min-height: 0;
    flex: 1;
    box-shadow: 0 4px 12px #0000004d,inset 0 1px #ffffff08
}

.town-panel .panel-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg,#4a3a3a,#3a2e2e);
    border-bottom: 1px solid #4a4040;
    box-shadow: inset 0 1px #ffffff0f,0 2px 4px #0003
}

.town-panel .panel-title {
    font-size: 11px;
    font-weight: 600;
    color: #d4c4b4;
    text-transform: uppercase;
    letter-spacing: 1px
}

.town-panel .panel-count {
    font-size: 11px;
    color: #a08070;
    background: #1a1515;
    padding: 3px 8px;
    border-radius: 10px
}

.town-panel .panel-content {
    flex: 1;
    padding: 14px 14px 0;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column
}

.town-panel .panel-content .panel-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-bottom: 8px
}

.town-panel .panel-footer {
    padding: 12px 14px;
    border-top: 1px solid #3a3030;
    background: #252020;
    flex-shrink: 0;
    margin: 0 -14px
}

.town-panel .panel-action-btn {
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg,#4a5a4a,#3a4a3a);
    border: 1px solid #5a6a5a;
    border-radius: 6px;
    color: #d0e0d0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.town-panel .panel-action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#5a6a5a,#4a5a4a)
}

.town-panel .panel-action-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.town-panel .panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.town-panel .panel-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #353030;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
    position: relative
}

.town-panel .panel-list-item:hover {
    background: #403838;
    transform: translate(2px)
}

.citizen-skill-badge {
    font-size: 11px;
    margin-left: 4px;
    opacity: .8
}

.town-panel .panel-list-item .item-icon {
    font-size: 24px;
    width: 32px;
    text-align: center
}

.town-panel .panel-list-item .item-info {
    flex: 1;
    min-width: 0
}

.town-panel .panel-list-item .item-name {
    font-size: 13px;
    font-weight: 500;
    color: #e0d0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.town-panel .panel-list-item .item-sub {
    font-size: 11px;
    color: #8a7a6a;
    margin-top: 2px
}

.town-panel .panel-list-item .item-task {
    font-size: 10px;
    color: #7a9a7a;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px
}

.town-panel .panel-list-item .item-task.idle {
    color: #7a7a7a
}

.town-panel .panel-list-item .item-task.working {
    color: #9ac090
}

.town-panel .panel-list-item.exhausted {
    opacity: .6
}

.town-panel .panel-list-item .exhausted-label {
    color: #c08080;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    background: #c0808026;
    border-radius: 4px;
    margin-left: 4px
}

.town-panel .panel-list-item .role-bonus {
    font-size: 9px;
    color: #8ab080;
    background: #2a352a;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: auto
}

.town-panel .panel-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #6a5a5a;
    text-align: center;
    height: 100%
}

.town-panel .panel-empty-state .empty-icon {
    font-size: 24px;
    opacity: .5;
    margin-bottom: 8px
}

.town-panel .panel-empty-state .empty-text {
    font-size: 12px;
    font-style: italic
}

.town-panel .panel-empty-state .empty-hint {
    font-size: 10px;
    color: #5a5050;
    margin-top: 8px
}

.citizen-level {
    font-size: 10px;
    color: #9a8a7a;
    font-weight: 400;
    margin-left: 4px
}

.town-panel .action-category {
    margin-bottom: 10px
}

.town-panel .action-category:last-child {
    margin-bottom: 0
}

.town-panel .category-label {
    font-size: 11px;
    color: #8a7a6a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block
}

.town-panel .action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.town-panel .town-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 90px;
    padding: 12px 8px
}

.town-panel .town-btn .btn-icon {
    font-size: 20px
}

.town-panel .town-btn .btn-label {
    font-size: 11px
}

.card-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #4a4040;
    border-radius: 4px;
    color: #a08070;
    font-size: 10px;
    cursor: pointer;
    transition: all .15s ease
}

.card-back-btn:hover {
    background: #3a3030;
    color: #d4c4b4;
    border-color: #5a5050
}

.card-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #d4c4b4;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a3030
}

.card-subsection {
    font-size: 11px;
    color: #8a7a6a;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 12px 0 8px
}

.card-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #322d2a99;
    border: 1px solid rgba(80,70,60,.4);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all .15s ease
}

.card-task-item:hover {
    background: #3c3732b3;
    border-color: #645a4b80
}

.card-task-item.accepted {
    background: #32412d80;
    border: 1px solid rgba(90,138,74,.4);
    border-left: 3px solid #5a8a4a
}

.card-task-item.volunteer {
    background: #32324180;
    border: 1px solid rgba(74,90,130,.4)
}

.card-task-item.volunteer.accepted {
    background: #323c4b80;
    border: 1px solid rgba(74,106,138,.4);
    border-left: 3px solid #4a6a8a
}

.card-task-item .task-icon {
    font-size: 20px;
    width: 28px;
    text-align: center
}

.card-task-item .task-info {
    flex: 1;
    min-width: 0
}

.card-task-item .task-name {
    font-size: 14px;
    font-weight: 500;
    color: #e0d0c0
}

.card-task-item .task-desc {
    font-size: 12px;
    color: #8a7a6a;
    margin-top: 3px
}

.task-progress-bar {
    height: 5px;
    background: #2a2525;
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden
}

.task-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg,#5a8a4a,#7ab05a);
    border-radius: 2px;
    transition: width .3s ease
}

.card-task-item.volunteer .task-progress-bar .fill {
    background: linear-gradient(90deg,#4a6a8a,#5a8ab0)
}

.task-progress-text {
    font-size: 11px;
    color: #8a9a7a;
    margin-top: 3px
}

.task-accept-btn,.task-abandon-btn {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.task-accept-btn {
    background: linear-gradient(135deg,#4a5a4a,#3a4a3a);
    border: 1px solid #5a6a5a;
    color: #d0e0d0
}

.task-accept-btn:hover {
    background: linear-gradient(135deg,#5a6a5a,#4a5a4a)
}

.task-abandon-btn {
    background: transparent;
    border: 1px solid #6a4a4a;
    color: #a07070;
    padding: 3px 6px
}

.task-abandon-btn:hover {
    background: #4a3030;
    border-color: #8a5a5a;
    color: #c09090
}

.task-assigned {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 6px;
    background: #2a3525;
    border-radius: 3px;
    font-size: 10px;
    color: #b0c0a0
}

.task-assign-row {
    margin-top: 4px
}

.citizen-select {
    width: 100%;
    padding: 4px 6px;
    background: #2a2525;
    border: 1px solid #4a4040;
    border-radius: 3px;
    color: #c0b0a0;
    font-size: 10px;
    cursor: pointer
}

.citizen-select:hover {
    border-color: #5a5050
}

.citizen-select:focus {
    outline: none;
    border-color: #6a8a5a
}

.citizen-select option {
    background: #2a2525;
    color: #c0b0a0
}

.card-task-item.task-unavailable {
    opacity: .5;
    background: #1a1515;
    border-color: #3a3030
}

.card-task-item.task-unavailable:hover {
    background: #1a1515;
    border-color: #3a3030
}

.card-task-item.task-unavailable .task-icon {
    filter: grayscale(60%)
}

.card-task-item.task-unavailable .task-name {
    color: #807070
}

.task-requires {
    font-size: 9px;
    color: #a08060;
    font-style: italic;
    margin-top: 3px
}

.task-no-eligible {
    margin-top: 4px;
    padding: 3px 6px;
    background: #2a2520;
    border-radius: 3px;
    font-size: 9px
}

.task-no-eligible .requires-text {
    color: #a08060;
    font-style: italic
}

.task-accept-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: #3a3535;
    border-color: #4a4040;
    color: #706060
}

.task-accept-btn:disabled:hover {
    background: #3a3535;
    border-color: #4a4040
}

.unassign-task-btn,.unassign-quest-btn {
    padding: 2px 5px;
    background: transparent;
    border: 1px solid #6a4a4a;
    border-radius: 2px;
    color: #a07070;
    font-size: 9px;
    cursor: pointer;
    margin-left: auto;
    transition: all .15s ease
}

.unassign-task-btn:hover,.unassign-quest-btn:hover {
    background: #4a3030;
    border-color: #8a5a5a;
    color: #c09090
}

.quest-abandon-btn {
    padding: 3px 6px;
    background: transparent;
    border: 1px solid #6a4a4a;
    border-radius: 3px;
    color: #a07070;
    font-size: 9px;
    cursor: pointer;
    transition: all .15s ease
}

.quest-abandon-btn:hover {
    background: #4a3030;
    border-color: #8a5a5a;
    color: #c09090
}

.task-requirements {
    font-size: 9px;
    color: #a09080;
    margin-top: 3px;
    padding: 3px 6px;
    background: #2a2820;
    border-radius: 2px;
    border-left: 2px solid #6a5a40
}

.task-complete-btn {
    padding: 4px 10px;
    background: linear-gradient(135deg,#4a6a4a,#3a5a3a);
    border: 1px solid #5a8a5a;
    border-radius: 3px;
    color: #d0f0d0;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: all .15s ease
}

.task-complete-btn:hover {
    background: linear-gradient(135deg,#5a8a5a,#4a7a4a);
    border-color: #6a9a6a
}

.task-complete-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #707070;
    cursor: not-allowed
}

.card-task-item.townboard {
    border-left-color: #6a8a5a
}

.card-task-item.townboard.accepted {
    background: linear-gradient(135deg,#2a3525,#252a20)
}

.card-task-item.volunteer {
    border-left-color: #5a7a9a
}

.card-task-item.volunteer.accepted {
    background: linear-gradient(135deg,#252a35,#202530)
}

.card-quest-item .quest-progress-bar {
    height: 4px;
    background: #2a2525;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden
}

.card-quest-item .quest-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg,#7a5a8a,#9a7ab0);
    border-radius: 2px;
    transition: width .3s ease
}

.card-quest-item .quest-progress-text {
    font-size: 9px;
    color: #9a8a9a;
    margin-top: 2px
}

.shop-gold-display {
    font-size: 11px;
    color: #d4a84b;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: #2a2820;
    border-radius: 4px;
    border: 1px solid #3a3530
}

.card-shop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #353030;
    border-radius: 5px;
    margin-bottom: 8px
}

.card-shop-item.cant-afford {
    opacity: .6
}

.card-shop-item .shop-icon {
    font-size: 20px;
    width: 28px;
    text-align: center
}

.card-shop-item .shop-info {
    flex: 1;
    min-width: 0
}

.card-shop-item .shop-name {
    font-size: 14px;
    font-weight: 500;
    color: #e0d0c0
}

.card-shop-item .shop-stock {
    font-size: 12px;
    color: #8a7a6a;
    margin-top: 2px
}

.card-shop-item .shop-price {
    font-size: 14px;
    font-weight: 600;
    color: #d4a84b;
    min-width: 45px;
    text-align: right
}

.shop-buy-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg,#5a6a4a,#4a5a3a);
    border: 1px solid #6a7a5a;
    border-radius: 4px;
    color: #d0e0c0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.shop-buy-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#6a7a5a,#5a6a4a)
}

.shop-buy-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.card-shop-item .shop-sell-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg,#6a5a3a,#5a4a2a);
    border: 1px solid #7a6a4a;
    border-radius: 4px;
    color: #e0d0a0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.card-shop-item .shop-sell-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#7a6a4a,#6a5a3a)
}

.card-shop-item .shop-sell-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.card-shop-item.sell {
    background: #282420;
    border-color: #3a3530
}

.card-shop-item .sell-price {
    color: #90c090
}

.card-quest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #353030;
    border-radius: 4px;
    margin-bottom: 6px
}

.card-quest-item.active {
    background: #3a3545;
    border-left: 2px solid #7a5a8a
}

.card-quest-item .quest-info {
    flex: 1;
    min-width: 0
}

.card-quest-item .quest-name {
    font-size: 11px;
    font-weight: 500;
    color: #e0d0c0
}

.card-quest-item .quest-progress {
    font-size: 10px;
    color: #9a8a9a;
    margin-left: auto
}

.card-quest-item .quest-reward {
    font-size: 9px;
    color: #d4a84b;
    margin-top: 2px
}

.quest-accept-btn {
    padding: 4px 10px;
    background: linear-gradient(135deg,#5a4a6a,#4a3a5a);
    border: 1px solid #6a5a7a;
    border-radius: 3px;
    color: #e0d0e0;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.quest-accept-btn:hover {
    background: linear-gradient(135deg,#6a5a7a,#5a4a6a)
}

.storage-capacity {
    text-align: center;
    font-size: 11px;
    color: #908070;
    padding: 6px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #353030
}

.card-storage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #353030;
    border-radius: 4px;
    margin-bottom: 6px
}

.card-storage-item .storage-icon {
    font-size: 16px;
    width: 24px;
    text-align: center
}

.card-storage-item .storage-name {
    flex: 1;
    font-size: 11px;
    color: #e0d0c0
}

.card-storage-item .storage-qty {
    font-size: 11px;
    font-weight: 600;
    color: #a0b090;
    min-width: 30px;
    text-align: right
}

.storage-withdraw-btn {
    padding: 4px 8px;
    background: linear-gradient(135deg,#4a5a5a,#3a4a4a);
    border: 1px solid #5a6a6a;
    border-radius: 3px;
    color: #d0e0e0;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.storage-withdraw-btn:hover {
    background: linear-gradient(135deg,#5a6a6a,#4a5a5a)
}

.storage-section-header {
    font-size: 10px;
    font-weight: 600;
    color: #908070;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 0 6px;
    margin-top: 4px;
    border-bottom: 1px solid #302828
}

.storage-deposit-btn {
    padding: 4px 8px;
    background: linear-gradient(135deg,#5a6a4a,#4a5a3a);
    border: 1px solid #6a7a5a;
    border-radius: 3px;
    color: #d0e0c0;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.storage-deposit-btn:hover {
    background: linear-gradient(135deg,#6a7a5a,#5a6a4a)
}

.card-storage-item.deposit {
    background: #2a3028;
    border: 1px solid #3a4038
}

.panel-empty-state.small {
    padding: 12px;
    font-size: 10px
}

.card-travel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #353030;
    border-radius: 4px;
    margin-bottom: 6px
}

.card-travel-item .travel-info {
    flex: 1
}

.card-travel-item .travel-name {
    font-size: 11px;
    font-weight: 500;
    color: #e0d0c0
}

.card-travel-item .travel-dist {
    font-size: 9px;
    color: #8a7a6a;
    margin-top: 2px
}

.travel-btn {
    padding: 4px 10px;
    background: linear-gradient(135deg,#5a5a4a,#4a4a3a);
    border: 1px solid #6a6a5a;
    border-radius: 3px;
    color: #e0e0d0;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.travel-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#6a6a5a,#5a5a4a)
}

.travel-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.card-hire-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #353030;
    border-radius: 6px;
    margin-bottom: 8px
}

.card-hire-item.cant-afford {
    opacity: .6
}

.card-hire-item .hire-icon {
    font-size: 28px;
    width: 36px;
    text-align: center
}

.card-hire-item .hire-info {
    flex: 1;
    min-width: 0
}

.card-hire-item .hire-name {
    font-size: 14px;
    font-weight: 500;
    color: #e0d0c0;
    margin-bottom: 4px
}

.card-hire-item .hire-role {
    font-size: 11px;
    color: #9a8a7a
}

.card-hire-item .hire-costs {
    text-align: right;
    margin-right: 8px
}

.card-hire-item .hire-cost {
    font-size: 13px;
    font-weight: 600;
    color: #d4a84b;
    margin-bottom: 2px
}

.card-hire-item .hire-wage {
    font-size: 10px;
    color: #8a7a6a
}

.hire-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg,#4a5a4a,#3a4a3a);
    border: 1px solid #5a6a5a;
    border-radius: 4px;
    color: #d0e0d0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.hire-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#5a6a5a,#4a5a4a);
    transform: translateY(-1px)
}

.hire-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.hire-list-scrollable {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px
}

.hire-list-scrollable::-webkit-scrollbar {
    width: 6px
}

.hire-list-scrollable::-webkit-scrollbar-track {
    background: #2a2828;
    border-radius: 3px
}

.hire-list-scrollable::-webkit-scrollbar-thumb {
    background: #5a5050;
    border-radius: 3px
}

.hire-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: #6a6060
}

.card-hire-item .hire-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px
}

.card-hire-item .hire-skills .skill-tag {
    font-size: 10px;
    padding: 2px 6px;
    background: #6478644d;
    border-radius: 3px;
    color: #a0b0a0
}

.citizen-detail-card {
    padding: 14px;
    background: #2a2828;
    border-radius: 8px;
    border: 1px solid #3d3535
}

.citizen-detail-card .citizen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.citizen-detail-card .citizen-icon {
    font-size: 36px
}

.citizen-detail-card .citizen-header-info {
    flex: 1
}

.citizen-detail-card .citizen-name {
    font-size: 15px;
    font-weight: 600;
    color: #e0d0c0
}

.citizen-detail-card .citizen-role {
    font-size: 11px;
    color: #9a8a7a;
    margin-top: 2px
}

.citizen-detail-card .citizen-wage {
    font-size: 10px;
    color: #d4a84b;
    margin-top: 2px
}

.citizen-detail-card .citizen-status-bar {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    text-align: center
}

.citizen-detail-card .citizen-status-bar.idle {
    background: #302e2e;
    border: 1px solid #403838
}

.citizen-detail-card .citizen-status-bar.idle .status-text {
    color: #8a8a7a
}

.citizen-detail-card .citizen-status-bar.working {
    background: #2a352a;
    border: 1px solid #3a4a3a
}

.citizen-detail-card .citizen-status-bar.working .status-text {
    color: #90b080
}

.citizen-detail-card .citizen-status-bar.traveling {
    background: #302a35;
    border: 1px solid #403545
}

.citizen-detail-card .citizen-status-bar.traveling .status-text {
    color: #9a8aa0
}

.citizen-detail-card .status-text {
    font-size: 12px;
    font-weight: 500
}

.citizen-detail-card .citizen-assignment-section {
    margin-bottom: 14px
}

.citizen-detail-card .section-label {
    font-size: 10px;
    color: #7a7a6a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px
}

.citizen-detail-card .current-assignment {
    font-size: 11px;
    color: #a0b090;
    padding: 8px 10px;
    background: #2a352a;
    border-radius: 4px;
    margin-bottom: 8px
}

.citizen-detail-card .assignment-options {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.citizen-detail-card .assign-btn {
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(135deg,#3a4a4a,#2a3a3a);
    border: 1px solid #4a5a5a;
    border-radius: 5px;
    color: #c0d0d0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-align: left
}

.citizen-detail-card .assign-btn:hover {
    background: linear-gradient(135deg,#4a5a5a,#3a4a4a);
    transform: translate(2px)
}

.citizen-detail-card .unassign-btn {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg,#4a4040,#3a3030);
    border: 1px solid #5a5050;
    border-radius: 4px;
    color: #d0c0c0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.citizen-detail-card .unassign-btn:hover {
    background: linear-gradient(135deg,#5a5050,#4a4040)
}

.citizen-detail-card .no-resources {
    font-size: 11px;
    color: #6a6a5a;
    font-style: italic;
    padding: 10px;
    text-align: center
}

.citizen-detail-card .citizen-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #3a3535
}

.citizen-dismiss-btn {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #5a4545;
    border-radius: 4px;
    color: #a08080;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.citizen-dismiss-btn:hover {
    background: #4a3535;
    border-color: #6a5555;
    color: #c0a0a0
}

.citizen-detail-card .citizen-icon-large {
    font-size: 42px
}

.citizen-detail-card .current-task-card {
    background: #2a352a;
    border: 1px solid #3a4a3a;
    border-radius: 6px;
    padding: 10px
}

.citizen-detail-card .task-label {
    font-size: 9px;
    color: #7a9a7a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px
}

.citizen-detail-card .task-row {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.citizen-detail-card .task-row .task-icon {
    font-size: 20px;
    margin-top: 2px
}

.citizen-detail-card .task-row .task-info {
    flex: 1
}

.citizen-detail-card .task-row .task-name {
    font-size: 12px;
    font-weight: 500;
    color: #c0d0b0;
    margin-bottom: 6px
}

.citizen-detail-card .idle-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: #302e2e;
    border: 1px solid #403838;
    border-radius: 6px
}

.citizen-detail-card .idle-icon {
    font-size: 24px
}

.citizen-detail-card .idle-text {
    font-size: 11px;
    color: #8a8a7a;
    font-style: italic
}

.card-guild-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #353030;
    border-radius: 4px;
    margin-bottom: 6px
}

.card-guild-item .guild-icon {
    font-size: 18px;
    width: 26px;
    text-align: center
}

.card-guild-item .guild-info {
    flex: 1;
    min-width: 0
}

.card-guild-item .guild-name {
    font-size: 11px;
    font-weight: 500;
    color: #e0d0c0
}

.card-guild-item .guild-focus {
    font-size: 9px;
    color: #8a7a6a;
    margin-top: 1px
}

.guild-join-btn {
    padding: 4px 10px;
    background: linear-gradient(135deg,#5a4a5a,#4a3a4a);
    border: 1px solid #6a5a6a;
    border-radius: 3px;
    color: #e0d0e0;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.guild-join-btn:hover {
    background: linear-gradient(135deg,#6a5a6a,#5a4a5a)
}

.guild-detail-card {
    padding: 10px;
    background: #2a2828;
    border-radius: 6px;
    border: 1px solid #3d3535
}

.guild-detail-card .guild-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
}

.guild-detail-card .guild-icon {
    font-size: 28px
}

.guild-detail-card .guild-name {
    font-size: 13px;
    font-weight: 600;
    color: #e0d0c0
}

.guild-detail-card .guild-rank {
    font-size: 10px;
    color: #a08090;
    margin-top: 2px
}

.guild-detail-card .guild-perks {
    padding: 8px;
    background: #302830;
    border-radius: 4px
}

.guild-detail-card .perks-title {
    font-size: 9px;
    color: #8a7a7a;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px
}

.guild-detail-card .perk-item {
    font-size: 10px;
    color: #c0b0c0;
    padding: 3px 0
}

.game-modal:has(.combat-container) .modal-content {
    max-width: 520px;
    min-width: 480px
}

.game-modal:has(.combat-container) .modal-body {
    padding: 16px 20px
}

.location-actions-modal {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px
}

.location-actions-modal .action-category {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.location-actions-modal .action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: 10px
}

.resource-actions-section {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(80,70,60,.4)
}

.resource-section-header {
    font-size: 14px;
    font-weight: 600;
    color: #c4b4a4;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.resource-hex-group {
    margin-bottom: 12px;
    padding: 10px;
    background: #28262380;
    border: 1px solid rgba(60,55,50,.4);
    border-radius: 6px
}

.resource-hex-label {
    font-size: 13px;
    font-weight: 600;
    color: #a09080;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px
}

.resource-hex-label .hex-distance {
    font-size: 12px;
    font-weight: 400;
    color: #807060
}

.location-btn.resource-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 6px;
    background: #32302d99;
    border: 1px solid rgba(70,65,60,.5)
}

.location-btn.resource-action:first-of-type {
    margin-top: 0
}

.location-btn.resource-action:hover:not(:disabled) {
    background: #413c37b3;
    border-color: #645a4b99;
    box-shadow: 0 0 10px #b4a07833
}

.location-btn.resource-action .action-icon {
    font-size: 16px;
    width: 24px;
    text-align: center
}

.location-btn.resource-action .action-name {
    flex: 1;
    text-align: left
}

.location-btn.resource-action .action-remaining {
    font-size: 10px;
    color: #a09080;
    background: #0003;
    padding: 2px 6px;
    border-radius: 8px
}

.location-btn.resource-action:disabled {
    opacity: .5;
    cursor: not-allowed
}

.location-btn.resource-action:disabled .action-remaining {
    color: #705050
}

.town-btn .btn-count {
    font-size: 9px;
    color: #a8a8a8;
    display: block;
    margin-top: 2px
}

.management-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh
}

.management-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: hidden
}

.management-section .modal-list {
    flex: 1;
    overflow-y: auto;
    max-height: 45vh
}

.management-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(135deg,#4a3a3a,#3a2e2e);
    border-radius: 4px;
    border: 1px solid #5a4a4a
}

.management-section .section-title {
    font-size: 11px;
    font-weight: 600;
    color: #d4c4b4;
    text-transform: uppercase;
    letter-spacing: .5px
}

.management-section .section-count {
    font-size: 10px;
    color: #a08070;
    background: #2a2020;
    padding: 2px 6px;
    border-radius: 10px
}

.management-section .empty-message {
    text-align: center;
    color: #706050;
    font-size: 11px;
    padding: 16px;
    font-style: italic
}

.management-modal .modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #363636;
    border-radius: 4px;
    border: 1px solid #454545;
    cursor: pointer;
    transition: all .15s ease
}

.management-modal .modal-item:hover {
    background: #404040;
    border-color: #5a5a5a
}

.management-modal .item-icon {
    font-size: 20px;
    width: 28px;
    text-align: center
}

.management-modal .item-info {
    flex: 1;
    min-width: 0
}

.management-modal .item-name {
    font-size: 12px;
    font-weight: 500;
    color: #e0d0c0
}

.management-modal .item-name .level-badge {
    font-size: 9px;
    color: #8a8a8a;
    background: #2a2a2a;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px
}

.management-modal .item-desc {
    font-size: 10px;
    color: #8a7a6a;
    margin-top: 2px
}

.management-modal .item-meta {
    font-size: 10px;
    color: #d4a574;
    white-space: nowrap
}

.management-actions {
    border-top: 1px solid #3a3030;
    flex-shrink: 0;
    background: #2a2a2a;
    margin: 0 -16px -16px;
    padding: 12px 16px
}

.management-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg,#4a5a4a,#3a4a3a);
    border: 1px solid #5a6a5a;
    border-radius: 4px;
    color: #d0e0d0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.management-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#5a6a5a,#4a5a4a);
    border-color: #6a7a6a
}

.management-btn:disabled {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #6a6a6a;
    cursor: not-allowed
}

.management-btn .btn-icon {
    font-size: 14px
}

.management-btn .btn-text {
    flex: 1;
    text-align: left
}

.management-btn .btn-badge {
    font-size: 9px;
    color: #8a9a8a;
    background: #2a3a2a;
    padding: 2px 6px;
    border-radius: 10px
}

.management-btn:disabled .btn-badge {
    color: #5a5a5a;
    background: #2a2a2a
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(180deg,#5c3a3a,#4a2e2e);
    border-bottom: 2px solid #3d2a2a;
    gap: 10px;
    box-shadow: inset 0 1px #ffffff14,0 2px 4px #0000004d
}

.modal-back {
    background: none;
    border: none;
    color: #a08070;
    font-size: 20px;
    cursor: pointer;
    padding: 6px 10px;
    line-height: 1;
    border-radius: 4px;
    transition: all .15s ease;
    flex-shrink: 0
}

.modal-back:hover {
    color: #e0d0c0;
    background: #ffffff1a
}

#modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #e8d4c4;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex: 1
}

.modal-close {
    background: none;
    border: none;
    color: #a08070;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1
}

.modal-close:hover {
    color: #e0d0c0
}

.modal-body {
    padding: 16px;
    max-height: 65vh;
    overflow-y: auto
}

.modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.modal-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #363636;
    border-radius: 5px;
    border: 1px solid #454545
}

.modal-item:hover {
    background: #3d3d3d;
    border-color: #505050
}

.modal-item-icon {
    font-size: 26px
}

.modal-item-info {
    flex: 1
}

.modal-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #e0d0c0;
    margin-bottom: 3px
}

.modal-item-desc {
    font-size: 12px;
    color: #909080;
    margin-bottom: 5px
}

.modal-item-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #808070
}

.modal-item-stat {
    display: flex;
    align-items: center;
    gap: 2px
}

.modal-item-action {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a6040,#3a5030);
    border: 1px solid #5a7050;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap
}

.modal-item-action:hover {
    background: linear-gradient(180deg,#5a7050,#4a6040);
    color: #e0d0c0
}

.modal-item-action:disabled {
    opacity: .4;
    cursor: not-allowed
}

.modal-item-action.danger {
    background: linear-gradient(180deg,#604040,#503030);
    border-color: #705050
}

.modal-item-action.danger:hover {
    background: linear-gradient(180deg,#705050,#604040)
}

.hex-distance {
    font-size: 10px;
    color: #70a070;
    font-weight: 400
}

.hex-distance.too-far {
    color: #a07050
}

#log-panel {
    flex: 0 0 auto;
    max-height: 160px;
    min-height: 90px;
    display: flex;
    flex-direction: column
}

#citizens-panel,#guilds-panel {
    flex: 1 1 auto;
    min-height: 130px;
    display: flex;
    flex-direction: column
}

#citizens-panel .panel-body,#guilds-panel .panel-body {
    flex: 1;
    overflow-y: auto
}

#citizens-panel .panel-body::-webkit-scrollbar,#guilds-panel .panel-body::-webkit-scrollbar {
    width: 5px
}

#citizens-panel .panel-body::-webkit-scrollbar-track,#guilds-panel .panel-body::-webkit-scrollbar-track {
    background: #252525
}

#citizens-panel .panel-body::-webkit-scrollbar-thumb,#guilds-panel .panel-body::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 3px
}

.citizens-list .panel-empty {
    padding: 12px 8px
}

.hire-hint {
    font-size: 8px;
    color: #706050;
    margin-top: 4px;
    font-style: normal
}

#log-entries {
    flex: 1;
    overflow-y: auto;
    font-size: 10px;
    padding: 6px
}

#log-entries::-webkit-scrollbar {
    width: 6px
}

#log-entries::-webkit-scrollbar-track {
    background: #252525
}

#log-entries::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 3px
}

.log-entry {
    padding: 3px 6px;
    margin-bottom: 2px;
    background: #333;
    border-radius: 2px;
    color: #a09080;
    border-left: 2px solid #454545;
    font-size: 11px
}

.log-entry:last-child {
    margin-bottom: 0
}

.log-entry.success {
    color: #90b080;
    border-left-color: #608050
}

.log-entry.warning {
    color: #c0a060;
    border-left-color: #907040
}

.log-entry.error {
    color: #c07060;
    border-left-color: #905040
}

.log-entry.discovery {
    color: #a080b0;
    border-left-color: #705080
}

.log-entry.travel {
    color: #80a0b0;
    border-left-color: #507080
}

.log-entry.levelup {
    color: #60e0a0;
    border-left-color: #40c080;
    font-weight: 600;
    background: #40c0801a
}

.log-entry.time {
    color: #c0b080;
    border-left-color: #908050
}

.log-time {
    font-size: 9px;
    color: #605040;
    margin-right: 6px
}

.tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    background: #2d2d2d;
    border: 2px solid #4a4a4a;
    border-radius: 4px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 4px 12px #00000080;
    overflow: hidden
}

.tooltip.hidden {
    display: none
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg,#5c3a3a,#4a2e2e);
    border-bottom: 2px solid #3d2a2a
}

.tooltip-icon {
    font-size: 20px
}

.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    color: #e8d4c4
}

.tooltip-type {
    font-size: 10px;
    color: #a08070;
    text-transform: uppercase;
    letter-spacing: .5px
}

.tooltip-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    font-size: 12px
}

.tooltip-stats>span {
    padding: 6px 12px;
    background: #333
}

.tooltip-stats>span:nth-child(4n+1),.tooltip-stats>span:nth-child(4n+2) {
    background: #2d2d2d
}

.tooltip-label {
    color: #908070
}

.tooltip-value {
    color: #c0b0a0;
    text-align: right
}

.tooltip-features {
    padding: 8px 12px;
    background: #2a2a2a;
    border-top: 1px solid #3d3d3d;
    font-size: 11px;
    color: #908070
}

.tooltip-lore {
    padding: 10px 12px;
    background: #252525;
    border-top: 1px solid #3d3d3d;
    font-size: 11px;
    font-style: italic;
    color: #706050
}

.save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1500;
    background: linear-gradient(180deg,#3a5c3a,#2e4a2e);
    border: 2px solid #4a6a4a;
    border-radius: 4px;
    padding: 8px 16px;
    color: #b8d4b8;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px #00000080;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease,transform .3s ease;
    pointer-events: none
}

.save-indicator.visible {
    opacity: 1;
    transform: translateY(0)
}

.hex-menu {
    position: fixed;
    z-index: 1100;
    background: #2d2d2d;
    border: 2px solid #4a4a4a;
    border-radius: 6px;
    min-width: 160px;
    box-shadow: 0 4px 16px #00000080;
    overflow: hidden
}

.hex-menu.hidden {
    display: none
}

.hex-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(180deg,#4a3a3a,#3d2d2d);
    border-bottom: 1px solid #3d2a2a
}

#hex-menu-biome {
    font-size: 12px;
    font-weight: 600;
    color: #e8d4c4;
    text-transform: capitalize
}

.hex-menu-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #a08070;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    transition: all .15s
}

.hex-menu-close:hover {
    background: #ffffff1a;
    color: #e0d0c0
}

.hex-menu-actions {
    padding: 6px
}

.hex-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: linear-gradient(180deg,#383838,#2d2d2d);
    border: 1px solid #484848;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    text-align: left
}

.hex-action-btn:last-child {
    margin-bottom: 0
}

.hex-action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#424242,#383838);
    border-color: #585858
}

.hex-action-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.hex-action-btn .action-icon {
    font-size: 16px
}

.hex-action-btn .action-info {
    flex: 1
}

.hex-action-btn .action-name {
    font-size: 11px;
    font-weight: 600;
    color: #d0c0b0
}

.hex-action-btn .action-detail {
    font-size: 9px;
    color: #808070
}

.hex-action-btn .action-remaining {
    font-size: 10px;
    color: #a08060;
    font-weight: 600
}

.hex-action-btn.depleted {
    opacity: .6;
    cursor: not-allowed;
    background: linear-gradient(180deg,#2a2a2a,#222);
    border-color: #383838
}

.hex-action-btn.depleted .action-icon {
    filter: grayscale(.7)
}

.hex-action-btn.depleted .action-name {
    color: #807060;
    text-decoration: line-through
}

.hex-action-btn .action-detail.depleted-text {
    color: #a07050;
    font-style: italic
}

.hex-action-btn .action-remaining.depleted {
    color: #805040
}

.hex-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 1000
}

.hex-overlay.hidden {
    display: none
}

#hex-progress-svg {
    width: 100%;
    height: 100%
}

.hex-progress-bg {
    fill: #0009;
    stroke: #4a4a4a;
    stroke-width: 2
}

.hex-progress-fill {
    fill: #5a8c5ab3;
    stroke: #6a9a6a;
    stroke-width: 2;
    transform-origin: center;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .05s linear
}

.hex-progress-icon {
    font-size: 24px;
    text-anchor: middle;
    dominant-baseline: middle
}

.hex-progress-text {
    font-size: 14px;
    font-weight: 700;
    fill: #e0e0e0;
    text-anchor: middle;
    dominant-baseline: middle
}

.ui-panel.collapsible .panel-header {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.ui-panel.collapsible .panel-header:after {
    content: "▼";
    float: right;
    font-size: 8px;
    color: #605040;
    transition: transform .2s
}

.ui-panel.collapsible .panel-header.collapsed:after {
    transform: rotate(-90deg)
}

.panel-body.collapsed {
    display: none
}

.citizens-list {
    max-height: 120px;
    overflow-y: auto
}

.citizen-item {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #333;
    border-radius: 3px;
    border-left: 2px solid #505050;
    cursor: pointer;
    transition: all .15s
}

.citizen-item:last-child {
    margin-bottom: 0
}

.citizen-item:hover {
    background: #3d3d3d;
    border-left-color: #707060
}

.citizen-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px
}

.citizen-icon {
    font-size: 14px
}

.citizen-name {
    flex: 1;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0
}

.citizen-level {
    font-size: 9px;
    color: #a08060;
    background: #2a2520;
    padding: 1px 4px;
    border-radius: 2px
}

.citizen-details {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    margin-bottom: 4px
}

.citizen-role {
    color: #808070;
    text-transform: capitalize
}

.citizen-bars {
    display: flex;
    gap: 4px;
    margin-bottom: 3px
}

.mini-bar {
    flex: 1;
    height: 4px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden
}

.mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .3s
}

.mini-bar.energy .mini-fill {
    background: linear-gradient(90deg,#5c8a5c,#7ab07a)
}

.mini-bar.morale .mini-fill {
    background: linear-gradient(90deg,#8a8a5c,#b0b07a)
}

.citizen-wage {
    font-size: 8px;
    color: #c4a84b;
    text-align: right
}

.guild-item {
    flex-direction: column;
    align-items: stretch;
    padding: 6px 8px
}

.guild-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px
}

.guild-rank {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    margin-bottom: 3px
}

.rank-name {
    color: #a09080
}

.rank-progress {
    color: #808070
}

.rank-max {
    color: #c4a84b;
    font-weight: 600
}

.guild-progress {
    height: 3px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden
}

.guild-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#5c6a8a,#7a8ab0);
    border-radius: 2px;
    transition: width .3s
}

.contracts-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3d3d3d
}

.section-label {
    font-size: 9px;
    font-weight: 600;
    color: #706050;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px
}

.contract-item {
    flex-direction: column;
    padding: 4px 6px
}

.contract-deadline {
    font-size: 8px;
    color: #808070
}

.contract-item.urgent {
    border-left-color: #a05050
}

.contract-item.urgent .contract-deadline {
    color: #c07060
}

.hire-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.hire-citizen {
    padding: 10px;
    background: #363636;
    border-radius: 4px;
    border: 1px solid #454545
}

.hire-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.hire-citizen .hire-icon {
    font-size: 18px
}

.hire-citizen .hire-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #e0d0c0
}

.hire-citizen .hire-cost {
    font-size: 11px;
    font-weight: 600;
    color: #c4a84b
}

.hire-citizen .hire-role {
    font-size: 10px;
    color: #909080;
    text-transform: capitalize;
    margin-bottom: 6px
}

.hire-citizen .hire-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px
}

.hire-citizen .skill-tag {
    font-size: 9px;
    padding: 2px 6px;
    background: #2a2a2a;
    border-radius: 2px;
    color: #a0a090
}

.hire-citizen .hire-wage {
    font-size: 9px;
    color: #808070;
    margin-bottom: 8px
}

.hire-citizen .hire-btn {
    width: 100%;
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a6040,#3a5030);
    border: 1px solid #5a7050;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.hire-citizen .hire-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#5a7050,#4a6040);
    color: #e0d0c0
}

.hire-citizen .hire-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.citizen-detail,.guild-detail {
    font-size: 11px
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3d3d3d
}

.detail-icon {
    font-size: 28px
}

.detail-name {
    font-size: 14px;
    font-weight: 600;
    color: #e8d4c4
}

.detail-role {
    font-size: 10px;
    color: #909080
}

.detail-stats {
    margin-bottom: 12px
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 10px;
    color: #a09080
}

.detail-row span:first-child {
    width: 60px
}

.detail-row span:last-child {
    width: 50px;
    text-align: right
}

.detail-bar {
    flex: 1;
    height: 6px;
    background: #252525;
    border-radius: 3px;
    overflow: hidden
}

.detail-fill {
    height: 100%;
    border-radius: 3px
}

.detail-fill.energy {
    background: linear-gradient(90deg,#5c8a5c,#7ab07a)
}

.detail-fill.morale {
    background: linear-gradient(90deg,#8a8a5c,#b0b07a)
}

.detail-fill.exp {
    background: linear-gradient(90deg,#5c5c8a,#7a7ab0)
}

.detail-skills {
    margin-bottom: 12px;
    padding: 8px;
    background: #2a2a2a;
    border-radius: 4px
}

.skills-header,.perks-header,.contracts-header {
    font-size: 10px;
    font-weight: 600;
    color: #706050;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px
}

.skill-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #a0a090;
    padding: 2px 0
}

.skill-row span:last-child {
    color: #c0b0a0;
    font-weight: 600
}

.detail-wage,.detail-assignment {
    font-size: 10px;
    color: #808070;
    margin-bottom: 6px
}

.citizen-state-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    margin: 6px 0;
    background: #3a3a3a;
    color: #909090
}

.citizen-state-badge.idle {
    background: #3a3a3a;
    color: gray
}

.citizen-state-badge.gathering {
    background: #2a4a2a;
    color: #8cd48c
}

.citizen-state-badge.traveling_to_resource,.citizen-state-badge.traveling_to_storage {
    background: #3a3a4a;
    color: #8c8cd4
}

.citizen-state-badge.depositing {
    background: #4a3a2a;
    color: #d4b48c
}

.citizen-state-badge.exhausted {
    background: #4a2a2a;
    color: #d48c8c
}

.citizen-inventory {
    margin: 8px 0;
    padding: 6px;
    background: #252525;
    border-radius: 3px
}

.citizen-inventory .inventory-header {
    font-size: 10px;
    color: #908070;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.inventory-items-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.inventory-items-mini .inv-item {
    display: inline-block;
    padding: 2px 6px;
    background: #333;
    border-radius: 3px;
    font-size: 10px;
    color: #c0b0a0
}

.detail-fill.carry {
    background: linear-gradient(90deg,#6a5a4a,#8a6a4a)
}

.storage-container {
    padding: 8px 0
}

.storage-info {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #2a2a2a;
    border-radius: 4px;
    font-size: 11px;
    color: #908070;
    margin-bottom: 12px
}

.storage-empty {
    padding: 20px;
    text-align: center;
    color: #706050;
    font-size: 12px;
    font-style: italic
}

.storage-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto
}

.storage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #333;
    border-radius: 4px
}

.storage-icon {
    font-size: 16px
}

.storage-name {
    flex: 1;
    font-size: 12px;
    color: #c0b0a0
}

.storage-qty {
    font-size: 11px;
    color: #a08060;
    font-weight: 600;
    min-width: 40px;
    text-align: right
}

.storage-actions {
    display: flex;
    gap: 4px
}

.withdraw-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #a0c0a0;
    background: #2a3a2a;
    border: 1px solid #3a4a3a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.withdraw-btn:hover {
    background: #3a4a3a;
    color: #b0d0b0
}

.withdraw-btn.all {
    color: #c0a080;
    background: #3a2a20;
    border-color: #4a3a30
}

.withdraw-btn.all:hover {
    background: #4a3a30;
    color: #d0b090
}

.storage-section-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(140,120,90,.4),transparent);
    margin: 16px 0
}

.crafted-goods-section {
    margin-top: 8px
}

.crafted-goods-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(120,100,70,.3)
}

.crafted-goods-title {
    font-size: 13px;
    font-weight: 600;
    color: #c4a888
}

.crafted-goods-value {
    font-size: 11px;
    color: #e8b84a;
    font-weight: 500
}

.crafted-goods-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto
}

.crafted-good-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #322d2899;
    border-radius: 4px;
    font-size: 11px
}

.crafted-icon {
    font-size: 16px;
    width: 24px;
    text-align: center
}

.crafted-name {
    flex: 1;
    color: #c4b49c
}

.crafted-qty {
    color: #a08880;
    font-weight: 500;
    min-width: 35px;
    text-align: right
}

.crafted-value {
    color: #c4a060;
    font-size: 10px;
    min-width: 45px;
    text-align: right
}

.sell-good-btn {
    padding: 4px 10px;
    font-size: 10px;
    background: #64503c99;
    border: 1px solid rgba(140,110,80,.5);
    border-radius: 3px;
    color: #c4a888;
    cursor: pointer;
    transition: all .15s
}

.sell-good-btn:hover {
    background: #786446cc;
    border-color: #a08264b3
}

.crafted-goods-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(80,70,60,.4);
    font-size: 11px;
    color: #a89880
}

.sell-all-goods-btn {
    padding: 6px 14px;
    font-size: 11px;
    background: linear-gradient(135deg,#78643cb3,#645032b3);
    border: 1px solid rgba(160,130,90,.6);
    border-radius: 4px;
    color: #e8c888;
    cursor: pointer;
    font-weight: 500;
    transition: all .15s
}

.sell-all-goods-btn:hover {
    background: linear-gradient(135deg,#8c7846cc,#78643ccc);
    border-color: #b49664cc
}

.shop-container {
    padding: 8px 0
}

.shop-gold {
    padding: 8px 12px;
    background: linear-gradient(90deg,#3a3020,#2a2a20);
    border-radius: 4px;
    font-size: 12px;
    color: #d4af37;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center
}

.shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px
}

.shop-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #908070;
    background: #282623b3;
    border: 1px solid rgba(60,55,50,.5);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.shop-tab:hover {
    background: #37322dcc;
    color: #b0a090;
    border-color: #504b4199
}

.shop-tab.active {
    background: linear-gradient(180deg,#4a4030e6,#3a3226e6);
    color: #d4af37;
    border-color: #645a40b3;
    box-shadow: 0 0 10px #d4af3726
}

.shop-panel {
    max-height: 280px;
    overflow-y: auto
}

.shop-panel.hidden {
    display: none
}

.shop-items {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #302d2a99;
    border: 1px solid rgba(65,60,55,.4);
    border-radius: 5px;
    transition: all .15s ease
}

.shop-item:hover {
    background: #3a3732b3;
    border-color: #55504680;
    box-shadow: 0 0 8px #b4a0781f
}

.shop-item.cant-afford {
    opacity: .5
}

.shop-icon {
    font-size: 22px;
    width: 28px;
    text-align: center
}

.shop-item-info {
    flex: 1;
    min-width: 0
}

.shop-item-name {
    font-size: 14px;
    color: #c0b0a0;
    font-weight: 500
}

.shop-item-stock,.shop-item-qty {
    font-size: 12px;
    color: #706050
}

.shop-item-price {
    font-size: 14px;
    color: #d4af37;
    font-weight: 600;
    min-width: 55px;
    text-align: right
}

.shop-item-price.sell-price {
    color: #90c090
}

.shop-buy-btn,.shop-sell-btn {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.shop-buy-btn {
    color: #a0c0a0;
    background: #2a3a2a;
    border: 1px solid #3a4a3a
}

.shop-buy-btn:hover:not(:disabled) {
    background: #3a4a3a;
    color: #b0d0b0
}

.shop-buy-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.shop-sell-btn {
    color: #c0a080;
    background: #3a2a20;
    border: 1px solid #4a3a30
}

.shop-sell-btn:hover {
    background: #4a3a30;
    color: #d0b090
}

.shop-sell-btn.sell-all {
    font-size: 9px;
    padding: 5px 6px
}

.shop-tab.steal-tab {
    color: #c08080
}

.shop-tab.steal-tab:hover {
    color: #e0a0a0
}

.shop-tab.steal-tab.active {
    color: #e0a0a0;
    border-color: #904040;
    background: linear-gradient(180deg,#3a2020,#2a1515)
}

.steal-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(180deg,#3a2525,#2a1818);
    border: 1px solid #5a3030;
    border-radius: 4px;
    margin-bottom: 8px
}

.steal-icon {
    font-size: 24px
}

.steal-chance {
    color: #e0a0a0;
    font-weight: 600;
    font-size: 12px
}

.steal-risk {
    text-align: center;
    font-size: 10px;
    color: #a07070;
    margin-bottom: 10px;
    font-style: italic
}

.steal-item {
    border-color: #4a3030!important
}

.steal-item:hover {
    background: #3a2525!important
}

.steal-penalty {
    color: #c07070!important;
    font-size: 10px
}

.shop-steal-btn {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    color: #c09090;
    background: #3a2020;
    border: 1px solid #5a3030
}

.shop-steal-btn:hover {
    background: #5a3030;
    color: #e0b0b0
}

.npc-steal-btn:hover {
    background: #5a3030!important;
    color: #e0b0b0!important
}

.shop-empty {
    padding: 20px;
    text-align: center;
    color: #706050;
    font-size: 12px;
    font-style: italic
}

.detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #3d3d3d
}

.modal-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
    box-shadow: inset 0 1px #ffffff14
}

.dismiss-btn {
    color: #c0a0a0;
    background: linear-gradient(180deg,#504040,#403030);
    border: 1px solid #605050
}

.dismiss-btn:hover {
    background: linear-gradient(180deg,#605050,#504040);
    color: #e0c0c0;
    box-shadow: inset 0 1px #ffffff14,0 0 10px #b4787833
}

.guild-focus {
    font-size: 13px;
    color: #909080;
    margin-bottom: 12px;
    text-transform: capitalize
}

.guild-perks {
    margin-bottom: 12px;
    padding: 8px;
    background: #2a2a2a;
    border-radius: 4px
}

.perk-row {
    font-size: 10px;
    color: #a0a090;
    padding: 3px 0 3px 12px;
    position: relative
}

.perk-row:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #5c6a8a
}

.guild-contracts {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #3d3d3d
}

.contract-offer {
    padding: 8px;
    margin-bottom: 8px;
    background: #363636;
    border-radius: 4px;
    border-left: 2px solid #5a6a8a
}

.contract-offer:last-child {
    margin-bottom: 0
}

.offer-name {
    font-size: 11px;
    font-weight: 600;
    color: #d0c0b0;
    margin-bottom: 3px
}

.offer-desc {
    font-size: 9px;
    color: #808070;
    margin-bottom: 6px
}

.offer-rewards {
    font-size: 9px;
    color: #a08060;
    margin-bottom: 6px
}

.accept-contract-btn {
    width: 100%;
    padding: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a5a6a,#3a4a5a);
    border: 1px solid #5a6a7a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.accept-contract-btn:hover {
    background: linear-gradient(180deg,#5a6a7a,#4a5a6a);
    color: #e0d0c0
}

.no-contracts {
    font-size: 10px;
    color: #606050;
    font-style: italic;
    text-align: center;
    padding: 10px
}

.guild-join-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.join-intro {
    font-size: 11px;
    color: #a09080;
    margin-bottom: 4px
}

.guild-option {
    padding: 10px;
    background: #363636;
    border-radius: 4px;
    border: 1px solid #454545;
    border-left: 3px solid #505050
}

.guild-option:hover {
    background: #3d3d3d;
    border-left-color: #707060
}

.guild-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.guild-option-icon {
    font-size: 20px
}

.guild-option-name {
    font-size: 12px;
    font-weight: 600;
    color: #e0d0c0
}

.guild-option-focus {
    font-size: 9px;
    color: #808070;
    text-transform: capitalize
}

.guild-option-desc {
    font-size: 10px;
    color: #909080;
    margin-bottom: 6px
}

.guild-option-perk {
    font-size: 9px;
    color: #a08060;
    margin-bottom: 8px;
    padding: 4px 6px;
    background: #2a2a2a;
    border-radius: 3px
}

.join-guild-action {
    width: 100%;
    padding: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a5a6a,#3a4a5a);
    border: 1px solid #5a6a7a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.join-guild-action:hover {
    background: linear-gradient(180deg,#5a6a7a,#4a5a6a);
    color: #e0d0c0
}

.travel-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.travel-category {
    background: #2a2a2a;
    border-radius: 4px;
    padding: 8px
}

.travel-category-header {
    font-size: 11px;
    font-weight: 600;
    color: #c0b0a0;
    padding-bottom: 8px;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 8px
}

.travel-destination {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #363636;
    border-radius: 3px;
    margin-bottom: 6px
}

.travel-destination:last-child {
    margin-bottom: 0
}

.dest-info {
    flex: 1
}

.dest-name {
    font-size: 11px;
    font-weight: 600;
    color: #e0d0c0
}

.dest-type {
    font-size: 9px;
    color: #808070
}

.dest-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px
}

.cost-gold {
    font-size: 11px;
    font-weight: 600;
    color: #c4a84b
}

.cost-time {
    font-size: 9px;
    color: #808070
}

.travel-btn {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a6040,#3a5030);
    border: 1px solid #5a7050;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.travel-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#5a7050,#4a6040);
    color: #e0d0c0
}

.travel-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.quest-board {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.quest-section {
    background: #2a2a2a;
    border-radius: 5px;
    padding: 12px
}

.quest-section-header {
    font-size: 14px;
    font-weight: 600;
    color: #c0b0a0;
    padding-bottom: 10px;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 10px
}

.quest-item {
    padding: 14px;
    background: #363636;
    border-radius: 5px;
    margin-bottom: 10px;
    border-left: 4px solid #505050
}

.quest-item:last-child {
    margin-bottom: 0
}

.quest-item.active {
    border-left-color: #5a8a5a
}

.quest-item.available {
    border-left-color: #5a6a8a
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px
}

.quest-name {
    font-size: 15px;
    font-weight: 600;
    color: #e0d0c0
}

.quest-difficulty {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase
}

.quest-difficulty.easy {
    background: #2a4a2a;
    color: #8ab08a
}

.quest-difficulty.medium {
    background: #4a4a2a;
    color: #b0b08a
}

.quest-difficulty.hard {
    background: #4a2a2a;
    color: #b08a8a
}

.quest-desc {
    font-size: 13px;
    color: #909080;
    margin-bottom: 10px
}

.quest-objective {
    font-size: 13px;
    color: #a09080;
    padding: 8px 10px;
    background: #2d2d2d;
    border-radius: 4px;
    margin-bottom: 10px
}

.quest-progress-bar {
    height: 4px;
    background: #252525;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#5a8a5a,#7ab07a);
    border-radius: 2px;
    transition: width .3s
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px
}

.reward-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: #3a4a3a;
    color: #a0b090;
    border-radius: 2px
}

.quest-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.quest-expires,.quest-duration {
    font-size: 9px;
    color: #706050
}

.quest-accept-btn {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#4a5a6a,#3a4a5a);
    border: 1px solid #5a6a7a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.quest-accept-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#5a6a7a,#4a5a6a);
    color: #e0d0c0
}

.quest-accept-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.quest-abandon-btn {
    padding: 4px 8px;
    font-size: 9px;
    color: #a08080;
    background: linear-gradient(180deg,#3a3030,#302828);
    border: 1px solid #4a3a3a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.quest-abandon-btn:hover {
    background: linear-gradient(180deg,#4a3a3a,#3a3030);
    color: #c0a0a0
}

.no-quests {
    font-size: 10px;
    color: #606050;
    font-style: italic;
    text-align: center;
    padding: 15px
}

.citizen-assignment-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #3d3d3d
}

.assignment-header {
    font-size: 10px;
    font-weight: 600;
    color: #706050;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px
}

.current-assignment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #3a4a3a;
    border-radius: 4px;
    border-left: 3px solid #5a8a5a
}

.assignment-icon {
    font-size: 16px
}

.assignment-text {
    flex: 1;
    font-size: 11px;
    color: #b0c0a0
}

.unassign-btn {
    padding: 4px 8px;
    font-size: 9px;
    color: #a08080;
    background: linear-gradient(180deg,#3a3030,#302828);
    border: 1px solid #4a3a3a;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.unassign-btn:hover {
    background: linear-gradient(180deg,#4a3a3a,#3a3030);
    color: #c0a0a0
}

.assignment-options {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.assign-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font-size: 11px;
    color: #c0b0a0;
    background: linear-gradient(180deg,#404040,#353535);
    border: 1px solid #505050;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    text-align: left
}

.assign-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,#4a5a4a,#3a4a3a);
    border-color: #5a6a5a;
    color: #d0e0c0
}

.assign-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.assign-icon {
    font-size: 14px
}

.assign-text {
    flex: 1
}

.no-assignments {
    font-size: 10px;
    color: #606050;
    font-style: italic;
    text-align: center;
    padding: 10px
}

.panel-btn {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #c0b0a0;
    background: linear-gradient(180deg,#404040,#353535);
    border: 1px solid #505050;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.panel-btn:hover {
    background: linear-gradient(180deg,#4a4a4a,#404040);
    color: #e0d0c0
}

.panel-empty {
    font-size: 9px;
    color: #606050;
    font-style: italic;
    text-align: center;
    padding: 8px
}

.panel-body {
    padding: 6px
}

.panel-count {
    float: right;
    font-size: 9px;
    color: #808070;
    font-weight: 400
}

.game-modal:has(.combat-container.turn-based) .modal-backdrop {
    background: #0f0f14d9
}

.game-modal:has(.combat-container.turn-based) .modal-content {
    max-width: 820px;
    min-width: 760px;
    max-height: 90vh
}

.game-modal:has(.combat-container.turn-based) .modal-body {
    padding: 20px 24px
}

.combat-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 700px
}

.combat-container.turn-based {
    gap: 12px
}

.turn-order-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg,#1a1815,#252220);
    border: 1px solid #3a3530;
    border-radius: 6px;
    overflow-x: auto;
    flex-wrap: nowrap
}

.turn-order-bar .turn-label {
    font-size: 12px;
    color: #888;
    margin-right: 6px;
    white-space: nowrap
}

.turn-order-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #0000004d;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .2s ease
}

.turn-order-item.current {
    background: #4a9eff40;
    border-color: #4a9eff;
    box-shadow: 0 0 8px #4a9eff4d
}

.turn-order-item.player {
    color: #90c090
}

.turn-order-item.player.current {
    background: #50a05040;
    border-color: #60a060
}

.turn-order-item.enemy {
    color: #c09090
}

.turn-order-item .turn-icon {
    font-size: 14px
}

.turn-order-item .turn-name {
    font-size: 12px
}

.turn-order-arrow {
    color: #555;
    font-size: 12px;
    margin: 0 3px
}

.combat-arena {
    position: relative;
    display: flex;
    height: 220px;
    background: linear-gradient(180deg,#1a1a20,#15151a);
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden
}

#spline-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.arena-side {
    flex: 1;
    display: flex;
    padding: 12px;
    position: relative
}

.arena-side.player-side {
    align-items: center;
    justify-content: flex-start
}

.arena-side.enemy-side {
    position: relative;
    min-width: 280px;
    height: 100%
}

.arena-divider {
    width: 2px;
    background: linear-gradient(180deg,transparent 10%,#444 50%,transparent 90%)
}

.round-counter {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #666;
    background: #0006;
    padding: 2px 8px;
    border-radius: 3px
}

.combatant-card {
    padding: 12px;
    background: #0006;
    border: 2px solid #444;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
    transition: all .2s ease
}

.combatant-card.player {
    border-color: #4a6a4a;
    background: #283c284d
}

.combatant-card.enemy {
    position: absolute;
    border-color: #5a4a4a;
    background: #3c28284d;
    cursor: pointer
}

.combatant-card.enemy:hover:not(.dead) {
    border-color: #a84;
    box-shadow: 0 0 12px #aa88444d
}

.combatant-card.enemy.targeted {
    border-color: #fc0;
    box-shadow: 0 0 16px #fc06
}

.combatant-card.dead {
    opacity: .35;
    pointer-events: none;
    filter: grayscale(.5)
}

.combatant-icon {
    font-size: 32px;
    margin-bottom: 5px
}

.combatant-name {
    font-size: 13px;
    font-weight: 600;
    color: #e0d0c0;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px
}

.combatant-hp-bar {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px
}

.combatant-hp-bar .fill {
    height: 100%;
    background: linear-gradient(90deg,#a04040,#c06060);
    transition: width .3s ease
}

.combatant-card.player .combatant-hp-bar .fill,.combatant-hp-bar.player-bar .fill {
    background: linear-gradient(90deg,#40a040,#60c060)
}

.combatant-hp-text {
    font-size: 11px;
    color: #aaa
}

.combatant-resources {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px
}

.combatant-resources .resource {
    padding: 3px 8px;
    background: #0000004d;
    border-radius: 4px
}

.combatant-resources .stamina {
    color: #e0c040
}

.combatant-resources .ether {
    color: #80a0e0
}

.turn-indicator {
    text-align: center;
    padding: 8px 16px;
    background: linear-gradient(135deg,#252525,#1a1a1a);
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    font-size: 12px;
    color: #d0d0d0;
    font-weight: 500
}

.turn-timer-container {
    padding: 8px 12px;
    background: linear-gradient(135deg,#1a2a3a,#152535);
    border: 1px solid #2a4a6a;
    border-radius: 6px;
    margin: 4px 0
}

.turn-timer-container.hidden {
    display: none
}

.turn-timer-bar {
    position: relative;
    height: 24px;
    background: linear-gradient(135deg,#1a1a1a,#252525);
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    overflow: hidden
}

.turn-timer-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg,#4a9eff,#6ab4ff,#4a9eff);
    background-size: 200% 100%;
    animation: timerPulse 1s ease-in-out infinite;
    transition: width .05s linear;
    border-radius: 3px
}

.turn-timer-fill.warning {
    background: linear-gradient(90deg,orange,#fc0,orange);
    background-size: 200% 100%;
    animation: timerPulse .5s ease-in-out infinite
}

.turn-timer-fill.critical {
    background: linear-gradient(90deg,#f44,#f66,#f44);
    background-size: 200% 100%;
    animation: timerPulse .25s ease-in-out infinite,timerShake .1s ease-in-out infinite
}

@keyframes timerPulse {
    0%,to {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes timerShake {
    0%,to {
        transform: translate(0)
    }

    25% {
        transform: translate(-2px)
    }

    75% {
        transform: translate(2px)
    }
}

.turn-timer-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    z-index: 1
}

.turn-timer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px
}

.actions-count {
    font-size: 11px;
    color: #8ab4f8;
    font-weight: 500
}

.end-turn-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg,#5a3a3a,#4a2a2a);
    border: 1px solid #7a4a4a;
    border-radius: 4px;
    color: #fcc;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease
}

.end-turn-btn:hover {
    background: linear-gradient(135deg,#7a4a4a,#5a3a3a);
    border-color: #9a6a6a;
    transform: translateY(-1px)
}

.end-turn-btn:active {
    transform: translateY(0)
}

.combat-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: #0003;
    border-radius: 6px;
    transition: opacity .2s ease
}

.combat-actions.disabled {
    opacity: .5;
    pointer-events: none
}

.action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center
}

.combat-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg,#3a3a40,#2a2a30);
    border: 1px solid #4a4a50;
    border-radius: 5px;
    color: #d0d0d0;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease
}

.combat-action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg,#4a4a50,#3a3a40);
    border-color: #5a5a60;
    transform: translateY(-1px)
}

.combat-action-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.combat-action-btn.selected {
    background: linear-gradient(135deg,#4a6a8a,#3a5a7a);
    border-color: #5a8aba;
    box-shadow: 0 0 10px #4a9eff4d
}

.combat-action-btn .action-icon {
    font-size: 16px
}

.combat-action-btn .action-name {
    font-weight: 500
}

.combat-action-btn .action-cost {
    font-size: 11px;
    color: #888;
    margin-left: 3px
}

.combat-consumables {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #3c503c33;
    border-radius: 6px;
    border: 1px solid rgba(80,120,80,.3);
    max-height: 90px;
    overflow-y: auto;
    justify-content: center
}

.combat-consumables::-webkit-scrollbar {
    width: 4px
}

.combat-consumables::-webkit-scrollbar-thumb {
    background: #50785066;
    border-radius: 2px
}

.consumables-empty {
    color: #606060;
    font-size: 12px;
    font-style: italic;
    width: 100%;
    text-align: center;
    padding: 8px
}

.consumable-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg,#3a4a3a,#2a3a2a);
    border: 1px solid #4a6a4a;
    border-radius: 4px;
    color: #c0d0c0;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease
}

.consumable-btn:hover {
    background: linear-gradient(135deg,#4a6a4a,#3a5a3a);
    border-color: #5a8a5a;
    transform: translateY(-1px)
}

.consumable-btn:active {
    transform: translateY(0)
}

.consumable-icon {
    font-size: 14px
}

.consumable-name {
    font-weight: 500;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.consumable-count {
    font-size: 10px;
    color: #8a9a8a;
    background: #0000004d;
    padding: 1px 4px;
    border-radius: 3px
}

.consumable-effect {
    font-size: 9px;
    color: #6a8a6a;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.combat-action-btn.attack {
    border-color: #5a4a4a
}

.combat-action-btn.attack:hover:not(:disabled) {
    border-color: #8a6a6a
}

.combat-action-btn.skill {
    border-color: #5a5a4a
}

.combat-action-btn.spell {
    border-color: #4a4a6a
}

.combat-action-btn.defend {
    border-color: #4a5a5a
}

.combat-action-btn.flee {
    border-color: #5a5a5a
}

.combat-log {
    max-height: 85px;
    overflow-y: auto;
    padding: 10px 12px;
    background: #0000004d;
    border-radius: 5px;
    font-size: 12px;
    color: #999
}

.combat-log-entry {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.05)
}

.combat-log-entry:last-child {
    border-bottom: none
}

.combat-log-entry.player-action {
    color: #90c090
}

.combat-log-entry.enemy-action {
    color: #c09090
}

.combat-log-entry.condition {
    color: #c8f;
    font-style: italic
}

@keyframes combat-shake-light {
    0%,to {
        transform: translate(0)
    }

    10% {
        transform: translate(-2px,1px)
    }

    20% {
        transform: translate(2px,-1px)
    }

    30% {
        transform: translate(-1px,2px)
    }

    40% {
        transform: translate(1px,-1px)
    }

    50% {
        transform: translate(-1px,1px)
    }

    60% {
        transform: translate(2px)
    }

    70% {
        transform: translate(-2px,-1px)
    }

    80% {
        transform: translate(1px,1px)
    }

    90% {
        transform: translate(-1px,-2px)
    }
}

@keyframes combat-shake-heavy {
    0%,to {
        transform: translate(0) rotate(0)
    }

    10% {
        transform: translate(-4px,2px) rotate(-.5deg)
    }

    20% {
        transform: translate(4px,-2px) rotate(.5deg)
    }

    30% {
        transform: translate(-3px,4px) rotate(-.3deg)
    }

    40% {
        transform: translate(3px,-3px) rotate(.4deg)
    }

    50% {
        transform: translate(-2px,2px) rotate(-.2deg)
    }

    60% {
        transform: translate(4px,1px) rotate(.3deg)
    }

    70% {
        transform: translate(-3px,-2px) rotate(-.4deg)
    }

    80% {
        transform: translate(2px,3px) rotate(.2deg)
    }

    90% {
        transform: translate(-2px,-3px) rotate(-.3deg)
    }
}

.combat-shake-light {
    animation: combat-shake-light .3s ease-out
}

.combat-shake-heavy {
    animation: combat-shake-heavy .4s ease-out
}

@keyframes fullscreen-shake {
    0%,to {
        transform: translate(0)
    }

    10% {
        transform: translate(-6px,3px)
    }

    20% {
        transform: translate(6px,-4px)
    }

    30% {
        transform: translate(-5px,5px)
    }

    40% {
        transform: translate(5px,-3px)
    }

    50% {
        transform: translate(-4px,4px)
    }

    60% {
        transform: translate(6px,2px)
    }

    70% {
        transform: translate(-5px,-4px)
    }

    80% {
        transform: translate(4px,3px)
    }

    90% {
        transform: translate(-3px,-5px)
    }
}

@keyframes fullscreen-shake-crit {
    0%,to {
        transform: translate(0) rotate(0)
    }

    8% {
        transform: translate(-10px,5px) rotate(-1deg)
    }

    16% {
        transform: translate(10px,-6px) rotate(1deg)
    }

    24% {
        transform: translate(-8px,8px) rotate(-.8deg)
    }

    32% {
        transform: translate(8px,-5px) rotate(.7deg)
    }

    40% {
        transform: translate(-6px,6px) rotate(-.5deg)
    }

    48% {
        transform: translate(9px,3px) rotate(.6deg)
    }

    56% {
        transform: translate(-7px,-6px) rotate(-.6deg)
    }

    64% {
        transform: translate(6px,5px) rotate(.4deg)
    }

    72% {
        transform: translate(-5px,-4px) rotate(-.3deg)
    }

    80% {
        transform: translate(4px,3px) rotate(.2deg)
    }

    90% {
        transform: translate(-2px,-2px) rotate(-.1deg)
    }
}

body.fullscreen-shake {
    animation: fullscreen-shake .4s ease-out
}

body.fullscreen-shake-crit {
    animation: fullscreen-shake-crit .5s ease-out
}

.player-damage-vignette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(ellipse at center,transparent 40%,rgba(180,0,0,.4) 100%);
    opacity: 0;
    animation: vignette-flash .4s ease-out forwards
}

.player-damage-vignette.crit {
    background: radial-gradient(ellipse at center,transparent 30%,rgba(200,0,0,.6) 100%);
    animation: vignette-flash-crit .5s ease-out forwards
}

@keyframes vignette-flash {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes vignette-flash-crit {
    0% {
        opacity: 0
    }

    15% {
        opacity: 1
    }

    40% {
        opacity: .8
    }

    to {
        opacity: 0
    }
}

@keyframes combat-attack-windup {
    0% {
        transform: scale(1) translate(0)
    }

    30% {
        transform: scale(.9,1.1) translate(-5px)
    }

    60% {
        transform: scale(1.15,.85) translate(15px)
    }

    80% {
        transform: scale(1.05,.95) translate(8px)
    }

    to {
        transform: scale(1) translate(0)
    }
}

@keyframes combat-attack-windup-enemy {
    0% {
        transform: scale(1) translate(0)
    }

    30% {
        transform: scale(.9,1.1) translate(5px)
    }

    60% {
        transform: scale(1.15,.85) translate(-15px)
    }

    80% {
        transform: scale(1.05,.95) translate(-8px)
    }

    to {
        transform: scale(1) translate(0)
    }
}

.combatant-card.attacking {
    animation: combat-attack-windup .35s cubic-bezier(.25,.46,.45,.94);
    z-index: 10
}

.combatant-card.enemy.attacking {
    animation: combat-attack-windup-enemy .35s cubic-bezier(.25,.46,.45,.94)
}

@keyframes combat-hit-recoil {
    0% {
        transform: scale(1) translate(0)
    }

    15% {
        transform: scale(.85,1.15) translate(-8px)
    }

    30% {
        transform: scale(1.1,.9) translate(4px)
    }

    50% {
        transform: scale(.95,1.05) translate(-2px)
    }

    70% {
        transform: scale(1.02,.98) translate(1px)
    }

    to {
        transform: scale(1) translate(0)
    }
}

@keyframes combat-hit-recoil-enemy {
    0% {
        transform: scale(1) translate(0)
    }

    15% {
        transform: scale(.85,1.15) translate(8px)
    }

    30% {
        transform: scale(1.1,.9) translate(-4px)
    }

    50% {
        transform: scale(.95,1.05) translate(2px)
    }

    70% {
        transform: scale(1.02,.98) translate(-1px)
    }

    to {
        transform: scale(1) translate(0)
    }
}

.combatant-card.hit-recoil {
    animation: combat-hit-recoil .4s cubic-bezier(.25,.46,.45,.94)
}

.combatant-card.enemy.hit-recoil {
    animation: combat-hit-recoil-enemy .4s cubic-bezier(.25,.46,.45,.94)
}

@keyframes combat-crit-recoil {
    0% {
        transform: scale(1) translate(0) rotate(0);
        filter: brightness(1)
    }

    10% {
        transform: scale(.75,1.25) translate(-12px) rotate(-3deg);
        filter: brightness(2)
    }

    25% {
        transform: scale(1.2,.8) translate(8px) rotate(2deg);
        filter: brightness(1.5)
    }

    40% {
        transform: scale(.9,1.1) translate(-5px) rotate(-1deg);
        filter: brightness(1.2)
    }

    60% {
        transform: scale(1.05,.95) translate(3px) rotate(.5deg);
        filter: brightness(1)
    }

    80% {
        transform: scale(.98,1.02) translate(-1px) rotate(-.2deg);
        filter: brightness(1)
    }

    to {
        transform: scale(1) translate(0) rotate(0);
        filter: brightness(1)
    }
}

@keyframes combat-crit-recoil-enemy {
    0% {
        transform: scale(1) translate(0) rotate(0);
        filter: brightness(1)
    }

    10% {
        transform: scale(.75,1.25) translate(12px) rotate(3deg);
        filter: brightness(2)
    }

    25% {
        transform: scale(1.2,.8) translate(-8px) rotate(-2deg);
        filter: brightness(1.5)
    }

    40% {
        transform: scale(.9,1.1) translate(5px) rotate(1deg);
        filter: brightness(1.2)
    }

    60% {
        transform: scale(1.05,.95) translate(-3px) rotate(-.5deg);
        filter: brightness(1)
    }

    80% {
        transform: scale(.98,1.02) translate(1px) rotate(.2deg);
        filter: brightness(1)
    }

    to {
        transform: scale(1) translate(0) rotate(0);
        filter: brightness(1)
    }
}

.combatant-card.crit-recoil {
    animation: combat-crit-recoil .5s cubic-bezier(.25,.46,.45,.94)
}

.combatant-card.enemy.crit-recoil {
    animation: combat-crit-recoil-enemy .5s cubic-bezier(.25,.46,.45,.94)
}

@keyframes combat-dodge {
    0% {
        transform: translate(0) rotate(0);
        opacity: 1
    }

    20% {
        transform: translate(20px) rotate(5deg);
        opacity: .7
    }

    40% {
        transform: translate(25px) rotate(8deg);
        opacity: .5
    }

    60% {
        transform: translate(15px) rotate(4deg);
        opacity: .7
    }

    80% {
        transform: translate(5px) rotate(1deg);
        opacity: .9
    }

    to {
        transform: translate(0) rotate(0);
        opacity: 1
    }
}

@keyframes combat-dodge-enemy {
    0% {
        transform: translate(0) rotate(0);
        opacity: 1
    }

    20% {
        transform: translate(-20px) rotate(-5deg);
        opacity: .7
    }

    40% {
        transform: translate(-25px) rotate(-8deg);
        opacity: .5
    }

    60% {
        transform: translate(-15px) rotate(-4deg);
        opacity: .7
    }

    80% {
        transform: translate(-5px) rotate(-1deg);
        opacity: .9
    }

    to {
        transform: translate(0) rotate(0);
        opacity: 1
    }
}

.combatant-card.dodging {
    animation: combat-dodge .4s cubic-bezier(.25,.46,.45,.94)
}

.combatant-card.enemy.dodging {
    animation: combat-dodge-enemy .4s cubic-bezier(.25,.46,.45,.94)
}

@keyframes combat-flash {
    0% {
        opacity: 0
    }

    20% {
        opacity: .8
    }

    to {
        opacity: 0
    }
}

.combat-impact-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center,#ffffffe6,#ffc86466);
    pointer-events: none;
    opacity: 0;
    animation: combat-flash .2s ease-out forwards;
    z-index: 100;
    border-radius: 8px
}

.combat-impact-flash.crit {
    background: radial-gradient(circle at center,#ffff96,#ff643299);
    animation-duration: .3s
}

@keyframes damage-float {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0
    }

    15% {
        transform: translateY(-8px) scale(1.2);
        opacity: 1
    }

    30% {
        transform: translateY(-20px) scale(1);
        opacity: 1
    }

    to {
        transform: translateY(-50px) scale(.8);
        opacity: 0
    }
}

@keyframes damage-float-crit {
    0% {
        transform: translateY(0) scale(.3) rotate(-10deg);
        opacity: 0
    }

    10% {
        transform: translateY(-5px) scale(1.5) rotate(5deg);
        opacity: 1
    }

    25% {
        transform: translateY(-15px) scale(1.3) rotate(-3deg);
        opacity: 1
    }

    50% {
        transform: translateY(-35px) scale(1.1) rotate(0);
        opacity: 1
    }

    to {
        transform: translateY(-70px) scale(.9) rotate(0);
        opacity: 0
    }
}

@keyframes heal-float {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0
    }

    15% {
        transform: translateY(-10px) scale(1.1);
        opacity: 1
    }

    to {
        transform: translateY(-40px) scale(.9);
        opacity: 0
    }
}

.combat-damage-number {
    position: absolute;
    font-size: 20px;
    font-weight: 700;
    color: #f44;
    text-shadow: 0 0 4px #000,0 2px 4px rgba(0,0,0,.8),0 0 12px rgba(255,0,0,.5);
    pointer-events: none;
    z-index: 200;
    animation: damage-float .8s ease-out forwards;
    white-space: nowrap
}

.combat-damage-number.crit {
    font-size: 28px;
    color: #fc0;
    text-shadow: 0 0 6px #000,0 2px 6px rgba(0,0,0,.9),0 0 20px rgba(255,200,0,.7),0 0 40px rgba(255,100,0,.5);
    animation: damage-float-crit 1s ease-out forwards
}

.combat-damage-number.crit:before {
    content: "CRIT! ";
    font-size: 14px;
    color: #f60
}

.combat-damage-number.heal {
    color: #4f4;
    text-shadow: 0 0 4px #000,0 2px 4px rgba(0,0,0,.8),0 0 12px rgba(0,255,0,.5);
    animation: heal-float .8s ease-out forwards
}

.combat-damage-number.dodge {
    font-size: 16px;
    color: #aaf;
    font-style: italic;
    text-shadow: 0 0 4px #000,0 2px 4px rgba(0,0,0,.8)
}

.combat-damage-number.dodge:before {
    content: ""
}

.combat-damage-number.heal {
    font-size: 18px;
    color: #6f8;
    text-shadow: 0 0 4px #000,0 2px 4px rgba(0,0,0,.8),0 0 8px rgba(100,255,130,.5)
}

.combat-damage-number.heal:before {
    content: "+"
}

.combat-damage-number.condition {
    font-size: 16px;
    color: #c8f;
    text-shadow: 0 0 4px #000,0 2px 4px rgba(0,0,0,.8),0 0 6px rgba(180,100,255,.5)
}

.combat-damage-number.condition:before {
    content: "-"
}

.player-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    justify-content: center
}

.condition-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    background: #50286499;
    border: 1px solid rgba(150,80,180,.5);
    border-radius: 4px;
    font-size: 10px;
    color: #dda0ff;
    cursor: help
}

.condition-icon {
    font-size: 12px
}

.condition-turns {
    font-size: 9px;
    color: #a8c
}

@keyframes combat-death {
    0% {
        transform: scale(1) rotate(0);
        opacity: 1;
        filter: brightness(1) saturate(1)
    }

    20% {
        transform: scale(1.1) rotate(-5deg);
        opacity: 1;
        filter: brightness(1.5) saturate(.5)
    }

    50% {
        transform: scale(.9) rotate(5deg);
        opacity: .8;
        filter: brightness(.8) saturate(.3)
    }

    to {
        transform: scale(.8) rotate(0) translateY(10px);
        opacity: .35;
        filter: brightness(.5) saturate(0) grayscale(.5)
    }
}

.combatant-card.dying {
    animation: combat-death .6s ease-out forwards
}

@keyframes defend-pulse {
    0%,to {
        box-shadow: 0 0 8px #64b4ff4d,inset 0 0 15px #64b4ff1a
    }

    50% {
        box-shadow: 0 0 16px #64b4ff80,inset 0 0 25px #64b4ff33
    }
}

.combatant-card.defending {
    animation: defend-pulse 1.5s ease-in-out infinite;
    border-color: #58c!important
}

@keyframes turn-pulse {
    0%,to {
        box-shadow: 0 0 10px #ffd70066
    }

    50% {
        box-shadow: 0 0 20px #ffd700b3,0 0 30px #ffb4004d
    }
}

.combatant-card.current-turn {
    animation: turn-pulse 1.2s ease-in-out infinite;
    border-color: gold!important
}

.combat-participants {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    background: #252520;
    border-radius: 6px
}

.combat-participant {
    flex: 1;
    text-align: center
}

.combat-participant.player {
    text-align: left
}

.combat-participant.enemy {
    text-align: right
}

.participant-icon {
    font-size: 48px;
    margin-bottom: 8px
}

.participant-name {
    font-size: 16px;
    font-weight: 600;
    color: #e0d0c0;
    margin-bottom: 8px
}

.participant-hp {
    display: flex;
    align-items: center;
    gap: 8px
}

.combat-participant.enemy .participant-hp {
    flex-direction: row-reverse
}

.hp-bar {
    flex: 1;
    height: 16px;
    background: #3a3530;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px #0000004d
}

.hp-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .3s ease
}

.hp-fill.player-hp {
    background: linear-gradient(90deg,#4a7040,#6a9060)
}

.hp-fill.enemy-hp {
    background: linear-gradient(90deg,#704040,#906060)
}

.hp-text {
    font-size: 11px;
    color: #a0a090;
    min-width: 50px
}

.combat-vs {
    font-size: 18px;
    font-weight: 700;
    color: #606050
}

.combat-enemies {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1
}

.combat-enemy {
    padding: 10px;
    border: 2px solid #444;
    border-radius: 8px;
    min-width: 100px;
    max-width: 140px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s,opacity .3s,box-shadow .2s;
    background: #2a2520
}

.combat-enemy.targeted {
    border-color: #fc0;
    box-shadow: 0 0 12px #ffcc0080
}

.combat-enemy.dead {
    opacity: .4;
    pointer-events: none;
    border-color: #333
}

.combat-enemy:hover:not(.dead):not(.targeted) {
    border-color: #888
}

.combat-enemy .enemy-icon {
    font-size: 28px;
    margin-bottom: 4px
}

.combat-enemy .enemy-name {
    font-size: 12px;
    font-weight: 600;
    color: #e0d0c0;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.combat-enemy .enemy-hp-bar {
    margin-bottom: 4px
}

.combat-enemy .enemy-hp-bar .hp-bar {
    height: 8px
}

.combat-enemy .enemy-hp-bar .hp-text {
    font-size: 10px;
    min-width: auto;
    display: block;
    margin-top: 2px
}

.combat-enemy .enemy-charge-bar {
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden
}

.combat-enemy .enemy-charge-bar .charge-fill {
    height: 100%;
    background: linear-gradient(90deg,#f44,#f84);
    border-radius: 2px;
    transition: width .05s linear
}

@keyframes enemy-shake {
    0%,to {
        transform: translate(0)
    }

    10% {
        transform: translate(-8px) rotate(-2deg)
    }

    20% {
        transform: translate(8px) rotate(2deg)
    }

    30% {
        transform: translate(-6px) rotate(-1deg)
    }

    40% {
        transform: translate(6px) rotate(1deg)
    }

    50% {
        transform: translate(-4px)
    }

    60% {
        transform: translate(4px)
    }

    70% {
        transform: translate(-2px)
    }

    80% {
        transform: translate(2px)
    }

    90% {
        transform: translate(-1px)
    }
}

.combat-enemy.shake {
    animation: enemy-shake .4s ease-out
}

.combat-enemy.damage-flash {
    background: #ff32324d!important
}

@keyframes player-shake {
    0%,to {
        transform: translate(0)
    }

    15% {
        transform: translate(-5px)
    }

    30% {
        transform: translate(5px)
    }

    45% {
        transform: translate(-3px)
    }

    60% {
        transform: translate(3px)
    }

    75% {
        transform: translate(-1px)
    }
}

.combat-participant.player.shake {
    animation: player-shake .3s ease-out
}

.combat-participant.player.damage-flash {
    background: #ff323233!important
}

.target-hint {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    font-style: italic
}

.combat-log {
    max-height: 120px;
    overflow-y: auto;
    padding: 10px;
    background: #1a1a15;
    border-radius: 4px;
    border: 1px solid #3a3530
}

.combat-msg {
    font-size: 11px;
    color: #b0a090;
    padding: 3px 0;
    border-bottom: 1px solid #2a2520
}

.combat-msg:last-child {
    border-bottom: none
}

.participant-resources {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px
}

.participant-resources .resource {
    color: #a0a090
}

.participant-resources .stamina {
    color: #e0c060
}

.participant-resources .ether {
    color: #80b0e0
}

.charge-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px
}

.charge-bar {
    flex: 1;
    height: 8px;
    background: #2a2520;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px #0006
}

.charge-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .05s linear
}

.charge-fill.player-charge {
    background: linear-gradient(90deg,#407080,#60a0b0)
}

.charge-fill.player-charge.charging {
    background: linear-gradient(90deg,#508090,#70b0c0);
    animation: pulse-charge .5s ease-in-out infinite
}

.charge-fill.player-charge.ready {
    background: linear-gradient(90deg,#40a060,#60c080);
    width: 100%!important
}

.charge-fill.enemy-charge {
    background: linear-gradient(90deg,#804040,#b06060);
    animation: pulse-enemy .8s ease-in-out infinite
}

.charge-label {
    font-size: 10px;
    color: #a0a090;
    min-width: 70px;
    text-align: right
}

.enemy-charge-container {
    flex-direction: row-reverse
}

.enemy-charge-container .charge-label {
    text-align: left
}

@keyframes pulse-charge {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .7
    }
}

@keyframes pulse-enemy {
    0%,to {
        opacity: 1;
        filter: brightness(1)
    }

    50% {
        opacity: .9;
        filter: brightness(1.1)
    }
}

.combat-btn.action-pending {
    box-shadow: 0 0 0 2px #c4a84b,0 0 12px #c4a84b99;
    animation: pending-pulse 1s ease-in-out infinite
}

.combat-btn.action-pending:before {
    content: "▶";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 8px;
    color: #c4a84b
}

@keyframes pending-pulse {
    0%,to {
        box-shadow: 0 0 0 2px #c4a84b,0 0 8px #c4a84b66
    }

    50% {
        box-shadow: 0 0 0 2px #c4a84b,0 0 16px #c4a84bcc
    }
}

.combat-actions-container {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.action-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.action-group-label {
    font-size: 10px;
    color: #808070;
    text-transform: uppercase;
    letter-spacing: 1px
}

.action-group-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.combat-btn {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid;
    position: relative;
    overflow: hidden
}

.combat-btn .btn-icon {
    font-size: 22px
}

.combat-btn .btn-text {
    font-size: 11px
}

.combat-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.combat-btn.attack {
    color: #fff;
    background: linear-gradient(180deg,#8a4040,#6a3030);
    border-color: #9a5050
}

.combat-btn.attack:hover:not(:disabled) {
    background: linear-gradient(180deg,#9a5050,#7a4040)
}

.combat-btn.skill {
    color: #ffe0a0;
    background: linear-gradient(180deg,#8a6030,#6a4020);
    border-color: #9a7040
}

.combat-btn.skill:hover:not(:disabled) {
    background: linear-gradient(180deg,#9a7040,#7a5030)
}

.combat-btn.spell {
    color: #a0d0ff;
    background: linear-gradient(180deg,#304080,#203060);
    border-color: #405090
}

.combat-btn.spell:hover:not(:disabled) {
    background: linear-gradient(180deg,#405090,#304080)
}

.combat-btn.defend {
    color: #e0d0c0;
    background: linear-gradient(180deg,#4a5060,#3a4050);
    border-color: #5a6070
}

.combat-btn.defend:hover:not(:disabled) {
    background: linear-gradient(180deg,#5a6070,#4a5060)
}

.combat-btn.flee {
    color: #d0c0b0;
    background: linear-gradient(180deg,#5a5040,#4a4030);
    border-color: #6a6050
}

.combat-btn.flee:hover:not(:disabled) {
    background: linear-gradient(180deg,#6a6050,#5a5040)
}

.combat-result {
    text-align: center;
    padding: 20px
}

.result-icon {
    font-size: 48px;
    margin-bottom: 10px
}

.result-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px
}

.combat-result.victory .result-title {
    color: #80c070
}

.combat-result.defeat .result-title {
    color: #c07070
}

.level-up-banner {
    background: linear-gradient(135deg,#2a4030,#1a3020);
    border: 2px solid #40c080;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    animation: level-up-glow 1s ease-in-out infinite alternate
}

.level-up-icon {
    font-size: 32px;
    margin-bottom: 4px
}

.level-up-text {
    font-size: 20px;
    font-weight: 700;
    color: #60e0a0;
    text-shadow: 0 0 10px rgba(96,224,160,.5);
    letter-spacing: 2px
}

.level-up-new {
    font-size: 16px;
    color: #a0d0b0;
    margin-top: 4px
}

@keyframes level-up-glow {
    0% {
        box-shadow: 0 0 5px #40c0804d
    }

    to {
        box-shadow: 0 0 20px #40c08099
    }
}

.result-rewards,.result-penalty {
    margin-bottom: 16px;
    padding: 12px;
    background: #252520;
    border-radius: 6px
}

.reward-item {
    font-size: 14px;
    color: #d4a84b;
    margin: 6px 0
}

.result-penalty div {
    font-size: 12px;
    color: #a08080;
    margin: 4px 0
}

.result-penalty.permadeath {
    background: linear-gradient(135deg,#3a2020,#2a1515);
    border: 1px solid #804040
}

.permadeath-message {
    font-size: 16px;
    color: #c08080;
    font-style: italic;
    margin-bottom: 12px
}

.permadeath-stats {
    border-top: 1px solid #504040;
    padding-top: 10px
}

.permadeath-stats div {
    font-size: 14px;
    color: #b0a0a0;
    margin: 6px 0
}

.final-log {
    margin-bottom: 16px
}

.close-combat {
    padding: 10px 30px;
    font-size: 14px
}

.loot-section {
    background: #1a1a18;
    border: 1px solid #3a3530;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px
}

.loot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a3530
}

.loot-title {
    font-size: 12px;
    font-weight: 600;
    color: #d4a84b;
    text-transform: uppercase;
    letter-spacing: 1px
}

.loot-all-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg,#508050,#406040);
    border: 1px solid #609060;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.loot-all-btn:hover {
    background: linear-gradient(180deg,#609060,#508050)
}

.dismember-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg,#804040,#603030);
    border: 1px solid #905050;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s
}

.dismember-btn:hover {
    background: linear-gradient(180deg,#905050,#804040)
}

.dismember-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.loot-item.dismembered {
    background: linear-gradient(180deg,#6432324d,#50282833);
    border-color: #804050;
    animation: dismember-fade-in .3s ease-out
}

@keyframes dismember-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.loot-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto
}

.loot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #252520;
    border: 1px solid #3a3530;
    border-radius: 4px;
    transition: all .2s
}

.loot-item:hover {
    background: #2a2a25;
    border-color: #4a4540
}

.loot-item.looted {
    opacity: 0;
    transform: translate(20px)
}

.loot-icon {
    font-size: 20px;
    width: 28px;
    text-align: center
}

.loot-info {
    flex: 1;
    min-width: 0
}

.loot-name {
    font-size: 11px;
    font-weight: 500;
    color: #d0c0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.loot-qty {
    font-size: 10px;
    color: #808070
}

.loot-take-btn {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 500;
    color: #c0b0a0;
    background: #3a3530;
    border: 1px solid #4a4540;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s
}

.loot-take-btn:hover {
    background: #4a4540;
    color: #fff
}

.loot-section.looted-all {
    opacity: 0;
    transform: scale(.95);
    transition: all .3s
}

.loot-grid::-webkit-scrollbar {
    width: 6px
}

.loot-grid::-webkit-scrollbar-track {
    background: #1a1a18
}

.loot-grid::-webkit-scrollbar-thumb {
    background: #4a4540;
    border-radius: 3px
}

.loot-grid::-webkit-scrollbar-thumb:hover {
    background: #5a5550
}

#dungeon-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #111;
    z-index: 1000;
    display: none
}

#dungeon-overlay.visible {
    display: block
}

.dungeon-header {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%);
    background: #000000d9;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid #444;
    color: #fff;
    font-size: 1.3em;
    text-align: center;
    z-index: 10;
    display: flex;
    gap: 15px;
    align-items: center
}

.dungeon-name {
    font-weight: 700;
    color: #e6c78e
}

.dungeon-info {
    color: #888;
    font-size: .8em
}

#dungeon-canvas {
    width: 100%;
    height: 100%;
    cursor: pointer
}

.dungeon-controls {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10
}

.dungeon-exit-btn {
    padding: 12px 24px;
    background: linear-gradient(180deg,#a33,#822);
    border: 1px solid #cc4444;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    transition: all .2s;
    text-shadow: 0 1px 2px rgba(0,0,0,.5)
}

.dungeon-exit-btn:hover {
    background: linear-gradient(180deg,#c44,#a33);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #c8323266
}

.dungeon-exit-btn:active {
    transform: translateY(0)
}

.dungeon-room-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    background: #000000d9;
    padding: 15px 25px;
    border-radius: 8px;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    z-index: 10;
    min-width: 200px
}

.dungeon-room-info .room-type {
    font-size: 1.2em;
    font-weight: 700;
    color: #e6c78e;
    margin-bottom: 8px
}

.dungeon-room-info .room-enemy {
    color: #f44;
    margin: 4px 0
}

.dungeon-room-info .room-chest {
    color: gold;
    margin: 4px 0
}

.dungeon-room-info .room-boss {
    color: #f66;
    font-weight: 700;
    margin: 4px 0
}

.dungeon-room-info .room-exits {
    color: #888;
    margin-top: 8px;
    font-size: .9em
}

.task-modal {
    max-width: 500px
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3d3d3d
}

.task-header h3 {
    margin: 0;
    font-size: 14px;
    color: #e6c78e
}

.task-stats {
    font-size: 10px;
    color: #909080
}

.task-section {
    margin-bottom: 15px
}

.task-section h4 {
    font-size: 11px;
    color: #8a9a7a;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    background: linear-gradient(180deg,#2a2a28,#222220);
    border: 1px solid #3a3a38;
    border-radius: 4px;
    transition: all .15s
}

.task-item:hover {
    background: linear-gradient(180deg,#323230,#2a2a28);
    border-color: #4a4a48
}

.task-item.accepted {
    border-color: #5a7a5a;
    background: linear-gradient(180deg,#2a3a2a,#223022)
}

.task-item.volunteer {
    border-color: #5a5a8a
}

.task-item.volunteer.accepted {
    border-color: #6a6a9a;
    background: linear-gradient(180deg,#2a2a3a,#222230)
}

.task-icon {
    font-size: 24px;
    width: 32px;
    text-align: center
}

.task-info {
    flex: 1;
    min-width: 0
}

.task-name {
    font-size: 12px;
    font-weight: 600;
    color: #d0c0a0;
    margin-bottom: 2px
}

.task-desc {
    font-size: 9px;
    color: #808070
}

.task-requirement {
    font-size: 10px;
    color: #a09080;
    margin-top: 3px
}

.task-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px
}

.task-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: #1a1a18;
    border-radius: 3px;
    overflow: hidden
}

.task-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#5a8a5a,#7aba7a);
    border-radius: 3px;
    transition: width .3s
}

.task-progress span {
    font-size: 9px;
    color: #909080;
    min-width: 35px;
    text-align: right
}

.task-reward {
    font-size: 11px;
    font-weight: 600;
    color: #c4a84b;
    white-space: nowrap;
    padding: 0 8px
}

.task-btn {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid
}

.task-btn.accept {
    color: #a0c0a0;
    background: linear-gradient(180deg,#3a4a3a,#2a3a2a);
    border-color: #4a5a4a
}

.task-btn.accept:hover {
    background: linear-gradient(180deg,#4a5a4a,#3a4a3a);
    color: #c0e0c0
}

.task-btn.abandon {
    color: #c0a0a0;
    background: linear-gradient(180deg,#4a3a3a,#3a2a2a);
    border-color: #5a4a4a
}

.task-btn.abandon:hover {
    background: linear-gradient(180deg,#5a4a4a,#4a3a3a);
    color: #e0c0c0
}

.task-btn.complete {
    color: #a0e0a0;
    background: linear-gradient(180deg,#3a5a3a,#2a4a2a);
    border-color: #4a6a4a;
    animation: complete-pulse 1.5s ease-in-out infinite
}

.task-btn.complete:hover {
    background: linear-gradient(180deg,#4a6a4a,#3a5a3a);
    color: #c0f0c0
}

@keyframes complete-pulse {
    0%,to {
        box-shadow: 0 0 4px #64c8644d
    }

    50% {
        box-shadow: 0 0 12px #64c86499
    }
}

.task-item.at-destination {
    border-color: #4a6a4a;
    background: linear-gradient(180deg,#3c5a3c4d,#283c284d)
}

.task-requirement.success {
    color: #8aba6a
}

.task-requirement.danger {
    color: #ba6a6a
}

.task-btn.use-item {
    color: #a0b0c0;
    background: linear-gradient(180deg,#3a4050,#2a3040);
    border-color: #4a5060
}

.task-btn.use-item:hover {
    background: linear-gradient(180deg,#4a5060,#3a4050);
    color: #c0d0e0
}

.task-btn.use-item.disabled {
    opacity: .5;
    cursor: not-allowed
}

.task-actions {
    display: flex;
    gap: 6px;
    flex-direction: column;
    align-items: flex-end
}

.task-hint {
    font-size: 9px;
    color: #908060;
    font-style: italic;
    margin-top: 2px
}

.no-tasks {
    padding: 20px;
    text-align: center;
    color: #706050;
    font-size: 12px;
    font-style: italic
}

.alignment-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #1a1a18;
    border-radius: 4px;
    font-size: 10px
}

.alignment-label {
    color: #808070
}

.alignment-value {
    font-weight: 600
}

.alignment-bar {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg,#8b0000,#b0b0b0,gold);
    border-radius: 2px;
    position: relative
}

.alignment-marker {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #333;
    transform: translate(-50%)
}

.cult-shrine-modal {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.shrine-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg,#1a0a1a,#0a0a0a);
    border-radius: 8px;
    border: 1px solid #3a1a3a
}

.shrine-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 8px rgba(138,43,226,.5))
}

.shrine-info {
    flex: 1
}

.shrine-name {
    font-size: 16px;
    font-weight: 600;
    color: #d4a0ff
}

.shrine-type {
    font-size: 12px;
    color: #9060a0
}

.shrine-lore {
    font-style: italic;
    color: #a080b0;
    padding: 12px;
    background: #3c143c33;
    border-left: 3px solid #6a2a6a;
    border-radius: 0 4px 4px 0
}

.cult-info {
    padding: 12px;
    background: #140a1499;
    border-radius: 8px;
    border: 1px solid #4a2a4a
}

.cult-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

.cult-icon {
    font-size: 24px
}

.cult-name {
    font-size: 14px;
    font-weight: 600;
    color: #e0c0e0
}

.cult-focus {
    font-size: 11px;
    color: #8060a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px
}

.cult-desc {
    font-size: 12px;
    color: #b090c0
}

.cult-membership {
    padding: 12px;
    background: linear-gradient(135deg,#2a1a2a,#1a0a1a);
    border-radius: 8px;
    border: 1px solid #5a3a5a
}

.membership-header {
    font-size: 11px;
    color: #8060a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px
}

.membership-rank {
    font-size: 14px;
    font-weight: 600;
    color: #d4a0ff
}

.membership-rep {
    font-size: 12px;
    color: #a080b0
}

.ritual-section {
    padding: 12px;
    background: #1e0f1e99;
    border-radius: 8px
}

.ritual-header {
    font-size: 13px;
    font-weight: 600;
    color: #c090d0;
    margin-bottom: 12px;
    border-bottom: 1px solid #4a2a4a;
    padding-bottom: 8px
}

.no-rituals {
    font-size: 12px;
    color: #706080;
    font-style: italic
}

.ritual-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    background: #28142866;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    transition: all .2s
}

.ritual-item:hover:not(.disabled) {
    border-color: #6a3a6a;
    background: #3c1e3c66
}

.ritual-item.disabled {
    opacity: .5
}

.ritual-info {
    flex: 1
}

.ritual-name {
    font-size: 13px;
    font-weight: 600;
    color: #d4a0ff;
    margin-bottom: 4px
}

.ritual-desc {
    font-size: 11px;
    color: #a080b0;
    margin-bottom: 6px
}

.ritual-cost {
    font-size: 10px;
    color: #c66
}

.ritual-reward {
    font-size: 10px;
    color: #6c9
}

.ritual-status {
    font-size: 10px;
    color: #f96;
    margin-top: 4px
}

.ritual-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg,#5a2a5a,#3a1a3a);
    border: 1px solid #7a4a7a;
    border-radius: 4px;
    color: #e0c0e0;
    font-size: 11px;
    cursor: pointer;
    transition: all .2s
}

.ritual-btn:hover:not([disabled]) {
    background: linear-gradient(135deg,#7a4a7a,#5a2a5a);
    border-color: #9a6a9a
}

.ritual-btn[disabled] {
    opacity: .4;
    cursor: not-allowed
}

.sacrifice-section {
    padding: 12px;
    background: linear-gradient(135deg,#2a0a0a,#1a0505);
    border-radius: 8px;
    border: 1px solid #5a2a2a
}

.sacrifice-header {
    font-size: 13px;
    font-weight: 600;
    color: #f66;
    margin-bottom: 8px
}

.sacrifice-desc {
    font-size: 11px;
    color: #c99;
    margin-bottom: 12px;
    font-style: italic
}

.sacrifice-select {
    width: 100%;
    padding: 8px;
    background: #1a0a0a;
    border: 1px solid #4a2a2a;
    border-radius: 4px;
    color: #e0c0c0;
    font-size: 12px;
    margin-bottom: 12px
}

.cult-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid
}

.join-btn {
    background: linear-gradient(135deg,#4a2a4a,#2a1a2a);
    border-color: #6a4a6a;
    color: #d4a0ff
}

.join-btn:hover {
    background: linear-gradient(135deg,#6a4a6a,#4a2a4a)
}

.leave-btn {
    background: linear-gradient(135deg,#3a2a2a,#2a1a1a);
    border-color: #5a4a4a;
    color: #caa
}

.leave-btn:hover {
    background: linear-gradient(135deg,#4a3a3a,#3a2a2a)
}

.sacrifice-btn {
    background: linear-gradient(135deg,#6a1a1a,#4a0a0a);
    border-color: #8a3a3a;
    color: #faa;
    width: 100%
}

.sacrifice-btn:hover {
    background: linear-gradient(135deg,#8a2a2a,#6a1a1a)
}

.cult-join {
    padding: 12px;
    background: #1e0f1e99;
    border-radius: 8px
}

.join-header {
    font-size: 14px;
    font-weight: 600;
    color: #c090d0;
    margin-bottom: 12px
}

.join-requirements {
    font-size: 12px;
    color: #a080b0;
    margin-bottom: 12px
}

.join-blocked {
    font-size: 12px;
    color: #886;
    font-style: italic;
    padding: 8px;
    background: #3c3c284d;
    border-radius: 4px
}

.shrine-mystery {
    font-style: italic;
    color: #706080;
    text-align: center;
    padding: 20px
}

.cult-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #3a2a3a
}

.sacrifice-confirm {
    text-align: center
}

.sacrifice-warning {
    font-size: 18px;
    color: #f44;
    margin-bottom: 16px;
    animation: pulse 1s infinite
}

@keyframes pulse {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

.sacrifice-confirm p {
    margin-bottom: 12px;
    color: #caa
}

.sacrifice-confirm ul {
    text-align: left;
    margin: 12px 0 20px 20px;
    color: #a88;
    font-size: 12px
}

.sacrifice-confirm li {
    margin-bottom: 6px
}

.sacrifice-buttons {
    display: flex;
    gap: 12px;
    justify-content: center
}

.cancel-btn {
    background: #2a2a2a;
    border-color: #4a4a4a;
    color: #aaa
}

.confirm-sacrifice-btn {
    background: linear-gradient(135deg,#8a1a1a,#5a0a0a);
    border-color: #aa3a3a;
    color: #fcc
}

.confirm-sacrifice-btn:hover {
    background: linear-gradient(135deg,#aa2a2a,#7a1a1a)
}

.location-btn.cult {
    background: linear-gradient(135deg,#3a1a3a,#2a0a2a);
    border-color: #5a3a5a;
    color: #d4a0ff
}

.location-btn.cult:hover {
    background: linear-gradient(135deg,#4a2a4a,#3a1a3a);
    border-color: #7a5a7a
}

.location-btn.guild {
    border-color: #5a6a7a;
    color: #d4e0ff
}

.location-btn.guild:hover {
    filter: brightness(1.2);
    border-color: #7a8a9a
}

.location-btn.crafting {
    border-color: #7a6a4a;
    color: #e8d4b0
}

.location-btn.crafting:hover {
    filter: brightness(1.2);
    border-color: #9a8a6a
}

.guild-hall-modal .guild-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px
}

.guild-hall-modal .guild-actions button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s
}

.guild-hall-modal .guild-actions button:hover {
    filter: brightness(1.2);
    transform: translateY(-1px)
}

.citizen-link {
    cursor: pointer;
    transition: background .15s ease,transform .1s ease
}

.citizen-link:hover {
    background: #6496ff33!important;
    transform: translateY(-1px)
}

.cults-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #3a2a3a
}

.cults-section .section-label {
    color: #9060a0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px
}

.cults-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.cult-item {
    padding: 6px 8px;
    background: linear-gradient(135deg,#1a0a1a,#0d050d);
    border: 1px solid #3a1a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s
}

.cult-item:hover {
    border-color: #5a3a5a;
    background: linear-gradient(135deg,#2a1a2a,#1a0a1a)
}

.cult-item .cult-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px
}

.cult-item .cult-icon {
    font-size: 14px
}

.cult-item .cult-name {
    font-size: 11px;
    font-weight: 600;
    color: #d4a0ff
}

.cult-item .cult-rank {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    margin-bottom: 4px
}

.cult-item .rank-name {
    color: #a080b0
}

.cult-item .rank-progress {
    color: #8060a0
}

.cult-item .rank-max {
    color: #d4a0ff;
    font-weight: 600
}

.cult-progress {
    height: 3px;
    background: #2a1a2a;
    border-radius: 2px;
    overflow: hidden
}

.cult-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#6a2a6a,#9a4a9a);
    border-radius: 2px;
    transition: width .3s
}

.compass {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    background: linear-gradient(180deg,#1e1c18f2,#14120ef2);
    border: 1px solid #3a3830;
    border-radius: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    z-index: 100;
    transition: all .2s;
    box-shadow: 0 4px 12px #00000080
}

.compass:hover {
    border-color: #5a5840;
    background: linear-gradient(180deg,#282622f2,#1e1c18f2)
}

.compass-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg,#2a2820,#1a1810);
    border: 2px solid #4a4830;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.compass-arrow {
    font-size: 24px;
    color: #c4a84b;
    transition: transform .3s ease-out;
    text-shadow: 0 0 8px rgba(196,168,75,.5)
}

.compass-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 160px
}

.compass-target-icon {
    font-size: 18px;
    position: absolute;
    top: -8px;
    right: -8px;
    background: #1a1810;
    border-radius: 50%;
    padding: 3px
}

.compass-target-name {
    font-size: 14px;
    color: #c0b080;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px
}

.compass-distance {
    font-size: 12px;
    color: #807060
}

.compass-hint {
    font-size: 10px;
    color: #504840;
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap
}

.compass.no-target .compass-arrow {
    color: #504840;
    animation: compass-pulse 2s infinite
}

@keyframes compass-pulse {
    0%,to {
        opacity: .5
    }

    50% {
        opacity: 1
    }
}

.compass.target-quest .compass-ring {
    border-color: #6a8a4a
}

.compass.target-quest .compass-arrow {
    color: #8aba6a
}

.compass.target-town .compass-ring {
    border-color: #6a6a8a
}

.compass.target-town .compass-arrow {
    color: #8a8aba
}

.compass.target-dungeon .compass-ring {
    border-color: #8a4a4a
}

.compass.target-dungeon .compass-arrow {
    color: #ba6a6a
}

.compass.target-delivery .compass-ring {
    border-color: #8a7a4a
}

.compass.target-delivery .compass-arrow {
    color: #baa06a
}

.compass.target-hideout .compass-ring {
    border-color: #8a3a3a;
    animation: hideout-pulse 1s ease-in-out infinite
}

.compass.target-hideout .compass-arrow {
    color: #da4a4a
}

@keyframes hideout-pulse {
    0%,to {
        border-color: #8a3a3a;
        box-shadow: 0 0 8px #b43c3c4d
    }

    50% {
        border-color: #ba5a5a;
        box-shadow: 0 0 16px #b43c3c99
    }
}

.compass.target-crafting .compass-ring {
    border-color: #8a6a3a
}

.compass.target-crafting .compass-arrow {
    color: #ba8a5a
}

.bandit-escape-modal {
    text-align: center
}

.escape-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px
}

.escape-icon {
    font-size: 48px;
    animation: escape-run .5s ease-in-out infinite alternate
}

@keyframes escape-run {
    0% {
        transform: translate(-10px)
    }

    to {
        transform: translate(10px)
    }
}

.escape-header h3 {
    margin: 0;
    color: #da6a6a;
    font-size: 20px
}

.escape-message {
    background: #0000004d;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px
}

.escape-message p {
    margin: 8px 0
}

.escape-direction {
    font-size: 16px;
    color: #e0d0c0
}

.direction-highlight {
    color: #daa06a;
    text-transform: uppercase;
    font-size: 18px
}

.escape-hint {
    font-size: 12px;
    color: #a09080;
    font-style: italic
}

.escape-stats {
    display: flex;
    justify-content: center;
    gap: 24px
}

.escape-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.escape-stats .stat-label {
    font-size: 11px;
    color: #908070;
    text-transform: uppercase
}

.escape-stats .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #c0b0a0
}

.escape-stats .stat-value.danger {
    color: #da6a6a
}

.lexicon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg,#4a5a6a,#3a4a5a);
    border: 1px solid #5a6a7a;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s
}

.lexicon-btn:hover {
    background: linear-gradient(135deg,#5a6a7a,#4a5a6a);
    transform: translateY(-50%) scale(1.1)
}

.game-modal:has(.lexicon-modal) .modal-content {
    max-width: 900px;
    width: 85vw
}

.game-modal:has(.lexicon-modal) .modal-body {
    max-height: 75vh;
    padding: 16px
}

.lexicon-modal {
    width: 100%;
    max-height: 70vh
}

.lexicon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #3a3a3a
}

.lexicon-progress {
    font-size: 13px;
    color: gray
}

.lexicon-progress-bar {
    width: 120px;
    height: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px
}

.lexicon-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#4a6a8a,#6a8aaa);
    transition: width .3s
}

.lexicon-content {
    display: flex;
    gap: 20px;
    max-height: 65vh
}

.lexicon-categories {
    width: 170px;
    flex-shrink: 0;
    border-right: 1px solid #3a3a3a;
    padding-right: 20px;
    overflow-y: auto
}

.lexicon-category {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    font-size: 14px
}

.lexicon-category:hover {
    background: #3a3a3a
}

.lexicon-category.active {
    background: #4a5a6a;
    color: #fff
}

.lexicon-category .cat-icon {
    font-size: 18px
}

.lexicon-category .cat-count {
    margin-left: auto;
    font-size: 11px;
    background: #2a2a2a;
    padding: 3px 8px;
    border-radius: 10px;
    color: gray
}

.lexicon-entries {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    min-width: 200px
}

.lexicon-entry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #2d2d2d;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s
}

.lexicon-entry-item:hover {
    background: #3a3a3a;
    transform: translate(3px)
}

.lexicon-entry-item .entry-icon {
    font-size: 22px;
    width: 32px;
    text-align: center
}

.lexicon-entry-item .entry-title {
    font-weight: 500;
    font-size: 14px;
    color: #d0c0b0
}

.lexicon-entry-detail {
    padding: 20px;
    background: #252525;
    border-radius: 10px;
    line-height: 1.8;
    overflow-y: auto
}

.lexicon-entry-detail h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #3a3a3a;
    font-size: 20px
}

.lexicon-entry-detail h2 .entry-icon {
    font-size: 28px
}

.lexicon-entry-detail p {
    margin: 12px 0;
    color: #b0a090;
    font-size: 14px
}

.lexicon-entry-detail strong {
    color: #d0c0b0
}

.lexicon-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #3a3a3a;
    border: none;
    border-radius: 4px;
    color: #a0a0a0;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 12px
}

.lexicon-back-btn:hover {
    background: #4a4a4a;
    color: #fff
}

.lexicon-empty {
    text-align: center;
    padding: 40px;
    color: #606060
}

.lexicon-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: .5
}

.lexicon-float-btn {
    position: fixed;
    bottom: 28px;
    right: 300px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg,#4a5a6a,#3a4a5a);
    border: 2px solid #5a6a7a;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: all .2s;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px #0006
}

.lexicon-float-btn:hover {
    background: linear-gradient(135deg,#5a6a7a,#4a5a6a);
    transform: scale(1.1);
    box-shadow: 0 6px 16px #00000080
}

.lexicon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg,#ff6b6b,#e55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px #0000004d;
    animation: badge-pulse 2s ease-in-out infinite
}

.lexicon-badge.hidden {
    display: none
}

@keyframes badge-pulse {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

.lexicon-btn {
    position: relative
}

.lexicon-btn .lexicon-badge {
    top: -6px;
    right: -6px
}

.lexicon-entry-item.unread {
    border-left: 3px solid #ff6b6b;
    background: #ff6b6b14;
    position: relative
}

.lexicon-entry-item.unread:after {
    content: "!";
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    background: #ff6b6b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.lexicon-entry-btn.unread {
    border-left: 3px solid #ff6b6b;
    background: #ff6b6b1a
}

.lexicon-category-btn.has-unread .lexicon-category-count {
    background: #ff6b6b;
    color: #fff
}

.dungeon-minimap {
    position: fixed;
    top: 10px;
    right: 260px;
    width: 160px;
    background: #000000d9;
    border: 2px solid #4a4a4a;
    border-radius: 8px;
    padding: 5px;
    z-index: 100
}

.dungeon-minimap.hidden {
    display: none
}

.minimap-header {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px
}

#minimap-canvas {
    display: block;
    width: 150px;
    height: 150px;
    background: #0a0a0a;
    border-radius: 4px
}

.world-minimap {
    position: fixed;
    top: 10px;
    right: 260px;
    width: 190px;
    background: #141419eb;
    border: 2px solid #4a4a4a;
    border-radius: 8px;
    padding: 5px;
    z-index: 100;
    box-shadow: 0 2px 10px #00000080
}

.world-minimap.hidden {
    display: none
}

.world-minimap-header {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px
}

#world-minimap-canvas {
    display: block;
    width: 180px;
    height: 180px;
    background: #0a0a0a;
    border-radius: 4px;
    border: 1px solid #333
}

.citizen-assignment-section {
    background: #6496ff1a;
    border: 1px solid rgba(100,150,255,.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px
}

.citizen-assignment-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: #8af
}

.citizen-working-section {
    background: #64ff961a;
    border: 1px solid rgba(100,255,150,.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px
}

.citizen-working-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: #8fa
}

.citizen-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.citizen-task-row:last-child {
    border-bottom: none
}

.citizen-task-info {
    flex: 1
}

.citizen-task-name {
    font-weight: 600;
    color: #ddd;
    margin-bottom: 2px
}

.citizen-task-worker {
    font-size: 11px;
    color: #888
}

.citizen-task-efficiency {
    font-size: 11px;
    color: #8a8;
    margin-left: 8px
}

.citizen-task-progress {
    width: 100px
}

.citizen-task-progress .progress-bar {
    height: 8px;
    background: #0006;
    border-radius: 4px;
    overflow: hidden
}

.citizen-task-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#4a8,#6c8);
    transition: width .3s
}

.citizen-assignment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.citizen-assignment-row:last-child {
    border-bottom: none
}

.citizen-assignment-name {
    min-width: 100px;
    font-weight: 600;
    color: #aad
}

.task-select {
    flex: 1;
    padding: 6px 10px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    font-size: 12px
}

.task-select:focus {
    outline: none;
    border-color: #5a8
}

.assign-citizen-btn {
    padding: 6px 12px;
    background: linear-gradient(180deg,#4a7,#385);
    border: 1px solid #5a8;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s
}

.assign-citizen-btn:hover {
    background: linear-gradient(180deg,#5b8,#496)
}

.task-btn.recall {
    background: linear-gradient(180deg,#a75,#864);
    border-color: #b86
}

.task-btn.recall:hover {
    background: linear-gradient(180deg,#b86,#975)
}

.no-idle-citizens {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 8px
}

.item-tooltip {
    position: fixed;
    background: #14141ef7;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 12px;
    max-width: 260px;
    min-width: 180px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px #00000080
}

.item-tooltip.hidden {
    display: none
}

.tooltip-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444
}

.tooltip-icon {
    font-size: 28px;
    line-height: 1
}

.tooltip-title {
    font-weight: 700;
    color: #fff;
    font-size: 14px
}

.tooltip-category {
    font-size: 11px;
    color: #888;
    text-transform: capitalize;
    margin-top: 2px
}

.tooltip-desc {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    line-height: 1.4
}

.tooltip-section {
    margin-bottom: 8px
}

.tooltip-section-title {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px
}

.tooltip-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px
}

.effect-hp {
    color: #f77;
    font-size: 12px
}

.effect-sta {
    color: #7f7;
    font-size: 12px
}

.effect-eth {
    color: #77f;
    font-size: 12px
}

.tooltip-cures {
    color: #7ff;
    font-size: 11px;
    margin-bottom: 6px
}

.tooltip-cures .cure-tag {
    display: inline-block;
    background: #00b4b433;
    border: 1px solid #7ff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
    font-size: 10px
}

.tooltip-buffs {
    margin-bottom: 6px
}

.buff-item,.tooltip-buffs .buff {
    color: #ff8;
    font-size: 11px;
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 2px
}

.buff-item:before,.tooltip-buffs .buff:before {
    content: "▲ ";
    color: #8f8
}

.tooltip-bonus {
    color: #f8f;
    font-size: 11px;
    margin-bottom: 6px
}

.tooltip-footer {
    border-top: 1px solid #444;
    padding-top: 8px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.tooltip-value {
    color: #fc8;
    font-size: 11px
}

.tooltip-hint {
    color: #888;
    font-size: 10px;
    font-style: italic
}

.tooltip-usable {
    color: #7f7;
    font-size: 10px;
    font-style: italic
}

.item-tooltip[data-rarity=common] .tooltip-title {
    color: #fff
}

.item-tooltip[data-rarity=uncommon] .tooltip-title {
    color: #7f7
}

.item-tooltip[data-rarity=rare] .tooltip-title {
    color: #77f
}

.item-tooltip[data-rarity=epic] .tooltip-title {
    color: #a7f
}

.item-tooltip[data-rarity=legendary] .tooltip-title {
    color: #fa7
}

.intro-modal {
    text-align: center;
    padding: 10px;
    min-height: 280px;
    display: flex;
    flex-direction: column
}

.intro-page-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px
}

.intro-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3a3a;
    transition: all .3s
}

.intro-dot.active {
    background: #c4a84b;
    transform: scale(1.2)
}

.intro-icon {
    font-size: 48px;
    margin-bottom: 15px
}

.intro-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.8;
    color: #c0b090;
    text-align: center;
    padding: 0 10px
}

.intro-content p {
    margin: 10px 0
}

.intro-content strong {
    color: #d4c4a0
}

.intro-content ul {
    list-style: disc;
    text-align: left;
    margin: 12px 30px
}

.intro-content li {
    margin: 6px 0
}

.intro-nav {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #3a3a3a
}

.intro-prev,.intro-next {
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s
}

.intro-prev {
    background: #2a2a2a;
    border: 1px solid #4a4a4a;
    color: #a0a0a0
}

.intro-prev:hover {
    background: #3a3a3a;
    color: #fff
}

.intro-next {
    background: linear-gradient(135deg,#5a6a4a,#4a5a3a);
    border: 1px solid #6a7a5a;
    color: #fff
}

.intro-next:hover {
    background: linear-gradient(135deg,#6a7a5a,#5a6a4a);
    transform: translateY(-1px)
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-height: calc(100vh - 40px);
    overflow: hidden
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg,#2a2a2a,#1f1f1f);
    border: 1px solid #3a3a3a;
    box-shadow: 0 4px 12px #0006;
    color: #e0e0e0;
    font-size: 14px;
    min-width: 200px;
    max-width: 350px;
    opacity: 0;
    transform: translate(100%);
    transition: all .3s ease;
    pointer-events: auto
}

.toast-show {
    opacity: 1;
    transform: translate(0)
}

.toast-hide {
    opacity: 0;
    transform: translate(100%)
}

.toast-icon {
    font-size: 18px;
    flex-shrink: 0
}

.toast-message {
    flex: 1;
    line-height: 1.4
}

.toast-success {
    border-color: #4a7a4a;
    background: linear-gradient(135deg,#2a3a2a,#1f2a1f)
}

.toast-success .toast-icon {
    color: #7ada7a
}

.toast-info {
    border-color: #4a5a7a;
    background: linear-gradient(135deg,#2a2a3a,#1f1f2a)
}

.toast-info .toast-icon {
    color: #7a9ada
}

.toast-warning {
    border-color: #7a6a4a;
    background: linear-gradient(135deg,#3a3a2a,#2a2a1f)
}

.toast-warning .toast-icon {
    color: #daca7a
}

.toast-error {
    border-color: #7a4a4a;
    background: linear-gradient(135deg,#3a2a2a,#2a1f1f)
}

.toast-error .toast-icon {
    color: #da7a7a
}

.toast-citizen {
    border-color: #6a5a4a;
    background: linear-gradient(135deg,#2a2520,#1f1a15)
}

.toast-citizen .toast-icon {
    color: #d4a84b
}

.toast-gold {
    border-color: #7a6a3a;
    background: linear-gradient(135deg,#3a3520,#2a2515)
}

.toast-gold .toast-icon {
    color: gold
}

.toast-item {
    border-color: #5a5a6a;
    background: linear-gradient(135deg,#25252a,#1a1a1f)
}

.toast-item .toast-icon {
    color: #9a9ada
}

#resource-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998
}

.resource-popup {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg,#283228f2,#192319f2);
    border: 2px solid rgba(100,180,100,.6);
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000080,0 0 30px #64b46433;
    opacity: 0;
    transform: translateY(20px) scale(.8);
    transition: all .3s cubic-bezier(.34,1.56,.64,1)
}

.resource-popup-show {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.resource-popup-hide {
    opacity: 0;
    transform: translateY(-40px) scale(.9);
    transition: all .5s ease-out
}

.resource-popup-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5))
}

.resource-popup-text {
    color: #b8e8b8;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.5)
}

.task-queue {
    position: fixed;
    bottom: 0;
    left: 10px;
    z-index: 100;
    padding: 8px 12px;
    pointer-events: none
}

.task-queue-items {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 70vw
}

.task-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg,#2a2820,#1f1d18);
    border: 1px solid #4a4535;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0006;
    min-width: 200px;
    max-width: 280px;
    pointer-events: auto;
    transition: transform .2s ease,box-shadow .2s ease
}

.task-queue-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px #00000080
}

.task-queue-item.volunteer {
    background: linear-gradient(135deg,#252830,#1a1d22);
    border-color: #3a4555
}

.task-queue-item.townboard {
    background: linear-gradient(135deg,#282a20,#1d1f18);
    border-color: #454a35
}

.task-queue-icon {
    font-size: 22px;
    flex-shrink: 0
}

.task-queue-info {
    flex: 1;
    min-width: 0
}

.task-queue-name {
    font-size: 12px;
    font-weight: 600;
    color: #d4c4a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px
}

.task-queue-worker {
    font-size: 10px;
    color: #9a8a6a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px
}

.task-queue-worker-icon {
    font-size: 12px
}

.task-queue-progress-bar {
    height: 6px;
    background: #1a1815;
    border-radius: 3px;
    overflow: hidden
}

.task-queue-progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg,#5a8a4a,#7ab05a);
    border-radius: 3px;
    transition: none
}

.task-queue-item.volunteer .task-queue-progress-bar .fill {
    background: linear-gradient(90deg,#4a6a8a,#5a8ab0)
}

.task-queue-item.townboard .task-queue-progress-bar .fill {
    background: linear-gradient(90deg,#6a8a5a,#8ab07a)
}

.task-queue-item.build-task {
    border-left: 3px solid #b89a50
}

.task-queue-item.build-task .task-queue-progress-bar .fill,.task-queue-item.build-task .task-queue-progress-bar .fill.build {
    background: linear-gradient(90deg,#8a7a40,#b89a50)
}

.task-queue-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px
}

.task-queue-resources .resource-item {
    font-size: 9px;
    padding: 2px 5px;
    background: #00000040;
    border-radius: 3px;
    color: #a08a70
}

.task-queue-resources .resource-item.complete {
    color: #7a9a6a;
    background: #648c5033
}

.task-queue-item.build-task.ready {
    border-left-color: #5a9a5a;
    background: #508c5026
}

.task-queue-complete-btn {
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px;
    background: linear-gradient(180deg,#5a9a5a,#4a8a4a);
    border: 1px solid #6aaa6a;
    border-radius: 4px;
    color: #e0ffe0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease
}

.task-queue-complete-btn:hover {
    background: linear-gradient(180deg,#6aaa6a,#5a9a5a);
    border-color: #7aba7a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px #508c5066
}

.task-queue-complete-btn:active {
    transform: translateY(0);
    box-shadow: none
}

.task-queue-progress-text {
    font-size: 9px;
    color: #7a8a6a;
    margin-top: 4px;
    text-align: right
}